/* Temas de la antesala, como Trimble Connect: Claro, Oscuro y Matrix (el
   verde del Gestor CDE de Codex, con sus efectos). Se eligen en Ajustes o en
   el botón del tema de la barra; <html data-tema="..."> lo pone index.html
   antes de pintar, para que no parpadee.

   hub.css y muro.css traen colores fijos del tema oscuro; aquí se pasan a
   variables y cada tema las redefine. */

:root{
  --riel-fondo:#08090a; --barra-fondo:rgba(11,12,14,.86); --campo:#060708;
  --izq-fondo:rgba(13,14,17,.92); --der-fondo:rgba(11,12,14,.6);
  --lamina-a:#15171c; --lamina-b:#0e0f12; --vidrio:none; --brillo:0 0 0 transparent;
}
#vista{z-index:2}
#riel{background:var(--riel-fondo)}
#barra{background:var(--barra-fondo)}
.m-izq{background:var(--izq-fondo)}
.m-der{background:var(--der-fondo)}
.redactar input:not([type=radio]):not([type=checkbox]),.redactar textarea,.redactar select,.coment-form input,
.editar input,.editar textarea,.aj-fila select,.aj-in,.form-seg input{background:var(--campo)}
.proy .lamina{background:radial-gradient(120% 90% at 80% 110%,color-mix(in srgb,var(--senal) 22%,transparent),transparent 60%),linear-gradient(180deg,var(--lamina-a),var(--lamina-b))}

/* ------------------------------------------------------------ en vivo (todos) */
.en-vivo{display:inline-flex;align-items:center;gap:6px;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.en-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:latido 1.8s ease-out infinite}
.en-vivo[hidden]{display:none}
@keyframes latido{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* ------------------------------------------------------------ selector de tema (barra) */
.tema-b{position:relative}
.tema-b>button{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--panel);border:1px solid var(--linea);color:var(--suave);cursor:pointer}
.tema-b>button:hover{color:var(--hueso)}
.tema-menu{position:absolute;right:0;top:calc(100% + 8px);width:240px;background:var(--panel2);border:1px solid var(--linea2);border-radius:14px;padding:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);z-index:45}
.tema-menu[hidden]{display:none}
.tema-menu p{margin:4px 8px 6px;font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.tema-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:9px;padding:8px;color:var(--hueso);font:500 13px var(--display);cursor:pointer;text-align:left}
.tema-menu button:hover,.tema-menu button:focus-visible{background:color-mix(in srgb,var(--hueso) 7%,transparent);outline:none}
.tema-d{display:block;font:500 10px var(--mono);color:var(--tenue)}
.tema-menu button[aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--senal);font-weight:800}
.muestra{width:30px;height:20px;border-radius:6px;border:1px solid var(--linea2);flex:none;position:relative;overflow:hidden}
.muestra.m-auto{background:linear-gradient(135deg,#f4f2ee 50%,#0b0c0e 50%)}
.muestra.m-claro{background:#f4f2ee}.muestra.m-claro::after{content:"";position:absolute;left:4px;bottom:4px;width:10px;height:4px;border-radius:2px;background:#ff4d1a}
.muestra.m-oscuro{background:#0b0c0e}.muestra.m-oscuro::after{content:"";position:absolute;left:4px;bottom:4px;width:10px;height:4px;border-radius:2px;background:#ff4d1a}
.muestra.m-matrix{background:repeating-linear-gradient(90deg,#062113 0 3px,#0a0f0d 3px 6px)}.muestra.m-matrix::after{content:"";position:absolute;left:4px;bottom:4px;width:10px;height:4px;border-radius:2px;background:#3ddc97;box-shadow:0 0 6px #3ddc97}
.aj-temas{display:flex;flex-wrap:wrap;gap:8px}
.aj-temas label{display:flex;align-items:center;gap:8px;border:1px solid var(--linea2);border-radius:10px;padding:6px 10px 6px 6px;cursor:pointer;font:600 12.5px var(--display);color:var(--hueso)}
.aj-temas input{position:absolute;opacity:0;pointer-events:none}
.aj-temas label:has(input:checked){border-color:var(--senal);box-shadow:0 0 0 1px var(--senal)}
.aj-temas label:has(input:focus-visible){outline:2px solid var(--hueso);outline-offset:2px}

/* ============================================================ CLARO */
[data-tema="claro"]{
  color-scheme:light;
  --fondo:#f4f2ee; --panel:#ffffff; --panel2:#f3f0ea; --linea:rgba(20,22,26,.10); --linea2:rgba(20,22,26,.18);
  --texto:#16181c; --hueso:#16181c; --suave:rgba(22,24,28,.66); --tenue:rgba(22,24,28,.46);
  --scan:#0b7f92; --ok:#1d8a4b; --tinta:#0b0c0e;
  --riel-fondo:#ebe7e0; --barra-fondo:rgba(244,242,238,.88); --campo:#ffffff;
  --izq-fondo:rgba(236,232,225,.9); --der-fondo:rgba(240,237,231,.7);
  --lamina-a:#faf8f5; --lamina-b:#ece8e1;
}
[data-tema="claro"] .error{background:#fde9e6;border-color:#f2b8b0;color:#a3271b}
[data-tema="claro"] .parcial{background:#fff6dc;border-color:#e9cf7a;color:#7a5a00}
[data-tema="claro"] .modo-banco{background:#fff6dc;color:#7a5a00;border-color:#e9cf7a}
[data-tema="claro"] .estado.aviso{color:#9a6a00;border-color:rgba(154,106,0,.45)}
[data-tema="claro"] .tarjeta,[data-tema="claro"] .panel,[data-tema="claro"] .mod,[data-tema="claro"] .redactar,[data-tema="claro"] .aj{box-shadow:0 1px 2px rgba(20,22,26,.06)}
[data-tema="claro"] .velo-dlg,[data-tema="claro"] #paleta .velo{background:rgba(20,22,26,.35)}
[data-tema="claro"] ::selection{color:#fff}

/* ============================================================ MATRIX (CEO) */
/* La paleta y los efectos del Gestor CDE: lluvia de código, líneas de monitor,
   vidrio con desenfoque, brillo verde en lo activo y arranque tipo "puerta". */
[data-tema="matrix"]{
  --fondo:#050a08; --panel:rgba(14,24,20,.80); --panel2:rgba(16,30,24,.94); --linea:rgba(120,200,170,.14); --linea2:rgba(120,200,170,.30);
  --texto:#dcede5; --hueso:#e4f5ec; --suave:#8fb5a5; --tenue:#5f8072;
  --senal:#3ddc97; --scan:#7df0c0; --ok:#3ddc97; --tinta:#04110b;
  --riel-fondo:rgba(4,10,7,.82); --barra-fondo:rgba(6,12,9,.70); --campo:rgba(3,8,6,.85);
  --izq-fondo:rgba(6,12,9,.72); --der-fondo:rgba(6,12,9,.55);
  --lamina-a:#0b1611; --lamina-b:#050a08;
  --brillo:0 0 22px rgba(61,220,151,.28);
}
[data-tema="matrix"] body{background:radial-gradient(1200px 700px at 50% 0%,#0b1a13 0%,#050a08 60%) fixed}
/* líneas de monitor CRT, muy suaves y sin atrapar clics */
[data-tema="matrix"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
/* viñeta: el centro respira, los bordes se apagan */
[data-tema="matrix"] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
[data-tema="matrix"] #riel,[data-tema="matrix"] #barra,[data-tema="matrix"] .m-izq,[data-tema="matrix"] .m-der,
[data-tema="matrix"] .cmenu,[data-tema="matrix"] .campana-lista,[data-tema="matrix"] .tema-menu{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
[data-tema="matrix"] #riel{border-right-color:var(--linea2)}
[data-tema="matrix"] #barra{border-bottom-color:var(--linea2)}
[data-tema="matrix"] .btn.primario{box-shadow:var(--brillo)}
[data-tema="matrix"] .btn.primario:hover{background:#7df0c0;border-color:#7df0c0;box-shadow:0 0 34px rgba(61,220,151,.5)}
[data-tema="matrix"] .app.activa .ico{box-shadow:0 0 16px rgba(61,220,151,.35)}
[data-tema="matrix"] .canal.activo{background:rgba(61,220,151,.08);box-shadow:inset 2px 0 var(--senal),0 0 18px rgba(61,220,151,.10)}
[data-tema="matrix"] .p-item.activo .ini{box-shadow:0 0 14px rgba(61,220,151,.45)}
[data-tema="matrix"] .kicker .dot,[data-tema="matrix"] .campana b{box-shadow:0 0 10px var(--senal)}
[data-tema="matrix"] .kicker .dot{animation:latido 2.4s ease-out infinite;color:var(--senal)}
[data-tema="matrix"] h1{text-shadow:0 0 22px rgba(61,220,151,.22)}
[data-tema="matrix"] h1 em{color:var(--scan)}
[data-tema="matrix"] .tarjeta,[data-tema="matrix"] .panel,[data-tema="matrix"] .mod,[data-tema="matrix"] .redactar,[data-tema="matrix"] .aj,[data-tema="matrix"] .proy{
  border-color:rgba(120,200,170,.16);background-image:linear-gradient(180deg,rgba(61,220,151,.035),transparent 40%)}
[data-tema="matrix"] .tarjeta{transition:border-color .2s,box-shadow .2s}
[data-tema="matrix"] .tarjeta:hover,[data-tema="matrix"] a.mod:hover,[data-tema="matrix"] .proy:hover{border-color:rgba(61,220,151,.45);box-shadow:0 0 0 1px rgba(61,220,151,.12),0 0 28px rgba(61,220,151,.10)}
[data-tema="matrix"] .mod .ico,[data-tema="matrix"] .t-ico{text-shadow:0 0 12px rgba(61,220,151,.6)}
[data-tema="matrix"] .avatar-t{box-shadow:0 0 0 2px rgba(61,220,151,.35)}
[data-tema="matrix"] .estado.activo{box-shadow:0 0 10px rgba(61,220,151,.25)}
[data-tema="matrix"] .t-meta,[data-tema="matrix"] .m-cab .sub{letter-spacing:.04em}
[data-tema="matrix"] .tarjeta.fijada{border-color:rgba(61,220,151,.5);background:linear-gradient(180deg,rgba(61,220,151,.08),transparent 60%),var(--panel)}
[data-tema="matrix"] .reac.mia,[data-tema="matrix"] .picker button.mia{background:rgba(61,220,151,.14)}
[data-tema="matrix"] .pildora{box-shadow:0 0 30px rgba(61,220,151,.45)}
[data-tema="matrix"] #aviso{background:#3ddc97;color:#04110b;box-shadow:0 0 30px rgba(61,220,151,.45)}
[data-tema="matrix"] ::selection{background:#3ddc97;color:#04110b}
/* arranque tipo puerta: mientras se lee el acceso, la lluvia sube y el aviso es una tarjeta de vidrio */
[data-tema="matrix"] body.cargando #fondo{opacity:.55!important}
[data-tema="matrix"] body.cargando #vista .cargador{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:26px 30px;
  border:1px solid rgba(0,255,150,.25);border-radius:16px;background:linear-gradient(180deg,rgba(6,12,9,.6),rgba(3,7,5,.7));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 0 60px rgba(0,0,0,.6),0 0 30px rgba(61,220,151,.12);
  font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7df0c0}
@media (max-width:760px){.tema-menu{position:fixed;left:8px;right:8px;width:auto;top:62px}}
@media (prefers-reduced-motion:reduce){.en-vivo::before,[data-tema="matrix"] .kicker .dot{animation:none}}