/* ============================================================
   INTRANET GRUPO ENDE - "liquid glass" en negro, amarillo y gris
   Ruta: /assets/glass.css

   Los nombres de variables (--azure, --violet, --aqua) se conservan
   aunque ya no sean azules: cientos de estilos en linea los usan.
   Ahora significan acento, acento profundo y neutro claro.
   ============================================================ */

:root{
  --abyss:#0A0A0A;
  --deep:#141412;
  --deeper:#0E0E0C;

  --glass:rgba(255,255,255,.055);
  --glass-hi:rgba(255,255,255,.095);
  --stroke:rgba(255,255,255,.12);
  --stroke-hi:rgba(245,200,0,.30);
  --specular:rgba(255,255,255,.6);

  --azure:#F5C800;     /* acento principal */
  --violet:#C9A227;    /* oro viejo */
  --aqua:#B5B5AD;      /* neutro claro */

  --ok:#7FD17F;
  --warn:#F5C800;
  --bad:#FF7B72;

  --ice:#F4F3EF;
  --mist:rgba(244,243,239,.60);
  --faint:rgba(244,243,239,.34);

  --r:22px;
  --r-sm:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--abyss);color:var(--ice);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- Aurora ---------- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(100px);opacity:.30}
.aurora .o1{width:52vw;height:52vw;left:-9vw;top:-12vw;
  background:radial-gradient(circle at 35% 35%, var(--azure), transparent 62%);
  animation:drift1 28s ease-in-out infinite alternate}
.aurora .o2{width:44vw;height:44vw;right:-7vw;top:6vh;
  background:radial-gradient(circle at 60% 40%, var(--violet), transparent 60%);
  opacity:.24;animation:drift2 34s ease-in-out infinite alternate}
.aurora .o3{width:38vw;height:38vw;left:32vw;bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, #6E6E66, transparent 62%);
  opacity:.20;animation:drift3 31s ease-in-out infinite alternate}
.aurora .veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,.42), rgba(10,10,10,.90))}

@keyframes drift1{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-5vw,6vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(4vw,-5vh,0) scale(1.15)}}

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

/* ---------- Vidrio ---------- */
/* transform:translateZ(0) + will-change fuerzan a que cada panel viva en
   su propia capa de composicion. Sin esto, en algunos Android/iOS el
   backdrop-filter:blur se "apaga" a la mitad del scroll (paneles largos,
   como el de Mi perfil, se ven negros/vacios hasta que dejas de scrollear
   y el navegador vuelve a pintar el blur). */
.glass{position:relative;background:linear-gradient(160deg, var(--glass-hi), var(--glass));
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--stroke);border-radius:var(--r);
  box-shadow:0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateZ(0);will-change:transform}
.glass::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--specular),transparent);opacity:.55;pointer-events:none}

/* ---------- Layout ---------- */
.shell{position:relative;z-index:1;display:flex;min-height:100vh}

.rail{width:264px;flex-shrink:0;padding:20px 14px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  border-right:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:11px;padding:8px 10px 20px}
.brand .mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--azure),var(--violet));
  box-shadow:0 6px 20px rgba(245,200,0,.28);color:#141412;font-size:18px}
.brand b{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;letter-spacing:-.2px}

/* El logo.png ya trae su propio color/forma (gema dorada transparente):
   el marco con fondo degradado de .mark/.mk es solo para iniciales/iconos
   genericos, asi que aqui se apaga y se deja ver solo el logo. */
.logo-mark{background:none!important;box-shadow:none!important}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* Pie de pagina: nunca tuvo estilos, asi que el logo (2000x2000px) se
   veia a tamaño real, gigante y recortado. Aqui se limita su tamaño. */
.site-foot{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:28px 0 14px;margin-top:auto;opacity:.72}
.site-foot .logo-wrap{width:30px;height:30px;flex-shrink:0}
.site-foot .logo-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.site-foot .made{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:6px}
.site-foot .made b{color:var(--mist);font-weight:600}

.rail-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  padding:16px 12px 7px;font-weight:600}

.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;
  color:var(--mist);text-decoration:none;font-size:14px;font-weight:500;
  border:1px solid transparent;transition:.16s}
.nav-item i{font-size:16px;width:19px;text-align:center;opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.055);color:var(--ice)}
.nav-item.on{background:linear-gradient(140deg, rgba(245,200,0,.16), rgba(245,200,0,.05));
  border-color:var(--stroke-hi);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.nav-item .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--azure)}

/* ---------- Grupo desplegable del menu (Recursos Humanos) ----------
   Va con <details>/<summary> y no con JavaScript: funciona sin JS, el
   teclado ya sabe abrirlo, y el servidor puede dejarlo abierto cuando
   ya estas dentro de una de sus pantallas. */
.nav-grupo{margin:0}
.nav-grupo summary{cursor:pointer;list-style:none;user-select:none;width:100%}
/* El triangulito propio del navegador estorba: ya hay un chevron. */
.nav-grupo summary::-webkit-details-marker{display:none}
.nav-grupo summary::marker{content:''}
.nav-grupo-cab span{flex:1}
.nav-grupo-flecha{margin-left:auto;font-size:11px!important;width:auto!important;
  opacity:.55;transition:transform .18s}
.nav-grupo[open] .nav-grupo-flecha{transform:rotate(180deg)}
/* "dentro" = estas parado en una pantalla del grupo. Se marca el
   encabezado para no perder de vista donde andas cuando la pagina
   activa queda fuera de la vista al hacer scroll. */
.nav-grupo-cab.dentro{color:var(--ice)}
.nav-grupo-cab.dentro i:first-child{color:#F5C800}

/* SANGRIA DE LOS SUBMODULOS
   -------------------------
   La version anterior indentaba 11px con una linea a .12 de opacidad, y
   en pantalla no se distinguia: un modulo del grupo se veia casi a la
   misma altura que el encabezado del grupo siguiente, asi que no habia
   forma de saber a que apartado pertenecia.

   Ahora la linea vertical cae bajo el CENTRO DEL ICONO del encabezado
   (12px de padding + 19px de icono / 2 = 21px, redondeado a 20), que es
   la convencion de cualquier arbol: el hijo cuelga visiblemente de su
   padre. Con eso el texto del submodulo queda ~21px a la derecha del
   texto del encabezado, que ya es una diferencia que se ve de reojo.

   La linea sube a .20 de opacidad y 1.5px: a .12 sobre fondo negro
   practicamente no existia. */
.nav-grupo-cuerpo{margin:2px 0 8px 20px;padding-left:13px;
  border-left:1.5px solid rgba(255,255,255,.20)}
.nav-item.nav-sub{padding:8px 11px;font-size:13.5px;border-radius:11px}
.nav-item.nav-sub i{font-size:14px;width:17px}
/* En tema claro un blanco translucido sobre fondo claro no se ve: ahi la
   linea tiene que ser oscura. El selector es el mismo que usa el resto
   del archivo mas abajo. */
:root[data-theme="light"] .nav-grupo-cuerpo{border-left-color:rgba(20,18,10,.22)}

@media (max-width:900px){
  .nav-item.nav-sub{padding:11px 13px;font-size:14.5px}
  .nav-item.nav-sub i{font-size:16px;width:20px}
}

.rail-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--stroke)}
.me{display:flex;align-items:center;gap:11px;padding:10px 8px}
.me .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--azure),var(--violet));color:#141412;font-weight:700;font-size:14px}
.me .who{font-size:13.5px;font-weight:600;line-height:1.25}
.me .rol{font-size:11.5px;color:var(--faint)}

/* ---------- Contenido ---------- */
.main{flex:1;min-width:0;width:100%;min-height:100vh;display:flex;flex-direction:column;
  padding:clamp(18px,2vw,34px) clamp(16px,2.2vw,38px) 56px}

.topbar{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);
  border:1px solid var(--stroke);color:var(--mist);backdrop-filter:blur(14px);cursor:pointer;transition:.16s;font-size:16px}
.icon-btn:hover{color:var(--ice);border-color:var(--stroke-hi)}

.hello{margin-bottom:26px}
.hello .eyebrow{font-size:13px;color:var(--mist);margin-bottom:2px}
.hello h1{font-family:'Sora',sans-serif;font-size:clamp(25px,2.6vw,38px);font-weight:600;letter-spacing:-1px;line-height:1.1}
.hello h1 span{background:linear-gradient(100deg,var(--ice) 26%, var(--azure));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.grid{display:grid;gap:clamp(12px,1.1vw,18px)}
.g-areas{grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr))}
.g-mods{grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr))}
.g-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;gap:20px}
@media (max-width:1000px){.g-split{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1050px){.split{grid-template-columns:minmax(0,1fr)}}

.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Utilidades globales de grid 2/3 columnas - varios modulos las usaban
   como estilo INLINE (style="grid-template-columns:1fr 1fr") lo cual
   nunca puede colapsar en movil: un estilo inline siempre gana sobre
   cualquier media query que apunte a una clase. Con estas clases (y
   quitando el inline de cada pagina) el colapso a 1 columna si funciona. */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.two-col{grid-template-columns:1fr}}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.g3{grid-template-columns:1fr}}

.card{padding:clamp(15px,1.1vw,20px);text-decoration:none;color:inherit;display:block;transition:.18s;min-width:0}
.card:hover{transform:translateY(-3px);border-color:var(--stroke-hi);
  box-shadow:0 18px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18)}
.card .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:19px;
  margin-bottom:14px;color:var(--azure);
  background:linear-gradient(150deg, rgba(245,200,0,.18), rgba(245,200,0,.04));border:1px solid var(--stroke)}
.card h3{font-size:15px;font-weight:600;margin-bottom:3px;letter-spacing:-.2px}
.card p{font-size:12.5px;color:var(--mist);line-height:1.45}
.card .go{margin-top:12px;font-size:12px;color:var(--faint);display:flex;align-items:center;gap:5px}

.panel{padding:clamp(16px,1.3vw,24px) clamp(16px,1.4vw,26px);max-width:100%}
.panel h2{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;margin-bottom:4px}
.panel .sub{font-size:12.5px;color:var(--mist);margin-bottom:16px}

.post{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.post:last-child{border-bottom:0;padding-bottom:0}
.post-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post-top .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:700;color:#141412;background:linear-gradient(150deg,var(--azure),var(--violet))}
.post-top .n{font-size:13.5px;font-weight:600}
.post-top .t{font-size:11.5px;color:var(--faint)}
.post-body{font-size:14px;line-height:1.55;color:rgba(244,243,239,.86)}
.post-acts{display:flex;gap:16px;margin-top:10px}
.post-acts button{background:none;border:0;color:var(--faint);font:inherit;font-size:12.5px;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:.15s}
.post-acts button:hover{color:var(--azure)}

.composer textarea{width:100%;min-height:78px;resize:vertical;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.30);border:1px solid var(--stroke);color:var(--ice);font:inherit;font-size:14px;
  outline:none;line-height:1.5}
.composer textarea::placeholder{color:var(--faint)}
.composer textarea:focus{border-color:var(--stroke-hi)}
.composer .row{display:flex;justify-content:flex-end;margin-top:11px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.16s}
.btn-primary{background:linear-gradient(140deg,var(--azure),var(--violet));color:#141412;
  box-shadow:0 8px 26px rgba(245,200,0,.26)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{background:var(--glass);border-color:var(--stroke);color:var(--ice);backdrop-filter:blur(12px)}
.btn-ghost:hover{border-color:var(--stroke-hi)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;
  font-weight:600;background:var(--glass);border:1px solid var(--stroke);color:var(--mist)}

.empty{padding:34px 20px;text-align:center;color:var(--faint);font-size:13.5px}
.empty i{font-size:28px;display:block;margin-bottom:10px;opacity:.5}

.alert{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--r-sm);font-size:13.5px;
  margin-bottom:18px;border:1px solid var(--stroke);background:var(--glass)}
.alert-bad{border-color:rgba(255,123,114,.4);background:rgba(255,123,114,.10);color:#FFC9C5}
.alert-ok{border-color:rgba(127,209,127,.4);background:rgba(127,209,127,.10);color:#C6F0C6}

.auth{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:100%;max-width:396px;padding:38px 34px}
.auth-card .mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(150deg,var(--azure),var(--violet));color:#141412;font-size:24px;
  box-shadow:0 10px 32px rgba(245,200,0,.3)}
.auth-card h1{font-family:'Sora',sans-serif;font-size:25px;font-weight:600;letter-spacing:-.5px}
.auth-card .sub{color:var(--mist);font-size:13.5px;margin:5px 0 26px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--mist);margin-bottom:7px}
.field input{width:100%;padding:13px 15px;border-radius:var(--r-sm);background:rgba(0,0,0,.32);
  border:1px solid var(--stroke);color:var(--ice);font:inherit;font-size:14px;outline:none;transition:.16s}
.field input:focus{border-color:var(--azure);box-shadow:0 0 0 4px rgba(245,200,0,.13)}
.field input::placeholder{color:var(--faint)}

.burger{display:none}
.backdrop{display:none}

@media (max-width:1250px){ .rail{width:230px} }

/* ============================================================
   MOVIL: estilo iOS. Barra de pestañas abajo y hojas que suben.
   La barra lateral desaparece: todo se alcanza con el pulgar.
   ============================================================ */
.tabbar,.hoja,.hoja-fondo,.m-top{display:none}

@media (max-width:900px){
  .rail{display:none}
  .shell{display:block}
  .main{padding:0 16px calc(104px + env(safe-area-inset-bottom, 0px))}

  /* Encabezado pegajoso y traslúcido */
  .m-top{display:flex;position:sticky;top:0;z-index:20;align-items:center;gap:12px;
    margin:0 -16px 18px;padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    background:rgba(10,10,10,.72);backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.08)}
  .m-top .mk{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;
    background:linear-gradient(150deg,var(--azure),var(--violet));color:#141412;flex-shrink:0}
  .m-top b{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-top .av-t{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;
    font-weight:700;color:#141412;background:linear-gradient(150deg,var(--azure),var(--violet));
    text-decoration:none;flex-shrink:0;overflow:hidden}
  .m-top .av-t img{width:100%;height:100%;object-fit:cover}

  .topbar{margin-bottom:20px}
  /* El toggle de tema se esconde en movil (nadie lo alcanza bien ahi), pero la
     campana de notificaciones NO - antes se escondia junto con todo .icon-btn
     y no habia forma de ver notificaciones desde el celular. */
  .topbar .icon-btn-tema{display:none}
  .topbar .notif-wrap{margin-left:auto}
  .hello h1{font-size:27px}
  .hello{margin-bottom:20px}
  .panel{border-radius:18px}
  .g-split,.split,.feed{gap:14px}

  /* ============================================================
     BARRA FLOTANTE DE VIDRIO (estilo WhatsApp iOS)
     Tres niveles de profundidad:
       1. el contenido de la pagina
       2. la capsula de vidrio, flotando, apenas mas clara que el fondo
       3. la burbuja del activo: pastilla clara con el acento de marca
     ============================================================ */
  .tabbar{
    display:flex;align-items:center;justify-content:center;gap:2px;
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    z-index:30;padding:8px;border-radius:9999px;
    width:max-content;max-width:calc(100vw - 24px);

    /* Cristal delgado: apenas se despega del fondo, como en iOS */
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
      rgba(22,22,20,.62);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);

    border:1px solid rgba(255,255,255,.12);
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      0 2px 10px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.16);
    isolation:isolate;
  }

  /* La burbuja del activo: pastilla clara con el acento amarillo de la marca */
  .burbuja{
    position:absolute;z-index:1;top:6px;bottom:6px;left:0;width:0;
    border-radius:9999px;pointer-events:none;
    background:linear-gradient(150deg, rgba(245,200,0,.22), rgba(245,200,0,.07));
    border:1px solid var(--stroke-hi);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.30);
    opacity:0;
    transition:transform .32s cubic-bezier(.16,1,.3,1),
               width .32s cubic-bezier(.16,1,.3,1),
               opacity .2s ease;
  }
  .burbuja.lista{opacity:1}

  .tabbar a,.tabbar button{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:8px 16px;min-width:58px;
    background:none;border:0;cursor:pointer;text-decoration:none;
    color:rgba(255,255,255,.68);font:inherit;font-size:11.5px;font-weight:600;
    letter-spacing:-.01em;line-height:1;
    transition:color .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar i{font-size:23px;line-height:1;font-weight:400}
  .tabbar .on{color:#fff}
  .tabbar a:active,.tabbar button:active{transform:scale(.92)}

  @media (max-width:380px){
    .tabbar{gap:0;padding:7px}
    .tabbar a,.tabbar button{min-width:50px;padding:7px 10px;font-size:10.5px;gap:4px}
    .tabbar i{font-size:21px}
  }

  /* Hoja inferior */
  .hoja-fondo{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);
    backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s}
  .hoja-fondo.on{opacity:1;pointer-events:auto}

  .hoja{display:block;position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:82vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding:10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background:rgba(20,20,18,.90);backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);border-top:1px solid rgba(255,255,255,.14);
    border-radius:22px 22px 0 0;transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1)}
  .hoja.on{transform:translateY(0)}
  .hoja .agarre{width:38px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);margin:0 auto 16px}
  .hoja h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;margin-bottom:4px}
  .hoja .sh{font-size:12.5px;color:var(--faint);margin-bottom:16px}
  .hoja .nav-item{padding:13px 14px;font-size:15px;border-radius:14px;margin-bottom:4px}
  .hoja .nav-item i{font-size:18px;width:22px}
  .hoja hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
  .hoja .lbl-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
    font-weight:600;padding:6px 4px 8px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .hoja,.burbuja,.tabbar a,.tabbar button{transition:none}
}

@media (max-width:480px){ .g-areas{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))} }

@media (min-width:1700px){
  .g-mods{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
  .g-areas{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
}

img,table,pre{max-width:100%}
.panel table{width:100%}

/* ============================================================
   MODO CLARO - se activa con [data-theme="light"] en <html>
   (boton de la campanita... no, del sol/luna en el topbar; logica
   en _nav.php: cambiarTema()/aplicarTema()). El boton ya cambiaba
   el atributo y guardaba la preferencia, pero nunca existio este
   bloque - por eso "no hacia nada" visualmente.

   No es solo invertir colores: el fondo casi blanco (#F3F2ED, el
   mismo tono que ya usaba el meta theme-color) se ve tibio en vez
   de gris frio, el "vidrio" pasa de tinte blanco a tinte oscuro muy
   sutil (para que siga leyendose como vidrio sobre un fondo claro),
   el texto pasa a tinta oscura, y los pocos lugares del archivo que
   tenian un color de fondo fijo (no variable, pensado a proposito
   para fondo oscuro: la campanita de notificaciones, la barra
   inferior movil, la hoja que sube, etc.) se ajustan aparte abajo.
   El acento dorado/negro de la marca no cambia: sigue siendo ENDE
   en cualquiera de los dos modos.
   ============================================================ */
:root[data-theme="light"]{
  --abyss:#F3F2ED;
  --deep:#EAE8E0;
  --deeper:#E2E0D6;

  --glass:rgba(20,18,10,.035);
  --glass-hi:rgba(20,18,10,.07);
  --stroke:rgba(20,18,10,.12);
  --stroke-hi:rgba(190,145,0,.4);
  --specular:rgba(255,255,255,.9);

  --ok:#2E8F4E;
  --warn:#B8890A;
  --bad:#CC3B32;

  --ice:#1C1B17;
  --mist:rgba(28,27,23,.62);
  --faint:rgba(28,27,23,.38);
}

body{transition:background-color .2s ease,color .2s ease}
.glass{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}

[data-theme="light"] .aurora{opacity:.55}
[data-theme="light"] .aurora .veil{background:linear-gradient(180deg, rgba(243,242,237,.5), rgba(243,242,237,.92))}

[data-theme="light"] .glass{box-shadow:0 10px 30px rgba(20,18,10,.10), inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme="light"] .card:hover{box-shadow:0 16px 38px rgba(20,18,10,.14), inset 0 1px 0 rgba(255,255,255,.75)}

[data-theme="light"] .rail{background:linear-gradient(180deg, rgba(20,18,10,.03), rgba(20,18,10,.008))}
[data-theme="light"] .nav-item:hover{background:rgba(20,18,10,.05)}
[data-theme="light"] .nav-item.on{color:#141412}

[data-theme="light"] .post{border-bottom-color:rgba(20,18,10,.10)}
[data-theme="light"] .post-body{color:rgba(28,27,23,.82)}

[data-theme="light"] .composer textarea,
[data-theme="light"] .field input{background:rgba(20,18,10,.045)}

[data-theme="light"] .alert-bad{color:#9A2F27}
[data-theme="light"] .alert-ok{color:#1F7A3D}

/* Campanita de notificaciones (definida en _nav.php, no aqui, pero
   el selector con [data-theme] gana de todas formas por especificidad). */
[data-theme="light"] .notif-dd{background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(247,246,241,.98));
  box-shadow:0 18px 40px rgba(20,18,10,.16)}
[data-theme="light"] .notif-row:hover{background:rgba(20,18,10,.04)}

[data-theme="light"] .m-top{background:rgba(243,242,237,.85);border-bottom-color:rgba(20,18,10,.09)}
[data-theme="light"] .tabbar{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.25)),
  rgba(233,231,222,.78);border-color:rgba(20,18,10,.12);
  box-shadow:0 18px 40px rgba(20,18,10,.16), 0 2px 10px rgba(20,18,10,.10), inset 0 1px 0 rgba(255,255,255,.7)}
[data-theme="light"] .tabbar a,[data-theme="light"] .tabbar button{color:rgba(28,27,23,.62)}
[data-theme="light"] .tabbar .on{color:#141412}
[data-theme="light"] .hoja{background:rgba(247,246,241,.96);border-top-color:rgba(20,18,10,.12)}
[data-theme="light"] .hoja .agarre{background:rgba(20,18,10,.18)}
[data-theme="light"] .hoja hr{border-top-color:rgba(20,18,10,.09)}

@media (prefers-reduced-motion:reduce){ body,.glass{transition:none} }

/* ============================================================
   CAMPOS DE FORMULARIO - look unificado para TODO el sitio.
   .campo es alias de .field (mismo patron, dos nombres porque
   distintos modulos ya traian uno u otro). .inp/.sel/.ta funcionan
   solos tambien, sin necesitar el wrapper - esto es lo que le
   faltaba a Bitacoras (subir.php, asignar.php, precios.php): usaban
   class="inp" pero esa clase no estaba definida en ningun lado, asi
   que el navegador pintaba sus controles nativos (blancos, sin
   estilo). Cualquier modulo nuevo que use estas clases ya sale
   bien vestido sin tener que repetir el CSS.
   ============================================================ */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--mist);margin-bottom:7px}

.field input, .field select, .field textarea,
.campo input, .campo select, .campo textarea,
.inp, .sel, .ta{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);background:rgba(0,0,0,.32);
  border:1px solid var(--stroke);color:var(--ice);font:inherit;font-size:14px;outline:none;transition:.16s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus,
.inp:focus, .sel:focus, .ta:focus{border-color:var(--azure);box-shadow:0 0 0 4px rgba(245,200,0,.13)}
.field input::placeholder, .campo input::placeholder, .inp::placeholder{color:var(--faint)}
.ta{resize:vertical;min-height:100px}

/* select: la flecha nativa (blanca en Windows, choca con el fondo oscuro)
   se reemplaza por una propia; appearance:none solo va aqui, nunca en
   input generico, para no desvestir checkboxes que viven dentro de un
   .field/.campo. */
.field select, .campo select, select.inp, .sel{
  cursor:pointer;padding-right:38px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B5B5AD' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
}
.field select option, .campo select option, select.inp option, .sel option{background:#141412;color:var(--ice)}

/* fecha: se pinta con el esquema oscuro del sistema (asi el calendario
   emergente tambien sale oscuro) y el cursor deja claro que es clicable */
.field input[type=date], .campo input[type=date], input.inp[type=date]{color-scheme:dark;cursor:pointer}

/* archivo: el boton nativo "Seleccionar archivo" se viste como boton glass */
.field input[type=file], .campo input[type=file], input.inp[type=file]{padding:9px 12px;cursor:pointer}
.field input[type=file]::file-selector-button,
.campo input[type=file]::file-selector-button,
input.inp[type=file]::file-selector-button{
  padding:8px 14px;margin-right:12px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.07);color:var(--ice);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.field input[type=file]::file-selector-button:hover,
.campo input[type=file]::file-selector-button:hover,
input.inp[type=file]::file-selector-button:hover{background:rgba(255,255,255,.13)}

/* Caja de busqueda con lupa - reutilizable en cualquier lista o tabla larga */
.busca{position:relative}
.busca i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.busca input{width:100%;padding:10px 15px 10px 39px;border-radius:999px;background:rgba(0,0,0,.26);
  border:1px solid var(--stroke);color:var(--ice);font:inherit;font-size:13.5px;outline:none;transition:.16s}
.busca input:focus{border-color:var(--azure);box-shadow:0 0 0 4px rgba(245,200,0,.13)}
.busca input::placeholder{color:var(--faint)}

[data-theme="light"] .campo input, [data-theme="light"] .campo select, [data-theme="light"] .campo textarea,
[data-theme="light"] .inp, [data-theme="light"] .sel, [data-theme="light"] .ta,
[data-theme="light"] .busca input{background:rgba(20,18,10,.045)}
[data-theme="light"] .field select, [data-theme="light"] .campo select,
[data-theme="light"] select.inp, [data-theme="light"] .sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23685f4a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .field select option, [data-theme="light"] .campo select option,
[data-theme="light"] select.inp option, [data-theme="light"] .sel option{background:#F7F6F1;color:#1C1B17}
[data-theme="light"] .field input[type=date], [data-theme="light"] .campo input[type=date],
[data-theme="light"] input.inp[type=date]{color-scheme:light}

/* ============================================================
   IMPRESION - base para todo el sitio. Cada pagina puede afinar
   detalles propios (tablas, colores de categoria, etc.) en su
   $extra_css, que se carga DESPUES de esta hoja y por lo tanto gana.
   ============================================================ */
@media print{
  :root{color-scheme:light}
  body{background:#fff !important;color:#000 !important;padding:0 !important}
  .aurora,.rail,.topbar,.m-top,.tabbar,.hoja,.hoja-fondo,.burger,.backdrop,.no-print{display:none !important}
  .shell{display:block !important}
  .main{padding:0 !important}
  .glass{background:#fff !important;border:1px solid #ccc !important;box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  a{color:#000 !important;text-decoration:none !important}
  .scroll-x{overflow:visible !important}
  @page{margin:14mm}
}