/* Temas de Conf. Dashboard (clase tema-* del <body>, templates/vtcbody.html).
   Cada tema define tipografía, esquinas, sombras, fondo, la paleta de botones (no institucional) y la paleta de
   tonos de los botones de módulo (--m1…--m8; templates/vtcheader.html la reparte a los que no tienen color propio).
   Los colores del panel (--barra-1, --barra-2, --barra-texto, --gd-dorado) salen de Conf. Dashboard; al elegir un
   tema en el formulario se rellenan con los de ese tema y se pueden ajustar.
   Copia de Novedades. El tema «institucional» (el de fábrica) no pone clase tema-* en el <body>: nada de este archivo
   aplica salvo el panel lateral y los colores del panel, y la plataforma se ve como siempre. */

/* ── Variables por tema ─────────────────────────────────────────────────────── */
body.tema-clasico {
    --t-fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-fondo: #F4F6FB; --t-radio: .5rem; --t-radio-tarjeta: .7rem;
    --t-sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 6px 18px rgba(15, 23, 42, .06);
    --t-primario: #4F46E5; --t-exito: #059669; --t-info: #0284C7; --t-aviso: #D97706; --t-peligro: #E11D48;
    --t-secundario: #64748B; --t-oscuro: #1E293B;
    --m1: #818CF8; --m2: #2DD4BF; --m3: #FBBF24; --m4: #F472B6; --m5: #38BDF8; --m6: #A3E635; --m7: #C084FC; --m8: #FB923C;
}
body.tema-mac {
    --t-fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
    --t-fondo: #F5F5F7; --t-radio: 9px; --t-radio-tarjeta: 14px;
    --t-sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --t-primario: #007AFF; --t-exito: #34C759; --t-info: #32ADE6; --t-aviso: #FF9500; --t-peligro: #FF3B30;
    --t-secundario: #8E8E93; --t-oscuro: #1D1D1F;
    --m1: #007AFF; --m2: #34C759; --m3: #FF9500; --m4: #AF52DE; --m5: #FF2D55; --m6: #5AC8FA; --m7: #FFCC00; --m8: #5856D6;
}
body.tema-minimalista {
    --t-fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --t-fondo: #FFFFFF; --t-radio: 4px; --t-radio-tarjeta: 6px; --t-sombra: none;
    --t-primario: #111827; --t-exito: #16A34A; --t-info: #2563EB; --t-aviso: #CA8A04; --t-peligro: #DC2626;
    --t-secundario: #6B7280; --t-oscuro: #111827;
    --m1: #111827; --m2: #374151; --m3: #4B5563; --m4: #111827; --m5: #374151; --m6: #4B5563; --m7: #111827; --m8: #374151;
}
body.tema-moderno {
    --t-fuente: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --t-fondo: #F4F2FF; --t-radio: 999px; --t-radio-tarjeta: 18px;
    --t-sombra: 0 2px 6px rgba(76, 29, 149, .06), 0 16px 36px rgba(76, 29, 149, .10);
    --t-primario: #7C3AED; --t-exito: #10B981; --t-info: #06B6D4; --t-aviso: #F59E0B; --t-peligro: #F43F5E;
    --t-secundario: #6366F1; --t-oscuro: #1E1B4B;
    --m1: #F472B6; --m2: #A78BFA; --m3: #22D3EE; --m4: #FBBF24; --m5: #34D399; --m6: #F87171; --m7: #60A5FA; --m8: #E879F9;
}
body.tema-oceano {
    --t-fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-fondo: #EEF7F9; --t-radio: .6rem; --t-radio-tarjeta: .9rem;
    --t-sombra: 0 1px 3px rgba(8, 47, 73, .08), 0 8px 22px rgba(8, 47, 73, .07);
    --t-primario: #0EA5E9; --t-exito: #14B8A6; --t-info: #22D3EE; --t-aviso: #FBBF24; --t-peligro: #FB7185;
    --t-secundario: #64748B; --t-oscuro: #0C4A6E;
    --m1: #2DD4BF; --m2: #38BDF8; --m3: #A5F3FC; --m4: #FDE68A; --m5: #67E8F9; --m6: #5EEAD4; --m7: #BAE6FD; --m8: #FCA5A5;
}
body.tema-tactico {
    --t-fuente: Bahnschrift, "DIN Alternate", "Segoe UI Semibold", "Segoe UI", system-ui, Roboto, sans-serif;
    --t-fondo: #ECEEE6; --t-radio: 3px; --t-radio-tarjeta: 4px;
    --t-sombra: 0 1px 0 rgba(30, 42, 31, .12), 0 6px 16px rgba(30, 42, 31, .08);
    --t-primario: #4D7C0F; --t-exito: #15803D; --t-info: #0E7490; --t-aviso: #CA8A04; --t-peligro: #B91C1C;
    --t-secundario: #57534E; --t-oscuro: #1C2418;
    --m1: #A3E635; --m2: #FACC15; --m3: #84CC16; --m4: #D6D3D1; --m5: #BEF264; --m6: #EAB308; --m7: #65A30D; --m8: #A8A29E;
}
body.tema-marino {
    --t-fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-fondo: #EDF1F8; --t-radio: .55rem; --t-radio-tarjeta: .8rem;
    --t-sombra: 0 1px 3px rgba(11, 31, 58, .10), 0 10px 26px rgba(11, 31, 58, .08);
    --t-primario: #1D4ED8; --t-exito: #0F766E; --t-info: #0284C7; --t-aviso: #D97706; --t-peligro: #BE123C;
    --t-secundario: #475569; --t-oscuro: #0B1F3A;
    --m1: #60A5FA; --m2: #93C5FD; --m3: #38BDF8; --m4: #FBBF24; --m5: #A5B4FC; --m6: #22D3EE; --m7: #BFDBFE; --m8: #7DD3FC;
}

/* ── Reglas comunes a todos los temas ───────────────────────────────────────── */
body[class*="tema-"] { --gd-font: var(--t-fuente); font-family: var(--t-fuente); }
body[class*="tema-"]:not(.dark-mode) .content-wrapper { background: var(--t-fondo); }
body[class*="tema-"] .card { border-radius: var(--t-radio-tarjeta); box-shadow: var(--t-sombra); }
body[class*="tema-"] .card > .card-header:first-child { border-radius: var(--t-radio-tarjeta) var(--t-radio-tarjeta) 0 0; }
body[class*="tema-"] .btn { border-radius: var(--t-radio); font-weight: 600; transition: filter .15s, box-shadow .15s, transform .1s; }
body[class*="tema-"] .btn.btn-xs, body[class*="tema-"] .btn-group > .btn { border-radius: min(var(--t-radio), .45rem); }
body[class*="tema-"] .btn:active { transform: translateY(1px); }
body[class*="tema-"] .form-control, body[class*="tema-"] .custom-select { border-radius: min(var(--t-radio), .55rem); }

/* Paleta de botones (sustituye a la de Bootstrap/institucional) */
body[class*="tema-"] .btn-primary   { --b: var(--t-primario); }
body[class*="tema-"] .btn-success   { --b: var(--t-exito); }
body[class*="tema-"] .btn-info      { --b: var(--t-info); }
body[class*="tema-"] .btn-warning   { --b: var(--t-aviso); }
body[class*="tema-"] .btn-danger    { --b: var(--t-peligro); }
body[class*="tema-"] .btn-secondary { --b: var(--t-secundario); }
body[class*="tema-"] .btn-dark      { --b: var(--t-oscuro); }
body[class*="tema-"] :is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary, .btn-dark) {
    background: var(--b) !important; border-color: var(--b) !important; color: #fff !important;
}
body[class*="tema-"] :is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary, .btn-dark):hover { filter: brightness(.92); }
body[class*="tema-"] :is(.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary, .btn-dark):focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--b) 30%, transparent) !important;
}
body[class*="tema-"] .btn-c5.active, body[class*="tema-"] .btn-group > .btn.active { filter: brightness(.82); }

/* Botones sin relleno. static/css/style.css (base heredada) pone «.btn { color: white !important }»: con fondo
   transparente o claro el texto quedaba invisible (bandejas del histórico, botones de herramienta, etc.). */
body[class*="tema-"] .btn-outline-primary   { --b: var(--t-primario); }
body[class*="tema-"] .btn-outline-success   { --b: var(--t-exito); }
body[class*="tema-"] .btn-outline-info      { --b: var(--t-info); }
body[class*="tema-"] .btn-outline-warning   { --b: var(--t-aviso); }
body[class*="tema-"] .btn-outline-danger    { --b: var(--t-peligro); }
body[class*="tema-"] .btn-outline-secondary { --b: var(--t-secundario); }
body[class*="tema-"] .btn-outline-dark      { --b: var(--t-oscuro); }
body[class*="tema-"] .btn[class*="btn-outline-"] { color: var(--b) !important; border-color: var(--b) !important; background: transparent; }
body[class*="tema-"] .btn[class*="btn-outline-"]:hover,
body[class*="tema-"] .btn[class*="btn-outline-"].active { color: #fff !important; background: var(--b) !important; }
body[class*="tema-"] :is(.btn-light, .btn-default, .btn-outline-light) { color: #1f2937 !important; }
body[class*="tema-"] .btn-link { color: var(--t-primario) !important; }
body[class*="tema-"] .btn-tool { color: var(--t-secundario) !important; }
body[class*="tema-"] .btn-tool:hover { color: var(--t-primario) !important; }
body.dark-mode[class*="tema-"] .btn[class*="btn-outline-"]:not(:hover):not(.active) { filter: brightness(1.6); }
body.dark-mode[class*="tema-"] :is(.btn-light, .btn-default) { color: #1f2937 !important; }
body[class*="tema-"] .badge-primary { background: var(--t-primario); }
body[class*="tema-"] .badge-success { background: var(--t-exito); }
body[class*="tema-"] .badge-info { background: var(--t-info); }
body[class*="tema-"] .badge-warning { background: var(--t-aviso); color: #fff; }
body[class*="tema-"] .badge-danger { background: var(--t-peligro); }
body[class*="tema-"] .page-item.active .page-link { background: var(--t-primario); border-color: var(--t-primario); }
body[class*="tema-"] .page-link { color: var(--t-primario); }
body[class*="tema-"] .custom-control-input:checked ~ .custom-control-label::before { background: var(--t-primario); border-color: var(--t-primario); }
body[class*="tema-"] .content-wrapper a:not([class]) { color: var(--t-primario); }

/* Tarjetas con contorno: el color del tema en lugar del institucional */
body[class*="tema-"] :is(.card-outline.card-primary, .card-outline.card-maroon, .card-outline.card-navy, .card-outline.card-indigo) { border-top-color: var(--t-primario) !important; }
body[class*="tema-"] .card-outline.card-danger { border-top-color: var(--t-peligro) !important; }
body[class*="tema-"] .card-outline.card-success { border-top-color: var(--t-exito) !important; }
body[class*="tema-"] .card-outline.card-info { border-top-color: var(--t-info) !important; }
body[class*="tema-"] .card-outline.card-warning { border-top-color: var(--t-aviso) !important; }
body[class*="tema-"] .card-outline.card-secondary { border-top-color: var(--t-secundario) !important; }

/* ── Panel lateral (Posición del menú = lateral) ────────────────────────────── */
.vtc-lateral { background: linear-gradient(180deg, var(--barra-1, #2a2f38), var(--barra-2, #1f232a)) !important; font-family: var(--t-fuente); }
.vtc-lateral .brand-link { color: var(--barra-texto, #cfd5de) !important; border-bottom: 1px solid color-mix(in srgb, var(--barra-texto, #cfd5de) 14%, transparent) !important; }
.vtc-lateral .brand-text { font-weight: 700 !important; }
.vtc-lateral .user-panel { border-bottom: 1px solid color-mix(in srgb, var(--barra-texto, #cfd5de) 14%, transparent) !important; }
.vtc-lateral .user-panel .info, .vtc-lateral .user-panel .info small { color: var(--barra-texto, #cfd5de); opacity: .9; }
.vtc-lateral .nav-sidebar .nav-link { color: var(--barra-texto, #cfd5de) !important; border-radius: var(--t-radio-tarjeta, .5rem); margin-bottom: 2px; }
.vtc-lateral .nav-sidebar .nav-link .nav-icon { color: var(--m, inherit); }
.vtc-lateral .nav-sidebar .nav-link:hover { background: color-mix(in srgb, var(--m, var(--barra-texto, #cfd5de)) 16%, transparent) !important; }
.vtc-lateral .nav-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--m, var(--gd-dorado, #BC955C)) 26%, transparent) !important; box-shadow: none !important;
    color: var(--barra-texto, #fff) !important; font-weight: 700;
}
.vtc-lateral .nav-sidebar .nav-link.nav-menuv { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; opacity: .75; }
body.menu-lateral .main-header.vtc-topbar { border-bottom: 1px solid color-mix(in srgb, var(--barra-texto, #cfd5de) 10%, transparent); }

/* ── Detalles de cada tema ──────────────────────────────────────────────────── */
/* Mac: barra translúcida con desenfoque y menú tipo «Dock» (el ícono crece al pasar el mouse). */
body.tema-mac .vtc-topbar {
    background: color-mix(in srgb, var(--barra-1, #f6f6f6) 78%, transparent) !important;
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important; border-bottom: 0 !important;
}
body.tema-mac .vtc-modmenu { border-radius: 16px; padding: 4px 6px; }
body.tema-mac .topmod-btn { border-radius: 11px; }
body.tema-mac .topmod-btn:hover > i { transform: scale(1.35) translateY(-2px); }
body.tema-mac .card-header { border-bottom-color: rgba(0, 0, 0, .06); }
body.tema-mac .vtc-lateral { backdrop-filter: blur(20px); }

/* Minimalista: plano, sin sombras ni degradados, líneas finas. */
body.tema-minimalista .vtc-topbar { box-shadow: none !important; border-bottom: 1px solid #E5E7EB !important; }
body.tema-minimalista .vtc-modmenu { background: none; border: 0; backdrop-filter: none; }
body.tema-minimalista .card { border: 1px solid #E5E7EB; }
body.tema-minimalista .card-outline { border-top-width: 1px !important; }
body.tema-minimalista .btn { font-weight: 500; letter-spacing: .01em; }
body.tema-minimalista .vtc-lateral { box-shadow: none !important; border-right: 1px solid #E5E7EB; }

/* Moderno: botones en píldora con degradado y brillo suave. */
body.tema-moderno :is(.btn-primary, .btn-success, .btn-info, .btn-danger, .btn-secondary) {
    background: linear-gradient(135deg, var(--b), color-mix(in srgb, var(--b) 55%, #EC4899)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--b) 28%, transparent);
}
body.tema-moderno .vtc-topbar { box-shadow: 0 10px 30px rgba(76, 29, 149, .35) !important; }
body.tema-moderno .topmod-btn.activo { box-shadow: 0 0 14px color-mix(in srgb, var(--m, #F472B6) 45%, transparent); }

/* Océano: barra con un filo luminoso abajo. */
body.tema-oceano .vtc-topbar { border-bottom: 2px solid color-mix(in srgb, var(--gd-dorado, #2DD4BF) 70%, transparent) !important; }

/* Táctico: esquinas rectas, títulos en mayúsculas espaciadas, barra con una retícula muy tenue. */
body.tema-tactico .card-title, body.tema-tactico .vtc-titulo { text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
body.tema-tactico .btn { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
body.tema-tactico .vtc-topbar {
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
                      linear-gradient(180deg, var(--barra-1, #1E2A1F), var(--barra-2, #121A13)) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--gd-dorado, #B5D334) 55%, transparent) !important;
}
body.tema-tactico .vtc-modmenu, body.tema-tactico .topmod-btn { border-radius: 4px; }

/* Azul marino: barra profunda con brillo azul y tarjetas con filo superior. */
body.tema-marino .vtc-topbar { box-shadow: 0 8px 26px rgba(7, 20, 40, .45) !important; }
body.tema-marino .card { border-top: 3px solid color-mix(in srgb, var(--t-primario) 70%, transparent); }
body.tema-marino .topmod-btn.activo { box-shadow: inset 0 -2px 0 var(--m, #60A5FA); }

@media (prefers-reduced-motion: reduce) { body.tema-mac .topmod-btn:hover > i { transform: none; } }