:root {
  --negro: #050407; --panel: #0b0a0e; --rosa: #e86fa4; --violeta: #b14fe0;
  --verde: #31d67a; --ambar: #c9a227; --linea: #2a2140;
  --texto: #f0e8ef; --muted: #aa9cad;
  --mono: Fixedsys, "Lucida Console", "Courier New", monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { min-width: 280px; min-height: 100%; background: var(--negro); color-scheme: dark; }
body { min-height: 100vh; margin: 0; color: var(--texto); background: linear-gradient(rgba(42,33,64,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(42,33,64,.1) 1px,transparent 1px),var(--negro); background-size: 24px 24px; font-family: var(--mono); }
button, input, select { font: inherit; }
button, select, input[type="range"] { accent-color: var(--rosa); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.salto { position: fixed; top: -5rem; left: 1rem; z-index: 50; padding: .75rem 1rem; color: var(--negro); background: var(--verde); font-weight: 800; }
.salto:focus { top: 1rem; }
.motor { width: min(1220px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 54px; }
.arte { font-family: var(--mono); }
.cabecera { display: flex; justify-content: space-between; gap: 28px; align-items: end; padding: 22px 24px; border: 1px solid var(--rosa); border-bottom-width: 5px; background: var(--panel); box-shadow: 8px 8px 0 var(--linea); }
.ceja { margin: 0 0 10px; color: var(--rosa); font-size: .75rem; letter-spacing: .06em; }
h1 { margin: 0; color: var(--rosa); font-size: clamp(2.8rem, 8vw, 6.8rem); line-height: .82; letter-spacing: -.09em; }
.bajada { max-width: 690px; margin: 18px 0 0; font-size: .9rem; line-height: 1.6; }
.sellos { display: grid; gap: 7px; min-width: 170px; }
.sellos span { padding: 7px 9px; border: 1px solid var(--linea); color: var(--verde); background: var(--negro); font-size: .68rem; font-weight: 800; text-align: center; }
.sellos span:last-child { color: var(--ambar); border-color: var(--ambar); }
.autoridad { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 28px 0; padding: 11px 14px; border-left: 5px solid var(--ambar); color: var(--ambar); background: rgba(201,162,39,.07); font-size: .75rem; line-height: 1.5; }
.autoridad .arte { margin-left: auto; }
.panel { margin-top: 26px; border: 1px solid var(--linea); background: var(--panel); box-shadow: 6px 6px 0 var(--linea); }
.panel--visor { border-color: var(--rosa); }
.panel--plantillas { border-color: var(--verde); }
.panel--plantillas .numero { background: var(--verde); }
.entrada-plantillas { display: grid; gap: 7px; padding: 15px 18px; border-bottom: 1px solid var(--linea); color: var(--muted); font-size: .74rem; line-height: 1.5; }
.entrada-plantillas strong { color: var(--verde); font-size: .8rem; }
.grupo-plantillas { border-bottom: 1px solid var(--linea); }
.grupo-plantillas__titulo { margin: 0; padding: 11px 18px; border-bottom: 1px solid var(--linea); color: var(--verde); background: rgba(49,214,122,.05); font-size: .7rem; letter-spacing: .11em; }
.plantillas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.plantillas--primer-mes { grid-template-columns: 1fr; }
.plantilla { display: grid; min-height: 270px; align-content: start; gap: 13px; padding: 18px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.plantillas--primer-mes .plantilla { min-height: 0; border-right: 0; }
.plantilla:nth-child(2n) { border-right: 0; }
.plantilla h3 { margin: 0; color: var(--rosa); font-size: 1rem; line-height: 1.25; }
.plantilla__linea { min-height: 3.3em; margin: 0; color: var(--texto); font-size: .74rem; line-height: 1.55; }
.plantilla__resumen { margin: 0; padding: 8px 10px; border-left: 4px solid var(--ambar); color: var(--texto); background: rgba(201,162,39,.08); font-size: .72rem; font-weight: 900; letter-spacing: .05em; }
.plantilla__cambios { margin: 0; padding: 11px 11px 11px 28px; border: 1px solid var(--linea); color: var(--muted); background: var(--negro); font-size: .68rem; line-height: 1.65; }
.plantilla__cambios::before { content: "CAMBIÁ ESTO"; display: block; margin: 0 0 5px -16px; color: var(--verde); font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.plantilla__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.plantilla__acciones button { min-height: 44px; padding: 8px; border: 1px solid var(--rosa); color: var(--rosa); background: var(--negro); cursor: pointer; font-size: .64rem; font-weight: 900; }
.plantilla__acciones button:first-child { color: var(--negro); background: var(--rosa); }
.plantilla__acciones button:hover { color: var(--negro); border-color: var(--verde); background: var(--verde); }
.copia-estado { min-height: 2.6em; margin: 0; padding: 9px 18px; color: var(--verde); font-size: .66rem; line-height: 1.4; }
.barra-panel { display: flex; justify-content: space-between; gap: 16px; align-items: stretch; min-height: 49px; border-bottom: 1px solid var(--linea); background: var(--negro); }
.barra-panel > div { display: flex; align-items: stretch; }
.numero { display: grid; width: 48px; place-items: center; color: var(--negro); background: var(--rosa); font-size: .86rem; font-weight: 900; }
h2 { align-self: center; margin: 0; padding: 0 15px; font-size: .86rem; letter-spacing: .08em; }
.estado { align-self: center; padding: 0 14px; color: var(--verde); font-size: .68rem; font-weight: 800; }
.estado--ambar { color: var(--ambar); }
.interruptor { display: flex; align-items: center; gap: 9px; padding: 0 14px; border-left: 1px solid var(--linea); color: var(--rosa); cursor: pointer; font-size: .74rem; font-weight: 900; }
.interruptor input { width: 18px; height: 18px; margin: 0; appearance: none; border: 2px solid var(--rosa); background: var(--negro); }
.interruptor input:checked { box-shadow: inset 0 0 0 3px var(--negro); background: var(--ambar); border-color: var(--ambar); }
.interruptor:has(input:checked) { color: var(--negro); background: var(--ambar); }
.aviso-munon { display: flex; gap: 18px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--linea); color: var(--verde); background: rgba(49,214,122,.05); font-size: .7rem; line-height: 1.45; }
.aviso-munon strong { flex: 0 0 auto; }
.aviso-munon[data-completo="true"] { color: var(--ambar); background: rgba(201,162,39,.08); }
.aviso-munon code { color: inherit; font: inherit; font-weight: 900; }
















.lienzo { min-height: 470px; max-height: min(70vh, 760px); overflow: auto; background-color: #070609; background-image: linear-gradient(rgba(42,33,64,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(42,33,64,.34) 1px,transparent 1px); background-size: 24px 24px; scrollbar-color: var(--violeta) var(--negro); }
.lienzo svg { display: block; }
.lectura-paso { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); border-top: 1px solid var(--linea); }
.lectura-paso > div { min-height: 104px; padding: 15px 17px; }
.lectura-paso > div + div { border-left: 1px solid var(--linea); }
.lectura-paso strong { display: block; margin-top: 7px; color: var(--rosa); font-size: .9rem; }
.lectura-paso p { margin: 7px 0 0; font-size: .76rem; line-height: 1.45; }
.por-que { background: rgba(201,162,39,.06); }
.por-que strong { color: var(--ambar); }
.por-que small { display: block; margin-top: 8px; color: var(--muted); font-size: .62rem; }
.etiqueta { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.reproductor-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); border-bottom: 1px solid var(--linea); }
.carga, .ficha-cinta { padding: 18px; }
.ficha-cinta { border-left: 1px solid var(--linea); }
select { min-height: 42px; padding: 7px 10px; border: 1px solid var(--violeta); color: var(--texto); background: var(--negro); }
.carga > select { width: 100%; margin-top: 7px; }
.zona-archivo { display: grid; min-height: 112px; margin-top: 14px; place-content: center; gap: 8px; border: 1px dashed var(--rosa); color: var(--rosa); background: rgba(232,111,164,.04); text-align: center; cursor: pointer; }
.zona-archivo:hover, .zona-archivo[data-activa="true"] { color: var(--negro); background: var(--rosa); }
.zona-archivo small { color: inherit; }
.archivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ficha-cinta h3 { margin: 7px 0 16px; color: var(--rosa); font-size: 1.08rem; line-height: 1.35; }
.ficha-cinta dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.ficha-cinta dl div { min-width: 0; padding: 9px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.ficha-cinta dt { color: var(--muted); font-size: .58rem; }
.ficha-cinta dd { overflow-wrap: anywhere; margin: 4px 0 0; color: var(--verde); font-size: .7rem; }
.transporte { display: grid; grid-template-columns: 48px 48px minmax(130px,180px) 48px 1fr; gap: 8px; align-items: end; padding: 16px 18px 10px; }
.transporte button { min-height: 43px; border: 1px solid var(--violeta); color: var(--violeta); background: var(--negro); cursor: pointer; font-weight: 900; }
.transporte button:hover:not(:disabled) { color: var(--negro); background: var(--verde); border-color: var(--verde); }
.transporte button:disabled { opacity: .34; cursor: not-allowed; }
.transporte .boton-play { color: var(--negro); background: var(--rosa); border-color: var(--rosa); }
.velocidad { justify-self: end; display: grid; gap: 5px; color: var(--muted); font-size: .62rem; }
.velocidad select { min-width: 100px; }
.linea-tiempo { padding: 8px 18px 16px; }
.linea-tiempo label { display: flex; justify-content: space-between; color: var(--muted); font-size: .64rem; }
.linea-tiempo input { width: 100%; margin: 8px 0 0; }
.error-cinta { margin: 0 18px 16px; padding: 12px; border: 1px solid var(--rosa); border-left-width: 5px; color: var(--rosa); background: rgba(232,111,164,.07); font-size: .75rem; line-height: 1.5; }
.bitacora { display: grid; max-height: 232px; overflow: auto; margin: 0; padding: 0; border-top: 1px solid var(--linea); list-style: none; }
.bitacora li { display: grid; grid-template-columns: 80px 105px minmax(0,1fr); gap: 12px; padding: 9px 18px; border-bottom: 1px dashed var(--linea); color: var(--muted); font-size: .68rem; line-height: 1.35; }
.bitacora li[data-quieto="true"] { color: var(--ambar); background: rgba(201,162,39,.04); }
.bitacora .tipo { color: var(--violeta); font-weight: 800; }
.bitacora li[data-quieto="true"] .tipo { color: var(--ambar); }
.banco { display: grid; grid-template-columns: repeat(3,1fr); }
.banco a { position: relative; display: grid; min-height: 168px; align-content: start; gap: 8px; padding: 18px; border-right: 1px solid var(--linea); color: var(--texto); text-decoration: none; }
.banco a:last-child { border-right: 0; }
.banco a:hover { background: rgba(177,79,224,.07); box-shadow: inset 0 -5px var(--violeta); }
.banco__numero { position: absolute; top: 12px; right: 14px; color: var(--linea); font-size: 2.5rem; font-weight: 900; }
.banco strong { color: var(--rosa); }
.banco small { max-width: 24ch; color: var(--muted); line-height: 1.5; }
.banco b { align-self: end; margin-top: 20px; color: var(--verde); font-size: .68rem; }
.tabla-scroll { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .7rem; line-height: 1.45; }
th, td { padding: 12px 14px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
th { color: var(--violeta); background: var(--negro); font-size: .62rem; }
td:nth-child(1) { width: 37%; }
td:nth-child(2) { width: 18%; }
td:nth-child(3) { color: var(--muted); }
.marca { display: inline-block; padding: 3px 6px; border: 1px solid currentColor; font-size: .6rem; font-weight: 900; white-space: nowrap; }
.marca--si { color: var(--verde); } .marca--ambar { color: var(--ambar); } .marca--no { color: var(--rosa); } .marca--dev { color: var(--violeta); }
.pie { margin-top: 30px; padding: 12px; color: var(--violeta); text-align: center; font-size: .68rem; line-height: 1.6; }
@media (max-width: 760px) {
  .motor { width: min(100% - 20px,1220px); padding-top: 18px; }
  .cabecera { display: grid; padding: 18px; }
  .sellos { grid-template-columns: repeat(3,1fr); min-width: 0; }
  .autoridad .arte { display: none; }
  .reproductor-grid, .lectura-paso { grid-template-columns: 1fr; }
  .ficha-cinta { border-top: 1px solid var(--linea); border-left: 0; }
  .lectura-paso > div + div { border-top: 1px solid var(--linea); border-left: 0; }
  .banco { grid-template-columns: 1fr; }
  .plantillas { grid-template-columns: 1fr; }
  .plantilla { min-height: 0; border-right: 0; }
  .banco a { min-height: 128px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .banco a:last-child { border-bottom: 0; }
  .transporte { grid-template-columns: 45px 45px minmax(116px,1fr) 45px; }
  .velocidad { grid-column: 1/-1; justify-self: stretch; grid-template-columns: 1fr 110px; align-items: center; }
  .lienzo { min-height: 390px; }
}
@media (max-width: 440px) {
  .cabecera { box-shadow: 5px 5px 0 var(--linea); }
  .sellos { grid-template-columns: 1fr; }
  .barra-panel { min-height: 45px; }
  .numero { width: 40px; }
  h2 { padding: 0 9px; font-size: .72rem; }
  .estado { display: none; }
  .interruptor { padding: 0 9px; font-size: .64rem; }
  .aviso-munon { display: grid; gap: 5px; }
  .carga, .ficha-cinta { padding: 14px; }
  .transporte { gap: 5px; padding-inline: 10px; }
  .transporte button { padding: 0 5px; font-size: .72rem; }
  .linea-tiempo { padding-inline: 10px; }
  .bitacora li { grid-template-columns: 62px minmax(0,1fr); padding-inline: 10px; }
  .bitacora li span:last-child { grid-column: 1/-1; }
  .ficha-cinta dl { grid-template-columns: 1fr; }
  .zona-archivo .arte { font-size: .72rem; }
  .plantilla__acciones { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }