/* Letra Nunito incluida en el programa (licencia SIL OFL 1.1) — sin conexión a Google */
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
:root{
  /* Colores de marca: la app los reemplaza con la paleta que elija cada consultorio */
  --header:#F1ACDB; --primario:#6E44AE; --acento:#D9367F; --linea:#5EE0E6; --fondo:#FFF8FC;
  --primario-claro:color-mix(in srgb,var(--primario) 11%,white);
  --borde:color-mix(in srgb,var(--primario) 15%,white);
  --suave:color-mix(in srgb,var(--primario) 45%,#555);
  --texto:#2E2638; --tarjeta:#FFFFFF;
  --verde:#4FA83A; --amarillo:#F2BE2C;
  --peligro:#C62E4F;
  --a-mg:#3F72D1; --a-mg-bg:#E4EDFF;
  --a-mf:#4FA83A; --a-mf-bg:#E5F6DD;
  --a-sens:#C99700; --a-sens-bg:#FFF4CF;
  --a-leng:#D9367F; --a-leng-bg:#FFE3F1;
  --a-cog:#6E44AE; --a-cog-bg:#EFE7FA;
  --a-soc:#1A9EA6; --a-soc-bg:#DDF8FA;
  --a-gen:#7D6B8E; --a-gen-bg:#F3EEF6;
  --radio:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Nunito","Segoe UI",system-ui,sans-serif;background:var(--fondo);color:var(--texto);font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primario)}
#print{display:none}

/* ---------- Barra superior ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:8px 20px;background:var(--header);box-shadow:0 2px 0 var(--linea)}
.top img{height:46px;border-radius:8px}
.top .marca{font-weight:800;color:var(--primario);line-height:1.1}
.top .marca small{display:block;font-weight:600;color:var(--suave);font-size:12px}
.top nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.top nav a,.top nav button{background:rgba(255,255,255,.55);border:0;border-radius:999px;padding:7px 14px;font-weight:700;color:var(--primario);text-decoration:none;cursor:pointer}
.top nav a:hover,.top nav button:hover{background:#fff}
.aviso-resp{background:var(--amarillo)!important;color:#5a4300!important}

main{max-width:1100px;margin:0 auto;padding:22px 20px 80px}
h1{font-size:24px;margin:0 0 4px;color:var(--primario)}
h2{font-size:18px;margin:0 0 10px;color:var(--primario)}
.sub{color:var(--suave);margin:0 0 18px}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.espacio{flex:1}

/* ---------- Botones ---------- */
.btn{border:0;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer;background:var(--primario);color:#fff;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:#fff;color:var(--primario);border:1.5px solid var(--borde)}
.btn.rosa{background:var(--acento)}
.btn.peligro{background:#fff;color:var(--peligro);border:1.5px solid #f2c4cf}
.btn.chico{padding:5px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- Tarjetas y formularios ---------- */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 16px}
.grid .ancho{grid-column:1/-1}
label.campo{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.02em}
label.campo input,label.campo select,label.campo textarea,.inp{background:#fff;border:1.5px solid var(--borde);border-radius:10px;padding:8px 10px;font-size:15px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--texto);width:100%}
textarea{resize:vertical;min-height:70px;field-sizing:content}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px var(--primario-claro)}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--verde)}
.ayuda{font-size:12.5px;color:var(--suave);margin:4px 0 0}

/* ---------- Lista de pacientes ---------- */
.buscador{flex:1;min-width:240px}
.buscador input{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--borde);font-size:16px;background:#fff}
.seg{display:inline-flex;background:#fff;border:1.5px solid var(--borde);border-radius:12px;overflow:hidden}
.seg button{border:0;background:none;padding:9px 14px;font-weight:700;color:var(--suave);cursor:pointer}
.seg button.on{background:var(--primario-claro);color:var(--primario)}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.pac{background:#fff;border:1px solid var(--borde);border-left:6px solid var(--header);border-radius:var(--radio);padding:14px 16px;cursor:pointer;text-decoration:none;color:inherit;display:block;transition:transform .1s, box-shadow .1s}
.pac:hover{transform:translateY(-2px);box-shadow:0 6px 18px color-mix(in srgb,var(--primario) 14%,transparent)}
.pac.alta{opacity:.65;border-left-color:#ccc}
.pac .nom{font-weight:800;font-size:16.5px;color:var(--primario)}
.pac .dato{font-size:13.5px;color:var(--suave)}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--primario-claro);color:var(--primario);margin:6px 6px 0 0}
.chip.alerta{background:#FFE1E6;color:var(--peligro)}
.chip.ok{background:var(--a-mf-bg);color:var(--a-mf)}
.vacio{text-align:center;color:var(--suave);padding:50px 20px;background:#fff;border:2px dashed var(--borde);border-radius:var(--radio)}

/* ---------- Expediente ---------- */
.cabecera{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:16px 18px;margin-bottom:14px}
.cabecera .nom{font-size:22px;font-weight:800;color:var(--primario);margin:0}
.alerta-box{background:#FFE9EC;color:var(--peligro);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;margin-top:8px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--borde);margin-bottom:18px}
.tabs a{padding:9px 16px;border-radius:10px 10px 0 0;text-decoration:none;font-weight:700;color:var(--suave)}
.tabs a.on{background:#fff;color:var(--primario);border:2px solid var(--borde);border-bottom-color:#fff;margin-bottom:-2px}
.tabs a.prox{opacity:.55}
.estado{font-size:13px;color:var(--suave);min-width:90px;text-align:right}
.estado.ok{color:var(--a-mf)}

.item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:12px 16px;margin-bottom:10px;text-decoration:none;color:inherit}
.item:hover{border-color:var(--header)}
.item .t{font-weight:800;color:var(--primario)}
.item .d{font-size:13.5px;color:var(--suave)}

/* Áreas del neurodesarrollo */
.area{border-radius:var(--radio);padding:14px 16px;margin-bottom:12px;border:1.5px solid var(--c);background:linear-gradient(90deg,var(--bg) 0,var(--bg) 6px,#fff 6px)}
.area h3{margin:0 0 8px;font-size:15px;color:var(--c);text-transform:uppercase;letter-spacing:.03em}
.area .sub2{font-size:12.5px;font-weight:800;color:var(--c);margin:8px 0 4px}
.a-mg{--c:var(--a-mg);--bg:var(--a-mg-bg)} .a-mf{--c:var(--a-mf);--bg:var(--a-mf-bg)}
.a-sens{--c:var(--a-sens);--bg:var(--a-sens-bg)} .a-leng{--c:var(--a-leng);--bg:var(--a-leng-bg)}
.a-cog{--c:var(--a-cog);--bg:var(--a-cog-bg)} .a-soc{--c:var(--a-soc);--bg:var(--a-soc-bg)}
.a-gen{--c:var(--a-gen);--bg:var(--a-gen-bg)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;background:var(--bg);color:var(--c)}

/* Ejercicios */
.ej{background:#fff;border:1.5px solid var(--borde);border-radius:var(--radio);padding:14px 16px;margin-bottom:12px}
.ej.logrado{border-color:var(--a-mf);background:#FAFFF7}
.ej .num{width:30px;height:30px;border-radius:50%;background:var(--primario);color:#fff;display:inline-grid;place-items:center;font-weight:800}
.progreso{height:12px;background:var(--primario-claro);border-radius:99px;overflow:hidden}
.progreso > div{height:100%;background:linear-gradient(90deg,var(--linea),var(--verde))}
.banner{border-radius:12px;padding:12px 16px;font-weight:700;margin-bottom:14px}
.banner.verde{background:var(--a-mf-bg);color:#2f6e22}
.banner.amarillo{background:#FFF4CF;color:#6b5000}

/* ---------- Pantalla de bloqueo ---------- */
.bloqueo{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--header) 45%,white),transparent 50%),radial-gradient(circle at 80% 90%,color-mix(in srgb,var(--linea) 30%,white),transparent 50%),var(--fondo)}
.bloqueo .caja{background:#fff;border-radius:22px;box-shadow:0 20px 50px color-mix(in srgb,var(--primario) 16%,transparent);padding:30px;width:100%;max-width:420px;text-align:center}
.bloqueo img{width:220px;border-radius:14px}
.bloqueo h1{margin:16px 0 6px}
.bloqueo form{display:flex;flex-direction:column;gap:10px;margin-top:16px;text-align:left}
.bloqueo .err{color:var(--peligro);font-weight:700;min-height:20px;font-size:14px}
.lema-login{margin-top:18px;font-size:12.5px;letter-spacing:.2em;font-weight:800;color:var(--acento);text-transform:uppercase}

/* ---------- Modal y aviso ---------- */
.fondo-modal{position:fixed;inset:0;background:rgba(58,42,74,.45);display:grid;place-items:center;z-index:100;padding:16px}
.modal{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:480px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal h2{margin-bottom:12px}
.modal form{display:flex;flex-direction:column;gap:12px}
.modal .acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--primario);color:#fff;padding:11px 20px;border-radius:12px;font-weight:700;transition:transform .25s;z-index:200;max-width:90vw}
#toast.ver{transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .top{padding:8px 12px;flex-wrap:wrap}
  .top nav{width:100%;margin-left:0;overflow-x:auto}
  main{padding:16px 16px 60px}
}

/* =========================================================
   IMPRESIÓN EN HOJA MEMBRETADA (tamaño carta)
   ========================================================= */
@page{size:letter;margin:0}
@media print{
  body{background:#fff;font-size:11.5pt}
  body > *:not(#print){display:none!important}
  #print{display:block}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pr-head{position:fixed;top:0;left:0;right:0}
  .pr-foot{position:fixed;bottom:0;left:0;right:0}
  .pr-head img,.pr-foot img{width:100%;display:block}
  .pr-tbl{width:100%;border-collapse:collapse}
  .pr-tbl > thead > tr > td,.pr-tbl > tfoot > tr > td,.pr-tbl > tbody > tr > td{padding:0}
  .pr-sp-h{height:2.0in}
  .pr-sp-f{height:1.3in}
  .pr-body{padding:0 .75in;color:#2c2236;line-height:1.4}
  .pr-body h1{font-size:15pt;text-align:center;color:var(--primario);margin:0 0 10pt;letter-spacing:.04em}
  .pr-body h2{font-size:12pt;color:var(--acento);margin:14pt 0 6pt;border-bottom:1.5pt solid var(--linea);padding-bottom:2pt;break-after:avoid}
  .pr-body h3{font-size:11.5pt;color:var(--primario);margin:10pt 0 4pt;break-after:avoid}
  .pr-body p{margin:0 0 6pt;text-align:justify}
  .pr-body ul,.pr-body ol{margin:0 0 6pt;padding-left:18pt}
  .pr-body li{margin-bottom:3pt}
  .pr-datos{width:100%;border-collapse:collapse;margin-bottom:6pt;font-size:10.5pt}
  .pr-datos td{padding:3pt 6pt;border-bottom:.6pt solid var(--borde);vertical-align:top}
  .pr-datos td.l{font-weight:700;color:var(--primario);width:38%;text-transform:uppercase;font-size:9pt}
  .pr-areas{width:100%;border-collapse:collapse;margin-bottom:10pt;font-size:10.5pt}
  .pr-areas th{background:var(--primario);color:#fff;padding:5pt 6pt;text-align:left;font-size:10pt}
  .pr-areas td{border:.8pt solid var(--borde);padding:6pt;vertical-align:top}
  .pr-areas tr{break-inside:avoid}
  .pr-areas td.ar{width:26%;font-weight:800;font-size:9.5pt;text-transform:uppercase;color:var(--c);background:var(--bg)}
  .pr-areas td p{margin:0 0 4pt}
  .pr-ej{border:.8pt solid var(--borde);border-left:4pt solid var(--c);border-radius:6pt;padding:6pt 9pt;margin-bottom:7pt;break-inside:avoid}
  .pr-ej .t{font-weight:800;color:var(--primario)}
  .pr-ej .m{font-size:9.5pt;color:#6b5a7a}
  .pr-firma{margin-top:30pt;display:flex;justify-content:space-around;gap:30pt;break-inside:avoid}
  .pr-firma div{flex:1;text-align:center;border-top:1pt solid #2c2236;padding-top:4pt;font-size:9.5pt}
  .pr-cierre{margin-top:14pt;break-inside:avoid}
  .pr-cierre .firma{margin-top:14pt;font-weight:800;color:var(--acento);text-align:right;font-size:13pt}
}
#toast:empty{display:none}

/* ---------- NIDO: marca, demo, asistente ---------- */
.top .marca-nido{font-size:11px;font-weight:700;color:var(--suave);letter-spacing:.08em}
.demo-badge{background:#fff!important;color:var(--acento)!important;border:2px dashed var(--acento)!important}
.nido-pie{margin-top:16px;font-size:12px;color:var(--suave);display:flex;align-items:center;justify-content:center;gap:6px}
.nido-pie img{width:20px;height:20px;border-radius:5px}
.asis{min-height:100vh;display:grid;place-items:start center;padding:30px 16px;background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--header) 50%,white),transparent 45%),var(--fondo)}
.asis.en-app{min-height:auto;padding:0;background:none}
.asis .caja{background:#fff;border-radius:22px;box-shadow:0 18px 50px color-mix(in srgb,var(--primario) 14%,transparent);padding:28px;width:100%;max-width:880px}
.asis.en-app .caja{box-shadow:none;border:1px solid var(--borde)}
.pasos{display:flex;gap:6px;margin:6px 0 20px;flex-wrap:wrap}
.pasos span{flex:1;min-width:70px;height:6px;border-radius:9px;background:var(--primario-claro)}
.pasos span.on{background:var(--primario)}
.paso-tit{font-size:13px;font-weight:800;color:var(--acento);letter-spacing:.06em;text-transform:uppercase}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0}
.opcion{border:2px solid var(--borde);border-radius:16px;padding:16px;cursor:pointer;background:#fff;text-align:left}
.opcion.on{border-color:var(--primario);background:var(--primario-claro)}
.opcion b{display:block;color:var(--primario);font-size:16px;margin-bottom:4px}
.paletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.paleta{border:2px solid var(--borde);border-radius:14px;padding:10px;cursor:pointer;background:#fff;font-weight:700;font-size:13px}
.paleta.on{border-color:var(--primario);box-shadow:0 0 0 3px var(--primario-claro)}
.paleta .mues{display:flex;height:26px;border-radius:8px;overflow:hidden;margin-bottom:6px}
.paleta .mues i{flex:1}
.colores{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.colores label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.colores input[type=color]{width:44px;height:34px;border:1px solid var(--borde);border-radius:8px;padding:2px;background:#fff}
.logo-prev{width:150px;height:150px;border:2px dashed var(--borde);border-radius:16px;display:grid;place-items:center;overflow:hidden;background:#fff;color:var(--suave);font-size:13px;text-align:center}
.logo-prev img{max-width:100%;max-height:100%}
.lic-ok{background:#E5F6DD;color:#2f6e22;border-radius:12px;padding:10px 14px;font-weight:700}
.lic-mal{background:#FFE9EC;color:var(--peligro);border-radius:12px;padding:10px 14px;font-weight:700}
.asis-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;border-top:1px solid var(--borde);padding-top:16px}
.dos-col{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start}
@media (max-width:760px){.dos-col{grid-template-columns:1fr}}

/* Vista previa de la hoja (carta a escala) */
.hoja-wrap{width:330px;height:427px;overflow:hidden;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.15);background:#fff;position:relative}
.hoja{width:8.5in;height:11in;transform:scale(.4041);transform-origin:0 0;position:absolute;top:0;left:0;background:#fff}
.hoja .ph{position:absolute;top:0;left:0;right:0}
.hoja .pf{position:absolute;bottom:0;left:0;right:0}
.hoja img{width:100%;display:block}
.hoja .texto-ej{position:absolute;left:.75in;right:.75in;color:#bbb;font-size:13pt;line-height:2}
.hoja-img{position:relative;width:330px;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.hoja-img img{width:100%;display:block}
.hoja-img .corte{position:absolute;left:0;right:0;border-top:3px dashed var(--acento)}
.hoja-img .zona{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--linea) 25%,transparent)}

/* Membrete generado (se usa en pantalla para la vista previa y al imprimir) */
.mg-head{display:flex;align-items:center;gap:.25in;padding:.18in .55in;background:var(--header);height:1.5in;box-sizing:border-box}
.mg-logo{width:1.25in;height:1.15in;display:grid;place-items:center;flex:0 0 auto}
.mg-logo img{max-width:100%;max-height:100%;width:auto!important}
.mg-txt{flex:1;text-align:center;color:var(--primario);font-size:10.5pt;line-height:1.3;font-family:Georgia,"Times New Roman",serif}
.mg-txt .c{font-family:"Nunito","Segoe UI",sans-serif;font-weight:800;font-size:13pt;color:var(--acento);letter-spacing:.02em}
.mg-txt .p{font-weight:700;font-size:12pt}
.mg-bar{height:.09in;background:var(--linea);margin:0 .4in;border-radius:0 0 .1in .1in}
.mg-lema{text-align:center;font-weight:800;letter-spacing:.3em;font-size:11pt;color:var(--primario);text-transform:uppercase;padding:.06in 0}
.mg-foot{background:var(--header);border-top:.07in solid var(--linea);padding:.12in .5in;display:flex;justify-content:center;gap:.3in;flex-wrap:wrap;font-size:9.5pt;color:var(--primario);font-weight:700;font-family:"Nunito","Segoe UI",sans-serif}
.pr-lic{text-align:center;font-size:6.5pt;color:#9a90a6;padding:2pt 0;font-family:"Segoe UI",sans-serif;background:#fff}
@media print{
  .pr-demo{position:fixed;top:45%;left:0;right:0;text-align:center;font-size:54pt;font-weight:800;color:rgba(200,40,80,.12);transform:rotate(-30deg);letter-spacing:.1em;z-index:5;pointer-events:none}
}

/* Botón flotante para instalar NIDO */
.btn-instalar{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;align-items:center;gap:10px;border:0;border-radius:16px;padding:10px 18px 10px 10px;background:var(--primario);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 28px color-mix(in srgb,var(--primario) 40%,transparent);animation:aparecer .4s ease-out}
.btn-instalar[hidden]{display:none}
.btn-instalar img{width:38px;height:38px;border-radius:10px;background:#fff}
.btn-instalar span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn-instalar small{font-weight:600;font-size:12px;opacity:.85}
.btn-instalar:hover{filter:brightness(1.1);transform:translateY(-1px)}
@keyframes aparecer{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media print{.btn-instalar{display:none!important}}