/*
 * TEMA OSCURO (ajustes a mano). Se activa con data-bs-theme="dark" en <html> (ver js/tema.js y el selector del encabezado).
 *
 * Capas, de más general a más puntual:
 *   1. Bootstrap 5.3 y Blazor.Bootstrap leen data-bs-theme solos (formularios, tablas, modales, menús, tarjetas...).
 *   2. Radzen cambia de hoja de estilos (standard.css -> standard-dark.css) desde js/tema.js.
 *   3. tema-oscuro.generado.css: colores fijos de app.css y de los *.razor.css, invertidos en luminosidad
 *      (se regenera con tools/generar-tema-oscuro.py; no se edita).
 *   4. ESTE archivo: variables propias, menú lateral, clases de Bootstrap que son blancas "a la fuerza" y estilos escritos en línea.
 *
 * Pantallas con colores que aún no se ven bien: se ajustan aquí (o se corrige el color fijo de la pantalla).
 */

/*
 * Iconos de Radzen: la hoja oscura (standard-dark.css) pide la fuente "Material Symbols", que el paquete Radzen 4.34.4 no publica
 * (la ruta devuelve la página de inicio y los iconos salen como texto, p. ej. "arrow_drop_down"). Se usa la fuente "Material Icons",
 * la misma del tema claro, que sí está publicada. Si se actualiza Radzen a una versión que traiga la fuente, se puede quitar.
 */
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("../_content/Radzen.Blazor/fonts/MaterialIcons-Regular.woff") format("woff");
}

html[data-bs-theme="dark"] {
    --rz-icon-font-family: "Material Icons";
}

html[data-bs-theme="dark"] .rzi {
    font-variation-settings: normal;
    font-weight: normal;
}

/*
 * La hoja oscura de Radzen pone "box-sizing: inherit" en todos los elementos y html no lo define, así que en oscuro todo quedaba en
 * content-box (campos, selectores y tablas más anchos que en claro). Se vuelve a border-box, como en Bootstrap y en el tema claro.
 */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] *,
html[data-bs-theme="dark"] *::before,
html[data-bs-theme="dark"] *::after {
    box-sizing: border-box;
}

/* La hoja oscura de Radzen 4.34.4 no da posición al selector de fechas: el botón del calendario quedaba suelto en la página */
html[data-bs-theme="dark"] .rz-calendar-w-btn {
    position: relative;
    display: inline-block;
}

/* Y tampoco da ancho al campo de texto del selector: la hoja oscura estiliza ".rz-datepicker > .rz-inputtext" y esta versión pinta ".rz-calendar" (el campo medía 178 px y se montaba sobre el siguiente) */
html[data-bs-theme="dark"] .rz-calendar > .rz-inputtext {
    width: 100%;
    line-height: var(--rz-datepicker-line-height);
    padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width));
}

html[data-bs-theme="dark"] .rz-calendar-w-btn .rz-datepicker-trigger {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

/* ---------- Variables propias de la aplicación ---------- */
html[data-bs-theme="dark"] {
    --fondo: #14161a;
    --bs-body-bg: #181b20;
    --bs-secondary-bg: #20242b;
    --bs-tertiary-bg: #1d2127;
    --bs-border-color: #3a4049;

    /* Menú lateral (Blazor.Bootstrap Sidebar). El color de la cabecera lo fija el cliente en su configuración y ya es oscuro. */
    --bb-sidebar-background-color: #1b1e24;
    --bb-sidebar-content-border-color: #3a4049;
    --bb-sidebar-nav-item-text-color: #d6dbe6;
    --bb-sidebar-nav-item-text-active-color-rgb: 255, 255, 255;
    --bb-sidebar-navbar-toggler-icon-color: #d6dbe6;
    --bb-sidebar-navbar-toggler-background-color: #1b1e24;
    --bb-sidebar2-background-color: #1b1e24;
    --bb-sidebar2-content-border-color: #3a4049;
    --bb-sidebar2-nav-item-text-color: #d6dbe6;
    --bb-sidebar2-nav-item-text-active-color-rgb: 255, 255, 255;
    --bb-sidebar2-navbar-toggler-icon-color: #d6dbe6;
    --bb-sidebar2-navbar-toggler-background-color: #1b1e24;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.fondo1 {
    color: var(--bs-body-color);
}

/* La imagen de fondo de la casa es casi blanca: en oscuro se tapa con una capa del color de fondo y queda solo como marca de agua */
html[data-bs-theme="dark"] body.fondo1 {
    background-image: linear-gradient(rgba(20, 22, 26, 0.94), rgba(20, 22, 26, 0.94)), url('/imagen/icon/house_wallpaper.png') !important;
}

/* ---------- Clases de Bootstrap que son blancas o negras fijas ---------- */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: #aab2bf !important;
}

[data-bs-theme="dark"] .border-light,
[data-bs-theme="dark"] .border-white {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--av-tabla-encabezado, #242a32);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: #2a3038;
    --bs-btn-border-color: #3a4049;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #343b45;
    --bs-btn-hover-border-color: #475060;
}

/* Bootstrap deja el gris de borde y letra de "outline-secondary" casi invisible sobre fondo oscuro */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #b4bcc8;
    --bs-btn-border-color: #5b6470;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a4049;
    --bs-btn-hover-border-color: #6b7480;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #444c57;
    --bs-btn-active-border-color: #6b7480;
    --bs-btn-disabled-color: #7b8492;
    --bs-btn-disabled-border-color: #4a525d;
}

/* Insignias de Bootstrap con fondo claro y letra oscura: se dejan legibles */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: #2a3038 !important;
    color: var(--bs-body-color) !important;
}

/* Radio marcado: el punto es #444 (app.css) y el generador solo invierte el fondo de la caja (#1a1a1a), así que el punto casi no se ve.
   Se pinta claro para que la opción marcada se distinga (ej. «TIPO» en Configurar > Plantillas). */
[data-bs-theme="dark"] input[type="radio"]::before {
    background-color: #ebebeb;
}

/* ---------- Estilos escritos en línea con fondo blanco (style="background:#fff" y variantes) ---------- */
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#FFF"],
[data-bs-theme="dark"] [style*="background: #FFF"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background: white"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#FFF"],
[data-bs-theme="dark"] [style*="background-color: #FFF"],
[data-bs-theme="dark"] [style*="background-color:white"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="rgb(255,255,255)"],
[data-bs-theme="dark"] [style*="rgb(255, 255, 255)"] {
    background-color: var(--bs-body-bg) !important;
}

/* Grises muy claros escritos en línea (#f8f9fa de las tarjetas de ReporteAdministrativo y del detalle de eventos, #f4f4f4 del visor) */
[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],
[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background-color: #f4f4f4"],
[data-bs-theme="dark"] [style*="background-color:#f4f4f4"],
[data-bs-theme="dark"] [style*="background: #f4f4f4"],
[data-bs-theme="dark"] [style*="background:#f4f4f4"] {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Insignia de alerta de Radzen (p. ej. el contador de Docs en Revisión): el texto blanco sobre ámbar casi no se lee, en claro y en oscuro */
.rz-badge.rz-badge-warning {
    color: #212529;
}

/* Azul puro escrito en línea (p. ej. el icono del menú): sobre fondo oscuro se ve apagado */
[data-bs-theme="dark"] [style*="color:blue"],
[data-bs-theme="dark"] [style*="color: blue"] {
    color: #6ea8fe !important;
}

/* Letra oscura escrita en línea (negros y grises de texto) */
[data-bs-theme="dark"] [style*="color:#000"],
[data-bs-theme="dark"] [style*="color: #000"],
[data-bs-theme="dark"] [style*="color:black"],
[data-bs-theme="dark"] [style*="color: black"],
[data-bs-theme="dark"] [style*="color:#333"],
[data-bs-theme="dark"] [style*="color: #333"],
[data-bs-theme="dark"] [style*="color:#555"],
[data-bs-theme="dark"] [style*="color: #555"] {
    color: var(--bs-body-color) !important;
}

/* Gris medio de texto escrito en línea (#444 de las observaciones, #495057 de los botones de duración) */
[data-bs-theme="dark"] [style*="color:#444"],
[data-bs-theme="dark"] [style*="color: #444"],
[data-bs-theme="dark"] [style*="color:#777"],
[data-bs-theme="dark"] [style*="color: #777"] {
    color: #aab2bf !important;
}

/* Azul institucional oscuro (#00257e) usado como color de título: sobre fondo oscuro no se lee */
[data-bs-theme="dark"] [style*="color:#00257e"],
[data-bs-theme="dark"] [style*="color: #00257e"] {
    color: #6ea8fe !important;
}

/* Bordes negros o blancos escritos en línea (tablas de Informe): en oscuro se igualan al borde del tema */
[data-bs-theme="dark"] [style*="solid black"],
[data-bs-theme="dark"] [style*="solid white"] {
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] [style*="border-bottom-color:black"],
[data-bs-theme="dark"] [style*="border-bottom-color: black"] {
    border-bottom-color: var(--bs-border-color) !important;
}

/*
 * Fondos CLAROS que se dejan claros a propósito (miniaturas del formato de galería en Informe, títulos de CompSelActos,
 * botón de horas de UcHoras): llevan su propia letra oscura. Va después de las reglas de letra de arriba para ganar.
 */
[data-bs-theme="dark"] [style*="background: #ffffff"],
[data-bs-theme="dark"] [style*="background: #aaaaaa"],
[data-bs-theme="dark"] [style*="background-color:#A6E8E6"],
[data-bs-theme="dark"] [style*="background-color:gray"] {
    color: #212529 !important;
}

[data-bs-theme="dark"] [style*="background: #ffffff"] {
    background-color: #e9ecef !important;
}

/* ---------- Estilos de bloques <style> dentro de pantallas (el generador solo ve app.css y *.razor.css) ---------- */
/* SelectorPlan: tarjeta de plan con degradado blanco y botones de duración con gris fijo */
[data-bs-theme="dark"] .plan-card {
    background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-tertiary-bg) 100%);
}

[data-bs-theme="dark"] .duracion-btn {
    border-color: var(--bs-border-color) !important;
    color: #c9d1dc !important;
}

[data-bs-theme="dark"] .duracion-btn:hover {
    background-color: var(--bs-secondary-bg) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .btn-check:checked + .duracion-btn {
    color: #fff !important;
}

/* EstadoVpsPanel: borde de tarjeta, números de la dona y encabezados de tabla */
[data-bs-theme="dark"] .vps-card {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .vps-dona .vps-num {
    fill: var(--bs-body-color);
}

[data-bs-theme="dark"] .vps-dona .vps-sub {
    fill: #aab2bf;
}

[data-bs-theme="dark"] .vps-h,
[data-bs-theme="dark"] .vps-tabla th {
    color: #aab2bf;
    border-bottom-color: var(--bs-border-color);
}

/* Donas del Panel de Control y Estado VPS: el aro de fondo y la porción "libre" son grises casi blancos fijos (#eceef0, #dcdbd3) */
[data-bs-theme="dark"] svg [stroke="#eceef0"],
[data-bs-theme="dark"] svg [stroke="#dcdbd3"] {
    stroke: #3a4049;
}

[data-bs-theme="dark"] [style*="background:#dcdbd3"] {
    background: #4a525d !important;
}

/* Nivel "Emergencia" de Estado VPS: casi negro (#212529) para el aro y la leyenda; sobre fondo oscuro desaparecía */
[data-bs-theme="dark"] svg [stroke="#212529"] {
    stroke: #f1f3f5;
}

[data-bs-theme="dark"] [style*="background:#212529"] {
    background: #f1f3f5 !important;
}

/* ---------- Encabezado y selector de tema ---------- */
.selector-tema {
    color: #555;
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.35rem 0.55rem;
}

.selector-tema:hover {
    color: #0d6efd;
}

[data-bs-theme="dark"] .selector-tema {
    color: #f2c94c;
}

[data-bs-theme="dark"] .selector-tema:hover {
    color: #ffe08a;
}

/* ---------- Campos y detalles que Bootstrap no cubre ---------- */
[data-bs-theme="dark"] ::placeholder {
    color: #8a93a1;
}

[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

[data-bs-theme="dark"] hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* Imágenes y logos con fondo blanco propio: se suaviza el brillo sin cambiar sus colores */
[data-bs-theme="dark"] img:not([src$=".svg"]) {
    filter: brightness(0.92);
}

/* ---------- Colores que el Master puede cambiar (ver Shared/Modelos/PaletaTema.cs): sin cambios valen lo de siempre ---------- */
.form-control,
.form-select {
    background-color: var(--av-campo-fondo, var(--bs-body-bg));
}

.table-light {
    --bs-table-bg: var(--av-tabla-encabezado, #f8f9fa);
}