/* ============================================
   NUTRILAB · Panel (index.html) · Lavado de cara v2 (04-oct-2026)
   --------------------------------------------
   Capa SOLO visual que se carga después de styles.css y solo en
   index.html. Mantiene la identidad (negro "monolith", Michroma para la
   marca, Inter para el texto); no cambia la lógica ni el HTML generado.
   Para deshacerla: quitar el <link> de panel-v2.css en index.html.
   Va con prefijos de id (#sidebar, #contentArea…) porque Tailwind (CDN)
   inyecta sus utilidades en tiempo de ejecución y ganaría a igualdad.
   ============================================ */

:root{
  --nl-ease-out: cubic-bezier(.23, 1, .32, 1);
  --nl-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --nl-dur-press: 120ms;
  --nl-dur-ui: 200ms;
  --nl-dur-enter: 480ms;

  --nl-bg: #050505;
  --nl-surface: #0d0d0e;
  --nl-surface-2: #121214;
  --nl-line: rgba(255,255,255,.06);
  --nl-line-strong: rgba(255,255,255,.12);
  --nl-highlight: rgba(255,255,255,.05);
  --nl-text-dim: rgba(255,255,255,.55);
  --nl-radius-card: 16px;
  --nl-radius-inner: 10px;
}

/* ---------- Fondo: negro degradado ---------- */
body{
  background-color: #000;
  background-image:
    linear-gradient(180deg, #0b0b0c 0%, #060607 28%, #000000 70%),
    radial-gradient(1200px 600px at 12% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,255,255,.03), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Entrada de bloques ----------
   Animación (no transición) para poder escalonar sin retrasar los hover:
   aparece con un fundido y una subida corta, 60 ms entre hermanos.
   fill-mode backwards: tras terminar, el elemento vuelve a su estilo normal
   y no bloquea otros transform (p. ej. la pulsación de botones). */
@keyframes nl-rise{
  from{ opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to{ opacity: 1; transform: none; filter: none; }
}
.fade-in{ opacity: 0; filter: none; transform: none; transition: none; }
.fade-in.visible{
  opacity: 1;
  animation: nl-rise var(--nl-dur-enter) var(--nl-ease-out) backwards;
}
.fade-in.visible:nth-child(2){ animation-delay: 60ms; }
.fade-in.visible:nth-child(3){ animation-delay: 120ms; }
.fade-in.visible:nth-child(4){ animation-delay: 180ms; }
.fade-in.visible:nth-child(5){ animation-delay: 240ms; }
.fade-in.visible:nth-child(n+6){ animation-delay: 300ms; }

/* Cambio de pantalla: el panel sustituye el contenido de #contentArea, así
   que cada pantalla nueva entra con un fundido corto (solo opacidad). */
@keyframes nl-fade{ from{ opacity: 0; } to{ opacity: 1; } }
#contentArea > *{ animation: nl-fade 220ms var(--nl-ease-out) backwards; }

/* ---------- Menú lateral ---------- */
#sidebar{
  background: linear-gradient(180deg, rgba(14,14,15,.72), rgba(7,7,8,.72)) !important;
  border-right-color: var(--nl-line) !important;
}
#sidebar nav.space-y-1 > :not([hidden]) ~ :not([hidden]){ margin-top: 2px; }
#sidebar nav > p{
  margin: 22px 0 6px !important;
  padding: 0 16px;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  color: rgba(255,255,255,.32) !important;
}
#sidebar nav > p:first-child{ margin-top: 4px !important; }
#sidebar nav > a{
  position: relative;
  margin-bottom: 0 !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  border-radius: var(--nl-radius-inner) !important;
  border-left: 0 !important;
  color: rgba(255,255,255,.62) !important;
  transition: background-color var(--nl-dur-ui) var(--nl-ease-out), color var(--nl-dur-ui) var(--nl-ease-out) !important;
}
#sidebar nav > a .material-symbols-outlined{
  opacity: .7;
  transition: opacity var(--nl-dur-ui) var(--nl-ease-out);
}
@media (hover: hover) and (pointer: fine){
  #sidebar nav > a:hover{ color: #fff !important; background: rgba(255,255,255,.04) !important; }
  #sidebar nav > a:hover .material-symbols-outlined{ opacity: 1; }
}
#sidebar nav > a.menu-active{
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#sidebar nav > a.menu-active .material-symbols-outlined{ opacity: 1; }
#sidebar nav > a.menu-active::before{
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: #fff;
  transform: translateY(-50%);
}
#btnNewPatientSidebar{
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px -10px rgba(255,255,255,.25) !important;
}

/* ---------- Barra superior ---------- */
#topHeader{
  background: rgba(5,5,5,.62) !important;
  border-bottom-color: var(--nl-line) !important;
}
#desktopSearchInput,
#mobileSearchInput{
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px var(--nl-line);
  transition: box-shadow var(--nl-dur-ui) var(--nl-ease-out), background-color var(--nl-dur-ui) var(--nl-ease-out) !important;
}
#desktopSearchInput:focus,
#mobileSearchInput:focus{
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px var(--nl-line-strong), 0 0 0 4px rgba(255,255,255,.04) !important;
}

/* ---------- Títulos de sección ---------- */
#contentArea h3.font-brand{
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
}

/* ---------- Tarjetas ---------- */
#contentArea .bg-surface-container-low{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%),
    var(--nl-surface) !important;
  border: 1px solid var(--nl-line) !important;
  border-radius: var(--nl-radius-card) !important;
  box-shadow: inset 0 1px 0 var(--nl-highlight), 0 1px 2px rgba(0,0,0,.4);
}
#contentArea .bg-surface-container-low.border-t-2{ border-top: 1px solid rgba(255,255,255,.18) !important; }
#contentArea .card-hover{
  transition: border-color var(--nl-dur-ui) ease, box-shadow var(--nl-dur-ui) ease !important;
}
@media (hover: hover) and (pointer: fine){
  #contentArea .card-hover:hover{
    border-color: rgba(255,255,255,.11) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 32px -16px rgba(0,0,0,.8);
  }
}
/* Bloques internos de las tarjetas: un escalón más claro y radio menor */
#contentArea .bg-surface-container-low .bg-surface-container,
#contentArea .bg-surface-container-low .bg-surface-container-high{
  border-radius: var(--nl-radius-inner) !important;
}

/* ---------- Menos cajas: quitar tarjetas que no aportan ----------
   1) Las 4 cifras de arriba: un solo marco con separadores finos en vez de
      4 tarjetas sueltas. */
#contentArea section:has(> .kpi-anim){
  gap: 0 !important;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius-card);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%), var(--nl-surface);
  box-shadow: inset 0 1px 0 var(--nl-highlight);
  overflow: hidden;
}
#contentArea section > .kpi-anim.bg-surface-container-low{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
}
#contentArea section > .kpi-anim:nth-child(even){ border-left: 1px solid var(--nl-line) !important; }
#contentArea section > .kpi-anim:nth-child(n+3){ border-top: 1px solid var(--nl-line) !important; }
@media (min-width: 1024px){
  #contentArea section > .kpi-anim + .kpi-anim{ border-left: 1px solid var(--nl-line) !important; }
  #contentArea section > .kpi-anim:nth-child(n+3){ border-top: 0 !important; }
}
/* 2) Objetivos y tareas: filas con una línea fina en vez de cajitas dentro
      de la tarjeta. */
#dashboardGoalsContainer.space-y-3 > :not([hidden]) ~ :not([hidden]),
#dashboardTasksContainer.space-y-3 > :not([hidden]) ~ :not([hidden]){ margin-top: 0; }
#dashboardGoalsContainer > .bg-white\/5,
#dashboardTasksContainer > .bg-white\/5{
  background: transparent !important;
  border-radius: 0 !important;
  padding: 12px 4px !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background-color var(--nl-dur-ui) ease !important;
}
#dashboardGoalsContainer > .bg-white\/5:last-child,
#dashboardTasksContainer > .bg-white\/5:last-child{ border-bottom: 0; }
@media (hover: hover) and (pointer: fine){
  #dashboardGoalsContainer > .bg-white\/5:hover,
  #dashboardTasksContainer > .bg-white\/5:hover{ background: rgba(255,255,255,.025) !important; }
}
/* 3) Avisos vacíos ("Sin tareas", "Sin citas"…): texto discreto, sin el
      recuadro de rayas dentro de la tarjeta. */
#contentArea .bg-surface-container-low .border-dashed{
  border: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ---------- Cifras: alineadas y con peso ---------- */
#contentArea .kpi-anim,
#contentArea table,
#contentArea [id*="Count"],
#contentArea [id*="kpi"],
#contentArea [id*="Kpi"]{
  font-variant-numeric: tabular-nums;
}
#contentArea .kpi-anim .items-baseline{ flex-wrap: wrap; row-gap: 2px; }
#contentArea .kpi-anim .text-4xl,
#contentArea .kpi-anim .text-3xl{
  letter-spacing: -.035em;
  font-weight: 600 !important;
}

/* ---------- Tablas ---------- */
#contentArea table thead,
#contentArea table thead tr,
#contentArea table thead th{
  background: rgba(255,255,255,.025) !important;
}
#contentArea table thead th{
  font-weight: 600;
  color: rgba(255,255,255,.45) !important;
  letter-spacing: .12em;
}
#contentArea table tbody tr{
  transition: background-color var(--nl-dur-ui) var(--nl-ease-out);
}
@media (hover: hover) and (pointer: fine){
  #contentArea table tbody tr:hover{ background: rgba(255,255,255,.025); }
}
#contentArea table tbody tr + tr{ border-top: 1px solid rgba(255,255,255,.04); }

/* ---------- Botones: respuesta al pulsar ---------- */
#contentArea button,
#topHeader button,
#sidebar button,
#mobileBottomNav button{
  -webkit-tap-highlight-color: transparent;
}
#contentArea button:not(:disabled):not(.absolute):not([class*="translate"]):active,
#sidebar button:not(:disabled):active,
#topHeader button:not(:disabled):active{
  transform: scale(.97);
  transition: transform var(--nl-dur-press) var(--nl-ease-out);
}

/* Foco visible con teclado (sin anillo al pulsar con ratón o dedo) */
#sidebar a:focus-visible,
#sidebar button:focus-visible,
#topHeader button:focus-visible,
#contentArea a:focus-visible,
#contentArea button:focus-visible,
#mobileBottomNav button:focus-visible{
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* ---------- Menú inferior (móvil) ---------- */
#mobileBottomNav.mobile-bottom-nav{
  background: rgba(5,5,6,.985);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top-color: var(--nl-line);
}
#mobileBottomNav button{
  position: relative;
  letter-spacing: .01em;
  transition: color var(--nl-dur-ui) var(--nl-ease-out), transform var(--nl-dur-press) var(--nl-ease-out);
}
#mobileBottomNav button:active{ transform: scale(.94); }
#mobileBottomNav button.text-white::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
}

/* ---------- Indicadores de sección: aparecen con un pequeño estirón ---------- */
@keyframes nl-indicator-y{ from{ opacity: 0; transform: translateY(-50%) scaleY(.4); } to{ opacity: 1; transform: translateY(-50%) scaleY(1); } }
@keyframes nl-indicator-x{ from{ opacity: 0; transform: translateX(-50%) scaleX(.3); } to{ opacity: 1; transform: translateX(-50%) scaleX(1); } }
#sidebar nav > a.menu-active::before{ animation: nl-indicator-y 220ms var(--nl-ease-out); }
#mobileBottomNav button.text-white::before{ animation: nl-indicator-x 220ms var(--nl-ease-out); }
@media (hover: hover) and (pointer: fine){
  #sidebar nav > a .material-symbols-outlined{ transition: opacity var(--nl-dur-ui) ease, transform var(--nl-dur-ui) var(--nl-ease-out); }
  #sidebar nav > a:hover .material-symbols-outlined{ transform: translateX(2px); }
}

/* ---------- Desplegables (perfil, avisos, buscador) ----------
   Aparecen desde su botón: fundido + escala 0,97 → 1 en 180 ms. */
#profileDropdown,
#dropdownNotificaciones,
#desktopSearchResults,
#mobileSearchResults{
  transform-origin: top right;
  transition: opacity 180ms var(--nl-ease-out), transform 180ms var(--nl-ease-out);
}
#desktopSearchResults,
#mobileSearchResults{ transform-origin: top center; }
@starting-style{
  #profileDropdown, #dropdownNotificaciones, #desktopSearchResults, #mobileSearchResults{
    opacity: 0;
    transform: translateY(-4px) scale(.97);
  }
}

/* ---------- Menos cajas v3 (05-oct-2026): DESACTIVADO ----------
   Lo sustituye el bloque v4 "flotante" de mas abajo. Historial:
   v3 = fantasmas con borde 3D; v4 = flotante sin borde ni fondo. */

/* ---------- Contenido flotante v4 (05-oct-2026) ----------
   Sin tarjetas: sin fondo, sin borde, sin sombra. El contenido flota
   sobre el negro degradado. Solo quedan 2 tarjetas necesarias:
   las tablas Pre-registros y Clientes (datos densos, sin caja
   se vuelven ilegibles). */
#contentArea section:has(> .kpi-anim){
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#contentArea .lg\:col-span-8 > div.space-y-4 .grid .bg-surface-container-low,
#contentArea .lg\:col-span-8 > .bg-surface-container-low.p-6,
#contentArea .lg\:col-span-4 > .bg-surface-container-low,
#contentArea .lg\:col-span-4 > .bg-primary\/5{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#contentArea .lg\:col-span-4 > .bg-primary\/5 > .absolute.blur-2xl{ opacity: .5; }
@media (hover: hover) and (pointer: fine){
  #contentArea .lg\:col-span-8 > div.space-y-4 .grid .bg-surface-container-low:hover,
  #contentArea .lg\:col-span-8 > .bg-surface-container-low.p-6:hover,
  #contentArea .lg\:col-span-4 > .bg-surface-container-low:hover,
  #contentArea .lg\:col-span-4 > .bg-primary\/5:hover{
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}
/* Tablas que SI se conservan con caja: Pre-registros + Clientes */
#contentArea .lg\:col-span-8 > div.bg-surface-container-low.overflow-hidden{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%),
    var(--nl-surface) !important;
  border: 1px solid var(--nl-line) !important;
  border-radius: var(--nl-radius-card) !important;
  box-shadow: inset 0 1px 0 var(--nl-highlight), 0 1px 2px rgba(0,0,0,.4) !important;
}
/* Aire entre bloques flotantes + linea fina de separacion */
#contentArea .lg\:col-span-8 > div.space-y-4 .grid,
#contentArea .lg\:col-span-8 > .bg-surface-container-low.p-6,
#contentArea .lg\:col-span-4 > .bg-surface-container-low,
#contentArea .lg\:col-span-4 > .bg-primary\/5{
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#contentArea .lg\:col-span-8 > div.space-y-4 .grid:first-child,
#contentArea .lg\:col-span-4 > :nth-child(2){
  border-top: 0 !important;
  padding-top: 8px !important;
}


/* ---------- Ficha de cliente flotante v5 (05-oct-2026) ----------
   Sin tarjetas interiores: el contenido de las pestanas (Caso clinico /
   General / Pagos) flota sobre el fondo del modal. Solo se conservan:
   - el marco del modal, cabecera, pestanas y pie (estructura necesaria),
   - inputs/selects/textarea (sin caja no se distinguen del fondo),
   - tablas (datos densos, igual que en el dashboard).
   Todo lo demas (Biometria, cajitas Peso/IMC, tarjetas internas,
   bloques bg-white/5, bg-surface-container-*) pierde fondo, borde y sombra;
   los bloques se separan con una linea fina + aire, igual que en v4. */
#modalClientes .modal-content-container{
  background: transparent !important;
}
#modalClientes .modal-content-container .bg-surface-container,
#modalClientes .modal-content-container .bg-surface-container-low,
#modalClientes .modal-content-container .bg-surface-container-high,
#modalClientes .modal-content-container .bg-white\/5,
#modalClientes .modal-content-container .bg-white\/10{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Mini-cajas Peso/IMC y similares: texto flotando, sin cajita */
#modalClientes .modal-content-container .bg-white\/5.p-3,
#modalClientes .modal-content-container .rounded-lg.text-center{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Separacion entre bloques flotantes de la ficha */
#modalClientes .modal-content-container .bg-surface-container,
#modalClientes .modal-content-container .bg-surface-container-low,
#modalClientes .modal-content-container .bg-surface-container-high{
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#modalClientes .modal-content-container .grid > :first-child{
  border-top: 0 !important;
  padding-top: 4px !important;
}
/* Sin hover de tarjeta dentro de la ficha */
@media (hover: hover) and (pointer: fine){
  #modalClientes .modal-content-container .card-hover:hover{
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}


/* ---------- Menos movimiento si el sistema lo pide ---------- */
@keyframes nl-fade-only{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .fade-in.visible{ animation: nl-fade-only 200ms ease backwards; animation-delay: 0ms !important; }
  #sidebar nav > a.menu-active::before,
  #mobileBottomNav button.text-white::before{ animation: none; }
  #sidebar nav > a:hover .material-symbols-outlined{ transform: none; }
  @starting-style{
    #profileDropdown, #dropdownNotificaciones, #desktopSearchResults, #mobileSearchResults{ transform: none; }
  }
  #contentArea button:active,
  #sidebar button:active,
  #topHeader button:active,
  #mobileBottomNav button:active{ transform: none; }
}