/* tokens.css — F5: tema claro/oscuro + escalado de letra para el superadmin.
   El :root base (tema CLARO) sigue viviendo en styles.css. Aca se agregan:
   aliases que faltaban, el override del tema OSCURO, y el escalado por zoom. */

:root {
    /* Aliases legacy: variables usadas en el CSS/estilos inline pero no definidas */
    --bg: var(--background);
    --card-bg: var(--surface);
    --background-alt: #f1f5f9;
    --text-2: var(--text-secondary);
}

/* ================= TEMA OSCURO ================= */
:root[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --secondary: #94a3b8;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --background: #0f172a;
    --surface: #1e293b;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --border: #334155;
    --sidebar-bg: #020617;
    --sidebar-hover: #1e293b;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6);
    --background-alt: #172033;
}

/* ============ ESCALADO DE LETRA (zoom escala TODO, incluso px hardcodeados) ============ */
html[data-font-size="small"]  { zoom: 0.9; }
html[data-font-size="normal"] { zoom: 1; }
html[data-font-size="large"]  { zoom: 1.15; }

/* ============ CONTROLES EN LA TOPBAR ============ */
.prefs-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}
.prefs-fontsize {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.prefs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.prefs-btn:hover {
    background: var(--background-alt);
    border-color: var(--primary-light);
    color: var(--primary);
}
.prefs-fontsize .prefs-btn { min-width: 30px; }
.prefs-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
}

/* ============ F3: títulos de sección del sidebar ============ */
.sidebar-section-title {
    padding: 15px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}
.sidebar-nav .sidebar-section-title:first-child {
    padding-top: 8px;
}

/* ============ F7: densidad + sobriedad — look serio, aprovechar la pantalla ============ */

/* Headers de sección compactos (que no coman el 10% de la pantalla) */
#page-title { font-size: 17px; font-weight: 600; }
.view-header { margin-bottom: 12px; }
.view-header h2 { font-size: 16px; font-weight: 600; }
.view-header p { font-size: 12px; }
.view-header .btn { padding: 7px 14px; font-size: 13px; }
.content { padding-top: 14px; }

/* Stat cards compactas (menos alto) */
.stat-card { padding: 12px 14px; gap: 10px; border-radius: 8px; }
.stat-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
.stat-content h3 { font-size: 19px; margin-bottom: 0; }
.stat-content p { font-size: 12px; }

/* Tablas densas: ~el doble de filas a la vista */
#app table th { padding: 8px 12px; font-size: 11px; }
#app table td { padding: 6px 12px; font-size: 13px; }
#app table td[style*="padding: 12px"] { padding: 6px 12px !important; }

/* Filas clickeables (abren el registro) */
.clickable-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; }
.clickable-row:hover { background: var(--background-alt); }

/* Badges chicos y sobrios: tinte suave en vez de fondos chillones, y theme-aware */
.badge { padding: 1px 7px; font-size: 11px; font-weight: 500; border-radius: 5px; }
.badge-success   { background: rgba(16,185,129,.13); color: #059669; }
.badge-danger    { background: rgba(239,68,68,.13);  color: #dc2626; }
.badge-warning   { background: rgba(217,119,6,.14);  color: #b45309; }
.badge-info      { background: rgba(59,130,246,.13); color: #2563eb; }
.badge-secondary { background: rgba(100,116,139,.14);color: #475569; }
:root[data-theme="dark"] .badge-success   { color: #34d399; background: rgba(52,211,153,.14); }
:root[data-theme="dark"] .badge-danger    { color: #f87171; background: rgba(248,113,113,.14); }
:root[data-theme="dark"] .badge-warning   { color: #fbbf24; background: rgba(251,191,36,.14); }
:root[data-theme="dark"] .badge-info      { color: #93c5fd; background: rgba(59,130,246,.16); }
:root[data-theme="dark"] .badge-secondary { color: #cbd5e1; background: rgba(148,163,184,.16); }

/* Versión "En uso": styles.css la pinta #dbeafe (celeste claro) — sobre tema
   oscuro el texto claro desaparecía. Mismo tinte translúcido que los badges. */
:root[data-theme="dark"] .version-item.selected { background-color: rgba(59,130,246,.16); }

/* Botones de acción en filas: icono chico y discreto, color solo al hover */
#app td .btn-sm { padding: 3px 7px; font-size: 12px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); margin: 0 1px; }
#app td .btn-sm:hover { background: var(--background-alt); color: var(--text-primary); border-color: var(--primary); }
#app td .btn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* Monitor de flota (#tenants-list): cards compactas para ver 15+ bots de un vistazo.
   El detalle (versión/puertos/etc.) vive en la ficha del bot; el monitor muestra salud. */
#tenants-list.data-list { gap: 5px; }
#tenants-list .data-card { padding: 9px 14px; }
#tenants-list .data-card-header { margin-bottom: 0; align-items: center; }
#tenants-list .data-card-title { font-size: 14px; }
#tenants-list .data-card-subtitle { font-size: 11px; margin-top: 1px; }
#tenants-list .data-card-body { display: none; } /* detalle solo en la ficha */
#tenants-list .bot-type-badge { display: none; } /* "Unificado" en cada fila es ruido */
/* Título + subtítulos del monitor en una fila (no apilados) para máxima densidad */
#tenants-list .data-card-header > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
#tenants-list .data-card-subtitle { margin-top: 0 !important; }

/* Fix contraste (F7.1): botones que usaban blanco fijo / gris medio y no se leían en oscuro */
.btn-filter { background-color: var(--surface); color: var(--text-primary); }
.btn-secondary { background-color: var(--background-alt); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background-color: var(--border); color: var(--text-primary); }
/* El pill "ISPBot Pro" del filtro: tinte suave theme-aware en vez de fondo claro fijo */
.bot-type-badge.web  { background: rgba(16,185,129,.14); color: #059669; }
.bot-type-badge.meta { background: rgba(59,130,246,.14); color: #2563eb; }
.bot-type-badge.tv   { background: rgba(168,85,247,.14); color: #9333ea; }
:root[data-theme="dark"] .bot-type-badge.web  { color: #34d399; }
:root[data-theme="dark"] .bot-type-badge.meta { color: #93c5fd; }
:root[data-theme="dark"] .bot-type-badge.tv   { color: #c4b5fd; }
/* "Unificado" se oculta por ruido, pero el PRODUCTO sí distingue: TVBot se ve */
#tenants-list .bot-type-badge.tv { display: inline-block; }

/* ============ Fixes visuales 2026-07-15 ============ */
/* Clases usadas en el HTML/JS que no tenían definición en ningún CSS */
.topbar-right { display: flex; align-items: center; gap: 16px; }
.btn-info    { background: var(--primary-light); color: #fff; }
.btn-warning { background: var(--warning); color: #1e293b; }
.badge-primary { background: rgba(59,130,246,.13); color: #2563eb; }
:root[data-theme="dark"] .badge-primary { color: #93c5fd; background: rgba(59,130,246,.16); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.table-container { overflow-x: auto; }
.modal-body, #manage-bots-content { padding: 24px; }