/* =====================================================================
   v683 — SISTEMA INDUSTRIAL EGUNPASA (sobre la capa histórica v662)
   Fondo negro + engranajes, paneles carbón y colores funcionales intactos.
   Solo se aplica en modo oscuro. El modo claro permanece sin este fondo.
   ===================================================================== */

html[data-tema="oscuro"]{
  background:#030303!important;
  color-scheme:dark;
}

html[data-tema="oscuro"] body{
  --fondo:#030303;
  --fondo-panel:#070707;
  --fondo-suave:#0c0c0c;
  --panel:#070707;
  --panel-2:#0b0b0b;
  --borde:#2b2b2b;
  --tinta:#f4f4f4;
  --tinta-suave:#a9a9a9;
  --acento:#f47b20;
  --acento-suave:rgba(244,123,32,.14);

  background:#030303!important;
  color:var(--tinta)!important;
  min-height:100vh;
  position:relative;
  isolation:isolate;
}

/* Fondo mecánico v675: el engranaje debe VERSE, no quedar enterrado bajo un velo.
   Se mantiene monocromo para no teñir de azul/marrón la interfaz. */
html[data-tema="oscuro"] body::before{
  content:"";
  position:fixed;
  inset:-7vh -6vw;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 46%,rgba(255,118,18,.28),transparent 24%),
    radial-gradient(circle at 88% 38%,rgba(255,118,18,.24),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.48)),
    url("fondos/engranajes-v662.png") center center / cover no-repeat;
  filter:grayscale(.72) sepia(.18) saturate(1.35) contrast(1.54) brightness(.72);
  transform:scale(1.08) translateZ(0);
  /* v683: fondo temporal ESTATICO hasta disponer del fondo mecánico animado definitivo. */
  animation:none;
  will-change:auto;
}

/* Viñeta ligera: conserva legibilidad sin tapar el detalle mecánico. */
html[data-tema="oscuro"] body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 15%,transparent 0 26%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.36));
}

/* v683: mientras el fondo definitivo sea estático, se ocultan los engranajes
   procedurales. Eran los que podían enseñar una costura/raya clara al girar. */
html[data-tema="oscuro"] #egDecoracionFondo{display:none!important;}

/* Engranajes vectoriales decorativos históricos (se conservan definidos para
   poder reactivarlos cuando exista una animación aprobada). */
#egDecoracionFondo{
  position:fixed;
  inset:-3vh -2vw;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  opacity:.78;
  perspective:1100px;
  transform-style:preserve-3d;
  animation:eg-depth-drift 18s ease-in-out infinite alternate;
}

.eg-gear{
  position:absolute;
  display:block;
  width:280px;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      transparent 0 19%,
      #111 20% 25%,
      transparent 26% 35%,
      #252525 36% 42%,
      transparent 43% 55%,
      #171717 56% 61%,
      transparent 62%),
    repeating-conic-gradient(
      from 0deg,
      #242424 0deg 5deg,
      #090909 5deg 8deg,
      transparent 8deg 12deg
    );
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.16),
    inset 12px 14px 32px rgba(255,255,255,.045),
    inset -16px -18px 38px rgba(0,0,0,.72),
    0 3px 0 rgba(255,255,255,.05),
    0 28px 58px rgba(0,0,0,.92),
    0 0 34px rgba(232,121,30,.06);
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.92)) contrast(1.24);
  transform-style:preserve-3d;
}

.eg-gear::before{
  content:"";
  position:absolute;
  inset:14%;
  border:9px solid #141414;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.04),
    0 0 0 12px rgba(0,0,0,.28);
}

.eg-gear::after{
  content:"";
  position:absolute;
  width:22%;
  aspect-ratio:1;
  left:39%;
  top:39%;
  border-radius:50%;
  background:#050505;
  border:8px solid #252525;
  box-shadow:inset 0 0 18px #000;
}

.eg-gear-a{
  width:390px;
  right:-105px;
  top:5vh;
  animation:eg-spin 56s linear infinite;
}
.eg-gear-b{
  width:310px;
  right:175px;
  top:42vh;
  opacity:.66;
  animation:eg-spin-rev 43s linear infinite;
}
.eg-gear-c{
  width:470px;
  left:-210px;
  bottom:-145px;
  opacity:.53;
  animation:eg-spin 82s linear infinite;
}
.eg-gear-d{
  width:210px;
  left:24vw;
  top:12vh;
  opacity:.34;
  animation:eg-spin-rev 49s linear infinite;
}

@keyframes eg-spin{to{transform:rotate(360deg)}}
@keyframes eg-spin-rev{to{transform:rotate(-360deg)}}
@keyframes eg-bg-drift{
  0%{transform:scale(1.08) translate3d(-.8%,.2%,0)}
  100%{transform:scale(1.13) translate3d(1.1%,-1.0%,0)}
}
@keyframes eg-depth-drift{
  0%{transform:translate3d(-.35%,0,0) rotateX(.8deg) scale(1.01)}
  100%{transform:translate3d(.45%,-.45%,0) rotateX(-.8deg) scale(1.025)}
}

/* Todo el contenido real queda por delante de la decoración. */
html[data-tema="oscuro"] body > :not(#egDecoracionFondo):not(.eg-fondo-video){
  position:relative;
  z-index:1;
}

/* Cabecera/menu: negro casi puro y translúcido. */
html[data-tema="oscuro"] .barra{
  background:
    linear-gradient(180deg,rgba(18,19,21,.97),rgba(4,4,5,.965))!important;
  border-color:rgba(229,231,235,.15)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.85),
    0 14px 38px rgba(0,0,0,.56)!important;
  backdrop-filter:blur(14px) saturate(1.08);
}

html[data-tema="oscuro"] .barra-superior,
html[data-tema="oscuro"] .menu-categorias{
  background:transparent!important;
}

html[data-tema="oscuro"] .boton-cabecera,
html[data-tema="oscuro"] .menu-cat-boton{
  background:linear-gradient(180deg,rgba(35,37,40,.92),rgba(10,10,11,.95))!important;
  border:1px solid rgba(229,231,235,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px rgba(0,0,0,.28)!important;
}
html[data-tema="oscuro"] .menu-cat-boton.activo{
  background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 86%,white 14%),color-mix(in srgb,var(--acento) 76%,black 24%))!important;
  border-color:color-mix(in srgb,var(--acento) 72%,white 28%)!important;
  color:#fff!important;
}

html[data-tema="oscuro"] .menu-desplegable,
html[data-tema="oscuro"] .menu-cat.abierto .menu-desplegable{
  background:rgba(5,5,5,.97)!important;
  border-color:#303030!important;
  box-shadow:0 18px 42px rgba(0,0,0,.62)!important;
  backdrop-filter:blur(14px);
}

/* Paneles / cajas: carbón oscuro. No marrón. */
html[data-tema="oscuro"] .panel,
html[data-tema="oscuro"] .caja,
html[data-tema="oscuro"] .tarjeta,
html[data-tema="oscuro"] fieldset,
html[data-tema="oscuro"] .ds-card,
html[data-tema="oscuro"] .ds-summary > *,
html[data-tema="oscuro"] .eg-v657-panel{
  border-radius:14px!important;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 18%),
    radial-gradient(circle at 4% 0%,rgba(232,121,30,.055),transparent 31%),
    linear-gradient(145deg,rgba(18,20,23,.985),rgba(5,6,7,.982))!important;
  border-color:rgba(229,231,235,.20)!important;
  box-shadow:
    0 20px 42px rgba(0,0,0,.48),
    0 2px 0 rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.62)!important;
  backdrop-filter:blur(8px) saturate(.9);
}

/* Jerarquía visual v675: títulos y barras internas como en la referencia. */
html[data-tema="oscuro"] h1{
  color:#f4f5f6!important;
  text-shadow:0 2px 0 rgba(255,255,255,.03),0 8px 26px rgba(0,0,0,.72)!important;
}
html[data-tema="oscuro"] h2,
html[data-tema="oscuro"] h3{
  color:#f0f1f2;
}
html[data-tema="oscuro"] .filtros,
html[data-tema="oscuro"] .fila-busqueda,
html[data-tema="oscuro"] .barra-busqueda,
html[data-tema="oscuro"] .barra-seleccion{
  background:linear-gradient(180deg,rgba(14,15,17,.93),rgba(5,5,6,.92))!important;
  border:1px solid rgba(229,231,235,.13)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.30)!important;
}

html[data-tema="oscuro"] table{
  background:rgba(5,5,5,.90)!important;
}

html[data-tema="oscuro"] th{
  background:rgba(10,10,10,.97)!important;
}

html[data-tema="oscuro"] tr,
html[data-tema="oscuro"] td{
  border-color:#242424!important;
}

/* Formularios: negro real, borde gris carbón. */
html[data-tema="oscuro"] input,
html[data-tema="oscuro"] select,
html[data-tema="oscuro"] textarea{
  background:#080808!important;
  color:#efefef!important;
  border-color:#383838!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
html[data-tema="oscuro"] input:focus,
html[data-tema="oscuro"] select:focus,
html[data-tema="oscuro"] textarea:focus{
  border-color:var(--acento)!important;
  outline:none!important;
  box-shadow:0 0 0 2px rgba(244,123,32,.14)!important;
}

/* Sistema común v684: botones oscuros, vacíos e iluminados como la maqueta aprobada. */
html[data-tema="oscuro"] .boton,
html[data-tema="oscuro"] .boton-verde,
html[data-tema="oscuro"] .boton-amarillo,
html[data-tema="oscuro"] .boton-parar,
html[data-tema="oscuro"] .boton-claro{
  min-height:42px!important;border-radius:9px!important;padding:9px 16px!important;
  font-size:14px!important;font-weight:750!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-sizing:border-box!important;
  text-shadow:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease,transform .12s ease!important;
}
html[data-tema="oscuro"] .boton{background:rgba(244,123,32,.07)!important;border-color:rgba(244,123,32,.62)!important;color:#ff9b50!important;}
html[data-tema="oscuro"] .boton-verde{background:rgba(34,197,94,.07)!important;border-color:rgba(34,197,94,.55)!important;color:#6ee798!important;}
html[data-tema="oscuro"] .boton-amarillo{background:rgba(250,204,21,.06)!important;border-color:rgba(250,204,21,.52)!important;color:#f7d85a!important;}
html[data-tema="oscuro"] .boton-parar,html[data-tema="oscuro"] .boton-apagar-cab{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.58)!important;color:#ff8178!important;}
html[data-tema="oscuro"] .boton-claro{background:#15171a!important;border-color:#34383e!important;color:#d9dde2!important;}
html[data-tema="oscuro"] .boton-pequeno{min-height:34px!important;padding:6px 11px!important;font-size:12px!important;border-radius:7px!important;}
@media(hover:hover){
 html[data-tema="oscuro"] .boton:hover{background:rgba(244,123,32,.14)!important;border-color:#ff8a20!important;color:#fff!important;box-shadow:0 0 18px rgba(244,123,32,.18)!important;}
 html[data-tema="oscuro"] .boton-verde:hover{background:rgba(34,197,94,.13)!important;border-color:#22c55e!important;color:#fff!important;box-shadow:0 0 18px rgba(34,197,94,.15)!important;}
 html[data-tema="oscuro"] .boton-amarillo:hover{background:rgba(250,204,21,.12)!important;border-color:#facc15!important;color:#fff4b3!important;box-shadow:0 0 18px rgba(250,204,21,.14)!important;}
 html[data-tema="oscuro"] .boton-parar:hover{background:rgba(239,68,68,.14)!important;border-color:#ef4444!important;color:#fff!important;box-shadow:0 0 18px rgba(239,68,68,.16)!important;}
 html[data-tema="oscuro"] .boton-claro:hover{background:#1d2024!important;border-color:#555b63!important;color:#fff!important;box-shadow:0 0 14px rgba(255,255,255,.04)!important;}
}

/* Tarjetas de vídeos: efecto de consola oscura, sin marrón. */
html[data-tema="oscuro"] .tarjeta-video{
  background:linear-gradient(180deg,rgba(10,10,10,.96),rgba(4,4,4,.95))!important;
  border-color:#303030!important;
  box-shadow:0 12px 28px rgba(0,0,0,.30)!important;
}
html[data-tema="oscuro"] .tarjeta-video:hover{
  border-color:#4a4a4a!important;
  transform:translateY(-1px);
}

/* Etiquetas compactas. */
html[data-tema="oscuro"] .sello{
  border-radius:999px!important; padding:4px 9px!important; font-size:10px!important;
  font-weight:800!important; letter-spacing:.035em; border:1px solid currentColor!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Profundidad en interacción: sutil, sin convertir el panel en una feria. */
@media(hover:hover){
  html[data-tema="oscuro"] .panel:hover,
  html[data-tema="oscuro"] .caja:hover,
  html[data-tema="oscuro"] .tarjeta:hover{
    border-color:rgba(232,121,30,.28)!important;
    box-shadow:
      0 23px 48px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.085),
      0 0 0 1px rgba(232,121,30,.025)!important;
  }
  html[data-tema="oscuro"] .boton-cabecera:hover{ transform:translateY(-1px); }
}

/* Scrollbars discretas e industriales. */
html[data-tema="oscuro"] *{
  scrollbar-color:#565656 #090909;
}
html[data-tema="oscuro"] *::-webkit-scrollbar{
  width:10px;
  height:10px;
}
html[data-tema="oscuro"] *::-webkit-scrollbar-track{
  background:#090909;
}
html[data-tema="oscuro"] *::-webkit-scrollbar-thumb{
  background:#4b4b4b;
  border:2px solid #090909;
  border-radius:10px;
}

/* El fondo sigue espectacular en móvil, pero se aligera para GPU/batería. */
@media(max-width:760px){
  html[data-tema="oscuro"] body::before{
    inset:-2vh -18vw;
    filter:grayscale(1) contrast(1.12) brightness(.42);
    animation-duration:42s;
  }

  #egDecoracionFondo{opacity:.25}
  .eg-gear-a{width:245px;right:-105px;top:10vh}
  .eg-gear-b{width:180px;right:8vw;top:50vh}
  .eg-gear-c{width:280px;left:-150px;bottom:-80px}
  .eg-gear-d{display:none}

  html[data-tema="oscuro"] .panel,
  html[data-tema="oscuro"] .caja,
  html[data-tema="oscuro"] .tarjeta{
    backdrop-filter:blur(5px);
  }
}

/* Quien desactive animaciones conserva el diseño, pero sin movimiento. */
@media(prefers-reduced-motion:reduce){
  html[data-tema="oscuro"] body::before,
  #egDecoracionFondo,
  .eg-gear{
    animation:none!important;
  }
}

/* =====================================================================
   v677 — REFERENCIA MECÁNICA APLICADA A WEB REAL
   Solo Actualizar y Transcriptor. La portada no se toca.
   ===================================================================== */

/* En estas dos páginas la decoración procedural de v675 se ocultaba con una
   costura clara al rotar algunos conic-gradients. Conservamos movimiento real
   mediante el fondo mecánico completo y evitamos la raya visual. */
html[data-tema="oscuro"] body:has(.eg-update-v677) #egDecoracionFondo,
html[data-tema="oscuro"] body:has(.eg-transcriptor-v677) #egDecoracionFondo{
  display:none!important;
}
html[data-tema="oscuro"] body:has(.eg-update-v677)::before,
html[data-tema="oscuro"] body:has(.eg-transcriptor-v677)::before{
  inset:-10vh -10vw;
  background:
    radial-gradient(circle at 13% 38%,rgba(244,123,32,.22),transparent 18%),
    radial-gradient(circle at 87% 38%,rgba(244,123,32,.18),transparent 22%),
    linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.36) 48%,rgba(0,0,0,.05)),
    url("fondos/engranajes-v662.png") center center / cover no-repeat;
  filter:grayscale(.72) sepia(.08) contrast(1.64) brightness(.66) saturate(1.08);
  transform:scale(1.13) translateZ(0);
  animation:eg-bg-drift-v677 28s cubic-bezier(.45,0,.55,1) infinite alternate;
}
html[data-tema="oscuro"] body:has(.eg-update-v677)::after,
html[data-tema="oscuro"] body:has(.eg-transcriptor-v677)::after{
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 18% 82%,rgba(0,0,0,.24)),
    radial-gradient(ellipse at 50% 16%,transparent 0 26%,rgba(0,0,0,.16) 64%,rgba(0,0,0,.62) 100%);
}
@keyframes eg-bg-drift-v677{
  0%{transform:scale(1.13) translate3d(-1.2%,.3%,0)}
  100%{transform:scale(1.18) translate3d(1.2%,-.8%,0)}
}

/* ---------- Actualizar el panel ---------- */
.eg-update-v677{
  max-width:none;
  margin:0 auto;
  padding:24px 0 42px;
}
.eg-update-v677 > h1{
  margin:22px 0 4px!important;
  font-size:clamp(44px,5.1vw,72px)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
  font-weight:900!important;
  color:#f7f7f7!important;
  text-shadow:0 3px 0 rgba(255,255,255,.035),0 18px 48px #000!important;
}
.eg-update-v677 #cajaVersion{
  margin:8px 0 16px!important;
  font-size:15px!important;
  color:#b9bcc1!important;
}
.eg-update-v677 #cajaVersion b{color:#ff8a20!important;font-size:17px}
.eg-update-v677 > .panel{
  /* v683: vuelve al ancho estándar del contenedor (hasta 1180px). */
  width:100%;
  margin:0 0 18px!important;
  padding:24px 26px!important;
  border:1px solid rgba(229,231,235,.22)!important;
  border-radius:16px!important;
  background:
    linear-gradient(115deg,rgba(255,255,255,.045),transparent 18%),
    linear-gradient(145deg,rgba(18,21,24,.985),rgba(5,7,8,.985))!important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.85)!important;
}
.eg-update-v677 > .panel > p.ayuda{
  font-size:15px!important;
  line-height:1.72!important;
  color:#b9bcc1!important;
}
.eg-update-v677 code{
  color:#ff8a20!important;
  background:#111315!important;
  border:1px solid rgba(255,138,32,.16);
}
.eg-update-v677 .zona-suelta{
  position:relative;
  overflow:hidden;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px dashed rgba(255,132,24,.92)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,127,20,.09),transparent 30%),
    linear-gradient(180deg,rgba(8,11,13,.98),rgba(4,6,7,.98))!important;
  box-shadow:inset 0 0 60px rgba(0,0,0,.54),0 18px 40px rgba(0,0,0,.25)!important;
}
.eg-update-v677 .zona-suelta::before{
  content:"";
  position:absolute;
  width:240px;height:240px;
  left:50%;top:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,139,35,.14),rgba(255,139,35,.03) 42%,transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
.eg-update-v677 .zona-icono{
  position:relative; width:64px; height:64px; margin:0 auto;
  opacity:1!important; color:#ff8a20;
  filter:drop-shadow(0 0 13px rgba(255,128,24,.42));
}
.eg-update-v677 .zona-icono svg{width:100%;height:100%;display:block;}
.eg-update-v677 .zona-titulo{
  position:relative;
  margin-top:14px!important;
  font-size:22px!important;
  font-weight:850!important;
  color:#f3f3f3!important;
}
.eg-update-v677 .zona-texto{position:relative;color:#c5c5c5!important;opacity:1!important}
.eg-update-v677 .zona-botones{position:relative;margin-top:22px!important}
.eg-update-v677 .zona-botones button{
  min-height:52px!important;
  padding:12px 24px!important;
  font-size:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 28px rgba(244,123,32,.15),0 12px 28px rgba(0,0,0,.38)!important;
}
.eg-update-v677 .mensaje{
  color:#ff8a20!important;
  font-weight:800;
}
.eg-update-v677 #registroVigilante,
.eg-update-v677 #capaVigilante pre{
  border-radius:12px!important;
  background:#080a0b!important;
  border-color:#34383d!important;
}

/* ---------- Transcriptor / cola ---------- */
.eg-transcriptor-v677{
  max-width:1420px;
  margin:0 auto;
  padding:18px 0 40px;
}
.eg-transcriptor-v677 > h1{
  margin:20px 0 6px!important;
  font-size:clamp(42px,4.2vw,66px)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
}
.eg-transcriptor-v677 > .ayuda{
  max-width:900px;
  font-size:14px!important;
  line-height:1.62!important;
}
.eg-transcriptor-v677 .panel{
  border-radius:16px!important;
  padding:20px 22px!important;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 18%),
    linear-gradient(145deg,rgba(15,18,21,.99),rgba(5,7,8,.99))!important;
}
.eg-transcriptor-v677 .zona-suelta{
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(10,12,14,.96),rgba(5,6,7,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 38px rgba(0,0,0,.32)!important;
}
.eg-transcriptor-v677 .cola-cabecera{
  min-height:54px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(229,231,235,.10);
}
.eg-transcriptor-v677 .cola-cabecera h2{
  font-size:26px!important;
  font-weight:850!important;
  letter-spacing:-.025em;
}
.eg-transcriptor-v677 .cola-cabecera #colaResumen{color:#aeb2b7!important;font-size:14px!important}
.eg-transcriptor-v677 #colaMensaje{
  margin:14px 0 18px!important;
  min-height:42px;
  display:flex;
  align-items:center;
  border-color:rgba(255,138,32,.38)!important;
  background:linear-gradient(90deg,rgba(255,138,32,.075),rgba(255,138,32,.018))!important;
  color:#dedede!important;
}
.eg-transcriptor-v677 #lista{
  display:grid;
  gap:8px;
}
.eg-transcriptor-v677 .fila-cola{
  grid-template-columns:54px minmax(0,1fr) auto!important;
  gap:14px!important;
  min-height:88px;
  padding:14px 16px!important;
  border:1px solid rgba(229,231,235,.12)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,rgba(15,18,21,.98),rgba(7,9,10,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.28)!important;
}
.eg-transcriptor-v677 .fila-cola:last-child{border-bottom:1px solid rgba(229,231,235,.12)!important}
.eg-transcriptor-v677 .fila-cola.procesando{
  border-color:rgba(255,138,32,.38)!important;
  box-shadow:inset 3px 0 0 #ff861d,inset 0 1px 0 rgba(255,255,255,.04),0 14px 32px rgba(0,0,0,.34)!important;
}
.eg-transcriptor-v677 .fila-cola.fallo{border-color:rgba(192,57,43,.38)!important}
.eg-transcriptor-v677 .fila-cola.hecho{opacity:.78}
.eg-transcriptor-v677 .fc-icono{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid #45484c;
  background:#090b0c;
  font-size:25px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.eg-transcriptor-v677 .procesando .fc-icono{
  border-color:#a94e09;
  color:#ff8a20;
  box-shadow:0 0 24px rgba(255,128,24,.12),inset 0 0 18px rgba(255,128,24,.05);
}
.eg-transcriptor-v677 .fc-nombre{
  font-size:15px!important;
  font-weight:720;
  color:#f0f1f2!important;
}
.eg-transcriptor-v677 .fc-fase{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:6px!important;
  color:#9fa3a8!important;
  font-size:12.5px!important;
}
.eg-transcriptor-v677 .fc-fase b{color:#ff861d;font-size:11px;letter-spacing:.055em}
.eg-transcriptor-v677 .eg-progreso-fila{
  width:100%;height:9px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:#202327;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85);
}
.eg-transcriptor-v677 .eg-progreso-fila > div{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d8630d,#ff8a20,#ffad49);
  box-shadow:0 0 16px rgba(255,130,25,.38);
  transition:width .35s ease;
}
.eg-transcriptor-v677 .eg-progreso-fila.indeterminado > div{
  width:36%!important;
  animation:eg-ind-v677 1.8s ease-in-out infinite;
}
@keyframes eg-ind-v677{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(150%)}
  100%{transform:translateX(320%)}
}
.eg-transcriptor-v677 .eg-progreso-meta{
  display:flex;gap:18px;flex-wrap:wrap;
  margin-top:7px;
  color:#92979c;
  font-size:11.5px;
}
.eg-transcriptor-v677 .eg-progreso-meta span:first-child{color:#ff8a20;font-weight:800}
.eg-transcriptor-v677 .fc-acciones .boton-pequeno{
  min-width:82px!important;
  min-height:40px!important;
}
.eg-transcriptor-v677 .eg-cola-global{
  grid-template-columns:240px minmax(260px,1fr);
  gap:14px 24px;
  align-items:center;
  margin-top:18px;
  padding:18px 20px;
  border:1px solid rgba(229,231,235,.14);
  border-radius:14px;
  background:
    radial-gradient(circle at 4% 50%,rgba(255,132,26,.10),transparent 22%),
    linear-gradient(180deg,rgba(11,14,16,.98),rgba(5,7,8,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 32px rgba(0,0,0,.28);
}
.eg-transcriptor-v677 .eg-cola-global-titulo{
  grid-row:1/3;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:20px;
  border-right:1px solid rgba(229,231,235,.09);
  color:#b8bcc1;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.eg-transcriptor-v677 .eg-cola-global-titulo strong{
  color:#ff861d;
  font-size:38px;
  line-height:1;
  letter-spacing:-.04em;
}
.eg-transcriptor-v677 .eg-cola-global-barra{
  height:10px;
  background:#202327;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.8);
}
.eg-transcriptor-v677 .eg-cola-global-barra > div{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#cf5b08,#ff861d,#ffac49);
  box-shadow:0 0 16px rgba(255,128,24,.30);
}
.eg-transcriptor-v677 .eg-cola-global-meta{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  color:#9ca1a6;
  font-size:12.5px;
}
.eg-transcriptor-v677 .eg-cola-global-meta b{color:#f3f3f3}

@media(max-width:760px){
  .eg-update-v677{padding-top:8px}
  .eg-update-v677 > h1,
  .eg-transcriptor-v677 > h1{font-size:38px!important}
  .eg-update-v677 > .panel{padding:17px!important}
  .eg-update-v677 .zona-suelta{min-height:230px;padding:28px 14px 24px!important}
  .eg-transcriptor-v677 .panel{padding:15px!important}
  .eg-transcriptor-v677 .fila-cola{
    grid-template-columns:44px minmax(0,1fr)!important;
    min-height:0;
    padding:12px!important;
  }
  .eg-transcriptor-v677 .fc-icono{width:40px;height:40px}
  .eg-transcriptor-v677 .fc-acciones{grid-column:2!important}
  .eg-transcriptor-v677 .eg-cola-global{grid-template-columns:1fr;gap:12px}
  .eg-transcriptor-v677 .eg-cola-global-titulo{
    grid-row:auto;
    border-right:0;
    border-bottom:1px solid rgba(229,231,235,.09);
    padding:0 0 12px;
  }
  .eg-transcriptor-v677 .eg-cola-global-titulo strong{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  html[data-tema="oscuro"] body:has(.eg-update-v677)::before,
  html[data-tema="oscuro"] body:has(.eg-transcriptor-v677)::before,
  .eg-transcriptor-v677 .eg-progreso-fila.indeterminado > div{
    animation:none!important;
  }
}


/* =====================================================================
   v683 — NORMAS VISUALES EN PRUEBA (aplicación compartida)
   Se consolidarán o eliminarán según la revisión visual del usuario.
   ===================================================================== */
html[data-tema="oscuro"] body.eg-interior .contenedor{max-width:1180px;}
html[data-tema="oscuro"] body.eg-interior .panel{width:100%;max-width:none;}
html[data-tema="oscuro"] body.eg-interior .panel > h2:first-child{
  font-size:20px; font-weight:820; letter-spacing:-.018em;
}
html[data-tema="oscuro"] body.eg-interior .alcance{
  border-radius:12px; background:linear-gradient(180deg,rgba(15,17,19,.96),rgba(7,8,9,.97));
  border-color:rgba(229,231,235,.15); color:#b8bcc1;
}
html[data-tema="oscuro"] body.eg-interior .zona-suelta{
  border-radius:16px; background:linear-gradient(180deg,rgba(10,12,14,.98),rgba(4,6,7,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), inset 0 0 70px rgba(0,0,0,.42), 0 18px 38px rgba(0,0,0,.30);
}
/* Zona de subida: héroe solo cuando hay un único botón. Las páginas con más
   de un botón llevan .boton-pequeno explícitamente en la plantilla. */
html[data-tema="oscuro"] body.eg-interior .zona-botones .boton:not(.boton-pequeno):only-child,
html[data-tema="oscuro"] body.eg-interior .zona-botones button:not(.boton-pequeno):only-child{
  min-height:52px!important; padding:12px 28px!important; font-size:15px!important; border-radius:9px!important;
}


/* =====================================================================
   v684 — FONDO ANIMADO + ZONA DE SUBIDA COMÚN
   ===================================================================== */
html[data-tema="oscuro"] body > .eg-fondo-video{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;object-fit:cover;z-index:-4;pointer-events:none;opacity:.66;filter:brightness(.62) contrast(1.16) saturate(.9);margin:0;padding:0;border:0;}
html[data-tema="claro"] .eg-fondo-video{display:none;}
@media(prefers-reduced-motion:reduce){.eg-fondo-video{display:none;}}
html[data-tema="oscuro"] body.eg-interior::after{background:radial-gradient(ellipse at 50% 22%,rgba(0,0,0,.02) 0 24%,rgba(0,0,0,.17) 66%,rgba(0,0,0,.46) 100%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.25));}
html[data-tema="oscuro"] body.eg-interior .zona-suelta{min-height:270px;padding:28px 24px!important;border:1px dashed rgba(255,138,32,.72)!important;border-radius:16px!important;background:radial-gradient(circle at 50% 24%,rgba(255,127,20,.08),transparent 31%),linear-gradient(180deg,rgba(8,11,13,.96),rgba(4,6,7,.97))!important;box-shadow:inset 0 0 60px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.25)!important;}
html[data-tema="oscuro"] body.eg-interior .zona-icono{width:64px;height:64px;margin:0 auto 10px;color:#ff8a20;}
html[data-tema="oscuro"] body.eg-interior .zona-titulo{font-size:20px;font-weight:820;color:#f3f3f3;margin-top:8px;}
html[data-tema="oscuro"] body.eg-interior .zona-texto{color:#b8bcc1;line-height:1.55;}
html[data-tema="oscuro"] body.eg-interior .zona-botones{margin-top:20px;}
html[data-tema="oscuro"] body.eg-interior .zona-botones>button,html[data-tema="oscuro"] body.eg-interior .zona-botones>.boton,html[data-tema="oscuro"] body.eg-interior .zona-botones>.boton-claro{box-shadow:none!important;}
/* En una zona con varios controles todos son compactos; solo el único botón es héroe. */
html[data-tema="oscuro"] body.eg-interior .zona-botones>button:not(:only-child),html[data-tema="oscuro"] body.eg-interior .zona-botones>.boton:not(:only-child),html[data-tema="oscuro"] body.eg-interior .zona-botones>.boton-claro:not(:only-child){min-height:34px!important;padding:6px 11px!important;font-size:12px!important;border-radius:7px!important;}
html[data-tema="oscuro"] body.eg-interior .zona-botones>button:only-child,html[data-tema="oscuro"] body.eg-interior .zona-botones>.boton:only-child{min-height:52px!important;padding:12px 28px!important;font-size:15px!important;}
/* Separación segura entre títulos grandes y el primer panel: evita cortar descendentes. */
html[data-tema="oscuro"] body.eg-interior .contenedor>h1{margin-bottom:20px!important;line-height:1.04!important;}
/* Formularios de filtro: controles de la misma fila = 34px. */
html[data-tema="oscuro"] body.eg-interior .filtros input:not([type=checkbox]):not([type=radio]),html[data-tema="oscuro"] body.eg-interior .filtros select,html[data-tema="oscuro"] body.eg-interior .filtros button{min-height:34px!important;}


/* =====================================================================
   v686 — EL VIDEO ES EL FONDO REAL. SIN SEGUNDO FONDO NI ENGRANAJES CSS.
   =====================================================================
   v684/v685 dejaron coexistiendo tres capas: imagen estática en body::before,
   viñeta en body::after y el MP4 con opacidad/filtro. Eso hacía que el vídeo
   se viera traslúcido y mezclado con otra composición mecánica.

   Desde v686, en páginas interiores oscuras:
     1) el MP4 ocupa por sí solo todo el viewport;
     2) no hay imagen estática debajo ni engranajes procedurales encima;
     3) no se reduce opacidad, brillo ni saturación del vídeo;
     4) los paneles, no una máscara global, garantizan la legibilidad.
   ===================================================================== */
html[data-tema="oscuro"] body::before,
html[data-tema="oscuro"] body::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

html[data-tema="oscuro"] #egDecoracionFondo{
  display:none!important;
}

html[data-tema="oscuro"] body > .eg-fondo-video{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:-1!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  pointer-events:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* El fondo del body queda transparente para no tapar el MP4. */
html[data-tema="oscuro"] body{
  background:transparent!important;
}

/* El html conserva negro puro como respaldo durante la primera carga del MP4. */
html[data-tema="oscuro"]{
  background:#000!important;
}

/* ========================================================================
   v687 — CABECERA Y MENÚ CON EL MISMO SISTEMA DE BOTÓN VACÍO/ILUMINADO
   ------------------------------------------------------------------------
   Elimina el relieve heredado de .boton-cabecera y .menu-cat-boton.
   Estos controles pasan al mismo lenguaje visual aprobado para v684:
   superficie plana oscura, borde visible, brillo solo en hover/activo.
   ======================================================================== */
html[data-tema="oscuro"] .boton-cabecera,
html[data-tema="oscuro"] .menu-cat-boton{
  min-height:42px!important;
  padding:9px 15px!important;
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
  background:rgba(12,13,15,.78)!important;
  border:1px solid rgba(229,231,235,.22)!important;
  color:#d9dde2!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease!important;
}

/* La categoría actual se reconoce por luz naranja, no por un bloque en relieve. */
html[data-tema="oscuro"] .menu-cat-boton.activo{
  background:rgba(255,138,0,.08)!important;
  border-color:rgba(255,138,0,.78)!important;
  color:#ff9b32!important;
  box-shadow:0 0 16px rgba(255,138,0,.12)!important;
}

/* Apagar conserva semántica roja pero con la misma construcción plana. */
html[data-tema="oscuro"] .boton-cabecera.boton-apagar-cab{
  background:rgba(239,68,68,.07)!important;
  border-color:rgba(239,68,68,.62)!important;
  color:#ff8178!important;
  box-shadow:none!important;
}

@media(hover:hover){
  html[data-tema="oscuro"] .boton-cabecera:hover,
  html[data-tema="oscuro"] .menu-cat-boton:hover{
    background:rgba(255,255,255,.045)!important;
    border-color:rgba(229,231,235,.42)!important;
    color:#fff!important;
    box-shadow:0 0 15px rgba(255,255,255,.055)!important;
    transform:none!important;
  }
  html[data-tema="oscuro"] .menu-cat-boton.activo:hover{
    background:rgba(255,138,0,.13)!important;
    border-color:#ff8a00!important;
    color:#fff!important;
    box-shadow:0 0 19px rgba(255,138,0,.18)!important;
  }
  html[data-tema="oscuro"] .boton-cabecera.boton-apagar-cab:hover{
    background:rgba(239,68,68,.13)!important;
    border-color:#ef4444!important;
    color:#fff!important;
    box-shadow:0 0 18px rgba(239,68,68,.16)!important;
  }
}

/* Los SVG de tema, cerrar sesión y apagar siguen el color del botón. */
html[data-tema="oscuro"] .boton-cabecera .ic-cabecera,
html[data-tema="oscuro"] .boton-cabecera .ic-apagar{
  flex:0 0 auto;
  filter:none!important;
}

/* ========================================================================
   v688 — TEXTO DE SUBIDA UNIFICADO
   ------------------------------------------------------------------------
   Los nombres de paquete dentro de las zonas de arrastre no cambian de
   tipografía ni de naranja por estar escritos con <code>. En estas zonas
   son una etiqueta de interfaz, no un bloque de código fuente.
   ======================================================================== */
html[data-tema="oscuro"] body.eg-interior .zona-suelta code,
html[data-tema="oscuro"] body.eg-interior .zona-suelta .archivo-nombre,
html[data-tema="oscuro"] body.eg-interior .zona-suelta .nombre-archivo{
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:750!important;
  color:#ff8a20!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
}


/* ========================================================================
   v689 — RESPONSIVE MÓVIL CONSOLIDADO
   ------------------------------------------------------------------------
   En móvil no se cambia el lenguaje visual: se reorganiza el mismo sistema
   para que cabecera, menús, botones, formularios, paneles y zonas de subida
   no se corten, desborden ni queden apretados.
   ======================================================================== */
@media (max-width: 760px){
  html, body{overflow-x:hidden!important;}
  body.eg-interior .contenedor{
    width:100%!important;
    max-width:none!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Cabecera: marca arriba; acciones debajo ocupando todo el ancho. */
  body.eg-interior .barra-superior{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px 12px!important;
  }
  body.eg-interior .barra-marca{
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    line-height:1.2!important;
    font-size:11px!important;
  }
  body.eg-interior .barra-titulo{display:none!important;}
  body.eg-interior .barra-acciones{
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.eg-interior .barra-acciones .aviso-solicitudes{
    grid-column:1/-1!important;
    margin:0!important;
    width:100%!important;
    text-align:center!important;
  }
  body.eg-interior .boton-cabecera{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 8px!important;
    gap:6px!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:normal!important;
    text-align:center!important;
  }
  body.eg-interior .boton-cabecera .ic-cabecera,
  body.eg-interior .boton-cabecera .ic-apagar{
    width:16px!important;
    height:16px!important;
    margin:0!important;
  }

  /* Categorías: visibles, con salto de línea; nunca una tira cortada. */
  body.eg-interior .barra-nav{
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    padding:8px 12px 10px!important;
    overflow:visible!important;
  }
  body.eg-interior .menu-cat{flex:1 1 calc(33.333% - 6px)!important;min-width:92px!important;}
  body.eg-interior .menu-cat-boton{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  body.eg-interior .menu-desplegable{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:min(64vh,520px)!important;
    overflow-y:auto!important;
    z-index:1200!important;
  }

  /* Tipografía y paneles: aire sin perder superficie útil. */
  html[data-tema="oscuro"] body.eg-interior .contenedor>h1,
  body.eg-interior .contenedor>h1{
    font-size:clamp(31px,10vw,40px)!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
    margin:18px 0 15px!important;
    overflow-wrap:anywhere!important;
  }
  body.eg-interior .panel,
  body.eg-interior .caja,
  body.eg-interior .tarjeta{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:12px!important;
  }
  body.eg-interior h2{overflow-wrap:anywhere;}

  /* Formularios: ningún campo puede forzar ancho de escritorio. */
  body.eg-interior input:not([type="checkbox"]):not([type="radio"]),
  body.eg-interior select,
  body.eg-interior textarea{
    max-width:100%!important;
    min-width:0!important;
  }
  body.eg-interior .filtros,
  body.eg-interior .fila-busqueda{
    width:100%!important;
    align-items:stretch!important;
  }
  body.eg-interior .filtros>*{max-width:100%!important;}
  body.eg-interior .filtros label{min-width:0!important;}

  /* Zonas de arrastre: mismo diseño, adaptado al pulgar. */
  html[data-tema="oscuro"] body.eg-interior .zona-suelta{
    min-height:220px!important;
    padding:24px 14px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html[data-tema="oscuro"] body.eg-interior .zona-icono{width:54px!important;height:54px!important;}
  html[data-tema="oscuro"] body.eg-interior .zona-titulo{
    font-size:18px!important;
    line-height:1.22!important;
    overflow-wrap:anywhere!important;
  }
  html[data-tema="oscuro"] body.eg-interior .zona-texto{font-size:13px!important;}
  body.eg-interior .zona-botones{
    width:100%!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  body.eg-interior .zona-botones>*{max-width:100%!important;}
  body.eg-interior .zona-botones>:only-child{width:min(100%,320px)!important;}

  /* Tablas y bloques anchos: scroll horizontal local, nunca toda la página. */
  body.eg-interior table{min-width:620px;}
  body.eg-interior .panel:has(> table),
  body.eg-interior .caja:has(> table){overflow-x:auto!important;}
  body.eg-interior pre,
  body.eg-interior code{overflow-wrap:anywhere;word-break:break-word;}

  /* Barra de tarea: botones debajo si el nombre ocupa demasiado. */
  #tarea .interior{max-width:calc(100vw - 16px)!important;padding:10px!important;}
  #tarea .linea{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
  #tarea .linea strong{flex:1 1 100%!important;min-width:0!important;}
  #tarea .mensaje{overflow-wrap:anywhere!important;}

  /* Aviso del vigilante: no tapa media pantalla ni desborda. */
  #avisoVigilante .interior{
    width:100%!important;
    padding:10px 12px!important;
    gap:8px!important;
  }
  #avisoVigilante .texto{min-width:0!important;width:100%!important;font-size:13px!important;}
  #avisoVigilante .acciones{width:100%!important;justify-content:flex-end!important;}
}

@media (max-width: 430px){
  body.eg-interior .barra-acciones{grid-template-columns:1fr!important;}
  body.eg-interior .boton-cabecera{min-height:38px!important;}
  body.eg-interior .menu-cat{flex:1 1 calc(50% - 6px)!important;min-width:0!important;}
  body.eg-interior .menu-cat:last-child{flex-basis:100%!important;}
  body.eg-interior .contenedor{padding-left:10px!important;padding-right:10px!important;}
  body.eg-interior .panel,body.eg-interior .caja,body.eg-interior .tarjeta{padding:12px!important;}
}

/* =====================================================================
   v691 — LEGIBILIDAD COMÚN + FONDO DE VÍDEO + MANDO EN MÓVIL
   ===================================================================== */

/* El vídeo debe verse como fondo, pero NUNCA a costa de la lectura.
   Cabecera y menú son superficies de interfaz: opacas y coherentes. */
html[data-tema="oscuro"] body.eg-interior .barra-superior,
html[data-tema="oscuro"] body.eg-interior .menu-categorias,
html[data-tema="oscuro"] body.eg-interior .barra-nav{
  background:rgba(7,8,9,.96)!important;
  backdrop-filter:blur(12px) saturate(1.05);
}
html[data-tema="oscuro"] body.eg-interior .menu-desplegable,
html[data-tema="oscuro"] body.eg-interior .menu-cat.abierto .menu-desplegable{
  background:#08090a!important;
  border-color:#30343a!important;
  box-shadow:0 18px 44px rgba(0,0,0,.78)!important;
  backdrop-filter:none!important;
}

/* Textos de introducción / ayuda que estaban directamente sobre el vídeo.
   Solo se encajonan los textos SUELTOS del contenedor; la ayuda que ya vive
   dentro de .panel, tablas o tarjetas conserva su formato compacto. */
html[data-tema="oscuro"] body.eg-interior .contenedor > p.ayuda,
html[data-tema="oscuro"] body.eg-interior .contenedor > div.ayuda,
html[data-tema="oscuro"] body.eg-interior .contenedor > p.muted,
html[data-tema="oscuro"] body.eg-interior .contenedor > div.muted,
html[data-tema="oscuro"] body.eg-interior .contenedor > p.ds-muted,
html[data-tema="oscuro"] body.eg-interior .contenedor > div.ds-muted,
html[data-tema="oscuro"] body.eg-interior .contenedor > h1 + p:not(.panel),
html[data-tema="oscuro"] body.eg-interior .contenedor > h2 + p:not(.panel){
  display:block;
  max-width:100%;
  padding:11px 14px;
  margin-top:8px;
  margin-bottom:14px;
  color:#c8cbd0!important;
  background:rgba(8,9,10,.94)!important;
  border:1px solid rgba(229,231,235,.14);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.26);
}

/* Las zonas de subida comparten el mismo icono semántico: flecha hacia
   la bandeja. El SVG se corrige en las plantillas; esta regla unifica brillo. */
html[data-tema="oscuro"] body.eg-interior .zona-icono{
  color:#ff8a20!important;
  filter:drop-shadow(0 0 10px rgba(255,138,32,.30));
}
html[data-tema="oscuro"] body.eg-interior .zona-icono svg{
  overflow:visible;
}

/* Mando: la entrada debe ser alcanzable también desde móvil. Al formar parte
   del menú Índice usa la misma distribución responsive que el resto. */
@media (max-width:700px){
  body.eg-interior .menu-desplegable a[href="/buscador/mando"]{
    display:flex!important;
  }
}


/* ======================================================================
   v692 — MINI YOUTUBE EN /canales
   Se reutilizan datos, rutas y miniaturas reales del índice. No crea una
   segunda aplicación ni una segunda base de datos.
   ====================================================================== */
.eg-mini-youtube{display:block;margin:0 0 28px;}
.eg-mini-youtube[hidden],#canalesGestion[hidden]{display:none!important;}
.eg-mini-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;}
.eg-mini-tab{gap:8px;}
.eg-mini-tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.eg-mini-tab.activo{border-color:rgba(255,138,32,.72)!important;color:#ffb347!important;background:rgba(255,138,32,.08)!important;box-shadow:0 0 18px rgba(255,138,32,.16)!important;}
.eg-mini-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:28px;align-items:end;padding:26px 28px;margin-bottom:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(16,18,20,.96),rgba(5,6,7,.97));box-shadow:0 24px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06);}
.eg-mini-hero h1{margin:2px 0 7px!important;font-size:clamp(38px,5vw,66px)!important;line-height:.98!important;letter-spacing:-.045em!important;}
.eg-mini-hero p{margin:0;color:#b8b3aa;font-size:15px;}
.eg-mini-kicker{display:block;color:#ff9a32;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;}
.eg-mini-busqueda{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:46px;padding:5px 6px 5px 13px;border:1px solid rgba(255,138,32,.34);border-radius:12px;background:rgba(0,0,0,.46);}
.eg-mini-busqueda svg{width:18px;height:18px;fill:none;stroke:#a9a49c;stroke-width:2;stroke-linecap:round;}
.eg-mini-busqueda input{min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#f3f0ea!important;padding:7px 4px!important;outline:none;}
.eg-mini-canales{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 28px;}
.eg-mini-canal{display:flex;align-items:center;gap:11px;min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(10,11,12,.91);text-decoration:none!important;color:#f1eee9!important;transition:border-color .15s ease,transform .15s ease,background .15s ease;}
.eg-mini-canal:hover{transform:translateY(-1px);border-color:rgba(255,138,32,.48);background:rgba(255,138,32,.055);}
.eg-mini-avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid rgba(255,138,32,.45);background:radial-gradient(circle at 35% 30%,#36200e,#111 68%);color:#ffb347;font-weight:900;box-shadow:0 0 18px rgba(255,138,32,.12);}
.eg-mini-canal-texto{min-width:0;display:flex;flex-direction:column;gap:2px;}
.eg-mini-canal-texto strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.eg-mini-canal-texto small{color:#928d85;font-size:11px;}
.eg-mini-seccion-cabecera{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 2px 12px;}
.eg-mini-seccion-cabecera h2{margin:0;font-size:28px;}
.eg-mini-contador{color:#9c978f;font-size:12px;}
.eg-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.eg-mini-video{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,rgba(17,18,19,.96),rgba(7,8,9,.97));box-shadow:0 16px 34px rgba(0,0,0,.28);transition:transform .15s ease,border-color .15s ease;}
.eg-mini-video:hover{transform:translateY(-2px);border-color:rgba(255,138,32,.38);}
.eg-mini-thumb{display:block;position:relative;aspect-ratio:16/9;background:#090909;overflow:hidden;}
.eg-mini-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .22s ease;}
.eg-mini-video:hover .eg-mini-thumb img{transform:scale(1.025);}
.eg-mini-thumb-fallo{position:absolute;inset:0;display:grid;place-items:center;color:#817d76;font-size:12px;background:#0a0a0a;}
.eg-mini-duracion{position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.82);color:#fff;font-size:10.5px;font-weight:800;}
.eg-mini-video-cuerpo{padding:11px 12px 12px;}
.eg-mini-video-titulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;color:#f4f1ec!important;text-decoration:none!important;font-size:13.5px;font-weight:780;line-height:1.38;}
.eg-mini-video-canal{display:block;margin-top:7px;color:#a8a39b!important;text-decoration:none!important;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eg-mini-video-canal:hover{color:#ffb347!important;}
.eg-mini-video-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;color:#817c74;font-size:10.5px;}
.eg-mini-video-meta .sello{font-size:9px;padding:2px 6px;border:1px solid rgba(255,138,32,.28);background:rgba(255,138,32,.08);color:#ffb347;}
@media(max-width:1050px){.eg-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.eg-mini-hero{grid-template-columns:1fr;align-items:start;}.eg-mini-busqueda{max-width:none;}}
@media(max-width:720px){.eg-mini-hero{padding:20px 18px;border-radius:15px;}.eg-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.eg-mini-canales{display:flex;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.eg-mini-canal{min-width:178px;}.eg-mini-busqueda{grid-template-columns:18px minmax(0,1fr);padding:7px 10px}.eg-mini-busqueda button{grid-column:1/-1;width:100%;}.eg-mini-seccion-cabecera h2{font-size:24px;}}
@media(max-width:430px){.eg-mini-grid{grid-template-columns:1fr;}.eg-mini-video-titulo{min-height:auto;}.eg-mini-tabs .boton{flex:1 1 0;}.eg-mini-hero h1{font-size:40px!important;}}

/* v692 — la ficha de un canal comparte el mismo lenguaje que Mini YouTube. */
.eg-mini-canal-cabecera{padding:20px 22px;margin:8px 0 12px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:linear-gradient(145deg,rgba(16,18,20,.96),rgba(5,6,7,.97));box-shadow:0 18px 42px rgba(0,0,0,.3);}
.eg-mini-canal-cabecera h1{font-size:clamp(34px,4.4vw,58px)!important;line-height:1!important;letter-spacing:-.035em!important;}
.rejilla.eg-mini-grid.eg-mini-canal-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin-top:16px!important;}
.tarjeta-video.eg-mini-video{border-color:rgba(255,255,255,.10)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(17,18,19,.96),rgba(7,8,9,.97))!important;box-shadow:0 16px 34px rgba(0,0,0,.28)!important;}
.tarjeta-video.eg-mini-video .foto.eg-mini-thumb{background:#090909!important;}
.tarjeta-video.eg-mini-video .cuerpo.eg-mini-video-cuerpo{padding:11px 12px 12px!important;}
.tarjeta-video.eg-mini-video h3{font-size:13.5px!important;font-weight:780!important;line-height:1.38!important;margin-bottom:7px!important;}
@media(max-width:1050px){.rejilla.eg-mini-grid.eg-mini-canal-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:720px){.rejilla.eg-mini-grid.eg-mini-canal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}}
@media(max-width:430px){.rejilla.eg-mini-grid.eg-mini-canal-grid{grid-template-columns:1fr!important;}}