/* Layer One TV · portal. Dirección «Living»: pensado desde el sillón; lo que se toca tiene cuerpo y
   bordes blandos (14 px). Rojo de marca sólo en el cromo (línea de arriba, logo, ítem activo).
   El foco (teclado o control remoto) es un anillo azul que no se confunde con la marca ni con un estado. */
:root{
  --l0:#0A0F14; --l1:#111921; --l2:#1A242E; --l3:#243140; --filete:#2A3744; --filete-suave:#18222C;
  --tinta:#EEF2F6; --tenue:#97A5B3; --apagada:#6B7987;
  --marca:#E3304A; --foco:#7FB2FF;
  --atencion:#E3A63A; --bien:#3CC08C; --apagado:#6B7987;
  --r:14px; --r2:10px;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --marca-letra:'Archivo','Figtree',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--l0);color:var(--tinta);font:16px/1.45 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
h1{font-size:1.5rem;margin:0;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.125rem;margin:0 0 .75rem;font-weight:700}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:var(--r2)}
.mono{font-family:var(--mono);font-size:.875em}
.tenue{color:var(--tenue)} .apagada{color:var(--apagada)}

/* Cabecera: línea de marca arriba, logo, menú en una franja; en pantallas angostas pasa a «Menú» */
.cab{border-top:3px solid var(--marca);background:var(--l0);position:sticky;top:0;z-index:20}
.cab-in{display:flex;align-items:center;gap:14px;padding:10px 20px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--marca-letra);font-weight:750;font-stretch:112%;letter-spacing:-.01em;white-space:nowrap;border-radius:var(--r2)}
.marca img{width:36px;height:36px;object-fit:contain}
/* Logo de una empresa: logotipo ancho (sin el nombre al lado) y placa clara si sobre oscuro no se lee */
.marca img.logo-ancho{width:auto;height:32px;max-width:180px}
.marca img.placa{background:#F4F6F8;border-radius:8px;padding:3px}
.marca img.logo-ancho.placa{padding:4px 8px;height:34px}
.nav{display:flex;gap:2px;margin-left:8px;background:var(--l1);border-radius:12px;padding:4px}
.nav a{display:flex;align-items:center;min-height:40px;padding:0 14px;text-decoration:none;color:var(--tenue);border-radius:9px;position:relative;font-weight:500;white-space:nowrap}
.nav a.activo{color:var(--tinta);background:var(--l2)}
.nav a.activo::before{content:"";position:absolute;left:14px;right:14px;top:4px;height:2px;border-radius:1px;background:var(--marca)}
.yo{display:flex;align-items:center;gap:12px;margin-left:auto}
.yo .quien{color:var(--tenue);font-size:.875rem;text-align:right;line-height:1.25}
.btn.menu-btn{display:none}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--tinta)}}
@media (max-width:1060px){
  .btn.menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:12px;right:12px;top:calc(100% - 4px);flex-direction:column;margin:0;padding:6px;border:1px solid var(--filete);box-shadow:0 16px 40px #0008}
  .nav a{min-height:44px}
  .nav a.activo::before{left:0;top:10px;bottom:10px;right:auto;width:3px;height:auto}
  .nav.abierta{display:flex}
  .yo .quien{display:none}
  .cab-in{padding:8px 16px}
}

/* Botones: 44 px, cuerpo lleno; el principal es tinta */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r2);border:0;background:var(--l2);color:var(--tinta);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn.principal{background:var(--tinta);color:var(--l0)}
.btn.chico{min-height:38px;padding:0 14px;font-size:.9375rem}
.btn[disabled]{opacity:.5;cursor:default}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--l3)}.btn.principal:hover{background:#fff}}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .12s cubic-bezier(.2,.7,.2,1)}.btn:active{transform:scale(.97)}}
.fila-btn{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}

main.pagina{max-width:1240px;margin:0 auto;padding:20px 20px 56px}
@media (max-width:600px){main.pagina{padding:14px 16px 40px}}
.encabezado{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.recuento{color:var(--tenue);font-size:.9375rem}

/* Avisos de resultado */
.aviso{padding:12px 16px;border-radius:var(--r2);background:var(--l1);border-left:4px solid var(--bien);margin-bottom:16px}
.aviso.error{border-left-color:var(--atencion)}
/* Estado: punto + palabra; apagado con punto hueco */
.estado{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.estado::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bien);flex:none}
.estado.atencion::before{background:var(--atencion)}
.estado.apagado::before{background:none;border:2px solid var(--apagado)}

/* Formularios (campos de 16 px: el teléfono no hace zoom) */
label{display:block;color:var(--tenue);font-size:.9375rem;margin:16px 0 6px}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],input[type=url],input[type=search],select,textarea{
  width:100%;min-height:44px;padding:10px 14px;border-radius:var(--r2);border:1px solid transparent;background:var(--l2);color:var(--tinta);font:inherit;font-size:16px}
input::placeholder,textarea::placeholder{color:var(--apagada)}
textarea{min-height:96px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--foco);outline-offset:1px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--tinta);font-size:1rem;margin:6px 0}
.check input{width:20px;height:20px;accent-color:var(--foco)}
.error-campo{color:var(--atencion);font-size:.875rem;margin-top:4px}
.ayuda{color:var(--tenue);font-size:.875rem;margin-top:6px}
.tarjeta{background:var(--l1);border-radius:16px;padding:20px}
.form{max-width:680px}
.rejilla2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
@media (max-width:600px){.rejilla2{grid-template-columns:minmax(0,1fr)}.tarjeta{padding:16px}}
.opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.opciones label{margin:0}
.opcion{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r2);background:var(--l2);color:var(--tinta);cursor:pointer}
.opcion:has(input:checked){background:var(--l3);box-shadow:inset 0 0 0 2px var(--tinta)}
.opcion input{accent-color:var(--tinta)}

/* Listas: tabla ordenable en la PC, renglones apilados en el celular */
.tabla{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabla th{text-align:left;font-weight:500;color:var(--tenue);font-size:.875rem;padding:6px 12px 8px 0;white-space:nowrap}
.tabla th a{text-decoration:none;border-radius:6px}
.tabla th a.orden{color:var(--tinta)}
.tabla th a.orden::after{content:" ↑"} .tabla th a.orden.desc::after{content:" ↓"}
.tabla td{padding:12px 12px 12px 0;border-top:1px solid var(--filete-suave);vertical-align:top}
@media (hover:hover) and (pointer:fine){.tabla tbody tr:hover td{background:var(--l1)}}
@media (max-width:760px){
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr{border-top:1px solid var(--filete-suave);padding:12px 0}
  .tabla td{border:0;padding:2px 0}
  /* Los datos secundarios van en renglón corrido */
  .tabla td[data-r]{display:inline;font-size:.875rem;color:var(--tenue)}
  .tabla td[data-r]+td[data-r]::before{content:" · "}
  .tabla td[data-r] .estado{color:var(--tinta)}
  .tabla td:last-child:not([data-r]){display:block;margin-top:8px}
}

/* Ventana de aviso (con sonido) */
.ventana-fondo{position:fixed;inset:0;background:rgba(6,9,12,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.ventana{background:var(--l1);border-top:3px solid var(--marca);border-radius:20px;max-width:460px;width:100%;padding:22px;box-shadow:0 24px 60px #000a}
.ventana p{margin:.5rem 0 1.1rem;color:var(--tinta)}
@media (prefers-reduced-motion:no-preference){.ventana{animation:entra .22s cubic-bezier(.2,.7,.2,1)}@keyframes entra{from{transform:translateY(10px);opacity:0}}}
@media (prefers-reduced-motion:reduce){.ventana{animation:funde .2s ease-out}@keyframes funde{from{opacity:0}}}

/* Barra de avance de un programa (lo transcurrido de su horario) */
.avance{height:6px;background:var(--l3);border-radius:3px;overflow:hidden}
.avance i{display:block;height:100%;background:var(--tinta);border-radius:3px}

/* Crédito y novedades */
.credito{color:var(--apagada);font-size:.875rem;line-height:1.6}
.credito a{color:var(--tenue)}
.enlace-novedades.sin-ver::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tinta);margin-left:6px;vertical-align:middle}
.pie{padding:18px 16px;text-align:center;margin-top:24px}
.novedades{list-style:none;margin:0;padding:0}
.novedades li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--filete-suave)}
.novedades li:first-child{border-top:0}
.novedades .tipo{flex:none;width:4.6em;color:var(--tenue);font-size:.875rem;padding-top:1px}

/* Equipos con sesión, barras de estadísticas, paquetes y logos */
.fila-equipo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--filete-suave)}
.fila-equipo:first-of-type{border-top:0}
a.quien{text-decoration:none}
a.quien:hover{color:var(--tinta)}
.barra-dato{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) 5.5rem;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--filete-suave)}
.barra-dato .b{height:10px;background:var(--l2);border-radius:5px;overflow:hidden}
.barra-dato .b i{display:block;height:100%;background:var(--tinta);border-radius:5px}
.barra-dato .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--tenue);font-size:.875rem}
.barra-dato .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.horas{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:120px;margin-top:8px}
.horas div{background:var(--l2);border-radius:3px 3px 0 0;position:relative;min-height:2px}
.horas div i{position:absolute;inset:auto 0 0 0;background:var(--tinta);border-radius:3px 3px 0 0}
.horas-eje{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;font-size:.6875rem;color:var(--apagada);text-align:center;margin-top:4px}
.grupo-canales{border-top:1px solid var(--filete-suave);padding:10px 0}
.grupo-canales > .check{font-weight:600}
.grupo-canales .lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 12px;padding-left:28px}
.logos-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.logo-canal{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;background:var(--l1);border-radius:12px;padding:10px}
.logo-canal .img{width:72px;height:44px;background:var(--l2);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--apagada);font-weight:700;font-size:.75rem}
.logo-canal .img img{max-width:100%;max-height:100%}
.logo-canal form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.logo-canal input[type=file]{font-size:.75rem;max-width:150px;min-height:0;padding:4px;background:none;border:0}
@media (max-width:640px){.barra-dato{grid-template-columns:minmax(0,1fr) 4.5rem}.barra-dato .b{grid-column:1 / -1;grid-row:2}}
/* Licencias de una empresa: «x de y» como barra con su total escrito (en tinta, nunca en color de marca) */
.licencias{display:flex;align-items:center;gap:10px;margin-top:8px;font-variant-numeric:tabular-nums}
.licencias .barra{flex:1;max-width:220px;height:8px;background:var(--l2);border-radius:4px;overflow:hidden}
.licencias .barra span{display:block;height:100%;background:var(--tinta);border-radius:4px}
.licencias.llena .barra span{background:var(--atencion)}
/* Empresas: muestra del color y logo */
.muestra{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid var(--filete)}
.logo-empresa{width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--l2);padding:4px}
.logo-empresa.ancho{width:120px}
.logo-empresa.placa{background:#F4F6F8}
.paleta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.paleta label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--filete);border-radius:var(--r2);cursor:pointer;margin:0}
.paleta input{position:absolute;opacity:0;width:1px;height:1px}
.paleta input:checked+span+span{font-weight:700}
.paleta label:has(input:checked){border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.paleta label:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:2px}
.paleta .muestra{margin:0}
.vista-marca{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:3px solid var(--vm, #E3304A);background:var(--l0);border-radius:var(--r2);font-family:var(--marca-letra);font-weight:750;font-stretch:112%}
.vista-marca img{width:36px;height:36px;object-fit:contain}
.vista-marca img.logo-ancho{width:auto;height:32px;max-width:180px}
.vista-marca img.placa{background:#F4F6F8;border-radius:8px;padding:3px}
.vista-marca img.logo-ancho.placa{padding:4px 8px;height:34px}