:root {
    --bg:#f4f6f9; --surface:#fff; --surface2:#eef1f6; --text:#1a1f29; --muted:#616b7a;
    --border:#dde2ea; --accent:#2f6df6; --accent-hover:#245bd6; --accent-contrast:#fff;
    --onair:#1a8f4c; --onair-bg:rgba(26,143,76,.12); --danger:#d92d3a; --danger-hover:#b91f2b;
    --danger-bg:rgba(217,45,58,.10); --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 20px rgba(20,30,50,.06);
    --radius:12px;
    --serie-1:#2a78d6; --serie-2:#eb6834; --serie-3:#1baf7a; --serie-4:#eda100;
  }
  @media (prefers-color-scheme: dark) {
    html[data-tema="auto"] :root, html[data-tema="auto"] body { color-scheme: dark; }
    html[data-tema="auto"] {
      --bg:#0e1117; --surface:#1a212c; --surface2:#232b38; --text:#e7ecf3; --muted:#9aa4b2;
      --border:#39424f; --accent:#4d8bf5; --accent-hover:#6a9df7; --accent-contrast:#0b1220;
      --onair:#3fb950; --onair-bg:rgba(63,185,80,.14); --danger:#e5484d; --danger-hover:#f2555a;
      --danger-bg:rgba(229,72,77,.16); --shadow:0 1px 3px rgba(0,0,0,.45);
      --serie-1:#3987e5; --serie-2:#d95926; --serie-3:#199e70; --serie-4:#c98500;
    }
  }
  html[data-tema="oscuro"] {
    --bg:#0e1117; --surface:#1a212c; --surface2:#232b38; --text:#e7ecf3; --muted:#9aa4b2;
      --border:#39424f; --accent:#4d8bf5; --accent-hover:#6a9df7; --accent-contrast:#0b1220;
      --onair:#3fb950; --onair-bg:rgba(63,185,80,.14); --danger:#e5484d; --danger-hover:#f2555a;
      --danger-bg:rgba(229,72,77,.16); --shadow:0 1px 3px rgba(0,0,0,.45);
      --serie-1:#3987e5; --serie-2:#d95926; --serie-3:#199e70; --serie-4:#c98500;
  }
  html[data-tema="claro"] {
    --bg:#f6f7f9; --surface:#ffffff; --surface2:#eef1f5; --text:#12161c; --muted:#5b6675;
    --border:#dfe3e8; --accent-contrast:#ffffff; --shadow:0 1px 3px rgba(16,24,40,.08);
  }
  html[data-tema="contraste"] {
    --bg:#000000; --surface:#000000; --surface2:#101010; --text:#ffffff; --muted:#e6e6e6;
    --border:#ffffff; --accent:#ffd400; --accent-hover:#ffe45c; --accent-contrast:#000000;
    --onair:#00ff66; --onair-bg:#003317; --danger:#ff6b6b; --danger-hover:#ff9a9a;
    --danger-bg:#330000; --shadow:none;
  }
  html[data-tema="contraste"] a { text-decoration: underline; }
  html[data-tema="contraste"] .btn { border-width:2px; }
  html[data-tema="contraste"] :focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
  * { box-sizing:border-box; }
  body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; margin:0; background:var(--bg); color:var(--text);
    line-height:1.5; overflow-wrap:break-word; }
  /* Barra superior fina: marca, buscador y cuenta. */
  .topbar { position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border);
    padding:.7rem 1.25rem; display:flex; align-items:center; gap:1rem; }
  .topbar .marca { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text);
    font-size:1.15rem; font-weight:800; letter-spacing:-.01em; flex:0 0 auto; }
  .topbar .marca-nombre { white-space:nowrap; }
  .topbar .logo-marca { height:30px; width:auto; max-width:150px; object-fit:contain; flex:0 0 auto; display:block; }
  .topbar .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block; }
  .topbar .searchbar { margin-left:auto; flex:0 1 320px; }
  .topbar .searchbar input { width:100%; max-width:none; padding:.5rem .8rem; font-size:.92rem; }
  .topbar .account { flex:0 0 auto; }
  /* El armazón: barra lateral fija a la izquierda, contenido a la derecha. */
  .shell { display:flex; align-items:flex-start; gap:0; }
  .sidebar { width:250px; flex:0 0 250px; padding:1rem .75rem 2rem; border-right:1px solid var(--border);
    background:var(--surface); min-height:calc(100vh - 56px); position:sticky; top:56px;
    align-self:stretch; overflow-y:auto; }
  .sidebar .side-link { display:flex; align-items:center; gap:.55rem; padding:.55rem .75rem; border-radius:9px;
    text-decoration:none; color:var(--text); font-weight:600; font-size:.93rem; margin:1px 0; }
  .sidebar .side-link:hover { background:var(--surface2); }
  .sidebar .side-link.activo, .sidebar a.side-link[aria-current=page] {
    background:var(--surface2); color:var(--accent); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
  .sidebar .side-grupo { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); margin:1.1rem .75rem .3rem; }
  .sidebar .side-radio { font-weight:800; font-size:1.02rem; padding:.2rem .75rem .5rem; margin:0 0 .3rem;
    border-bottom:1px solid var(--border); word-break:break-word; }
  .sidebar .side-link.volver { color:var(--muted); font-weight:700; margin-bottom:.6rem; }
  .sidebar .punto-aire { width:8px; height:8px; border-radius:50%; background:var(--muted); flex:0 0 auto; opacity:.5; }
  .sidebar .punto-aire.on { background:var(--onair); opacity:1; }
  /* El contenido: columna derecha, ancho cómodo de lectura. */
  main.contenido { flex:1 1 auto; min-width:0; padding:1.75rem 2rem; max-width:1040px; }
  main.contenido a:not(.btn):not(.enlace-valor):not(.side-link), main.contenido a:not(.btn):not(.enlace-valor):not(.side-link):visited {
    color:var(--accent); text-underline-offset:2px; }
  main.contenido a:not(.btn):not(.enlace-valor):not(.side-link):hover { color:var(--accent-hover); }
  h1 { font-size:1.55rem; margin:0 0 1.25rem; letter-spacing:-.01em; }
  h2 { font-size:1.2rem; margin:0; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.4rem; margin-bottom:1.1rem; box-shadow:var(--shadow); }
  .card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .desc { color:var(--muted); margin:.2rem 0 0; }
  .badge { font-size:.82rem; font-weight:700; padding:.28rem .7rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; }
  .badge.on { color:var(--onair); background:var(--onair-bg); }
  .badge.off { color:var(--danger); background:var(--danger-bg); }
  .badge .pulse { width:8px; height:8px; border-radius:50%; background:currentColor; }
  dl { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; margin:1rem 0 0; }
  dt { color:var(--muted); font-size:.9rem; }
  dd { margin:0; word-break:break-word; min-width:0; }
  .toolbar { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.1rem; }
  .btn { font:inherit; font-weight:600; font-size:.95rem; padding:.6rem 1.05rem; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; transition:background .12s,border-color .12s,transform .04s; }
  .btn:hover { background:var(--border); }
  .btn:active { transform:translateY(1px); }
  .btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
  .btn-primary { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
  .btn-danger:hover { background:var(--danger-hover); border-color:var(--danger-hover); }
  .btn-icon svg { width:18px; height:18px; }
  .avisos { list-style:none; padding:0; margin:0 0 1.25rem; }
  .avisos:focus { outline:none; }
  .avisos li { padding:.7rem 1rem; border-radius:10px; background:var(--onair-bg); color:var(--onair); border:1px solid transparent; font-weight:600; }
  .avisos li.error { background:var(--danger-bg); color:var(--danger); }
  .codigo { font-family:ui-monospace,Consolas,monospace; font-size:1.15rem; letter-spacing:.08em; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:.7rem .9rem; display:inline-block; word-break:break-all; }
  ul.respaldo { list-style:none; padding:0; margin:.6rem 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; }
  ul.respaldo li { font-family:ui-monospace,Consolas,monospace; font-size:1.05rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:.45rem .6rem; text-align:center; }
  form.inline { display:inline; margin:0; }
  label { display:block; font-weight:600; margin-bottom:.35rem; }
  input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=search], textarea, select { font:inherit; padding:.6rem .7rem; width:100%; max-width:520px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
  textarea { max-width:640px; min-height:6.5rem; line-height:1.5; resize:vertical; }
  input:focus, textarea:focus, select:focus { outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .field { margin-bottom:1.1rem; }
  .field ul { list-style:none; padding:0; margin:0; }
  .field ul li { margin:.4rem 0; }
  .field ul label { display:flex; align-items:center; gap:.5rem; font-weight:500; margin:0; }
  .help { color:var(--muted); font-size:.88rem; margin:.3rem 0 0; }
  .grupo-areas { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--muted); margin:.9rem 0 .1rem; }
  .grupo-areas:first-of-type { margin-top:.2rem; }
  a.link { color:var(--accent); }
  dialog { border:1px solid var(--border); border-radius:14px; padding:0; background:var(--surface); color:var(--text); max-width:440px; width:92%; box-shadow:0 10px 40px rgba(0,0,0,.3); }
  dialog::backdrop { background:rgba(10,15,25,.55); }
  .dialog-body { padding:1.4rem 1.5rem 1.5rem; }
  .dialog-body h3 { margin:0 0 .5rem; font-size:1.2rem; }
  .dialog-body p { margin:0 0 1.25rem; color:var(--muted); }
  .dialog-actions { display:flex; gap:.6rem; justify-content:flex-end; }
  footer.app { margin-top:2.5rem; padding:1.25rem 0 .5rem; border-top:1px solid var(--border); color:var(--muted); font-size:.85rem; text-align:center; }
  .empty { color:var(--muted); }
  /* En pantalla grande la barra lateral está siempre abierta y su tirador sobra. */
  .sidebar-caja { flex:0 0 auto; }
  .sidebar-caja > .sidebar-abrir { display:none; }
  .sidebar-caja > .sidebar-abrir::-webkit-details-marker { display:none; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .navbtn { padding:.35rem .75rem; font-size:.85rem; }
  details.menu { position:relative; }
  details.menu > summary { list-style:none; cursor:pointer; }
  details.menu > summary::-webkit-details-marker { display:none; }
  details.menu[open] > summary { background:var(--border); }
  .menu-list { position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); min-width:210px; padding:.4rem; z-index:40; display:flex; flex-direction:column; gap:2px; }
  details.menu.menu-right .menu-list { left:auto; right:0; }
  .menu-list a, .menu-list button { display:block; width:100%; text-align:left; font:inherit; font-weight:600; font-size:.92rem; padding:.55rem .7rem; border-radius:8px; border:0; background:none; color:var(--text); text-decoration:none; cursor:pointer; }
  .menu-list a:hover, .menu-list button:hover { background:var(--surface2); }
  .menu-list a:focus-visible, .menu-list button:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
  .menu-list form { margin:0; }

  .chart-legend { display:flex; gap:1rem; flex-wrap:wrap; margin:0 0 .6rem; padding:0; list-style:none; }
  .tabla-scroll { overflow-x:auto; margin-top:1rem; }
  table.tabla { width:100%; border-collapse:collapse; font-size:.95rem; }
  .tabla thead th { text-align:left; color:var(--muted); font-weight:700; font-size:.78rem;
    text-transform:uppercase; letter-spacing:.05em; padding:.55rem .6rem;
    border-bottom:1px solid var(--border); }
  .tabla td, .tabla tbody th { padding:.55rem .6rem; border-bottom:1px solid var(--border);
    text-align:left; font-weight:400; }
  .tabla tbody tr:hover td, .tabla tbody tr:hover th { background:var(--surface2); }
  .tabla .suave { color:var(--muted); }
  .tabla .num { text-align:right; font-variant-numeric:tabular-nums; }
  pre.registro { max-height:420px; overflow:auto; background:var(--surface2);
    border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem;
    font-size:.8rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; margin:1rem 0 0; }
  .banda-soporte { display:flex; gap:.8rem; align-items:center; justify-content:center;
    background:var(--accent); color:var(--accent-contrast); padding:.45rem 1rem;
    font-weight:600; flex-wrap:wrap; }
  .banda-soporte .btn { background:var(--surface); color:var(--text); border-color:transparent; }
  .sonando { display:flex; gap:1.1rem; align-items:flex-start; margin-top:1rem; }
  .sonando .caratula, .sonando .caratula-hueco { width:96px; height:96px; border-radius:12px;
    border:1px solid var(--border); object-fit:cover; flex:none; }
  .sonando .caratula-hueco { background:var(--surface2); }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem; }
  .kpis .card { margin:0; }
  .kpi-valor { font-size:1.9rem; font-weight:800; line-height:1.1; margin-top:.2rem;
    font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
  .kpi-valor.aire { color:var(--onair); }
  .chart-legend li { display:flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600; }
  .chart-swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
  .chart-wrap { position:relative; }
  .chart-tip { position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow); padding:.5rem .7rem; font-size:.85rem; display:none; z-index:10; min-width:150px; }
  .chart-tip .tiph { font-weight:700; margin-bottom:.2rem; }
  .chart-tip .chart-swatch { width:10px; height:10px; border-radius:2px; margin-right:.3rem; }
  .chart-table table { border-collapse:collapse; width:100%; font-size:.9rem; }
  .chart-table th, .chart-table td { border:1px solid var(--border); padding:.35rem .6rem; text-align:right; font-variant-numeric:tabular-nums; }
  .chart-table th:first-child, .chart-table td:first-child { text-align:left; }
  /* Pantallas medianas: la tableta en vertical ya no se queda con el diseño de
     escritorio apretado, el menú de la radio adelgaza y los márgenes ceden ancho. */
  @media (max-width:1024px){
    main.contenido { padding:1.4rem 1.2rem; }
    .sidebar { width:210px; flex-basis:210px; }
    .card { padding:1.1rem 1.15rem; }
  }
  /* Tableta en vertical y teléfono en horizontal: todo en una columna. */
  /* Teléfono y tableta en vertical: la barra lateral pasa arriba y se pliega. */
  @media (max-width:900px){
    .shell { flex-direction:column; }
    .sidebar-caja { width:100%; }
    .sidebar { width:100%; flex-basis:auto; position:static; min-height:0; border-right:0;
      border-bottom:1px solid var(--border); }
    .sidebar-caja > .sidebar-abrir { display:flex; align-items:center; cursor:pointer; list-style:none;
      font-weight:700; padding:.75rem 1.25rem; min-height:44px; background:var(--surface);
      border-bottom:1px solid var(--border); }
    .sidebar-caja > .sidebar-abrir:hover { background:var(--surface2); }
    .sidebar-caja > .sidebar-abrir:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
    .topbar { flex-wrap:wrap; }
    .topbar .searchbar { flex:1 1 100%; order:9; margin-left:0; }
  }
  /* Teléfono: se recorta el margen lateral, que ahí el ancho es oro. */
  @media (max-width:560px){
    .topbar .logo-marca { height:26px; max-width:110px; }
    .topbar .marca { font-size:1.02rem; }
    main.contenido { padding:1.1rem .9rem; }
    .topbar { padding:.6rem .8rem; }
    .card { padding:1rem .9rem; border-radius:12px; }
    h1 { font-size:1.35rem; }
    dl { grid-template-columns:1fr; gap:.1rem .6rem; }
    dl dd { margin-bottom:.6rem; }
    .toolbar .btn, .field .btn, .dialog-actions .btn { flex:1 1 100%; justify-content:center; }
  }
  /* Con el dedo, nada por debajo de cuarenta y cuatro píxeles. */
  @media (pointer:coarse), (max-width:1024px){
    .btn, .sidebar .side-link, .menu-list a, .menu-list button { min-height:44px; }
    .menu-list a, .menu-list button { display:flex; align-items:center; }
    input[type=text], input[type=url], input[type=email], input[type=password],
    input[type=number], input[type=search], input[type=file], input[type=date],
    input[type=time], input[type=color], textarea, select { min-height:44px; }
    input[type=checkbox], input[type=radio] { width:22px; height:22px; }
    /* La casilla es pequeña por fuerza, así que lo que se toca es su etiqueta. */
    label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height:44px; }
    .field ul label { min-height:44px; }
  }
  .menu-grupo { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); margin:.5rem .7rem .15rem; }
  .snav-bloque { margin:.5rem 0 .1rem; }
  .snav-bloque > summary { cursor:pointer; font-weight:800; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    padding:.4rem .75rem .4rem 1.5rem; border-radius:8px; }
  .snav-bloque > summary:hover { color:var(--text); }
  .snav-bloque > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .snav-bloque > .side-link { padding-left:1.5rem; }
  input[type=number] { max-width:150px; }
  .enlace-valor { display:block; max-width:100%; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:.86rem; color:var(--text); background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; padding:.5rem .6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
  .enlace-valor:hover { border-color:var(--accent); }
  .salto-contenido { position:absolute; left:-9999px; top:0; background:var(--surface);
    color:var(--text); border:2px solid var(--accent); border-radius:0 0 10px 0; padding:.7rem 1.1rem;
    font-weight:700; z-index:50; text-decoration:none; }
  .salto-contenido:focus { left:0; }
  progress { appearance:none; -webkit-appearance:none; width:100%; height:12px;
    border:1px solid var(--border); border-radius:999px; background:var(--surface2); overflow:hidden; }
  progress::-webkit-progress-bar { background:var(--surface2); }
  progress::-webkit-progress-value { background:var(--accent); border-radius:999px; }
  progress::-moz-progress-bar { background:var(--accent); border-radius:999px; }
  .badge.neutra { background:var(--surface2); color:var(--muted); }