/* Guías para pacientes — Dr. Marcelo Montiel
   Estilo responsive + impresión. Paleta teal del sitio (#2563eb). */
:root{
  --teal:#2563eb;
  --teal-row:#eef4ff;
  --dark:#2B2B2B;
  --gray:#555;
  --line:#d9e3e5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--dark);
  background:#f4f6f7;
  line-height:1.6;
  font-size:17px;
}

/* Barra superior (no se imprime) */
.toolbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#fff;border-bottom:1px solid var(--line);
  padding:10px 16px;flex-wrap:wrap;
}
.btn-volver{color:var(--teal);text-decoration:none;font-weight:700;font-size:15px}
.btn-volver:hover{text-decoration:underline}
.btn-print{
  background:var(--teal);color:#fff;border:0;border-radius:8px;
  padding:10px 18px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;
}
.btn-print:hover{background:#1e40af}

/* Encabezado del médico */
.guia-header{background:linear-gradient(120deg,#2563EB 0%,#18b6b0 100%);color:#fff}
.guia-header-inner{max-width:820px;margin:0 auto;padding:22px 24px}
.guia-doc{font-family:'Playfair Display',serif;font-size:26px;font-weight:800;margin:0}
.guia-doc-sub{margin:2px 0 0;font-size:15px;opacity:.95}
.guia-doc-mat{margin:4px 0 0;font-size:13px;opacity:.9}

/* Cuerpo */
.guia{
  max-width:820px;margin:0 auto;background:#fff;
  padding:34px 38px 44px;
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}
.guia-title{
  font-family:'Playfair Display',serif;color:var(--dark);
  font-size:30px;font-weight:800;line-height:1.2;text-align:center;
  margin:6px 0 24px;
}
.guia-section{
  font-family:'Playfair Display',serif;color:var(--teal);
  font-size:21px;font-weight:700;margin:30px 0 10px;
  border-bottom:2px solid var(--teal-row);padding-bottom:6px;
}
.guia-subsec{font-size:17px;font-weight:700;color:var(--dark);margin:18px 0 6px}
.guia p{margin:0 0 12px;text-align:justify}
.guia-note{background:var(--teal-row);border-left:4px solid var(--teal);
  padding:12px 16px;border-radius:0 8px 8px 0;font-weight:700}

/* Listas con iconos (reemplazan ✓ ✗ ■ • del original) */
.guia-list{list-style:none;margin:0 0 14px;padding:0}
.guia-list li{position:relative;padding:6px 0 6px 30px;border-bottom:1px solid #f0f0f0}
.guia-list li:last-child{border-bottom:0}
.guia-list li::before{position:absolute;left:2px;top:6px;font-weight:700}
.guia-list li.li-ok::before{content:"✓";color:#1a9b6c}
.guia-list li.li-no::before{content:"✗";color:#c0392b}
.guia-list li.li-info::before{content:"▸";color:var(--teal)}
.guia-list li.li-dot::before{content:"•";color:var(--teal);font-size:1.3em;top:2px}

/* Tablas */
.guia-table-wrap{overflow-x:auto;margin:8px 0 18px}
.guia-table{width:100%;border-collapse:collapse;font-size:14.5px}
.guia-table th{background:var(--teal);color:#fff;font-weight:700;text-align:left;
  padding:9px 10px;border:1px solid #cfd8da}
.guia-table td{padding:9px 10px;border:1px solid #e2e8ea;vertical-align:top}
.guia-table tbody tr:nth-child(even){background:var(--teal-row)}

/* Firma */
.guia-firma{margin-top:34px}
.guia-firma hr{border:0;border-top:1px solid var(--dark);width:58%;margin:0 0 8px}
.guia-firma p{margin:0;line-height:1.4}
.guia-firma p:first-of-type{font-weight:700}

/* Tabla envoltorio: permite repetir el pie (tfoot) en cada hoja impresa */
.sheet{width:100%;border-collapse:collapse}
.sheet>tbody>tr>td,.sheet>tfoot>tr>td{padding:0}
.sheet>tfoot{display:none}        /* en pantalla no se muestra */
.page-foot{display:none}

/* Pie */
.guia-footer{
  max-width:820px;margin:18px auto 40px;padding:18px 38px;
  color:var(--gray);font-size:13.5px;
}
.guia-footer p{margin:2px 0}
.guia-web{color:var(--teal);font-weight:700;margin-top:6px!important}

@media (max-width:640px){
  body{font-size:16px}
  .guia{padding:22px 18px 32px}
  .guia-footer{padding:18px}
  .guia-title{font-size:24px}
  .guia-section{font-size:19px}
}

/* ── Impresión: el navegador genera el PDF ── */
@media print{
  @page{margin:16mm}
  body{background:#fff;font-size:11.5pt;line-height:1.45}
  .no-print{display:none!important}
  .guia-header{ -webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid }
  .guia-header-inner,.guia,.guia-footer{max-width:none;margin:0;box-shadow:none;padding-left:0;padding-right:0}
  .guia{padding-top:14px}
  /* Evitar que se corten títulos, encabezados, listas, tablas y párrafos */
  .guia-title{break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .guia-section{ -webkit-print-color-adjust:exact;print-color-adjust:exact;
    break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid }
  .guia-subsec{break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .guia p{break-inside:avoid;page-break-inside:avoid;orphans:3;widows:3}
  /* Pie repetido en cada hoja: el tfoot reserva el espacio automáticamente */
  .sheet>tfoot{display:table-footer-group}
  .page-foot{display:block;text-align:center;font-size:8.3pt;color:#666;
    border-top:1px solid #ccc;padding:4px 0 0;margin-top:6mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .guia-list,.guia-table-wrap,.guia-note,.guia-firma{break-inside:avoid;page-break-inside:avoid}
  .guia-list li{break-inside:avoid;page-break-inside:avoid}
  .guia-table th{ -webkit-print-color-adjust:exact;print-color-adjust:exact }
}


/* ============ Componentes visuales (infografía) ============ */
.resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 24px}
.resumen-card{background:var(--teal-row);border-radius:12px;padding:14px 10px;text-align:center;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.resumen-ic{font-size:26px;line-height:1}
.resumen-val{font-family:'Playfair Display',serif;font-weight:800;color:var(--teal);font-size:20px;margin-top:4px;line-height:1.1}
.resumen-lbl{font-size:12.5px;color:var(--gray);margin-top:3px}

.timeline{position:relative;margin:8px 0 22px;padding-left:30px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;background:var(--teal-row)}
.tl-item{position:relative;margin-bottom:16px}
.tl-item::before{content:"";position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--teal-row);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.tl-when{display:inline-block;font-family:'Playfair Display',serif;font-weight:700;color:var(--teal);font-size:16.5px;margin-bottom:4px}
.tl-item ul{list-style:none;margin:0;padding:0}
.tl-item li{position:relative;padding:3px 0 3px 16px;font-size:15px}
.tl-item li::before{content:"•";position:absolute;left:0;color:var(--teal);font-weight:700}

.semaforo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 16px}
.sem-col{border-radius:12px;padding:12px 14px;border:2px solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sem-col h4{margin:0 0 8px;font-size:15px}
.sem-col ul{list-style:none;margin:0;padding:0;font-size:14px}
.sem-col li{padding:3px 0}
.sem-si{background:#eafaf1;border-color:#1a9b6c}.sem-si h4{color:#157a55}
.sem-mid{background:#fff8e6;border-color:#e0a800}.sem-mid h4{color:#9a7400}
.sem-no{background:#fdecea;border-color:#c0392b}.sem-no h4{color:#a5281b}

.alarmbox{border:2px solid #c0392b;background:#fdecea;border-radius:12px;padding:14px 18px;margin:6px 0 20px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.alarmbox-title{display:flex;align-items:center;gap:8px;color:#a5281b;font-family:'Playfair Display',serif;
  font-weight:800;font-size:18px;margin:0 0 6px}
.alarmbox p{margin:0 0 8px;font-size:14.5px;text-align:left}
.alarmbox ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.alarmbox li{padding:4px 0 4px 26px;position:relative;font-size:14px;break-inside:avoid}
.alarmbox li::before{content:"\26A0";position:absolute;left:2px;color:#c0392b;font-weight:700}

@media (max-width:640px){
  .resumen{grid-template-columns:repeat(2,1fr)}
  .semaforo{grid-template-columns:1fr}
  .alarmbox ul{columns:1}
}
@media print{
  .resumen,.semaforo,.timeline,.alarmbox,.tl-item{break-inside:avoid;page-break-inside:avoid}
}


/* ---- Esquemas (diagramas SVG simples) ---- */
.esquema{margin:16px auto 22px;max-width:460px;text-align:center}
.esquema svg{width:100%;max-width:300px;height:auto}
.esquema figcaption{font-size:13px;color:var(--gray);margin-top:8px;line-height:1.45;text-align:center}
@media print{.esquema{break-inside:avoid;page-break-inside:avoid}
  .esquema svg ellipse,.esquema svg circle{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* ---- Cajas semaforo de signos (warn ambar / ok verde) ---- */
.warnbox{border:2px solid #e0a800;background:#fff8e6;border-radius:12px;padding:14px 18px;margin:6px 0 18px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.warnbox-title{display:flex;align-items:center;gap:8px;color:#9a7400;font-family:'Playfair Display',serif;font-weight:800;font-size:18px;margin:0 0 4px}
.warnbox h4{margin:9px 0 2px;font-size:14.5px;color:#7a5c00}
.warnbox ul{list-style:none;margin:0;padding:0}
.warnbox li{padding:3px 0 3px 22px;position:relative;font-size:14px}
.warnbox li::before{content:"•";position:absolute;left:6px;color:#e0a800;font-weight:700}
.okbox{border:2px solid #1a9b6c;background:#eafaf1;border-radius:12px;padding:14px 18px;margin:6px 0 18px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.okbox-title{display:flex;align-items:center;gap:8px;color:#157a55;font-family:'Playfair Display',serif;font-weight:800;font-size:18px;margin:0 0 6px}
.okbox p{margin:0 0 6px;font-size:14px}
.okbox ul{list-style:none;margin:0;padding:0}
.okbox li{padding:3px 0 3px 24px;position:relative;font-size:14px}
.okbox li::before{content:"✓";position:absolute;left:4px;color:#1a9b6c;font-weight:700}
@media print{.warnbox,.okbox{break-inside:avoid;page-break-inside:avoid}}