/* ============================================================
   NUTRILAB · Panel · Rediseño v3 "Aire clínico" (06-oct-2026)
   ------------------------------------------------------------
   Capa SOLO visual y de movimiento. Va después de styles.css y de
   panel-v2.css, y solo en index.html. No cambia lógica, ids ni datos.
   Para deshacerla: quitar los <link>/<script> de panel-v3 en index.html.

   Dirección: la herramienta diaria de una nutricionista. Calma, jerarquía
   clara, números grandes y alineados, una sola nota de color (verde del
   portal, #4ADE80) solo para lo que significa "bien / activo".
   Identidad intacta: negro, Michroma solo en el logo, Inter para el texto.

   Movimiento (criterio Emil Kowalski):
   - solo transform y opacity; nada de "all"
   - pulsaciones 100-160 ms, entradas 180-260 ms, nunca más de 300 ms
   - ease-out fuerte para entrar; salir siempre más rápido que entrar
   - lo que se hace decenas de veces al día (pestañas, filas) casi no se mueve
   - prefers-reduced-motion: solo fundidos
   ============================================================ */

:root{
  /* superficies: tres escalones y poco más */
  --nl3-bg: #060607;
  --nl3-s1: #0c0c0e;
  --nl3-s2: #121215;
  --nl3-s3: #18181c;
  --nl3-line: rgba(255,255,255,.07);
  --nl3-line-2: rgba(255,255,255,.12);
  --nl3-text: rgba(255,255,255,.94);
  --nl3-text-2: rgba(255,255,255,.62);
  --nl3-text-3: rgba(255,255,255,.40);
  /* el único acento: el verde del portal */
  --nl3-ok: #4ade80;
  --nl3-ok-soft: rgba(74,222,128,.12);
  --nl3-warn: #f5b454;
  --nl3-bad: #f87171;
  /* radios: un solo sistema. controles 10, bloques 18, hojas 24, píldoras 999 */
  --nl3-r-ctl: 10px;
  --nl3-r-card: 18px;
  --nl3-r-sheet: 24px;
  /* movimiento */
  --nl3-out: cubic-bezier(.23, 1, .32, 1);
  --nl3-inout: cubic-bezier(.77, 0, .175, 1);
  --nl3-press: 120ms;
  --nl3-ui: 180ms;
  --nl3-enter: 260ms;
  --nl3-exit: 160ms;
  /* alto de la barra superior (la ficha pega sus pestañas justo debajo) */
  --nl3-top: 57px;
}
@media (max-width: 767px){ :root{ --nl3-top: 85px; } }

/* ============================================================
   1 · BASE
   ============================================================ */
body{
  background-image:
    radial-gradient(1100px 520px at 8% -12%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(800px 420px at 100% -6%, rgba(74,222,128,.025), transparent 60%),
    linear-gradient(180deg, #08080a 0%, #040405 55%, #000 100%) !important;
}
#contentArea{ font-feature-settings: "cv11", "ss01"; }
/* La ficha pone body{overflow:auto} en línea; con html en "hidden auto" eso
   convierte el body en caja de scroll y rompe el "sticky". Solo se anula
   mientras el body NO está bloqueado (modales ponen overflow:hidden en línea). */
body:not([style*="hidden"]){ overflow: visible !important; }
/* "clip" recorta igual que "hidden" pero no crea una caja de scroll: así las
   pestañas de la ficha pueden quedarse pegadas bajo la barra superior. */
@supports (overflow: clip){
  #contentArea{ overflow-x: clip; overflow-y: visible; }
}
#contentArea .font-mono,
#contentArea [class*="tabular"],
.nl3-num{ font-variant-numeric: tabular-nums; }

/* Títulos de pantalla: Inter, firmes y sobrios. Michroma queda para el logo. */
#contentArea h1.font-brand,
#contentArea h2.font-brand{
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) !important;
  line-height: 1.1 !important;
  color: var(--nl3-text);
}
#contentArea h3.font-brand{
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  font-size: 1.0625rem !important;
}

/* Etiquetas pequeñas en mayúsculas: más legibles (11 px, trazo menos agresivo) */
#contentArea .uppercase.tracking-widest,
#contentArea .uppercase.tracking-\[0\.2em\],
#contentArea .uppercase.tracking-\[0\.25em\]{
  letter-spacing: .1em !important;
}

/* ============================================================
   2 · SUPERFICIES (tarjetas y tablas que se conservan)
   ============================================================ */
#contentArea .bg-surface-container-low{
  background: var(--nl3-s1) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 46%) !important;
  border: 1px solid var(--nl3-line) !important;
  border-radius: var(--nl3-r-card) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5);
}

/* Foco de luz que sigue al puntero (solo ratón; lo mueve panel-v3.js).
   Es un borde: una máscara deja visible únicamente el anillo de 1 px. */
.nl3-spot{ position: relative; }
.nl3-spot::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.34), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--nl3-ui) var(--nl3-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .nl3-spot:hover::after{ opacity: 1; }
}

/* ============================================================
   3 · CIFRAS CLAVE (dashboard)
   ============================================================ */
#contentArea section > .kpi-anim.bg-surface-container-low{ padding: 22px 24px !important; }
#contentArea .kpi-anim p.uppercase{
  font-size: 11px !important;
  letter-spacing: .08em !important;
  color: var(--nl3-text-3) !important;
  font-weight: 500 !important;
}
#contentArea .kpi-anim :is(h2, h3, .text-3xl, .text-4xl, .text-2xl){
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em !important;
  font-weight: 600 !important;
}
#contentArea .kpi-anim .text-green-400,
#contentArea .kpi-anim .text-emerald-400{ color: var(--nl3-ok) !important; }

/* ============================================================
   4 · TABLAS
   ============================================================ */
#contentArea table thead th{
  font-size: 11px !important;
  letter-spacing: .08em !important;
  font-weight: 500 !important;
  color: var(--nl3-text-3) !important;
  background: transparent !important;
}
#contentArea table tbody tr{
  transition: background-color var(--nl3-ui) var(--nl3-out);
}
@media (hover: hover) and (pointer: fine){
  #contentArea table tbody tr:hover{ background: rgba(255,255,255,.035) !important; }
}
#contentArea table tbody tr:active{ background: rgba(255,255,255,.06) !important; }
#contentArea table tbody td{ font-variant-numeric: tabular-nums; }

/* ============================================================
   5 · BOTONES Y CONTROLES
   ============================================================ */
#contentArea button,
#contentArea a[onclick],
#contentArea [role="button"]{
  -webkit-tap-highlight-color: transparent;
}
#contentArea input:not([type="checkbox"]):not([type="radio"]),
#contentArea select,
#contentArea textarea{
  border-radius: var(--nl3-r-ctl) !important;
  transition: border-color var(--nl3-ui) var(--nl3-out), box-shadow var(--nl3-ui) var(--nl3-out), background-color var(--nl3-ui) var(--nl3-out);
}
#contentArea input:focus-visible,
#contentArea select:focus-visible,
#contentArea textarea:focus-visible{
  outline: none;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

/* ============================================================
   6 · FICHA DE CLIENTE
   ============================================================ */

/* 6.1 Volver: botón discreto, con flecha que se desplaza al pasar */
#contentArea > .fade-in > a[onclick="abrirClientes()"],
#contentArea > div > a[onclick="abrirClientes()"]{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 8px;
  margin-bottom: 22px !important;
  border-radius: 999px;
  border: 1px solid var(--nl3-line);
  background: rgba(255,255,255,.025);
  font-size: 12px !important;
  font-weight: 500;
  color: var(--nl3-text-2) !important;
  transition: background-color var(--nl3-ui) var(--nl3-out), color var(--nl3-ui) var(--nl3-out), transform var(--nl3-press) var(--nl3-out);
}
#contentArea a[onclick="abrirClientes()"] .material-symbols-outlined{
  font-size: 16px !important;
  transition: transform var(--nl3-ui) var(--nl3-out);
}
@media (hover: hover) and (pointer: fine){
  #contentArea a[onclick="abrirClientes()"]:hover{ background: rgba(255,255,255,.06); color: #fff !important; }
  #contentArea a[onclick="abrirClientes()"]:hover .material-symbols-outlined{ transform: translateX(-2px); }
}
#contentArea a[onclick="abrirClientes()"]:active{ transform: scale(.97); }

/* 6.2 Cabecera: avatar con anillo, nombre firme, subtítulo claro */
#clienteAvatarWrap{
  width: 76px !important;
  height: 76px !important;
  background: var(--nl3-s2) !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--nl3-line-2), 0 0 0 5px rgba(255,255,255,.035), 0 14px 30px -12px rgba(0,0,0,.9);
}
@media (min-width: 768px){ #clienteAvatarWrap{ width: 88px !important; height: 88px !important; } }
#clienteAvatarFallback{
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--nl3-text) !important;
}
#clienteNombre{
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}
#clienteSubtitulo{
  margin-top: 8px !important;
  font-size: 13px !important;
  color: var(--nl3-text-2) !important;
}
#clienteIdCard{
  border-radius: 999px !important;
  background: rgba(255,255,255,.03) !important;
  border-color: var(--nl3-line) !important;
  padding: 3px 10px !important;
}
#clientePlanBadge{
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* 6.3 Franja de datos (la crea panel-v3.js con los datos que ya hay) */
.nl3-vitals{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 28px;
  border: 1px solid var(--nl3-line);
  border-radius: var(--nl3-r-card);
  background: var(--nl3-s1);
  background-image: linear-gradient(180deg, rgba(255,255,255,.028), transparent 55%);
  overflow: hidden;
}
@media (min-width: 720px){ .nl3-vitals{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nl3-vital{
  padding: 16px 20px 15px;
  min-width: 0;
  border-left: 1px solid var(--nl3-line);
  border-top: 1px solid var(--nl3-line);
}
.nl3-vital:nth-child(-n+2){ border-top: 0; }
.nl3-vital:nth-child(odd){ border-left: 0; }
@media (min-width: 720px){
  .nl3-vital{ border-top: 0; }
  .nl3-vital:nth-child(odd){ border-left: 1px solid var(--nl3-line); }
  .nl3-vital:first-child{ border-left: 0; }
}
.nl3-vital dt{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--nl3-text-3);
}
.nl3-vital dd{
  margin: 6px 0 0;
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--nl3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl3-vital dd small{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--nl3-text-3);
  margin-left: 3px;
}
.nl3-vital dd.is-text{ font-size: 1rem; letter-spacing: -.02em; font-weight: 500; white-space: normal; line-height: 1.25; }
.nl3-vital dd .nl3-tag{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 3px;
  background: var(--nl3-ok-soft);
  color: var(--nl3-ok);
}
.nl3-vital dd .nl3-tag.warn{ background: rgba(245,180,84,.12); color: var(--nl3-warn); }

/* 6.4 Pestañas: pegadas bajo la barra, cristal, indicador que desliza */
#clienteTabs, #contentArea nav.border-b.border-white\/5{
  position: sticky;
  top: var(--nl3-top);
  z-index: 30;
  display: flex;
  gap: 2px !important;
  margin: 0 -8px 28px !important;
  padding: 8px 8px 0 !important;
  border-bottom: 1px solid var(--nl3-line) !important;
  background: rgba(6,6,7,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  scrollbar-width: none;
  /* fundido en los bordes cuando hay scroll horizontal (móvil) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
@media (min-width: 900px){
  #clienteTabs, #contentArea nav.border-b.border-white\/5{ -webkit-mask-image: none; mask-image: none; }
}
#clienteTabs button, #contentArea nav.border-b.border-white\/5 > button{
  position: relative;
  padding: 11px 16px 13px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0;
  color: var(--nl3-text-3) !important;
  transition: color var(--nl3-ui) var(--nl3-out), background-color var(--nl3-ui) var(--nl3-out), transform var(--nl3-press) var(--nl3-out) !important;
}
#clienteTabs button.active-tab, #contentArea nav.border-b.border-white\/5 > button.active-tab{
  color: #fff !important;
  border-bottom: 0 !important;
}
@media (hover: hover) and (pointer: fine){
  #contentArea nav.border-b.border-white\/5 > button:hover{ color: var(--nl3-text) !important; background: rgba(255,255,255,.04); }
}
#contentArea nav.border-b.border-white\/5 > button:active{ transform: scale(.97); }
/* El indicador: una línea blanca que se desplaza y se estira (transform) */
.nl3-ink{
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 1px;
  border-radius: 2px 2px 0 0;
  background: #fff;
  transform-origin: 0 50%;
  transform: translateX(var(--ix, 0px)) scaleX(var(--iw, 0));
  transition: transform 260ms var(--nl3-out);
  pointer-events: none;
}
.nl3-ink.is-still{ transition: none; }

/* Mini identidad en la barra de pestañas cuando la cabecera sale de pantalla */
.nl3-mini{
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 6px;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--nl3-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--nl3-ui) var(--nl3-out), transform var(--nl3-ui) var(--nl3-out);
}
.nl3-mini i{
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 700;
  background: var(--nl3-s3); box-shadow: 0 0 0 1px var(--nl3-line-2);
}
@media (min-width: 900px){
  .nl3-mini{ display: inline-flex; }
}
.nl3-stuck .nl3-mini{ opacity: 1; transform: none; }

/* 6.5 Contenido de cada pestaña: aparece sin estorbar (solo opacidad + 4 px) */
@keyframes nl3-tab-in{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }
#clienteTabContent > *{ animation: nl3-tab-in 180ms var(--nl3-out) backwards; }

/* 6.6 Tarjetas dentro de las pestañas: un único estilo, aire, foco de luz */
#clienteTabContent .bg-surface-container-low{
  border-radius: var(--nl3-r-card) !important;
  border: 1px solid var(--nl3-line) !important;
  background: var(--nl3-s1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5) !important;
  transition: border-color var(--nl3-ui) var(--nl3-out), transform var(--nl3-ui) var(--nl3-out);
}
#clienteTabContent .bg-surface-container-low.p-8{ padding: 28px !important; }
@media (max-width: 640px){ #clienteTabContent .bg-surface-container-low.p-8{ padding: 20px !important; } }
#clienteTabContent .bg-surface-container,
#clienteTabContent .bg-surface-container-high{
  background: var(--nl3-s2) !important;
  border-radius: 14px !important;
}
#clienteTabContent .bg-white\/5{ background: rgba(255,255,255,.035) !important; border-radius: 12px; }
#clienteTabContent p.uppercase.text-\[10px\]{
  font-size: 11px !important;
  letter-spacing: .08em !important;
  font-weight: 500 !important;
}
/* Badge "Reporte generado por IA" y similares: píldora tranquila */
#clienteTabContent span.uppercase.bg-white\/10{
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  color: var(--nl3-text-2);
}

/* 6.7 Estado de carga: "Cargando…" respira en vez de quedarse muerto */
@keyframes nl3-breathe{ 0%,100%{ opacity: .55; } 50%{ opacity: .28; } }
#casoClinico:is(:empty, :only-child){ min-height: 1.4em; }
#clienteTabContent [id="casoClinico"],
#clienteTabContent #hallazgosClinicos,
#clienteTabContent #recomendacionesClinicas{ transition: opacity var(--nl3-ui) var(--nl3-out); }

/* ============================================================
   7 · MODALES (todos los .modal-anim)
   Entrada 220 ms desde 0.97; salida más rápida; en móvil, hoja inferior.
   ============================================================ */
.modal-anim .modal-bg{ transition: opacity var(--nl3-enter) var(--nl3-out) !important; }
.modal-anim > div:nth-child(2){
  transform: scale(.97) translateY(6px) !important;
  transition: opacity var(--nl3-exit) var(--nl3-out), transform var(--nl3-exit) var(--nl3-out) !important;
  border-radius: var(--nl3-r-sheet);
}
.modal-anim.visible > div:nth-child(2){
  transform: none !important;
  transition: opacity var(--nl3-enter) var(--nl3-out), transform var(--nl3-enter) var(--nl3-out) !important;
}
@media (max-width: 639px){
  /* hoja inferior: sube desde abajo, esquinas redondas arriba */
  .modal-anim.items-center{ align-items: flex-end !important; padding: 0 !important; }
  .modal-anim > div:nth-child(2){
    width: 100% !important;
    max-width: none !important;
    max-height: 92dvh;
    border-radius: var(--nl3-r-sheet) var(--nl3-r-sheet) 0 0 !important;
    transform: translateY(32px) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-anim.visible > div:nth-child(2){ transform: none !important; }
  .modal-anim:not(.modal-nosheet) > div:nth-child(2)::before{
    content: "";
    display: block;
    width: 36px; height: 4px; border-radius: 4px;
    margin: 8px auto 0;
    background: rgba(255,255,255,.2);
  }
}

/* ============================================================
   8 · MÓVIL: la ficha respira
   ============================================================ */
@media (max-width: 767px){
  #clienteNombre{ font-size: 1.55rem !important; }
  .nl3-vital{ padding: 14px 16px 13px; }
  .nl3-vital dd{ font-size: 1.3rem; }
}

/* ============================================================
   9 · MENOS MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .nl3-ink{ transition: none; }
  #clienteTabContent > *{ animation: nl3-fade-only 160ms ease backwards; }
  .modal-anim > div:nth-child(2),
  .modal-anim.visible > div:nth-child(2){ transform: none !important; }
  .nl3-mini{ transform: none; }
  .nl3-spot::after{ display: none; }
  @keyframes nl3-fade-only{ from{ opacity: 0; } to{ opacity: 1; } }
}

/* ============================================================
   10 · MODALES: títulos y etiquetas con el mismo criterio que la ficha
   ============================================================ */
.modal-anim h2.font-brand,
.modal-anim h3.font-brand{
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  font-size: 1.125rem !important;
}
.modal-anim label.uppercase,
.modal-anim p.uppercase.text-\[9px\]{ letter-spacing: .08em !important; font-size: 11px !important; }
.modal-anim button:active{ transform: scale(.97); }
.modal-anim button{ transition: transform var(--nl3-press) var(--nl3-out), background-color var(--nl3-ui) var(--nl3-out), color var(--nl3-ui) var(--nl3-out); }