/* ===================================================================
   modo-oscuro.css - TiendApp
   -------------------------------------------------------------------
   Se activa agregando la clase "tema-oscuro" a <html> (lo hace
   js/modo-oscuro.js). Esta hoja se carga DE ÚLTIMO (después de
   estilos.css, formularios.css, catalogo.css, carrito.css, fiao.css,
   panel.css) para poder sobreescribir con seguridad los colores de
   superficie y texto en todo el sitio, reutilizando las clases que YA
   existen en el proyecto — así no fue necesario tocar una por una las
   demás hojas de estilo.

   Los colores de marca (naranja, verde, amarillo) se mantienen igual
   en ambos modos; lo que cambia es el fondo y el texto.
   =================================================================== */

html.tema-oscuro {
    --fondo-pagina: #14140d;
    --fondo-tarjeta: #232214;
    --texto-principal: #f1efe1;
    --texto-secundario: rgba(241, 239, 225, 0.72);
    --borde-sutil: #3a3826;
}

html.tema-oscuro body {
    background-color: var(--fondo-pagina);
    color: var(--texto-principal);
}

/* Todas las "tarjetas" del sitio (catálogo, carrito, fiao, formularios, panel) */
html.tema-oscuro .tarjeta,
html.tema-oscuro .panel-tarjeta,
html.tema-oscuro .bloque-tienda,
html.tema-oscuro .tarjeta-formulario,
html.tema-oscuro .tarjeta-fiao,
html.tema-oscuro .panel-menu,
html.tema-oscuro .detalle-tienda-cabecera,
html.tema-oscuro .resumen-total,
html.tema-oscuro .tarjeta-solicitud,
html.tema-oscuro .dropdown-usuario,
html.tema-oscuro .carrito-flotante-panel {
    background-color: var(--fondo-tarjeta) !important;
    color: var(--texto-principal) !important;
}

html.tema-oscuro .fondo-formulario {
    background: linear-gradient(135deg, #7a3410, #8a6300);
}

/* Textos secundarios (descripciones, subtítulos, precios pequeños) */
html.tema-oscuro .tarjeta-cuerpo p,
html.tema-oscuro .subtitulo,
html.tema-oscuro .detalle-fiao,
html.tema-oscuro .item-carrito-precio,
html.tema-oscuro .ayuda-campo,
html.tema-oscuro .footer-bloque p,
html.tema-oscuro label {
    color: var(--texto-secundario) !important;
}

html.tema-oscuro .tarjeta-cuerpo h2,
html.tema-oscuro .tarjeta-cuerpo h3,
html.tema-oscuro h1,
html.tema-oscuro h2:not(.footer-bloque h2) {
    color: var(--texto-principal);
}

/* Formularios: inputs, selects, textarea */
html.tema-oscuro input:not([type="radio"]):not([type="checkbox"]),
html.tema-oscuro select,
html.tema-oscuro textarea {
    background-color: #2b2a1a !important;
    color: var(--texto-principal) !important;
    border-color: var(--borde-sutil) !important;
}

html.tema-oscuro .campo-error {
    background-color: #3a1414 !important;
    border-color: #d64545 !important;
}

/* Tablas del panel */
html.tema-oscuro .tabla-datos th {
    background-color: #2b2a1a !important;
    color: var(--color-amarillo) !important;
}

html.tema-oscuro .tabla-datos td {
    border-bottom-color: var(--borde-sutil) !important;
    color: var(--texto-principal);
}

html.tema-oscuro .tabla-datos tr:hover {
    background-color: #2b2a1a !important;
}

/* Bloques de tienda y carrito: cabeceras/franjas internas */
html.tema-oscuro .bloque-tienda-cabecera,
html.tema-oscuro .bloque-tienda-total {
    background-color: #1c1b10 !important;
    border-color: var(--borde-sutil) !important;
}

html.tema-oscuro .item-carrito,
html.tema-oscuro .item-movimiento {
    border-bottom-color: var(--borde-sutil) !important;
}

/* Mensajes de éxito/error: mismos colores de acento, fondo oscurecido */
html.tema-oscuro .mensaje-exito {
    background-color: #1f3312 !important;
    color: #cdeeae !important;
    border-color: #3c6b12 !important;
}

html.tema-oscuro .mensaje-error {
    background-color: #3a190c !important;
    color: #f7c3a2 !important;
    border-color: var(--color-naranja) !important;
}

/* Separadores y bordes sutiles varios */
html.tema-oscuro .separador::before,
html.tema-oscuro .separador::after,
html.tema-oscuro .caja-enlace {
    border-color: var(--borde-sutil) !important;
}

html.tema-oscuro .caja-enlace {
    background-color: #1c1b10 !important;
}

/* Botones secundarios (que en modo claro son grises claros) */
html.tema-oscuro .btn-secundario {
    background-color: #2b2a1a !important;
    color: var(--texto-principal) !important;
}

html.tema-oscuro .enlace-secundario,
html.tema-oscuro .usuario-sesion {
    color: var(--texto-principal);
}