/* ===================================================================
   Sanet Stream — componentes del panel de canales locales
   Se apoya en tokens.css y layout.css de la flota Sanet (copia literal
   de los de Campañas WhatsApp). Mismo vocabulario: .card, .btn, .tag,
   .stats, .aviso, .tabla-wrap, .vacio.
   =================================================================== */

/* Que el navegador pinte lo suyo (barras de desplazamiento, campos, menús
   desplegables) a tono con el tema, no siempre en claro. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ===================================================================
   COLOR DE LA BARRA DEL NAVEGADOR / BARRA DE ESTADO DEL TELÉFONO
   -------------------------------------------------------------------
   Safari 26 dejó de leer <meta name="theme-color"> y ahora deduce ese
   color del FONDO DEL ELEMENTO QUE ESTÁ ARRIBA DEL TODO en la ventana.
   Dos consecuencias para nosotros:
     · La topbar tiene fondo semitransparente con desenfoque, así que no
       daba un color que muestrear. Se le pone debajo un color SÓLIDO
       (el degradado sigue arriba como background-image, se ve igual).
     · El sólido no puede ser negro puro: Apple descarta #000 y vuelve a
       su color por defecto — que es claro. Por eso #0A0A0E.
   El meta theme-color se mantiene para Chrome y Android.
   =================================================================== */

/* Comprobado en un iPhone real (Safari 18/26): de las cinco técnicas que
   probamos, la ÚNICA que tiñe la barra de estado es que la barra superior
   tenga un color de fondo OPACO. Safari muestrea ese elemento y nada más:
   ni el meta, ni el fondo de la página, ni el velo fijo.
   Como el vidrio difuminado solo se luce cuando el contenido pasa por
   debajo —cosa que en un teléfono casi no se ve— la barra se vuelve opaca
   solo en pantalla angosta, del mismo color que la página para que el
   corte no se note, y en escritorio queda el vidrio como en WhatsApp. */
@media (max-width: 900px) {
    .topbar {
        background-color: #0A0A0E;
        background-image: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme="light"] .topbar {
        background-color: #F4F6FA;
        background-image: none;
    }
}

:root { background-color: #0A0A0E; }
:root[data-theme="light"] { background-color: #F4F6FA; }

/* El velo del degradado azul es `position: fixed` y cubre toda la ventana, así
   que es EL elemento fijo que iOS mira para teñir su barra — y venía sin color
   de fondo (solo el degradado, transparente), por eso la barra se quedaba con
   el color anterior. Se le pone el mismo sólido del tema por debajo: no cambia
   nada a la vista, porque es exactamente el fondo que ya había. */
body::before {
    background-color: #0A0A0E;
    background-image: radial-gradient(ellipse at top, rgba(30, 107, 255, 0.18) 0%, transparent 60%);
}
:root[data-theme="light"] body::before {
    background-color: #F4F6FA;
    background-image: radial-gradient(ellipse at top, rgba(30, 107, 255, 0.08) 0%, transparent 60%);
}

/* Acento propio: el rojo de "al aire" convive con el azul Sanet.
   El azul sigue siendo la marca; el rojo marca solo lo que está en vivo. */
:root {
    --aire:      #FF3B5C;
    --aire-glow: rgba(255, 59, 92, 0.35);
    --mide:      #F59E0B;   /* lo que hay que revisar */
}

/* ===================================================================
   PIE DEL SIDEBAR
   =================================================================== */

.sidebar-pie {
    border-top: 1px solid var(--border-soft);
    padding: 12px 0 8px;
}

.salud-señal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 24px 12px;
    flex-wrap: wrap;
}

.salud-señal-txt {
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.pill .punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.pill .punto.late { animation: latido 1.8s infinite; }
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 6px transparent; opacity: .75; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ===================================================================
   AVISOS
   =================================================================== */

.aviso {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: var(--warning);
    border-radius: var(--radius-input);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

.aviso a { color: var(--sanet-blue-bright); text-decoration: underline; }
.aviso-ok  { background: rgba(34,197,94,.10);   border-color: rgba(34,197,94,.30);   color: var(--success); }
.aviso-mal { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.30); color: var(--error); }

/* ===================================================================
   TARJETAS
   =================================================================== */

.card {
    background: linear-gradient(to bottom, rgba(20,20,28,.65), rgba(10,10,14,.78));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
}

[data-theme="light"] .card {
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.card-titulo { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text-1); }
.card-sub    { font-size: 13px; color: var(--text-2); margin-bottom: 18px; }

h1 { font-size: 24px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.sub-pagina { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }

/* ===================================================================
   BOTONES
   =================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radius-input);
    font-weight: 500; font-size: 14px;
    background: var(--sanet-blue); color: #fff;
    box-shadow: 0 4px 12px rgba(30,107,255,.35);
    transition: all .2s; white-space: nowrap;
}
.btn:hover { background: var(--sanet-blue-bright); box-shadow: 0 6px 16px rgba(30,107,255,.45); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn.sec { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border-mid); box-shadow: none; }
.btn.sec:hover { background: var(--bg-3); border-color: var(--border-focus); box-shadow: none; }
[data-theme="light"] .btn.sec { background: #fff; }

.btn.peligro { background: var(--error); box-shadow: 0 4px 12px rgba(255,107,107,.3); }
.btn.peligro:hover { background: #ff8585; }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }

.btn-texto { background: none; border: none; color: var(--text-2); font-size: 13px; text-decoration: underline; padding: 6px 2px; box-shadow: none; }
.btn-texto:hover { color: var(--sanet-blue-bright); background: none; transform: none; box-shadow: none; }

/* ===================================================================
   ETIQUETAS DE ESTADO
   =================================================================== */

.tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tag.ok      { background: rgba(34,197,94,.15);   color: var(--success); }
.tag.alerta  { background: rgba(245,158,11,.15);  color: var(--warning); }
.tag.mal     { background: rgba(255,107,107,.15); color: var(--error); }
.tag.info    { background: rgba(30,107,255,.15);  color: var(--sanet-blue-bright); }
.tag.apagado { background: rgba(107,114,128,.18); color: var(--text-3); }

/* ===================================================================
   MOSAICOS DE NÚMEROS
   =================================================================== */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats > div { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-tile); padding: 14px 16px; }
[data-theme="light"] .stats > div { background: var(--bg-3); }
.stats b { display: block; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.stats span { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.stats small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 4px; text-transform: none; letter-spacing: 0; }

/* ===================================================================
   VEREDICTO — la primera respuesta: ¿cómo está la señal?
   =================================================================== */

.veredicto { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.veredicto .logo {
    width: 68px; height: 68px; border-radius: 18px; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    flex-shrink: 0; font-weight: 700; color: var(--sanet-blue); font-size: 21px;
}
.veredicto .logo img { width: 100%; height: 100%; object-fit: cover; }
.veredicto .estado { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.veredicto .porque { color: var(--text-2); margin-top: 5px; font-size: 14px; line-height: 1.55; }
.veredicto .porque b { color: var(--text-1); font-weight: 500; }

.punto-g { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.punto-g.bien      { background: var(--success); animation: pulso-ok 1.8s infinite; }
.punto-g.perdidas  { background: var(--warning); }
.punto-g.problemas { background: var(--error); animation: pulso-mal 1.2s infinite; }
@keyframes pulso-ok  { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes pulso-mal { 0% { box-shadow: 0 0 0 0 rgba(255,107,107,.6); } 70% { box-shadow: 0 0 0 10px rgba(255,107,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); } }

.al-aire { font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .14em; color: var(--aire); display: flex; align-items: center; gap: 8px; font-size: 15px; justify-content: flex-end; }
.al-aire i { width: 9px; height: 9px; border-radius: 50%; background: var(--aire); display: inline-block; animation: pulso-aire 1.6s infinite; }
@keyframes pulso-aire { 0% { box-shadow: 0 0 0 0 var(--aire-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.al-aire.off { color: var(--text-3); } .al-aire.off i { background: var(--text-3); animation: none; }
.desde { color: var(--text-3); font-size: 12.5px; text-align: right; margin-top: 5px; }

/* ===================================================================
   TIRA DE 24 HORAS
   =================================================================== */

.tira { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin-top: 8px; }
.tira i { height: 34px; border-radius: 6px; background: var(--bg-3); position: relative; display: block; }
.tira i.ok   { background: rgba(34,197,94,.55); }
.tira i.leve { background: rgba(30,107,255,.60); }
.tira i.alta { background: rgba(245,158,11,.75); }
.tira i.mal  { background: var(--error); }
[data-theme="light"] .tira i      { background: #E4E9F0; }
[data-theme="light"] .tira i.ok   { background: #7ad3a0; }
[data-theme="light"] .tira i.leve { background: #7aa7f5; }
[data-theme="light"] .tira i.alta { background: #f0b458; }
[data-theme="light"] .tira i.mal  { background: #ef8b84; }
.tira i:hover::after {
    content: attr(data-t); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--bg-2); border: 1px solid var(--border-mid); color: var(--text-1);
    font-size: 11.5px; padding: 6px 9px; border-radius: 8px; white-space: nowrap; z-index: 20;
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .tira i:hover::after { background: #fff; }
.tira i:nth-child(-n+4):hover::after { left: 0; transform: none; }
.tira i:nth-last-child(-n+4):hover::after { left: auto; right: 0; transform: none; }
.ejes { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 12px; margin-top: 14px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; background: var(--bg-3); }
.leyenda i.mi-ok   { background: rgba(34,197,94,.55); }
.leyenda i.mi-leve { background: rgba(30,107,255,.60); }
.leyenda i.mi-alta { background: rgba(245,158,11,.75); }
.leyenda i.mi-mal  { background: var(--error); }
[data-theme="light"] .leyenda i.mi-nada { background: #E4E9F0; }
[data-theme="light"] .leyenda i.mi-ok   { background: #7ad3a0; }
[data-theme="light"] .leyenda i.mi-leve { background: #7aa7f5; }
[data-theme="light"] .leyenda i.mi-alta { background: #f0b458; }
[data-theme="light"] .leyenda i.mi-mal  { background: #ef8b84; }

/* ===================================================================
   MEDIDO CONTRA RECOMENDADO
   =================================================================== */

.medido { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.medido > div { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-tile); padding: 14px 16px; }
[data-theme="light"] .medido > div { background: var(--bg-3); }
.medido .k { color: var(--text-3); font-size: 12px; }
.medido .v { font-size: 20px; font-weight: 600; margin-top: 3px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.medido .v small { font-size: 12px; color: var(--text-3); font-weight: 400; }
.medido .r { font-size: 11.5px; margin-top: 5px; color: var(--text-3); }
.medido > div.ok .r     { color: var(--success); }
.medido > div.alerta    { border-color: rgba(245,158,11,.40); } .medido > div.alerta .r { color: var(--warning); }
.medido > div.mal       { border-color: rgba(255,107,107,.45); } .medido > div.mal .r { color: var(--error); }

/* ===================================================================
   EVENTOS
   =================================================================== */

.ev { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-soft); align-items: flex-start; }
.ev:first-of-type { border-top: 0; }
.ev .h { font-variant-numeric: tabular-nums; color: var(--text-3); width: 74px; flex-shrink: 0; font-size: 13px; padding-top: 1px; }
.ev .t { flex: 1; min-width: 0; }
.ev .t b { font-weight: 500; }
.ev .t p { color: var(--text-3); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.ev .dur { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dia-sep { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }
.dia-sep .fecha { font-family: 'Rajdhani', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; color: var(--text-3); }
.dia-sep .cuantos { color: var(--text-3); font-size: 12px; }

/* ===================================================================
   FILTROS DE PERÍODO
   =================================================================== */

.periodos { display: flex; gap: 6px; }
.periodos a { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border-soft); }
.periodos a:hover { border-color: var(--border-focus); color: var(--text-1); }
.periodos a.activo { background: var(--sanet-blue); color: #fff; border-color: transparent; font-weight: 500; }
[data-theme="light"] .periodos a { background: #fff; }

/* ===================================================================
   TABLAS Y VACÍOS
   =================================================================== */

.tabla-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-input); }
[data-theme="light"] .tabla-wrap { border-color: var(--border-mid); }
table td small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); font-size: 13px; }
.help  { font-size: 12.5px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
.pie-nota { color: var(--text-3); font-size: 12.5px; margin-top: 16px; line-height: 1.55; }
.pie-nota b { color: var(--text-2); font-weight: 500; }
.pie-nota a { color: var(--sanet-blue-bright); }

.vacio { text-align: center; padding: 46px 20px; color: var(--text-2); }
.vacio svg { opacity: .35; margin-bottom: 14px; }
.vacio p { margin-bottom: 16px; }

/* Cabecera de tarjeta con acción a la derecha */
.fila-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* Columna de acciones de las tablas de administración */
.acciones { text-align: right; white-space: nowrap; }
.acciones .btn { margin-left: 6px; }
.acciones .btn:first-child { margin-left: 0; }
.btn.peligro-txt { color: var(--error); }
.btn.peligro-txt:hover { border-color: var(--error); color: var(--error); background: rgba(255,107,107,.10); }

/* Enlaces SRT plegables */
.enlaces-srt { margin-top: 6px; }
.enlaces-srt > summary { cursor: pointer; font-size: 11.5px; color: var(--sanet-blue-bright); list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.enlaces-srt > summary::-webkit-details-marker { display: none; }
.enlaces-srt > summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
.enlaces-srt[open] > summary::before { transform: rotate(90deg); }
.caja-srt { margin-top: 8px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-input); }
[data-theme="light"] .caja-srt { background: var(--bg-3); }
.caja-srt .k { font-family: 'Rajdhani', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.caja-srt .k + code { margin-bottom: 10px; display: inline-block; }
.caja-srt code:last-child { margin-bottom: 0; }

.canal-chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.canal-chip img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: #fff; flex-shrink: 0; }
.canal-chip .ini { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep)); color: #fff; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.canal-chip img.apagado { filter: grayscale(1); opacity: .5; }

.grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.grid-igual { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 900px) {
    .content { padding: 16px; }
    .card { padding: 18px; border-radius: 18px; }
    h1 { font-size: 20px; }
    .grid2, .grid-igual { grid-template-columns: 1fr; }
    .veredicto { grid-template-columns: auto 1fr; gap: 14px; }
    .veredicto .logo { width: 52px; height: 52px; border-radius: 14px; font-size: 16px; }
    .veredicto .estado { font-size: 19px; }
    .veredicto > div:last-child { grid-column: 1 / -1; }
    .al-aire { justify-content: flex-start; }
    .desde { text-align: left; }
    .tira { gap: 2px; } .tira i { height: 26px; border-radius: 4px; }
    .ejes span:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .btn:hover { transform: none; }
}

/* ===================================================================
   PANTALLA DE ENTRADA
   =================================================================== */

.pantalla-entrada {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 24px;
    position: relative; z-index: 1;
}
.caja-entrada { width: 100%; max-width: 400px; }
.marca-entrada { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 26px; }
.marca-entrada .logo {
    width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep));
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 0 20px var(--sanet-blue-glow);
}
.marca-entrada .txt { font-size: 19px; font-weight: 600; }
.marca-entrada .txt small { display: block; font-size: 12.5px; color: var(--text-2); font-weight: 400; }
.pie-entrada { text-align: center; color: var(--text-3); font-size: 11.5px; margin-top: 20px; }

/* ===================================================================
   TEMA CLARO / OSCURO
   =================================================================== */

.logo-stream {
    background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep));
    box-shadow: 0 0 16px var(--sanet-blue-glow);
    color: #fff;
}

#btn_tema .icono-sol,
#btn_tema .icono-luna { display: none; line-height: 0; }

/* En oscuro se ofrece el sol (pasar a claro); en claro, la luna. */
[data-theme="dark"] #btn_tema .icono-sol,
:root:not([data-theme="light"]) #btn_tema .icono-sol { display: block; }
[data-theme="light"] #btn_tema .icono-luna { display: block; }
[data-theme="light"] #btn_tema .icono-sol  { display: none; }

.tema-suelto { position: absolute; top: 20px; right: 20px; }

/* --- Ajustes del tema claro --- */

[data-theme="light"] body { background: var(--bg-0); }

[data-theme="light"] .aviso     { background: #fdf6e7; border-color: #e8cf95; color: #8a5d05; }
[data-theme="light"] .aviso-ok  { background: #eaf7ef; border-color: #a8dcbc; color: #12653f; }
[data-theme="light"] .aviso-mal { background: #fdeceb; border-color: #f0b3ae; color: #a3271f; }

[data-theme="light"] .tag.ok      { background: #e6f6ec; color: #12653f; }
[data-theme="light"] .tag.alerta  { background: #fdf3e0; color: #8a5d05; }
[data-theme="light"] .tag.mal     { background: #fdecea; color: #a3271f; }
[data-theme="light"] .tag.info    { background: #e7f1fd; color: #0d5bb0; }
[data-theme="light"] .tag.apagado { background: #eef0f4; color: #6B7280; }

[data-theme="light"] .pill-success { background: #e6f6ec; color: #12653f; }
[data-theme="light"] .pill-warning { background: #fdf3e0; color: #8a5d05; }
[data-theme="light"] .pill-error   { background: #fdecea; color: #a3271f; }
[data-theme="light"] .pill-info    { background: #e7f1fd; color: #0d5bb0; }
[data-theme="light"] .pill-live    { background: #fdecef; color: #b0244a; }

[data-theme="light"] .medido > div.ok .r     { color: #12653f; }
[data-theme="light"] .medido > div.alerta .r { color: #8a5d05; }
[data-theme="light"] .medido > div.mal .r    { color: #a3271f; }
[data-theme="light"] .veredicto .logo { border: 1px solid var(--border-soft); }

/* ===================================================================
   COMPATIBILIDAD con las vistas de administración todavía sin migrar
   (Canales, Cuentas, Cortes, Avisos y Dashboard usan estas clases y
   algunas variables sueltas en atributos style).
   =================================================================== */

.grid-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metrica { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-tile); padding: 16px 18px; position: relative; }
[data-theme="light"] .metrica { background: var(--bg-3); }
.metrica.destacada { background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep)); border-color: transparent; }
.metrica .badge { position: absolute; top: 14px; right: 14px; font-size: 10px; padding: 3px 9px; border-radius: var(--radius-pill); font-weight: 500; }
.badge.ok  { background: rgba(34,197,94,.18); color: var(--success); }
.badge.mal { background: rgba(255,107,107,.18); color: var(--error); }
[data-theme="light"] .badge.ok  { background: #e6f6ec; color: #12653f; }
[data-theme="light"] .badge.mal { background: #fdecea; color: #a3271f; }
.metrica.destacada .badge.ok, .metrica.destacada .badge.mal { background: rgba(255,255,255,.22); color: #fff; }
.metrica .tile { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 15px; }
[data-theme="light"] .metrica .tile { background: #fff; }
.metrica.destacada .tile { background: rgba(255,255,255,.2); }
.metrica .label { color: var(--text-3); font-size: 12px; margin: 12px 0 2px; }
.metrica.destacada .label { color: rgba(255,255,255,.85); }
.metrica .valor { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metrica.destacada .valor { color: #fff; }

h2.bloque { font-size: 13px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; font-family: 'Rajdhani', sans-serif; margin: 0 0 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.ok     { background: rgba(34,197,94,.15);   color: var(--success); }
.pill.alerta { background: rgba(245,158,11,.15);  color: var(--warning); }
.pill.mal    { background: rgba(255,107,107,.15); color: var(--error); }
.pill.info   { background: rgba(30,107,255,.15);  color: var(--sanet-blue-bright); }
[data-theme="light"] .pill.ok     { background: #e6f6ec; color: #12653f; }
[data-theme="light"] .pill.alerta { background: #fdf3e0; color: #8a5d05; }
[data-theme="light"] .pill.mal    { background: #fdecea; color: #a3271f; }
[data-theme="light"] .pill.info   { background: #e7f1fd; color: #0d5bb0; }

.chip-canal { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.chip-canal .mini { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 600; background: linear-gradient(135deg, var(--sanet-blue), var(--sanet-blue-deep)) !important; flex-shrink: 0; }
.chip-canal img { border-radius: 8px !important; background: #fff; }
code.link { background: var(--bg-3); padding: 4px 9px; border-radius: 7px; font-size: 12px; color: var(--sanet-blue-bright); font-family: ui-monospace, Menlo, monospace; }
[data-theme="light"] code.link { background: #f1f4f8; }
.cta-negro { display: none; }

/* Variables que las vistas legadas usan dentro de atributos style */
:root {
    --texto: var(--text-1); --texto-2: var(--text-2); --texto-3: var(--text-3); --texto-4: var(--text-3);
    --borde: var(--border-soft); --tile: var(--bg-3); --superficie: var(--bg-2); --sidebar: var(--bg-1);
    --acento: var(--sanet-blue); --acento-suave: rgba(30,107,255,.15); --acento-hover: var(--sanet-blue-bright);
    --ok: var(--success); --ok-bg: rgba(34,197,94,.15);
    --mal: var(--error); --mal-bg: rgba(255,107,107,.15);
    --alerta: var(--warning); --alerta-bg: rgba(245,158,11,.15);
    --negro: var(--bg-3); --radio: var(--radius-tile); --fondo: var(--bg-0);
}
[data-theme="light"] {
    --ok: #12653f; --ok-bg: #e6f6ec; --mal: #a3271f; --mal-bg: #fdecea; --alerta: #8a5d05; --alerta-bg: #fdf3e0;
}

/* ===================================================================
   FILA DE CANAL (lista de Canales)
   Una fila por canal en dos alturas: cabecera con nombre, estado, plan y
   acciones; debajo el enlace, que es largo. Así se adapta a cualquier
   ancho sin la barra horizontal que obligaba una tabla.
   =================================================================== */

.canal-fila { border-top: 1px solid var(--border-soft); padding: 18px 0; }
.canal-fila:first-of-type { border-top: 0; padding-top: 4px; }
.canal-fila:last-of-type { padding-bottom: 4px; }
.cf-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cf-cab .canal-chip { font-size: 15px; }
.cf-cab .canal-chip img, .cf-cab .canal-chip .ini { width: 34px; height: 34px; border-radius: 10px; }
.cf-plan { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cf-acciones { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cf-acciones form { display: contents; }   /* Suspender/Borrar son formularios (POST) */
.cf-enlace { margin-top: 12px; }
.cf-enlace > .k, .caja-srt .k {
    font-family: 'Rajdhani', sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px;
}
.cf-enlace code.link, .caja-srt code.link {
    white-space: normal; overflow-wrap: anywhere; display: inline-block; line-height: 1.6;
}
@media (max-width: 700px) {
    .cf-acciones { margin-left: 0; width: 100%; }
    .cf-cab .canal-chip { width: 100%; }
}

/* ===================================================================
   ADMINISTRACIÓN EN EL TELÉFONO
   -------------------------------------------------------------------
   Dashboard, Cortes, Avisos y Cuentas todavía usan tablas anchas y una
   rejilla de dos columnas escrita en un atributo style. En una pantalla
   angosta eso se salía del borde. Acá se las adapta sin tocar las
   vistas: las rejillas se apilan y las tablas se deslizan dentro de su
   tarjeta en vez de desbordar la página.
   =================================================================== */

@media (max-width: 760px) {
    /* Rejillas de dos columnas puestas con style="" en las vistas viejas */
    .content div[style*="grid-template-columns"] { display: block !important; }
    .content div[style*="grid-template-columns"] > .card { margin-bottom: 16px; }

    /* Tablas que aún no viven dentro de .tabla-wrap */
    .card > table,
    .card > div > table { display: block; width: 100%; overflow-x: auto; }
    .card > table > tbody,
    .card > table > thead { display: table; width: 100%; }

    /* Un renglón de tabla no puede tener columnas de ancho fijo acá */
    .card table td[style*="width:1"],
    .card table th[style*="width:1"] { width: auto !important; }

    /* Cabeceras de tarjeta con acción: el botón baja en vez de apretarse */
    .fila-titulo { flex-direction: column; align-items: stretch; gap: 12px; }
    .fila-titulo .btn { width: 100%; }

    /* Las métricas viejas, de a una por fila */
    .grid-metricas { grid-template-columns: 1fr; }

    /* Filtros de período, que se salían a la derecha */
    .periodos { flex-wrap: wrap; }

    /* Enlaces largos: que corten en vez de estirar la caja */
    code.link { overflow-wrap: anywhere; white-space: normal; }
}

/* Mensajes listos para copiar y pegar (enlaces del canal y de las cableras) */
.mensaje {
    width: 100%;
    height: 330px;
    resize: vertical;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-input);
    background: var(--bg-2);
    color: var(--text-1);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    padding: 12px 14px;
}
[data-theme="light"] .mensaje { background: var(--bg-3); }