/* Piloto Liquid Glass - Login.
   Cargar DESPUES de main.css y style.css: solo sobreescribe, no reemplaza. */

:root {
  /* Primitivas - verde de marca */
  --green-800: #0A692E;
  --green-700: #10893E;
  --green-100: #d3e8da;
  --green-50: #f4f8f5;

  /* Primitivas - grises/negros (modo oscuro) */
  --gray-950: #0a0f0c;
  --gray-900: #14231c;
  --gray-100: #e8efe9;

  /* Semanticas - modo claro (default) */
  --color-bg-start: #f8faf9;
  --color-bg-mid: #eff3f1;
  --color-bg-end: #e4eae7;
  --color-surface-glass: rgba(255, 255, 255, 0.55);
  --color-border-glass: rgba(255, 255, 255, 0.8);
  --color-text: #1c2b22;
  --color-text-muted: #5b6b60;
  --color-accent: var(--green-800);
  --field-bg: rgba(255, 255, 255, 0.4);
  --field-border: rgba(10, 105, 46, 0.55);
  --glass-blur: 22px;
  --glass-radius: 24px;
  --glass-shadow: 0 12px 40px rgba(10, 105, 46, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Reflejos del bisel de vidrio real (luz arriba-izq, sombra abajo-der):
     mismo principio que un ejemplo de referencia del usuario (theme
     switcher con color-mix + capas inset), adaptado a nuestros tokens de
     verde. En claro el reflejo de luz domina; en oscuro se invierte. */
  --glass-reflex-light: 1;
  --glass-reflex-dark: 1;
}

:root {
  --liquid-glass-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px 2px 0px -2px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--color-accent) calc(var(--glass-reflex-dark) * 12%), transparent);

  /* Version mas chica para hovers puntuales (iconos), sin las capas grandes
     de sombra ambiental que en un icono de 40px se verian como manchas. */
  --liquid-glass-shadow-sm:
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1px 2px 0px -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1px -1px 0px -1px color-mix(in srgb, #fff calc(var(--glass-reflex-light) * 70%), transparent),
    inset -0.5px -1px 3px 0px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 15%), transparent),
    inset 0px 2px 3px -1px color-mix(in srgb, #000 calc(var(--glass-reflex-dark) * 18%), transparent);
}

/* MANTENER SINCRONIZADO con el bloque [data-theme="dark"] de abajo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Negro plano, sin gradiente verdoso: mismo tono que .app-content ya
       usa adentro del panel (--gray-950), para que el login oscuro y el
       panel logueado se vean como el mismo modo oscuro, no dos distintos. */
    --color-bg-start: var(--gray-950);
    --color-bg-mid: var(--gray-950);
    --color-bg-end: var(--gray-950);
    /* Mismo ajuste que --nav-surface/--dropdown-surface (liquid-nav.css):
       rgba(20,35,28,.55) se perdia contra el fondo negro plano y no se leia
       como vidrio, solo como una caja oscura con sombra. Mas opacidad y
       mas blanco mezclado en el verde para que se note el panel. */
    --color-surface-glass: rgba(70, 90, 80, 0.85);
    --color-border-glass: rgba(16, 137, 62, 0.32);
    --color-text: var(--gray-100);
    --color-text-muted: #9db3a5;
    --color-accent: var(--green-700);
    --field-bg: rgba(255, 255, 255, 0.06);
    --field-border: rgba(16, 137, 62, 0.5);
    --glass-blur: 14px;
    --glass-radius: 20px;
    --glass-shadow: 0 0 0 1px rgba(16, 137, 62, 0.12), 0 0 16px rgba(16, 137, 62, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* La receta de referencia traia el reflejo de luz muy bajo (0.3) porque
       ahi el vidrio de referencia es CLARO sobre un fondo oscuro (le sobra
       luz propia). Nuestro vidrio es oscuro (--nav-surface oscuro) sobre
       fondo oscuro: en 0.3 el bisel no contrastaba con nada y se veia como
       una caja plana con sombra verde. Se probo en vivo subiendolo a 1.4,
       pero se via como un borde blanco marcado, no vidrio -- 0.6 es el
       punto intermedio: se nota el bisel sin leerse como un contorno. */
    --glass-reflex-light: 0.6;
    --glass-reflex-dark: 1.5;
    color-scheme: dark;
  }
}

/* MANTENER SINCRONIZADO con el bloque @media (prefers-color-scheme: dark) de arriba */
:root[data-theme="dark"] {
  --color-bg-start: var(--gray-950);
  --color-bg-mid: var(--gray-950);
  --color-bg-end: var(--gray-950);
  --color-surface-glass: rgba(70, 90, 80, 0.85);
  --color-border-glass: rgba(16, 137, 62, 0.32);
  --color-text: var(--gray-100);
  --color-text-muted: #9db3a5;
  --color-accent: var(--green-700);
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-border: rgba(16, 137, 62, 0.5);
  --glass-blur: 14px;
  --glass-radius: 20px;
  --glass-shadow: 0 0 0 1px rgba(16, 137, 62, 0.12), 0 0 16px rgba(16, 137, 62, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-reflex-light: 0.6;
  --glass-reflex-dark: 1.5;
  color-scheme: dark;
}

/* Fondo */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-mid) 55%, var(--color-bg-end) 100%);
}

/* Tarjeta de login: vidrio (sobreescribe .login-box de main.css).
   El bisel real viene de --liquid-glass-shadow (capas inset con color-mix,
   igual tecnica que se uso en la barra superior y el riel) en vez de un
   tinte plano -- es lo que hace que se lea como vidrio y no como una tarjeta
   semitransparente comun. */
.login-content .login-box {
  background: var(--color-surface-glass);
  border: none;
  border-radius: var(--glass-radius);
  box-shadow: var(--liquid-glass-shadow), 0 12px 40px rgba(10, 105, 46, 0.15);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .login-content .login-box {
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  }
}

.login-content .login-box .login-head {
  border-bottom-color: var(--color-border-glass);
  color: var(--color-text);
}

.login-content .login-box label {
  color: var(--color-text-muted);
}

.login-content .login-box .form-control {
  background: var(--field-bg);
  border-color: var(--field-border);
  color: var(--color-text);
}

.login-content .login-box .form-control::placeholder {
  color: var(--color-text-muted);
}

.login-content .login-box .form-control:focus {
  background: var(--field-bg);
  color: var(--color-text);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* Boton de vidrio verde. Probado en vivo: el intento anterior (relleno
   translucido + border-color solido de --color-accent encima) se veia
   lavado con un anillo duro. Aqui el borde es blanco translucido (no
   verde solido) y el bisel viene del box-shadow con luz arriba-izquierda
   y sombra interna abajo-derecha -- asi el vidrio se lee, no un error. */
.login-content .login-box .btn-primary {
  background-color: rgba(10, 105, 46, 0.9);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.8),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.4),
    inset 0 0 3px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(10, 105, 46, 0.45);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .login-content .login-box .btn-primary {
    backdrop-filter: blur(4px) saturate(170%);
    -webkit-backdrop-filter: blur(4px) saturate(170%);
  }
}

.login-content .login-box a {
  color: var(--color-accent);
}

/* Fondo del panel en modo oscuro: sin esto, cambiar a oscuro solo recoloreaba
   los iconos del riel/header y el resto de la pantalla (.app-content) se
   quedaba con el gris claro de siempre -- se ve dark en el chrome y claro en
   el contenido. Las tarjetas/tablas individuales siguen sin tema (eso es
   fase 4), pero al menos el lienzo de fondo ya cambia de verdad. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-content {
    background-color: var(--color-bg-mid);
  }
}

:root[data-theme="dark"] .app-content {
  background-color: var(--color-bg-mid);
}

/* body sigue blanco (main.css) incluso en oscuro: se notaba como una
   franja blanca en los margenes/huecos alrededor del riel, el avatar y la
   barra superior flotantes (los gaps entre esas piezas y el borde de la
   pantalla no son parte de .app-content). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.app {
    background-color: var(--color-bg-mid);
  }
}

:root[data-theme="dark"] body.app {
  background-color: var(--color-bg-mid);
}

/* Barra de titulo de cada pantalla (icono + nombre + breadcrumb): en
   main.css es un div blanco solido, sin variante oscura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-title {
    background-color: var(--color-surface-glass);
    border-bottom: 1px solid var(--color-border-glass);
    color: var(--color-text);
  }

  :root:not([data-theme="light"]) .app-breadcrumb .breadcrumb-item a,
  :root:not([data-theme="light"]) .app-breadcrumb .breadcrumb-item.active {
    color: var(--color-text-muted);
  }
}

:root[data-theme="dark"] .app-title {
  background-color: var(--color-surface-glass);
  border-bottom: 1px solid var(--color-border-glass);
  color: var(--color-text);
}

:root[data-theme="dark"] .app-breadcrumb .breadcrumb-item a,
:root[data-theme="dark"] .app-breadcrumb .breadcrumb-item.active {
  color: var(--color-text-muted);
}

/* Boton de cambio de tema */
.theme-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border-glass);
  background: var(--color-surface-glass);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle .theme-toggle-icon-light,
.theme-toggle .theme-toggle-icon-dark {
  display: none;
}

:root:not([data-theme="dark"]) .theme-toggle .theme-toggle-icon-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: inline; }