/* Mini Panel IPTV - Estilos básicos */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #0f1419;
    color: #e6e6e6;
    line-height: 1.5;
}

a { color: #4dabf7; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    background: #1a1f2e;
    padding: 20px 0;
    border-right: 1px solid #2a3142;
}

.sidebar h1 {
    font-size: 18px;
    padding: 0 20px 20px;
    border-bottom: 1px solid #2a3142;
    color: #4dabf7;
}

.sidebar nav { padding: 20px 0; }

.sidebar nav a {
    display: block;
    padding: 10px 20px;
    color: #b8c2cc;
    border-left: 3px solid transparent;
}

.sidebar nav a:hover {
    background: #232938;
    color: #fff;
    text-decoration: none;
}

.sidebar nav a.active {
    background: #232938;
    color: #4dabf7;
    border-left-color: #4dabf7;
}

.main { flex: 1; padding: 30px; overflow-x: auto; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2a3142;
}

.topbar h2 { font-size: 22px; }
.topbar .user { color: #8b95a5; font-size: 14px; }

/* Tarjetas / Cards */
.card {
    background: #1a1f2e;
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; }

.stat-card {
    background: #1a1f2e;
    border: 1px solid #2a3142;
    border-radius: 6px;
    padding: 18px;
}

.stat-card .label { font-size: 12px; color: #8b95a5; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 26px; color: #4dabf7; margin-top: 6px; font-weight: 600; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }

th, td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #2a3142;
    font-size: 14px;
}

th { background: #232938; color: #b8c2cc; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

tbody tr:hover { background: #1f2535; }

/* Botones */
.btn {
    display: inline-block;
    padding: 8px 16px;
    background: #4dabf7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}
.btn:hover { background: #3793e3; text-decoration: none; color: #fff; }
.btn-danger  { background: #e03131; }
.btn-danger:hover  { background: #c92a2a; }
.btn-success { background: #37b24d; }
.btn-success:hover { background: #2f9e44; }
.btn-secondary { background: #495057; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Forms */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #b8c2cc; font-size: 14px; }

input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=datetime-local],
select, textarea {
    width: 100%;
    padding: 8px 12px;
    background: #0f1419;
    border: 1px solid #2a3142;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4dabf7;
}

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-success { background: #2b8a3e; color: #fff; }
.badge-danger  { background: #c92a2a; color: #fff; }
.badge-warning { background: #e67700; color: #fff; }
.badge-muted   { background: #495057; color: #fff; }

/* Login */
.login-box {
    max-width: 380px;
    margin: 100px auto;
    background: #1a1f2e;
    border: 1px solid #2a3142;
    border-radius: 8px;
    padding: 30px;
}
.login-box h1 { text-align: center; margin-bottom: 25px; color: #4dabf7; }

/* Flash messages */
.flash {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}
.flash-success { background: #2b8a3e; color: #fff; }
.flash-error   { background: #c92a2a; color: #fff; }
.flash-info    { background: #1971c2; color: #fff; }

.actions { display: flex; gap: 5px; }
.text-muted { color: #8b95a5; }
.text-right { text-align: right; }

/* === MIAREA LOGO === */
.sidebar-logo {
    text-align: center;
    padding: 15px 10px;
    border-bottom: 1px solid #2a3142;
    background: #0f1419;
}
.sidebar-logo img {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.login-logo {
    text-align: center;
    margin-bottom: 25px;
}
.login-logo img {
    max-width: 280px;
    height: auto;
    margin: 0 auto;
}

/* Ocultar el h1 viejo si quedaba */
.sidebar h1 { display: none; }
/* === END MIAREA LOGO === */

/* === KEY LOGIN === */
body.login-page {
    background: radial-gradient(ellipse at center, #1a2030 0%, #0a0d14 100%);
    min-height: 100vh;
}

.login-key {
    text-align: center;
    margin: 5px 0 20px 0;
    animation: keyPulse 3s ease-in-out infinite;
}
.login-key img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    filter: drop-shadow(0 0 20px rgba(77, 171, 247, 0.5));
}

@keyframes keyPulse {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(77, 171, 247, 0.4)); }
    50%      { filter: drop-shadow(0 0 25px rgba(77, 171, 247, 0.7)); }
}

.login-box {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(77, 171, 247, 0.15);
    backdrop-filter: blur(10px);
    background: rgba(26, 31, 46, 0.95);
}

.login-box h1 { display: none; }
/* === END KEY LOGIN === */

/* === RECAPTCHA === */
.recaptcha-wrap {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}
.recaptcha-wrap .g-recaptcha {
    transform: scale(0.95);
    transform-origin: center;
}
/* === END RECAPTCHA === */

/* === PLAYER === */
.player-modal-bg {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 1000;
    align-items: center; justify-content: center;
}
.player-modal-bg.show { display: flex; }
.player-modal {
    background: #1a1f2e;
    border: 1px solid #4dabf7;
    border-radius: 8px;
    padding: 20px;
    max-width: 900px;
    width: 95%;
    max-height: 95vh;
    overflow-y: auto;
}
.player-modal h3 { margin: 0 0 15px; color: #4dabf7; }
.player-modal video {
    width: 100%;
    max-height: 500px;
    background: #000;
    border-radius: 4px;
    display: block;
}
.player-diag {
    background: #0f1419;
    padding: 12px;
    border-radius: 4px;
    margin-top: 15px;
    font-family: monospace;
    font-size: 13px;
}
.player-diag .ok    { color: #37b24d; }
.player-diag .warn  { color: #e67700; }
.player-diag .err   { color: #e03131; }
.player-diag .info  { color: #4dabf7; }
.player-url-selector {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px;
}
.player-url-selector .btn {
    font-size: 12px; padding: 4px 10px;
}
.player-url-selector .btn.active {
    background: #37b24d;
}
/* === END PLAYER === */

/* ========================================
   SISTEMA DE TEMAS Y LAYOUTS
   ======================================== */

/* Variables por defecto */
:root {
    --accent:        #4dabf7;
    --accent-glow:   rgba(77,171,247,0.6);
    --bg-main:       #0f1420;
    --bg-card:       #1a1f2e;
    --bg-card-2:     #2a3142;
    --text-main:     #e6edf3;
    --text-dim:      #8b95a5;
    --border:        #2a3142;
}

/* === TEMAS DE COLOR === */
body[data-theme="dark"] {
    --accent: #4dabf7; --accent-glow: rgba(77,171,247,0.6);
    --bg-main: #0f1420; --bg-card: #1a1f2e; --bg-card-2: #2a3142;
    --text-main: #e6edf3; --text-dim: #8b95a5; --border: #2a3142;
}
body[data-theme="light"] {
    --accent: #1971c2; --accent-glow: rgba(25,113,194,0.4);
    --bg-main: #f5f7fa; --bg-card: #ffffff; --bg-card-2: #e9ecef;
    --text-main: #212529; --text-dim: #6c757d; --border: #dee2e6;
}
body[data-theme="purple"] {
    --accent: #ae3ec9; --accent-glow: rgba(174,62,201,0.6);
    --bg-main: #1a0f1e; --bg-card: #2b1a31; --bg-card-2: #3a2440;
    --text-main: #f3e8f7; --text-dim: #b89dc1; --border: #3a2440;
}
body[data-theme="green"] {
    --accent: #20c997; --accent-glow: rgba(32,201,151,0.6);
    --bg-main: #0e1a17; --bg-card: #182824; --bg-card-2: #243832;
    --text-main: #e6f5ef; --text-dim: #8baea3; --border: #243832;
}
body[data-theme="orange"] {
    --accent: #fd7e14; --accent-glow: rgba(253,126,20,0.6);
    --bg-main: #1c130b; --bg-card: #2b1e10; --bg-card-2: #3d2c1a;
    --text-main: #f5ebdd; --text-dim: #b89c81; --border: #3d2c1a;
}
body[data-theme="midnight"] {
    --accent: #748ffc; --accent-glow: rgba(116,143,252,0.6);
    --bg-main: #0a0d14; --bg-card: #131722; --bg-card-2: #1f2533;
    --text-main: #dde3ed; --text-dim: #7a8499; --border: #1f2533;
}

/* Aplicación a layout principal */
body { background: var(--bg-main); color: var(--text-main); }
.sidebar { background: var(--bg-card); }
.sidebar nav a { color: var(--text-main); }
.sidebar nav a:hover { background: var(--bg-card-2); }
.sidebar nav a.active { background: var(--accent); color: #fff; }
.card { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); }

/* === LAYOUT HORIZONTAL (topbar) === */
body[data-layout="horizontal"] .layout { display: block; }
body[data-layout="horizontal"] .sidebar {
    position: fixed; top: 0; left: 0; right: 0;
    width: 100%; height: auto;
    z-index: 100;
    display: flex; align-items: center; padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body[data-layout="horizontal"] .sidebar-logo {
    display: inline-flex !important;
    align-items: center;
    padding: 0 16px 0 0 !important;
    margin-right: 12px;
    border-right: 1px solid var(--border);
    height: 56px;
}
body[data-layout="horizontal"] .sidebar-logo > div:first-child {
    font-size: 32px !important;
    text-shadow: 0 0 12px var(--accent-glow) !important;
}
body[data-layout="horizontal"] .sidebar-logo > div:first-child span {
    font-size: 11px !important;
    top: -10px !important;
}
body[data-layout="horizontal"] .sidebar-logo > div:last-child {
    display: none !important;
}
body[data-layout="horizontal"] .sidebar nav {
    display: flex; flex-wrap: wrap;
    flex: 1; gap: 2px;
}
body[data-layout="horizontal"] .sidebar nav a {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
}
body[data-layout="horizontal"] .sidebar hr,
body[data-layout="horizontal"] #lang_selector {
    display: none;
}
body[data-layout="horizontal"] .main {
    margin-left: 0 !important;
    padding-top: 80px !important;
}

/* === TOGGLE BUTTON (flotante) === */
#theme-toggle {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
    z-index: 999;
    transition: transform 0.2s;
}
#theme-toggle:hover { transform: scale(1.1) rotate(20deg); }

/* === PANEL DE OPCIONES === */
#theme-panel {
    position: fixed;
    bottom: 80px; right: 20px;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
}
#theme-panel.show { display: block; }
#theme-panel h4 { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
#theme-panel .opt-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
#theme-panel .opt {
    flex: 1; min-width: 60px;
    padding: 8px 6px;
    background: var(--bg-card-2);
    border: 2px solid transparent;
    border-radius: 6px;
    color: var(--text-main);
    cursor: pointer;
    font-size: 11px;
    text-align: center;
    transition: all 0.15s;
}
#theme-panel .opt:hover { transform: translateY(-2px); }
#theme-panel .opt.active { border-color: var(--accent); background: var(--bg-card); }
#theme-panel .color-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s;
}
#theme-panel .color-swatch:hover { transform: scale(1.15); }
#theme-panel .color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* === FONDOS PERSONALIZABLES === */
body[data-bg="solid"]      { background: var(--bg-main) !important; }
body[data-bg="gradient1"]  { background: linear-gradient(135deg, var(--bg-main) 0%, #1a0f2e 50%, var(--bg-main) 100%) !important; background-attachment: fixed !important; }
body[data-bg="gradient2"]  { background: linear-gradient(135deg, #0a1929 0%, #16213e 50%, #0f1420 100%) !important; background-attachment: fixed !important; }
body[data-bg="gradient3"]  { background: linear-gradient(135deg, #1a2e1a 0%, #0f1420 50%, #1a1a2e 100%) !important; background-attachment: fixed !important; }
body[data-bg="aurora"] {
    background:
        radial-gradient(circle at 20% 30%, rgba(77,171,247,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(174,62,201,0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(32,201,151,0.08) 0%, transparent 60%),
        var(--bg-main) !important;
    background-attachment: fixed !important;
}
body[data-bg="mesh"] {
    background:
        radial-gradient(at 0% 0%, rgba(77,171,247,0.18) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(174,62,201,0.18) 0px, transparent 50%),
        var(--bg-main) !important;
    background-attachment: fixed !important;
}
body[data-bg="grid"] {
    background-color: var(--bg-main) !important;
    background-image:
        linear-gradient(rgba(77,171,247,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,171,247,0.04) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-attachment: fixed !important;
}

/* === FIX: Override de backgrounds hardcoded para que respeten el tema === */
.srv-card,
.maint-section,
.bigstats .bigstat,
[style*="#1a1f2e"],
[style*="background:#1a1f2e"],
[style*="background: #1a1f2e"] {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Cards stat antiguas */
.stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}
.stat-card .label { color: var(--text-dim) !important; }
.stat-card .value { color: var(--text-main) !important; }

/* Tablas */
table { color: var(--text-main); }
table th { color: var(--text-dim); background: var(--bg-card-2); }
table td { border-color: var(--border); }

/* Inputs / forms */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="datetime-local"],
select, textarea {
    background: var(--bg-card-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* Modo claro: ajustes especiales para mejor legibilidad */
body[data-theme="light"] .srv-card,
body[data-theme="light"] .maint-section,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    border: 1px solid #dee2e6 !important;
}

/* Las cards de header de servidor (Main Panel, Balancer) tienen su propio gradient,
   esas las dejamos como están porque son intencionalmente coloridas */
.srv-head { color: #fff !important; }

/* Body con metric data text */
.srv-body, .srv-stat .key, .srv-stat .val {
    /* el JS los actualiza pero los colores deben respetar tema */
}
body[data-theme="light"] .srv-stat .val { color: #212529 !important; }
body[data-theme="light"] .srv-stat .key { color: #6c757d !important; }

/* === SIDEBAR Y TOPBAR ADAPTABLES === */
.sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border) !important;
}
body[data-layout="horizontal"] .sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Logo Xmini: ajusta color según tema */
body[data-theme="light"] .sidebar-logo > div:first-child {
    color: var(--accent) !important;
    text-shadow: 0 0 15px rgba(25,113,194,0.3) !important;
}
body[data-theme="light"] .sidebar-logo > div:first-child span {
    color: var(--text-main) !important;
}
body[data-theme="light"] .sidebar-logo > div:last-child {
    color: var(--text-dim) !important;
}

/* Sidebar links: hover y active según tema */
.sidebar nav a {
    color: var(--text-main) !important;
    border-radius: 6px;
    margin: 1px 8px;
    padding: 8px 12px;
}
body[data-layout="horizontal"] .sidebar nav a {
    margin: 0 2px;
}
.sidebar nav a:hover {
    background: var(--bg-card-2) !important;
}
.sidebar nav a.active {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Separador del sidebar adapta */
.sidebar hr {
    border-color: var(--border) !important;
}

/* === LOGO XMINI ADAPTABLE === */
.sidebar-logo {
    text-align: center;
    padding: 14px 0 8px;
    background: transparent !important;
}
.xmini-logo {
    font-size: 72px;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -3px;
    line-height: 1;
    text-shadow: 0 0 25px var(--accent-glow), 0 0 50px var(--accent-glow);
}
.xmini-logo span {
    font-size: 20px;
    font-weight: 300;
    vertical-align: baseline;
    margin-left: 2px;
    position: relative;
    top: -22px;
    opacity: 0.95;
    color: var(--text-main);
}
.xmini-sub {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* En modo light el logo se ve mejor con la X en azul */
body[data-theme="light"] .xmini-logo {
    text-shadow: 0 0 15px rgba(25,113,194,0.3);
}

/* En layout horizontal el logo se hace más chico */
body[data-layout="horizontal"] .xmini-sub {
    display: none !important;
}

/* === FONDO SKY BLUE (gradiente azul cielo) === */
body[data-bg="sky"] {
    background: linear-gradient(180deg, #6e9bc4 0%, #a8c5dd 30%, #c8d9e7 60%, #e6eef5 100%) !important;
    background-attachment: fixed !important;
}
body[data-bg="sky-soft"] {
    background: linear-gradient(135deg, #b8d4e8 0%, #d4e2ec 50%, #e8eef3 100%) !important;
    background-attachment: fixed !important;
}

/* === SIDEBAR adopta el fondo Sky cuando está activo === */
body[data-bg="sky"] .sidebar {
    background: linear-gradient(180deg, #6e9bc4 0%, #a8c5dd 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.3) !important;
}
body[data-bg="sky-soft"] .sidebar {
    background: linear-gradient(180deg, #b8d4e8 0%, #d4e2ec 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.3) !important;
}

/* Ajustar colores del logo y texto del sidebar para los fondos Sky */
body[data-bg="sky"] .xmini-logo,
body[data-bg="sky-soft"] .xmini-logo {
    color: #1c3d5a !important;
    text-shadow: 0 0 15px rgba(255,255,255,0.5) !important;
}
body[data-bg="sky"] .xmini-logo span,
body[data-bg="sky-soft"] .xmini-logo span {
    color: #2a5278 !important;
}
body[data-bg="sky"] .xmini-sub,
body[data-bg="sky-soft"] .xmini-sub {
    color: #2a5278 !important;
}

/* Links del sidebar en modo Sky */
body[data-bg="sky"] .sidebar nav a,
body[data-bg="sky-soft"] .sidebar nav a {
    color: #1c3d5a !important;
}
body[data-bg="sky"] .sidebar nav a:hover,
body[data-bg="sky-soft"] .sidebar nav a:hover {
    background: rgba(255,255,255,0.4) !important;
}
body[data-bg="sky"] .sidebar nav a.active,
body[data-bg="sky-soft"] .sidebar nav a.active {
    background: #1971c2 !important;
    color: #fff !important;
}

/* En layout horizontal también */
body[data-bg="sky"][data-layout="horizontal"] .sidebar,
body[data-bg="sky-soft"][data-layout="horizontal"] .sidebar {
    background: linear-gradient(90deg, #6e9bc4 0%, #a8c5dd 100%) !important;
}

/* === CARDS adaptables a fondos claros (Sky) === */
body[data-bg="sky"] .srv-card,
body[data-bg="sky-soft"] .srv-card,
body[data-bg="sky"] .stat-card,
body[data-bg="sky-soft"] .stat-card,
body[data-bg="sky"] .card,
body[data-bg="sky-soft"] .card {
    background: rgba(255,255,255,0.85) !important;
    color: #1c3d5a !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(8px);
}

/* Textos dentro de las cards Sky */
body[data-bg="sky"] .srv-stat .val,
body[data-bg="sky-soft"] .srv-stat .val,
body[data-bg="sky"] .stat-card .value,
body[data-bg="sky-soft"] .stat-card .value {
    color: #1c3d5a !important;
}
body[data-bg="sky"] .srv-stat .key,
body[data-bg="sky-soft"] .srv-stat .key,
body[data-bg="sky"] .stat-card .label,
body[data-bg="sky-soft"] .stat-card .label {
    color: #5a7088 !important;
}

/* Barras de progreso en Sky: fondo más visible */
body[data-bg="sky"] .bar-wrap,
body[data-bg="sky-soft"] .bar-wrap {
    background: rgba(0,0,0,0.1) !important;
}

/* Tablas en Sky */
body[data-bg="sky"] table,
body[data-bg="sky-soft"] table {
    color: #1c3d5a !important;
}
body[data-bg="sky"] table th,
body[data-bg="sky-soft"] table th {
    background: rgba(0,0,0,0.05) !important;
    color: #5a7088 !important;
}

/* Headings dentro de cards en Sky */
body[data-bg="sky"] h1, body[data-bg="sky"] h2, body[data-bg="sky"] h3,
body[data-bg="sky-soft"] h1, body[data-bg="sky-soft"] h2, body[data-bg="sky-soft"] h3 {
    color: #1c3d5a !important;
}

/* Texto general dentro del main */
body[data-bg="sky"] .main,
body[data-bg="sky-soft"] .main {
    color: #1c3d5a !important;
}

/* === MEJORAS LAYOUT HORIZONTAL ELEGANTE === */
body[data-layout="horizontal"] .sidebar {
    padding: 12px 24px !important;
    min-height: 70px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Logo más prominente en horizontal */
body[data-layout="horizontal"] .sidebar-logo {
    padding: 0 24px 0 8px !important;
    margin-right: 16px;
    height: 50px;
    display: flex !important;
    align-items: center;
    border-right: 2px solid rgba(255,255,255,0.15);
}


/* Nav links más limpios en horizontal */
body[data-layout="horizontal"] .sidebar nav {
    gap: 4px !important;
    align-items: center;
}
body[data-layout="horizontal"] .sidebar nav a {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s;
}
body[data-layout="horizontal"] .sidebar nav a:hover {
    transform: translateY(-1px);
}

/* En layout horizontal con Sky: separador con tono azul */
body[data-bg="sky"][data-layout="horizontal"] .sidebar-logo,
body[data-bg="sky-soft"][data-layout="horizontal"] .sidebar-logo {
    border-right-color: rgba(28,61,90,0.2) !important;
}
body[data-bg="sky"][data-layout="horizontal"] .xmini-logo,
body[data-bg="sky-soft"][data-layout="horizontal"] .xmini-logo {
    color: #1c3d5a !important;
    text-shadow: 0 0 12px rgba(255,255,255,0.6) !important;
}
body[data-bg="sky"][data-layout="horizontal"] .xmini-logo span,
body[data-bg="sky-soft"][data-layout="horizontal"] .xmini-logo span {
    color: #2a5278 !important;
}

/* Ocultar idioma y separador en horizontal definitivamente */
body[data-layout="horizontal"] .sidebar hr,
body[data-layout="horizontal"] #lang_selector {
    display: none !important;
}

/* Reducir padding del main en horizontal */
body[data-layout="horizontal"] .main {
    padding-top: 90px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* === FIX FINAL: logo bien visible en layout horizontal === */
body[data-layout="horizontal"] .sidebar-logo {
    padding: 4px 28px 4px 12px !important;
    height: auto !important;
    min-height: 60px;
    align-self: stretch;
}

body[data-layout="horizontal"] .xmini-logo {
    font-size: 56px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 22px var(--accent-glow), 0 0 40px var(--accent-glow) !important;
    line-height: 0.85 !important;
}

body[data-layout="horizontal"] .xmini-logo span {
    font-size: 18px !important;
    top: -18px !important;
    margin-left: 3px !important;
}

/* En Sky/Light: mejor contraste */
body[data-bg="sky"][data-layout="horizontal"] .xmini-logo,
body[data-bg="sky-soft"][data-layout="horizontal"] .xmini-logo,
body[data-theme="light"][data-layout="horizontal"] .xmini-logo {
    color: #1c3d5a !important;
    text-shadow: 0 0 18px rgba(255,255,255,0.7), 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* En oscuro: brillo azul */
body[data-theme="dark"][data-layout="horizontal"] .xmini-logo,
body[data-theme="midnight"][data-layout="horizontal"] .xmini-logo {
    color: #fff !important;
    text-shadow: 0 0 22px rgba(77,171,247,0.8) !important;
}

/* === SUPER OVERRIDE FINAL DEL LOGO HORIZONTAL === */
body[data-layout="horizontal"] .sidebar-logo .xmini-logo {
    font-size: 64px !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    color: var(--accent) !important;
    text-shadow: 0 0 25px var(--accent-glow), 0 0 50px var(--accent-glow) !important;
    margin: 0 !important;
    padding: 0 !important;
}
body[data-layout="horizontal"] .sidebar-logo .xmini-logo span {
    font-size: 20px !important;
    font-weight: 400 !important;
    top: -22px !important;
    margin-left: 3px !important;
    color: var(--text-main) !important;
}
body[data-layout="horizontal"] .sidebar-logo {
    padding: 0 30px 0 16px !important;
    margin: 0 16px 0 0 !important;
    height: auto !important;
    min-height: 70px;
    display: inline-flex !important;
    align-items: center !important;
    border-right: 2px solid rgba(255,255,255,0.2) !important;
}

/* En Sky/Light: X azul oscuro */
body[data-bg="sky"][data-layout="horizontal"] .sidebar-logo .xmini-logo,
body[data-bg="sky-soft"][data-layout="horizontal"] .sidebar-logo .xmini-logo,
body[data-theme="light"][data-layout="horizontal"] .sidebar-logo .xmini-logo {
    color: #1971c2 !important;
    text-shadow: 0 0 18px rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.15) !important;
}
body[data-bg="sky"][data-layout="horizontal"] .sidebar-logo .xmini-logo span,
body[data-bg="sky-soft"][data-layout="horizontal"] .sidebar-logo .xmini-logo span,
body[data-theme="light"][data-layout="horizontal"] .sidebar-logo .xmini-logo span {
    color: #1c3d5a !important;
}

/* Mejorar el contenedor del sidebar en horizontal */
body[data-layout="horizontal"] .sidebar {
    min-height: 80px !important;
    padding: 8px 16px !important;
}

/* === Engrosar "mini" para que combine con la X === */
.xmini-logo span,
body[data-layout="horizontal"] .sidebar-logo .xmini-logo span,
body[data-layout="vertical"] .xmini-logo span {
    font-weight: 700 !important;
    letter-spacing: 0px !important;
    opacity: 1 !important;
}

/* === Ajustes finales de "mini": más pegada a X y color más suave === */
.xmini-logo span,
body[data-layout="horizontal"] .sidebar-logo .xmini-logo span {
    margin-left: -8px !important;
    font-weight: 600 !important;
    color: var(--text-dim) !important;
    opacity: 0.85 !important;
}

/* En modo light (sky/light/sky-soft): gris medio en vez de negro fuerte */
body[data-theme="light"] .xmini-logo span,
body[data-bg="sky"] .xmini-logo span,
body[data-bg="sky-soft"] .xmini-logo span {
    color: #5a7088 !important;
}

/* === SUPER FORZAR color suave para "mini" === */
html body .sidebar-logo .xmini-logo span,
html body[data-theme="light"] .sidebar-logo .xmini-logo span,
html body[data-bg="sky"] .sidebar-logo .xmini-logo span,
html body[data-bg="sky-soft"] .sidebar-logo .xmini-logo span,
html body[data-layout="horizontal"] .sidebar-logo .xmini-logo span {
    color: #8b95a5 !important;
    opacity: 0.7 !important;
    font-weight: 500 !important;
    margin-left: -10px !important;
}

/* === FIX: 'mini' visible pero no negro fuerte === */
html body .sidebar-logo .xmini-logo span,
html body[data-theme="light"] .sidebar-logo .xmini-logo span,
html body[data-bg="sky"] .sidebar-logo .xmini-logo span,
html body[data-bg="sky-soft"] .sidebar-logo .xmini-logo span,
html body[data-layout="horizontal"] .sidebar-logo .xmini-logo span {
    color: #2c4866 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    margin-left: -8px !important;
}