/* ==========================================================================
   Nutriclin — sistema visual del panel
   Los tokens son LOS MISMOS de nutriclin.com.mx (index.html), con los mismos
   nombres, para que sitio y panel hablen un solo idioma.
   Sin modo oscuro: el panel es claro, como el sitio.
   ========================================================================== */

:root{
  /* --- marca (idénticos al sitio) --- */
  --turq:#16A5A3;
  --turq-d:#0E7C7A;
  --turq-ink:#0A4443;
  --turq-deep:#063231;
  --turq-w:#E9F6F5;
  --turq-w2:#F4FBFA;
  --rosa:#EC6091;
  --rosa-d:#D14477;
  --rosa-w:#FDEFF4;

  /* --- luz (idénticos al sitio) --- */
  --luz:#FCFCFA;
  --blanco:#FFFFFF;
  --tinta:#122423;
  --texto:#465A57;
  --suave:#6F8481;
  --tenue:#A3B5B2;
  --linea:#E3EDEB;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- propios del panel --- */
  --barra:236px;
  --r:12px;   /* eco del 1.25rem inferior del arco del sitio */
  --sombra:0 1px 2px rgba(18,36,35,.04), 0 10px 28px -20px rgba(18,36,35,.30);
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0; background:var(--luz); color:var(--tinta);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.01em; text-wrap:balance}
a{color:var(--turq-d)}
.num{font-variant-numeric:tabular-nums}

/* --- botones: la píldora en mayúsculas del sitio, a escala de panel --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.62rem 1.2rem; min-height:40px;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-p{background:var(--turq); color:#fff}
.btn-p:hover{background:var(--turq-ink); transform:translateY(-2px)}
.btn-o{background:transparent; color:var(--turq-d); border-color:var(--turq); opacity:.9}
.btn-o:hover{background:var(--turq-w); opacity:1; transform:translateY(-2px)}
.btn-r{background:var(--rosa); color:#fff}
.btn-r:hover{background:var(--rosa-d); transform:translateY(-2px)}
.btn-f{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-f:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn-bloque{width:100%}
.btn:focus-visible{outline:2px solid var(--turq); outline-offset:2px}

/* ============================ ENTRAR ============================ */
.login-wrap{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr}
@media (max-width:860px){ .login-wrap{grid-template-columns:1fr} .login-aside{display:none} }

.login-aside{
  background:var(--turq-ink); color:#fff;
  padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
}
.login-aside .marca-wordmark{
  font-family:var(--sans); font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; font-size:.78rem; opacity:.85;
}
.login-aside .claim{font-family:var(--serif); font-size:2.6rem; line-height:1.1; max-width:14ch}
.login-aside .pie{font-size:.82rem; opacity:.72; line-height:1.6; max-width:34ch}

.login-panel{display:flex; align-items:center; justify-content:center; padding:40px 24px}
.login-card{width:100%; max-width:380px; display:flex; flex-direction:column; gap:22px}
.login-card .titulo{font-family:var(--serif); font-size:2.1rem; line-height:1.15}
.login-card .sub{color:var(--suave); font-size:.92rem; margin-top:4px}

.campo{display:flex; flex-direction:column; gap:6px}
.campo label{
  font-size:.7rem; font-weight:500; color:var(--suave);
  letter-spacing:.12em; text-transform:uppercase;
}
.campo input{
  font-family:var(--sans); font-size:16px; color:var(--tinta);
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:12px 14px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.campo input::placeholder{color:var(--tenue)}
.campo input:focus{outline:none; border-color:var(--turq); box-shadow:0 0 0 3px var(--turq-w)}

.fila-entre{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.liga-tenue{font-size:.85rem; color:var(--suave); text-decoration:none}
.liga-tenue:hover{color:var(--turq-d); text-decoration:underline}
.recuerdame{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--suave)}
.recuerdame input{accent-color:var(--turq); width:18px; height:18px}

.aviso{
  background:var(--rosa-w); border-left:3px solid var(--rosa);
  border-radius:0 10px 10px 0; padding:11px 14px; font-size:.85rem; color:var(--texto);
}

/* ============================ PANEL ============================ */
/* La barra es SIEMPRE lateral y se puede ocultar con el botón de la topbar.
   Va fija (fuera del flujo) para que abrir y cerrar sea un solo transform:
   así se comporta igual en escritorio y en iPhone.
   Estado en <html data-menu="abierto|cerrado">. Sin atributo:
   abierta en escritorio, oculta en angosto. */

.app{min-height:100vh; min-height:100dvh}

.lateral{
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  width:var(--barra);
  padding:22px 14px calc(14px + env(safe-area-inset-bottom));
  padding-left:calc(14px + env(safe-area-inset-left));
  background:var(--turq-ink); color:#fff;
  display:flex; flex-direction:column; gap:6px;
  transition:transform .3s var(--ease);
  -webkit-overflow-scrolling:touch;
}
.contenido{
  display:flex; flex-direction:column; min-width:0;
  margin-left:var(--barra);
  transition:margin-left .3s var(--ease);
}

/* --- oculta a propósito --- */
html[data-menu="cerrado"] .lateral{transform:translateX(-100%)}
html[data-menu="cerrado"] .contenido{margin-left:0}

.lateral .marca{
  font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.74rem;
  padding:4px 12px 20px; opacity:.9; flex:none;
}
.nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto; min-height:0; flex:1}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:3px}
.nav a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:rgba(255,255,255,.8); font-size:.88rem; padding:9px 12px; border-radius:999px;
  min-height:38px; -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a[aria-current="page"]{background:var(--turq); color:#fff; font-weight:500}
.nav a .ic{width:16px; text-align:center; opacity:.9; font-size:.95rem; flex:none}
.nav a.luego{opacity:.42}
.nav a.luego:hover{opacity:.7}
.nav a .luego-pt{
  margin-left:auto; width:5px; height:5px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.55);
}
.nav a.nuevo .ic{color:#7FD6CF}
.nav .grupo{
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.42); padding:18px 12px 6px;
}
.leyenda{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.7;
  color:rgba(255,255,255,.34); padding:14px 12px 2px; margin-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
}
.leyenda b{display:inline-block; width:5px; height:5px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); vertical-align:middle; margin-right:5px}

.lateral .abajo{margin-top:auto; border-top:1px solid rgba(255,255,255,.14); padding-top:14px; flex:none}
.usuario{display:flex; align-items:center; gap:10px; padding:6px 12px}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--turq);
  display:grid; place-items:center; font-size:.76rem; font-weight:500; color:#fff; flex:none;
}
.usuario .quien{min-width:0; display:flex; flex-direction:column}
.usuario .nombre{font-size:.84rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.usuario .rol{font-size:.68rem; color:rgba(255,255,255,.55); letter-spacing:.04em}
.salir-btn{
  background:none; border:0; cursor:pointer; padding:8px 12px; text-align:left;
  color:rgba(255,255,255,.55); font-family:var(--sans); font-size:.78rem;
  -webkit-tap-highlight-color:transparent;
}
.salir-btn:hover{color:#fff}

/* --- botón de ocultar / mostrar --- */
.hamb{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  cursor:pointer; color:var(--turq-ink); -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.hamb:hover{background:var(--turq-w); border-color:var(--turq)}
.hamb:focus-visible{outline:2px solid var(--turq); outline-offset:2px}
.hamb i{display:block; width:16px; height:1.5px; background:currentColor; border-radius:2px; position:relative}
.hamb i::before,.hamb i::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px;
  background:currentColor; border-radius:2px;
}
.hamb i::before{top:-5px}
.hamb i::after{top:5px}

/* --- velo, sólo en angosto --- */
.velo{
  position:fixed; inset:0; z-index:35; background:rgba(10,68,67,.45);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  border:0; padding:0; cursor:pointer;
}

.topbar{
  background:var(--blanco); border-bottom:1px solid var(--linea);
  padding:14px 26px; display:flex; align-items:center; gap:14px;
  padding-right:calc(26px + env(safe-area-inset-right));
}
.topbar h1{font-size:1.45rem; margin-right:auto}
.topbar .acciones{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.buscador{
  border:1px solid var(--linea); border-radius:999px; background:var(--luz);
  padding:9px 15px; font-family:var(--sans); font-size:16px; color:var(--tinta); min-width:170px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.buscador::placeholder{color:var(--tenue)}
.buscador:focus{outline:none; border-color:var(--turq); box-shadow:0 0 0 3px var(--turq-w)}

.lienzo{
  padding:26px; display:flex; flex-direction:column; gap:20px;
  padding-right:calc(26px + env(safe-area-inset-right));
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}

.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.kpi{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.kpi .rotulo{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue)}
.kpi .cifra{font-family:var(--serif); font-size:2.2rem; line-height:1.05; color:var(--turq-ink)}
.kpi .pie{font-size:.8rem; color:var(--suave)}
.kpi.alerta{border-left:3px solid var(--rosa)}
.kpi.alerta .cifra{color:var(--rosa-d)}

.bloque{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.bloque > header{
  padding:15px 18px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.bloque > header h2{font-size:1.15rem}
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.datos{width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px}
table.datos th{
  text-align:left; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue); font-weight:500; padding:11px 18px; background:var(--turq-w2);
  border-bottom:1px solid var(--linea);
}
table.datos td{padding:12px 18px; border-bottom:1px solid var(--linea); color:var(--texto)}
table.datos tr:last-child td{border-bottom:0}
table.datos tbody tr:hover td{background:var(--turq-w2)}
table.datos td .paciente{color:var(--tinta); font-weight:500}

.etiqueta{
  display:inline-block; font-size:.7rem; letter-spacing:.04em;
  padding:3px 11px; border-radius:999px;
  background:var(--turq-w); color:var(--turq-ink); white-space:nowrap;
}
.etiqueta.ok{background:var(--turq-w); color:var(--turq-d)}
.etiqueta.pendiente{background:var(--rosa-w); color:var(--rosa-d)}

.nota-pie{font-size:.8rem; color:var(--tenue); line-height:1.6}

/* ---------------- angosto / iPhone ----------------
   Va AL FINAL a propósito: una media query NO suma especificidad, así que
   si se pone antes de las reglas de .lateral, éstas la pisan. Ese fue el
   bug del 13/09/2026 que dejaba el menú ocupando toda la pantalla. */
@media (max-width:820px){
  .contenido{margin-left:0}

  /* oculta por defecto; sólo se abre con data-menu="abierto" */
  .lateral{transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.35)}
  html[data-menu="abierto"] .lateral{transform:translateX(0)}
  html[data-menu="abierto"] .velo{opacity:1; pointer-events:auto}
  html[data-menu="abierto"], html[data-menu="abierto"] body{overflow:hidden}

  .nav a{min-height:44px; font-size:.92rem}   /* toque cómodo: guía de Apple */
  .topbar{padding:12px 16px; padding-right:calc(16px + env(safe-area-inset-right))}
  .topbar h1{font-size:1.2rem}
  .lienzo{padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .buscador{min-width:0; flex:1}
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }