:root{
  --blue:#1C6BA0;
  --blue-soft:#CFE7F6;
  --ink:#0f2c3a;

  /* A4 aprox. 96dpi */
  --page-w:794px;   /* ancho fijo para que el PDF salga idéntico */
  --page-h:1123px;  /* alto de referencia, no se fuerza */

  --font:"Segoe UI", Arial, Helvetica, sans-serif;

  /* botones */
  --danger:#d53939;
  --success:#1e9e49;
  --info:#1e66d1;
  --warn:#d5a10f;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:#efefef; color:var(--ink); font-family:var(--font)
}

/* ===== Lienzo centrado ===== */
.viewport{
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:20px 10px;
}

/* ===== Hoja: alto flexible para que NUNCA se corte el PDF ===== */
.page{
  width:var(--page-w);
  min-height:var(--page-h);  /* permite crecer si el contenido supera A4 */
  height:auto;               /* quitar alturas fijas evita recortes */
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.14);
  border-radius:8px;
  padding:22px 26px;
  position:relative;
  overflow:visible;
}

/* En pantallas pequeñas: se escala visualmente, sin afectar la altura real.
   Mantén la altura en auto para que html2canvas agarre TODO el contenido. */
@media (max-width: 820px){
  .page{
    --scale: calc((100vw - 20px)/var(--page-w));
    transform: scale(var(--scale));
    transform-origin: top center;
    /* NO seteamos height calculada: el layout real sigue completo,
       html2canvas lo captura entero sin cortes. */
  }
  /* damos aire extra fuera de la hoja para que no quede "apretada" */
  .viewport{ padding-bottom: 24px; }
}

@page{ size:A4; margin:0 }
@media print{
  html,body{ background:#fff }
  .viewport{ padding:0 }
  .page{ box-shadow:none; border-radius:0; width:auto; height:auto; transform:none!important }
  .actions{ display:none !important } /* no imprimimos los botones */
}

/* ===== Encabezado ===== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 40px 12px 40px;
  border-bottom:2px solid rgba(28,107,160,.25);
}
.brand .logo{ height:85px; width:auto; display:block; margin-left:10px }
.contact-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
}
.item{ display:flex; align-items:center; gap:6px; color:var(--blue); font-size:15px; line-height:1 }
.icon{ width:18px; height:18px }

@media (max-width:720px){
  .header{ flex-direction:column; text-align:center; gap:10px; padding:15px }
  .contact-list{ justify-content:center; gap:8px 18px }
  .brand .logo{ height:70px; margin-left:0 }
}

/* ===== Secciones ===== */
.section{ margin-top:16px }
.row{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr;
  gap:10px 12px;
  align-items:center;
  margin-bottom:10px;
}
label{ font-size:14px }
.line{
  border:none; border-bottom:2px solid var(--blue-soft);
  height:26px; padding:0 6px; font-size:14px; outline:none
}
.line:focus{ border-bottom-color:var(--blue) }
.line.inline{ width:180px }
.line.inline.sm{ width:120px }
.line.sm{ width:120px }

/* ===== Barras de título ===== */
.bar{
  background:#e5edf5; color:#1b5f8e; font-weight:700;
  padding:6px 10px; border-radius:3px; margin-bottom:8px
}

/* ===== Columnas 2D/3D ===== */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.col{ display:flex; flex-direction:column; gap:8px }
.chk{ display:flex; align-items:center; gap:8px; font-size:14px }
.chk input[type="checkbox"]{ width:16px; height:16px }

/* ===== Tarjetas ===== */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.card{ border:2px solid var(--blue-soft); border-radius:10px; padding:10px }
.card-title{ color:var(--blue); font-weight:700; margin-bottom:6px }
.card-body{ font-size:14px }
.card-body.small{ font-size:13px; color:#355 }
.card-body.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:6px }

/* ===== Diagnóstico breve ===== */
.note-lines{ border:2px solid var(--blue-soft); border-radius:10px; padding:8px }
.note{ width:100%; border:none; outline:none }
.note.short{ height:70px; resize:none; line-height:1.5 }

/* ===== Pie ===== */
.footer{
  margin-top:14px;
  text-align:center; font-size:13px; color:#2a4b5a
}
.footer .bold{ font-weight:700 }
.footer .link{ color:var(--blue) }

/* ===== Nomenclatura FDI minimalista (sin cruces) ===== */
.fdi2{
  display:grid;
  grid-template-columns: repeat(16, 1fr);  /* columnas 1..16 */
  grid-auto-rows: 34px;
  gap: 6px;
  align-items:center;
  justify-items:center;
  margin: 6px 0 4px;
}
.tooth{
  min-width:34px; height:28px; padding:0 8px;
  border-radius:999px; border:2px solid #CFE7F6;
  background:#fff; color:#1b4f6f; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
}
.tooth.letter{ font-weight:700; color:#1C6BA0 }
.tooth.selected{ background:#d8ecfb; border-color:#69aee0; color:#0e3550 }
.tooth:focus{ outline:2px solid #9cc9e6; outline-offset:1px }
.tooth-actions{ justify-self:end; display:flex }
.btn-secondary{
  background:#eef6fb; border:1px solid #b8d7ec; color:#1c6ba0;
  padding:6px 10px; border-radius:8px; cursor:pointer
}

/* ===== Botones de acción (dentro de la hoja) ===== */
.actions{
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:14px 10px 6px;
  margin-top:12px;
}

/* En móvil: quedan pegados al borde inferior de la HOJA, no del viewport.
   Son parte del documento, así entran en la captura. */
@media (max-width:820px){
  .actions{
    position: static; /* ya no se pega ni flota */
    margin-top: 20px;
    padding-bottom: 20px;
  }
}

.btn{
  border:none; color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer;
  font-weight:600; font-size:14px; min-width:160px; box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.btn:active{ transform:translateY(1px) }
.btn.danger{ background:var(--danger) }
.btn.success{ background:var(--success) }
.btn.info{ background:var(--info) }
.btn.warn{ background:var(--warn); color:#222 }

/* Botones un poco más compactos en teléfonos muy chicos */
@media (max-width:420px){
  .btn{ min-width:120px; font-size:13px; padding:9px 12px }
}

/* ===== Estilos para exportación (PDF) ===== */

.page.__exporting{
  transform: none !important;
  width: var(--page-w) !important;
  min-height: var(--page-h) !important;
  height: auto !important;
}