/* ============================================================
   Variables de tema: Claro (por defecto) y Oscuro
   ============================================================ */
:root {
    --cn-fondo:             #ffffff;
    --cn-fondo-secundario:  #f5f5f5;
    --cn-texto:             #333333;
    --cn-texto-suave:       #777777;
    --cn-borde:             #dddddd;
    --cn-enlace:            #337ab7;
    --cn-enlace-hover:      #23527c;
    --cn-input-fondo:       #ffffff;
    --cn-input-texto:       #555555;
    --cn-input-borde:       #cccccc;
    --cn-tabla-fondo-par:   #f9f9f9;
    --cn-tabla-hover:       #f5f5f5;
    --cn-panel-fondo:       #ffffff;
    --cn-panel-encabezado:  #f5f5f5;
    --cn-navbar-fondo:      #222222;
    --cn-navbar-texto:      #9d9d9d;
    --cn-btn-toggle-fondo:  transparent;
    --cn-btn-toggle-texto:  #9d9d9d;
    --cn-btn-toggle-borde:  #555555;
}

[data-theme="dark"] {
    --cn-fondo:             #1e1e1e;
    --cn-fondo-secundario:  #282828;
    --cn-texto:             #e0e0e0;
    --cn-texto-suave:       #a0a0a0;
    --cn-borde:             #3a3a3a;
    --cn-enlace:            #7eb8f7;
    --cn-enlace-hover:      #aad4ff;
    --cn-input-fondo:       #2d2d2d;
    --cn-input-texto:       #e0e0e0;
    --cn-input-borde:       #4a4a4a;
    --cn-tabla-fondo-par:   #252525;
    --cn-tabla-hover:       #303030;
    --cn-panel-fondo:       #252525;
    --cn-panel-encabezado:  #2d2d2d;
    --cn-navbar-fondo:      #141414;
    --cn-navbar-texto:      #b0b0b0;
    --cn-btn-toggle-fondo:  transparent;
    --cn-btn-toggle-texto:  #f0c040;
    --cn-btn-toggle-borde:  #4a4a4a;
}

/* ============================================================
   Estilos base del sitio
   ============================================================ */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: var(--cn-fondo);
    color: var(--cn-texto);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

a {
    color: var(--cn-enlace);
}

a:hover,
a:focus {
    color: var(--cn-enlace-hover);
}

/* ============================================================
   Navbar (Bootstrap 3 - navbar-inverse)
   ============================================================ */
[data-theme="dark"] .navbar-inverse {
    background-color: var(--cn-navbar-fondo);
    border-color: #0a0a0a;
}

[data-theme="dark"] .navbar-inverse .navbar-brand,
[data-theme="dark"] .navbar-inverse .navbar-nav > li > a {
    color: var(--cn-navbar-texto);
}

[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #2e2e2e;
}

[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a,
[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a:hover,
[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #222222;
}

/* ============================================================
   Paneles Bootstrap 3
   ============================================================ */
[data-theme="dark"] .panel {
    background-color: var(--cn-panel-fondo);
    border-color: var(--cn-borde);
}

[data-theme="dark"] .panel-default > .panel-heading {
    background-color: var(--cn-panel-encabezado);
    border-color: var(--cn-borde);
    color: var(--cn-texto);
}

[data-theme="dark"] .panel-default {
    border-color: var(--cn-borde);
}

/* ============================================================
   Tablas Bootstrap 3
   ============================================================ */
[data-theme="dark"] .table {
    color: var(--cn-texto);
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--cn-borde);
}

/* Encabezados de tabla genéricos sin color propio */
[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--cn-panel-encabezado);
    color: var(--cn-texto);
}

/* ============================================================
   Encabezados con colores distintivos: se restauran sobre la
   regla genérica anterior usando selectores de atributo
   en el <tr> padre. background-color no se hereda, por eso
   se necesita apuntar a los <th> hijos explícitamente.
   ============================================================ */

/* Gold: fondo dorado + texto negro */
[data-theme="dark"] thead tr[style*="background-color: gold"] > th {
    background-color: gold !important;
    color: black !important;
}

/* Dodgerblue: azul brillante, texto blanco */
[data-theme="dark"] thead tr[style*="background-color:dodgerblue"] > th {
    background-color: dodgerblue !important;
    color: white !important;
}

/* Seagreen */
[data-theme="dark"] thead tr[style*="background-color:seagreen"] > th {
    background-color: seagreen !important;
    color: #ffffff !important;
}

/* Coral */
[data-theme="dark"] thead tr[style*="background-color:coral"] > th {
    background-color: coral !important;
    color: #ffffff !important;
}

/* Indianred */
[data-theme="dark"] thead tr[style*="background-color:indianred"] > th {
    background-color: indianred !important;
    color: #ffffff !important;
}

/* Goldenrod */
[data-theme="dark"] thead tr[style*="background-color:goldenrod"] > th {
    background-color: goldenrod !important;
    color: #ffffff !important;
}

/* Gray */
[data-theme="dark"] thead tr[style*="background-color:gray"] > th {
    background-color: gray !important;
    color: #ffffff !important;
}

/* Steelblue */
[data-theme="dark"] thead tr[style*="background-color:steelblue"] > th {
    background-color: steelblue !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--cn-tabla-fondo-par);
}

[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: var(--cn-tabla-hover);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--cn-borde);
}

/* ============================================================
   Formularios e Inputs Bootstrap 3
   ============================================================ */
[data-theme="dark"] .form-control {
    background-color: var(--cn-input-fondo);
    color: var(--cn-input-texto);
    border-color: var(--cn-input-borde);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--cn-input-fondo);
    color: var(--cn-input-texto);
    border-color: #6a8fc8;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3),
                0 0 6px rgba(106,143,200,.4);
}

[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control[readonly] {
    background-color: #262626;
    opacity: 0.7;
}

/* ============================================================
   Botones Bootstrap 3
   ============================================================ */
/* ============================================================
   Botones — mismo estilo en ambos temas
   ============================================================ */
.btn-default {
    background-color: #dcdcdc;
    border-color: #aaaaaa;
    color: #000000;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #c8c8c8;
    border-color: #888888;
    color: #000000;
}

/* ============================================================
   Well, Jumbotron y otros contenedores Bootstrap 3
   ============================================================ */
[data-theme="dark"] .well {
    background-color: var(--cn-fondo-secundario);
    border-color: var(--cn-borde);
    color: var(--cn-texto);
}

[data-theme="dark"] .jumbotron {
    background-color: var(--cn-fondo-secundario);
    color: var(--cn-texto);
}

[data-theme="dark"] hr {
    border-color: var(--cn-borde);
}

/* ============================================================
   Alerts Bootstrap 3 en modo oscuro
   ============================================================ */
[data-theme="dark"] .alert-info {
    background-color: #1a2a4a;
    border-color: #2a4a7a;
    color: #a8c8f0;
}

[data-theme="dark"] .alert-warning {
    background-color: #3a2a0a;
    border-color: #6a4a0a;
    color: #f0c060;
}

[data-theme="dark"] .alert-danger {
    background-color: #3a0a0a;
    border-color: #6a1a1a;
    color: #f08080;
}

[data-theme="dark"] .alert-success {
    background-color: #0a2a0a;
    border-color: #1a5a1a;
    color: #70c070;
}

/* ============================================================
   Dropdown menus Bootstrap 3
   ============================================================ */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--cn-fondo-secundario);
    border-color: var(--cn-borde);
}

[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--cn-texto);
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--cn-tabla-hover);
    color: var(--cn-texto);
}

/* ============================================================
   Botón de toggle de tema — estilo minimalista
   ============================================================ */
.btn-toggle-tema {
    background-color: transparent;
    color: #cccccc;
    border: none;
    border-radius: 3px;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 0;
    margin-left: 4px;
    margin-right: 4px;
    line-height: 20px;
    transition: color 0.2s;
}

.btn-toggle-tema:hover {
    color: #ffffff;
}

[data-theme="dark"] .btn-toggle-tema {
    color: #dddddd;
}

[data-theme="dark"] .btn-toggle-tema:hover {
    color: #ffffff;
}

/* ============================================================
   QR code generator
   ============================================================ */
#qrCode {
    margin: 15px;
}

/* ============================================================
   Carousel
   ============================================================ */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .carousel-caption {
        display: none;
    }
}

/* ============================================================
   Correcciones de colores hardcodeados en modo oscuro
   ============================================================
   Las páginas Razor usan estilos inline como "color: black"
   para valores positivos y "color: red" para negativos.
   Los selectores de atributo [style*="..."] permiten
   apuntar exactamente a esos elementos sin modificar las
   páginas, y !important es necesario para ganar al estilo
   inline.

   REGLA: los negativos en rojo se preservan exactamente
   como están (el usuario los confirmó como perfectos).
   ============================================================ */

/* --- Texto negro en celdas de tabla ? blanco en oscuro ---
   Cubre: styleCantiPorce, stylePrecio, styleImporte
          de CotizarNuevo / CotizarActualizacion,
          y la variable "negr" de ListaDePrecios.
   NO afecta a los encabezados <tr style="color:black;
   background-color:gold"> porque esa regla está en <tr>,
   no en <td> ni <th>. */
[data-theme="dark"] td[style*="color: black"] {
    color: #e0e0e0 !important;
}

/* --- Azul medio ? azul claro ---
   variable "azul" en ListaDePrecios */
[data-theme="dark"] [style*="color: mediumblue"],
[data-theme="dark"] [style*="color:mediumblue"] {
    color: #7eb8f7 !important;
}

/* --- Verde oscuro ? verde claro ---
   variable "verd" en ListaDePrecios */
[data-theme="dark"] [style*="color: green"],
[data-theme="dark"] [style*="color:green"] {
    color: #6dd96d !important;
}

/* --- Rojo oscuro ? rojo suave ---
   variable "rojo" en ListaDePrecios */
[data-theme="dark"] [style*="color: darkred"],
[data-theme="dark"] [style*="color:darkred"] {
    color: #ff8080 !important;
}

/* --- Naranja-rojo ? naranja claro ---
   "Precios al:" en ListaDePrecios */
[data-theme="dark"] [style*="color: orangered"],
[data-theme="dark"] [style*="color:orangered"] {
    color: #ffaa70 !important;
}

/* ============================================================
   Controles nativos (sin clase Bootstrap) en modo oscuro
   Cubre: <select>, <input type="number">, <input type="text">
   y <button> / <input type="button"> usados en los
   formularios de cotización sin clases Bootstrap.
   ============================================================ */
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"] {
    background-color: var(--cn-input-fondo);
    color: var(--cn-input-texto);
    border: 1px solid var(--cn-input-borde);
}

/* Botones nativos (sin clase .btn de Bootstrap) — mismo estilo
   en ambos temas. Excluye el toggle de tema y el colapso. */
button:not(.btn):not(.navbar-toggle):not(.btn-toggle-tema),
input[type="button"],
input[type="submit"] {
    background-color: #dcdcdc;
    color: #000000;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    cursor: pointer;
}

button:not(.btn):not(.navbar-toggle):not(.btn-toggle-tema):hover,
button:not(.btn):not(.navbar-toggle):not(.btn-toggle-tema):focus,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #c8c8c8;
    color: #000000;
    border-color: #888888;
}

/* Estado deshabilitado: opacidad reducida y cursor bloqueado */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}