/*
 * Modo oscuro — tema compartido.
 *
 * Vive acá y no dentro de una vista porque lo usan los DOS motores de la app:
 * las pantallas Blade (Materialize) y las de Inertia/Vue. Las Blade no cargan
 * el bundle de Vite y las de Vue no incluyen partials, así que una hoja en
 * public/ es lo único que alcanza a ambas.
 *
 * Lo enlazan: resources/views/app.blade.php (raíz de Inertia) y
 * resources/views/proveedores/partials/modo-oscuro.blade.php (vistas Blade).
 */

/* ===== Modo oscuro ==================================================
   Todo cuelga de `body.modo-oscuro`, así que en modo claro no cambia
   absolutamente nada: sin la clase, ninguna de estas reglas aplica. */

body.modo-oscuro {
    background-color: #121212 !important;
    color: #e0e0e0;
    /* Hace que los controles que dibuja el navegador se rendericen oscuros:
       el ícono del calendario de los input[type=date] (13 en /inscripcion),
       las barras de scroll y el desplegable nativo de los <select>. Sin esto
       el calendario queda casi invisible sobre el fondo oscuro. */
    color-scheme: dark;
}

/* Lienzo y contenedores principales */
body.modo-oscuro #main,
body.modo-oscuro .content-wrapper,
body.modo-oscuro .container {
    background-color: transparent !important;
}

/* Superficies elevadas: tarjetas, pasos del formulario, paneles.
   En Material la elevación se sugiere con superficies más CLARAS, no con
   sombras: por eso el gris es más claro que el fondo, no más oscuro. */
body.modo-oscuro .card,
body.modo-oscuro .card-panel,
body.modo-oscuro .collection,
body.modo-oscuro .collection-item,
body.modo-oscuro .step-content,
body.modo-oscuro .collapsible-body,
body.modo-oscuro .collapsible-header {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* El blanco explícito de Materialize (clase .white) y los grises claros */
body.modo-oscuro .white,
body.modo-oscuro .grey.lighten-1,
body.modo-oscuro .grey.lighten-2,
body.modo-oscuro .grey.lighten-3,
body.modo-oscuro .grey.lighten-4,
body.modo-oscuro .grey.lighten-5 {
    background-color: #1e1e1e !important;
}

/* Texto: los tonos oscuros de Materialize quedarían ilegibles */
body.modo-oscuro h1, body.modo-oscuro h2, body.modo-oscuro h3,
body.modo-oscuro h4, body.modo-oscuro h5, body.modo-oscuro h6,
body.modo-oscuro p, body.modo-oscuro span, body.modo-oscuro label,
body.modo-oscuro li, body.modo-oscuro td, body.modo-oscuro th,
body.modo-oscuro .black-text,
body.modo-oscuro .grey-text.text-darken-1,
body.modo-oscuro .grey-text.text-darken-2,
body.modo-oscuro .grey-text.text-darken-3,
body.modo-oscuro .grey-text.text-darken-4 {
    color: #e0e0e0 !important;
}

/* Campos de formulario */
body.modo-oscuro input[type="text"],
body.modo-oscuro input[type="email"],
body.modo-oscuro input[type="password"],
body.modo-oscuro input[type="number"],
body.modo-oscuro input[type="date"],
body.modo-oscuro input[type="tel"],
body.modo-oscuro input[type="search"],
body.modo-oscuro textarea,
body.modo-oscuro select,
body.modo-oscuro .select-dropdown {
    color: #e0e0e0 !important;
    border-bottom-color: #555 !important;
    background-color: transparent !important;
}

body.modo-oscuro input:focus,
body.modo-oscuro textarea:focus {
    border-bottom-color: #64b5f6 !important;
    box-shadow: 0 1px 0 0 #64b5f6 !important;
}

body.modo-oscuro input::placeholder,
body.modo-oscuro textarea::placeholder,
body.modo-oscuro .helper-text {
    color: #9e9e9e !important;
}

/* Campos deshabilitados: en /inscripcion/ver son TODOS, así que tienen que
   leerse bien y no confundirse con el fondo.

   `-webkit-text-fill-color` además de `color`: Chrome pinta el texto de los
   campos deshabilitados con esa propiedad y el `color` solo no le gana. */
body.modo-oscuro input[disabled],
body.modo-oscuro select[disabled],
body.modo-oscuro textarea[disabled] {
    color: #bdbdbd !important;
    -webkit-text-fill-color: #bdbdbd !important;
    border-bottom-style: dotted !important;
}

/* La vista de sólo lectura trae su propia regla, `#main input[disabled] {
   color: #263238 }` — un azul casi negro pensado para el fondo blanco—, y
   por llevar un id le gana a la de arriba: sobre el fondo oscuro los datos
   quedaban ilegibles. Se repite acá con esa misma especificidad. */
body.modo-oscuro #main input[disabled],
body.modo-oscuro #main select[disabled],
body.modo-oscuro #main textarea[disabled] {
    color: #bdbdbd !important;
    -webkit-text-fill-color: #bdbdbd !important;
}

/* Tablas */
body.modo-oscuro table.striped > tbody > tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .04) !important;
}
body.modo-oscuro table.highlight > tbody > tr:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}
body.modo-oscuro th {
    border-bottom-color: #444 !important;
}

/* Modales y desplegables. Van más claros que el fondo porque flotan por
   encima del contenido. */
body.modo-oscuro .modal,
body.modo-oscuro .modal .modal-content,
body.modo-oscuro .modal .modal-footer,
body.modo-oscuro .dropdown-content,
body.modo-oscuro .dropdown-content li > a,
body.modo-oscuro .dropdown-content li > span {
    background-color: #242424 !important;
    color: #e0e0e0 !important;
}
body.modo-oscuro .dropdown-content li:hover,
body.modo-oscuro .dropdown-content li.active {
    background-color: #333 !important;
}

/* Separadores */
body.modo-oscuro .divider,
body.modo-oscuro hr {
    background-color: #333 !important;
    border-color: #333 !important;
}

/* El stepper: los pasos ya recorridos y el activo */
body.modo-oscuro #linearStepper .step-title {
    color: #e0e0e0 !important;
}

/* Los botones de color propio (rojo del PDF, azul de la nube, verde de
   guardar) NO se tocan: son la identidad visual y contrastan bien sobre
   oscuro. Sólo se ajustan los planos, que sobre fondo oscuro desaparecen. */
body.modo-oscuro .btn-flat {
    color: #90caf9 !important;
}

/* La transición hace que el cambio no sea un golpe seco. Se limita a color
   y fondo: aplicarla a `all` haría que se animen también posiciones y
   tamaños en cada repintado. */
body.modo-oscuro,
body.modo-oscuro .card,
body.modo-oscuro .step-content,
body.modo-oscuro input,
body.modo-oscuro textarea {
    transition: background-color .2s ease, color .2s ease;
}

/* ===== /proveedor/notificaciones ====================================
   Esa vista trae estilos propios (una bandeja tipo correo y la línea de
   tiempo del trámite) con superficies claras que las reglas genéricas de
   arriba no alcanzan, porque no usan .card ni .collection. */

body.modo-oscuro .app-email .app-search,
body.modo-oscuro .app-email .email-brief-info,
body.modo-oscuro .tramite-timeline {
    background: #1e1e1e !important;
    box-shadow: none !important;
}

body.modo-oscuro .app-email .email-header,
body.modo-oscuro .app-email .email-brief-info {
    border-bottom-color: #333 !important;
}

body.modo-oscuro .app-email .email-brief-info:hover,
body.modo-oscuro #notificacionesList .email-brief-info:hover {
    background: #2a2a2a !important;
}

/* Textos secundarios: los azulados grises de Material Design quedan muy
   apagados sobre oscuro. */
body.modo-oscuro .app-email .email-brief-info .list-content,
body.modo-oscuro .app-email .email-brief-info .list-title {
    color: #e0e0e0 !important;
}

body.modo-oscuro .app-email .email-brief-info .list-desc,
body.modo-oscuro .app-email .email-brief-info .list-date,
body.modo-oscuro .app-email .app-search .search-icon,
body.modo-oscuro .app-email .no-data-found,
body.modo-oscuro .tramite-timeline-title,
body.modo-oscuro .detalle-notif-table th {
    color: #9e9e9e !important;
}

/* Diálogo "Detalle del mensaje enviado".

   El chip de la etiqueta conserva su fondo gris claro también en oscuro, así
   que su texto NO puede seguir la regla general (que lo dejaba gris claro
   sobre gris claro, ilegible): va violeta oscuro, a tono con el punto de
   color que lleva al lado. */
body.modo-oscuro #modalDetalleNotificacion .chip,
body.modo-oscuro #modalDetalleNotificacion .chip span {
    color: #6a1b9a !important;
}

/* El cuerpo del mensaje es un recuadro claro por defecto: dentro del diálogo
   oscuro quedaba como una mancha blanca. Va un escalón MÁS CLARO que el
   diálogo (#242424) para que se siga leyendo como un bloque aparte. */
body.modo-oscuro .det-mensaje-body {
    background: #303030 !important;
    color: #e0e0e0 !important;
}

body.modo-oscuro .detalle-notif-table th,
body.modo-oscuro .detalle-notif-table td {
    border-bottom-color: #3a3a3a !important;
}

body.modo-oscuro .app-email .email-brief-info .badge {
    background: #333 !important;
    color: #cfd8dc !important;
}

/* Línea de tiempo: los marcadores ya recorridos y el actual tienen color
   propio (verde y azul) y se dejan; sólo se oscurecen los pendientes, que
   sobre fondo oscuro eran manchas claras. */
body.modo-oscuro .tramite-timeline .tl-marker {
    background: #2f2f2f !important;
    border-color: #444 !important;
    color: #9e9e9e !important;
}
body.modo-oscuro .tramite-timeline .tl-done .tl-marker {
    background: #43a047 !important;
    border-color: #43a047 !important;
    color: #fff !important;
}
body.modo-oscuro .tramite-timeline .tl-current .tl-marker {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #fff !important;
}
/* Observado: la X va en rojo, como en el modo claro. Sin esta regla la
   genérica de los marcadores pendientes (gris) le ganaba por `!important` y
   el círculo se confundía con el fondo. */
body.modo-oscuro .tramite-timeline .tl-observado .tl-marker {
    background: #e53935 !important;
    border-color: #e53935 !important;
    color: #fff !important;
}
body.modo-oscuro .tramite-timeline .tl-label {
    color: #9e9e9e !important;
}
body.modo-oscuro .tramite-timeline .tl-done .tl-label { color: #66bb6a !important; }
body.modo-oscuro .tramite-timeline .tl-current .tl-label { color: #64b5f6 !important; }
body.modo-oscuro .tramite-timeline .tl-observado .tl-label { color: #ef5350 !important; }

/* La línea que une los marcadores */
body.modo-oscuro .tramite-timeline .tl-line {
    background: #444 !important;
}

/* ===== Recuadros de carga de /inscripcion ===========================
   Los formularios de alta (domicilio, actividad, habilitación, TISSH) llevan el
   fondo gris claro escrito en el atributo `style`, así que una regla común
   no los alcanza: sólo `!important` le gana a un estilo inline.

   Los de rubros e integrantes no tienen fondo propio, pero se incluyen para
   que el día que lo tengan ya estén cubiertos y no aparezca un parche claro. */
body.modo-oscuro #domicilioFormWrap,
body.modo-oscuro #actividadesFormWrap,
body.modo-oscuro #habilitacionFormWrap,
body.modo-oscuro #tisshFormWrap,
body.modo-oscuro #integrantesVistaForm,
body.modo-oscuro #rubrosVistaForm {
    background: #242424 !important;
    color: #e0e0e0 !important;
}

/* El subtítulo de cada recuadro ("Detalles sobre sus domicilios:") y los
   textos sueltos que quedan dentro. */
body.modo-oscuro #domicilioFormWrap h6,
body.modo-oscuro #actividadesFormWrap h6,
body.modo-oscuro #habilitacionFormWrap h6,
body.modo-oscuro #tisshFormWrap h6,
body.modo-oscuro #integrantesVistaForm h6,
body.modo-oscuro #rubrosVistaForm h6 {
    color: #ffffff !important;
}

/* Checkbox "filled-in" de Materialize: sin tildar se dibuja sólo con un borde
   #5a5a5a que sobre el fondo oscuro casi no se distingue. Tildado se pinta con
   el color primario y ya se ve bien, así que sólo se retoca el vacío. */
body.modo-oscuro [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after {
    border-color: #8a8a8a !important;
    background-color: transparent !important;
}

/* El proxy que Materialize dibuja sobre cada <select> es un <input> aparte:
   sin esto los desplegables quedan con texto oscuro sobre fondo oscuro. */
body.modo-oscuro .select-wrapper input.select-dropdown {
    color: #e0e0e0 !important;
}
body.modo-oscuro .select-wrapper .caret {
    fill: #9e9e9e !important;
}

/* Barra de progreso del diálogo "Procesando…" (fondo claro inline). */
body.modo-oscuro .progress {
    background-color: #333 !important;
}

/* ===== Buscadores progresivos (rubro, actividad, banco) =============
   La lista desplegable lleva `background: #fff` inline y sus ítems los pinta
   el JS con estilos inline (color #444, y #ff4081 al pasar el mouse). Sólo
   `!important` puede taparlos. */
body.modo-oscuro .autocomplete-search-list {
    background: #242424 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
}

body.modo-oscuro .autocomplete-search-list li {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
}

/* El resaltado rosa que aplica el JS al pasar el mouse se conserva: es la
   señal de "opción activa". Sobre ese fondo el texto claro se lee bien. */

/* La lista de Materialize (.autocomplete-content) ya la cubre la regla
   general de .dropdown-content, pero el ítem resaltado no. */
body.modo-oscuro .autocomplete-content li .highlight {
    color: #64b5f6 !important;
}

/* ===== Pantallas de invitado (login, recuperar contraseña, registro) =====
   Estas viven en Inertia y comparten resources/js/Layouts/GuestLayout.vue,
   que trae sus colores claros en un <style scoped>. Vite inyecta ese CSS
   DESPUÉS de esta hoja y el scoping le suma un atributo al selector
   (`.left-side[data-v-…]`), así que acá hace falta `!important` y colgar
   todo de `.login-wrapper` para ganarle. */
body.modo-oscuro .login-wrapper {
    background: #121212 !important;
}
/* Columna del formulario: superficie elevada, como las tarjetas. */
body.modo-oscuro .login-wrapper .left-side {
    background-color: #1e1e1e !important;
}
body.modo-oscuro .login-wrapper .login-title {
    color: #e0e0e0 !important;
}
/* El logotipo es multicolor y su bordó queda apagado sobre el fondo oscuro.
   Un realce de brillo lo devuelve a la vista sin tocarle los colores (una
   inversión los arruinaría y un recuadro blanco detrás se ve como parche). */
body.modo-oscuro .login-wrapper .guest-logo {
    filter: brightness(1.4);
}
/* Chip con el tipo de registro: en claro es pastel con texto oscuro; acá se
   invierte la relación para que no quede como una mancha brillante. */
body.modo-oscuro .login-wrapper.theme-proveedor .tipo-kicker {
    background: #12314a !important;
    color: #90caf9 !important;
}
body.modo-oscuro .login-wrapper.theme-contratista .tipo-kicker {
    background: #2a1e4a !important;
    color: #b39ddb !important;
}
/* Campos: el layout fija el borde inferior en #ccc, también con !important. */
body.modo-oscuro .login-wrapper input[type="text"],
body.modo-oscuro .login-wrapper input[type="email"],
body.modo-oscuro .login-wrapper input[type="password"] {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #555 !important;
    background-color: transparent !important;
}
body.modo-oscuro .login-wrapper input:focus {
    border-bottom: 2px solid #64b5f6 !important;
    box-shadow: none !important;
}
body.modo-oscuro .login-wrapper.theme-contratista input:focus {
    border-bottom-color: #b39ddb !important;
}
/* Autocompletado del navegador: Chrome pinta el campo de amarillo pálido y
   el texto de negro. Se tapa con una sombra interior del color del fondo. */
body.modo-oscuro .login-wrapper input:-webkit-autofill,
body.modo-oscuro .login-wrapper input:-webkit-autofill:hover,
body.modo-oscuro .login-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e0e0e0 !important;
    -webkit-box-shadow: 0 0 0 1000px #1e1e1e inset !important;
}
/* Botón tonal M3: el "Reenviar correo" del login y el "Cerrar" del diálogo
   de detalle de /proveedor/notificaciones. Pastel en claro, azul profundo
   en oscuro. */
body.modo-oscuro .m3-btn-tonal {
    background: #12314a !important;
    color: #90caf9 !important;
}
body.modo-oscuro .m3-btn-tonal:hover:not(:disabled) {
    background: #16405f !important;
}
body.modo-oscuro .login-wrapper .m3-spinner {
    border-color: rgba(144, 202, 249, .35) !important;
    border-top-color: #90caf9 !important;
}
/* Enlaces del formulario ("Olvidaste tu contraseña?", "Ingresar credenciales"). */
body.modo-oscuro .login-wrapper .forgot-link a {
    color: #90caf9 !important;
}
/* En mobile no hay carrusel y la versión cae sobre el fondo, donde el gris
   oscuro que usa el modo claro sería invisible. */
@media (max-width: 600px) {
    body.modo-oscuro .login-wrapper .app-version {
        color: rgba(255, 255, 255, .45) !important;
    }
}

/* ===== Diálogos de SweetAlert2 ======================================
   Se montan colgados del <body> (fuera del árbol de Vue), así que alcanza
   con que la clase del tema esté en el body. Van MÁS CLAROS que las
   tarjetas: flotan por encima de todo y tienen que despegarse del fondo.
   El color de los botones lo fija cada llamada por JS (confirmButtonColor),
   por eso acá no se tocan. */
body.modo-oscuro .swal2-popup {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #3d3d3d;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

body.modo-oscuro .swal2-title {
    color: #f5f5f5 !important;
}

body.modo-oscuro .swal2-html-container,
body.modo-oscuro .swal2-content {
    color: #cfcfcf !important;
}

body.modo-oscuro .swal2-footer {
    color: #bdbdbd !important;
    border-top-color: #3d3d3d !important;
}

body.modo-oscuro .swal2-close {
    color: #9e9e9e !important;
}
body.modo-oscuro .swal2-close:hover {
    color: #e0e0e0 !important;
}

/* Campos de los diálogos con entrada (swal con input). */
body.modo-oscuro .swal2-input,
body.modo-oscuro .swal2-textarea,
body.modo-oscuro .swal2-select {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
    box-shadow: none !important;
}

/* Los íconos de SweetAlert2 tapan parte del anillo con parches del color
   del popup —que la librería asume BLANCO—. Sobre el fondo oscuro esos
   parches quedaban como manchas; se pintan del color del diálogo. */
body.modo-oscuro .swal2-icon.swal2-success .swal2-success-circular-line-left,
body.modo-oscuro .swal2-icon.swal2-success .swal2-success-circular-line-right,
body.modo-oscuro .swal2-icon.swal2-success .swal2-success-fix {
    background-color: #2a2a2a !important;
}

/* Contenido propio de los diálogos del escritorio.

   El modal "En control" (recorrido por áreas) y el de la recepción arman su
   HTML aparte, con colores pensados para el popup blanco: sobre el fondo
   oscuro del diálogo quedaban ilegibles. El de recepción los lleva en el
   atributo `style` de cada celda, por eso acá van con `!important`. */
body.modo-oscuro .swal2-html-container th {
    color: #90a4ae !important;
}
body.modo-oscuro .swal2-html-container td {
    color: #e0e0e0 !important;
}

/* Línea de tiempo vertical del modal "En control". */
body.modo-oscuro .ctrl-node {
    border-left-color: #3d3d3d;
}
body.modo-oscuro .ctrl-node::before {
    /* El punto tapa el riel: su relleno tiene que ser el fondo del diálogo. */
    background: #2a2a2a;
    border-color: #607d8b;
}
body.modo-oscuro .ctrl-node-actual::before {
    background: #42a5f5;
    border-color: #42a5f5;
    box-shadow: 0 0 0 4px rgba(66, 165, 245, .2);
}
body.modo-oscuro .ctrl-area {
    color: #e0e0e0;
}
body.modo-oscuro .ctrl-node-actual .ctrl-area {
    color: #90caf9;
}
body.modo-oscuro .ctrl-chip {
    background: #12314a;
    color: #90caf9;
}
body.modo-oscuro .ctrl-estado {
    color: #b0bec5;
}
body.modo-oscuro .ctrl-meta {
    color: #9e9e9e;
}
body.modo-oscuro .ctrl-meta .material-icons {
    color: #78909c;
}

/* Áreas que observaron el trámite: el rojo se aclara para que se lea. */
body.modo-oscuro .ctrl-node-obs::before {
    background: #ef5350;
    border-color: #ef5350;
}
body.modo-oscuro .ctrl-node-obs .ctrl-area {
    color: #ef9a9a;
}
body.modo-oscuro .ctrl-node-obs .ctrl-estado {
    background: #4a2020;
    color: #ef9a9a;
}
body.modo-oscuro .ctrl-motivo {
    background: #3a2626;
    border-left-color: #ef5350;
    color: #e6d3d3;
}

/* ===== Diálogos de SweetAlert (los de /inscripcion) =================
   /inscripcion usa la librería vieja (public/js/sweetalert.min.js), distinta
   de la de las pantallas Vue: sus clases son `.swal-*` y los estilos los
   inyecta el propio JS, con el popup en blanco. Se le da el MISMO gris que a
   los diálogos de SweetAlert2 para que los dos se vean igual. */
body.modo-oscuro .swal-modal {
    background-color: #2a2a2a !important;
    border: 1px solid #3d3d3d;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

body.modo-oscuro .swal-title {
    color: #f5f5f5 !important;
}

body.modo-oscuro .swal-text {
    color: #cfcfcf !important;
}

body.modo-oscuro .swal-content {
    color: #e0e0e0 !important;
}

body.modo-oscuro .swal-content__input,
body.modo-oscuro .swal-content__textarea {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.modo-oscuro .swal-footer {
    background-color: transparent !important;
    border-top-color: #3d3d3d !important;
}

/* Links del diálogo "Documentación faltante" (/inscripcion): azul fijo en
   claro, sobre el gris oscuro del popup pasan a blanco. */
body.modo-oscuro .doc-faltante-link {
    color: #ffffff !important;
}

/* "Cancelar": en claro es gris muy claro con texto oscuro. El de confirmar
   conserva su color (es la acción principal y contrasta bien). */
body.modo-oscuro .swal-button--cancel {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}
body.modo-oscuro .swal-button--cancel:not([disabled]):hover {
    background-color: #464646 !important;
}

/* Igual que en SweetAlert2: el ícono de éxito tapa parte del anillo con
   parches del color del popup —que la librería asume blanco—. */
body.modo-oscuro .swal-icon--success__hide-corners,
body.modo-oscuro .swal-icon--success::before,
body.modo-oscuro .swal-icon--success::after {
    background-color: #2a2a2a !important;
}

/* Textos en rojo (`.red-text` de Materialize): los asteriscos de campo
   obligatorio, los avisos de validación y leyendas como "Justifique el por
   qué su actividad no requiere habilitaciones".

   La regla general de textos de más arriba los alcanzaba por el selector de
   elemento (`span`, `label`, `p`…) y les ganaba en especificidad, así que
   en oscuro se veían grises. Acá se repite el elemento en el selector para
   empatarla, y el rojo se aclara para que se lea sobre el fondo oscuro. */
body.modo-oscuro .red-text,
body.modo-oscuro span.red-text,
body.modo-oscuro p.red-text,
body.modo-oscuro label.red-text,
body.modo-oscuro div.red-text,
body.modo-oscuro td.red-text,
body.modo-oscuro i.red-text {
    color: #ef5350 !important;
}