/* ==========================================================================
   PlusERP - Tema global de marca (claro / oscuro)
   Colores oficiales: navy #2D3243, coral #E34E4D, blanco #FFFFFF
   ========================================================================== */

:root {
    --brand-navy: #2D3243;
    --brand-coral: #E34E4D;
    --brand-coral-light: #ff6b6a;
    --brand-coral-dark: #c73e3d;
    --brand-white: #FFFFFF;

    --gradient-primary: linear-gradient(135deg, var(--brand-coral) 0%, var(--brand-coral-light) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--brand-coral-dark) 0%, var(--brand-coral) 100%);

    --color-primary: var(--brand-coral);
    --color-primary-dark: var(--brand-coral-dark);
    --color-primary-rgb: 227, 78, 77;

    --bg-page: #f4f5f7;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f8f9fa;
    --bg-hover: rgba(227, 78, 77, 0.06);
    --text-body: #212529;
    --text-muted: #6c757d;
    --border-color: #e9ecef;
    --card-shadow: 0 2px 8px rgba(45, 50, 67, 0.08);
}

[data-bs-theme="dark"] {
    --bg-page: #171923;
    --bg-surface: #232634;
    --bg-surface-alt: #2b2f40;
    --bg-hover: rgba(227, 78, 77, 0.14);
    --text-body: #e9ecef;
    --text-muted: #a7acbb;
    --border-color: #3a3f52;
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

    /* Alias hacia las variables del sistema de estilos legado
       (conta3-styles.css / conta3-modules.css), que nunca se actualizaron
       para modo oscuro. Esto adapta automáticamente .card-custom,
       .info-group, .empresa-card-mobile, .nav-item-custom, .tooltip-custom,
       .code-inline, .version-badge, .empresa-badge-user, etc. */
    --color-bg-light: var(--bg-surface-alt);
    --color-bg-lighter: var(--border-color);
    --color-bg-white: var(--bg-surface);
    --color-text-primary: var(--text-body);
    --color-text-secondary: var(--text-muted);
    --color-text-muted: var(--text-muted);
}

body {
    background-color: var(--bg-page);
    color: var(--text-body);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- Topbar / botones de marca ---------- */
.bg-topbar {
    background: var(--gradient-primary) !important;
}

.btn-topbar {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    transition: all 0.3s ease;
}

    .btn-topbar:hover {
        background: var(--gradient-primary-hover);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.35);
    }

    .btn-topbar:disabled {
        opacity: 0.6;
        transform: none;
    }

/* ---------- Cards ---------- */
.card {
    background-color: var(--bg-surface);
    border: none;
    box-shadow: var(--card-shadow);
}

/* ---------- Tablas ---------- */
.table tbody tr {
    transition: background-color 0.2s ease;
}

    .table tbody tr:hover {
        background-color: var(--bg-hover);
    }

/* ---------- Formularios ---------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
}

.input-group-text {
    background-color: var(--bg-surface);
}

.input-group .text-danger,
.spinner-border.text-danger {
    color: var(--color-primary) !important;
}

/* ---------- Botones outline ---------- */
.btn-outline-danger:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

    .btn-outline-info:hover {
        background-color: #0dcaf0;
        border-color: #0dcaf0;
        color: #fff;
    }

.btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

    .btn-outline-warning:hover {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }

.btn-group .btn {
    padding: 0.375rem 0.5rem;
}

/* ---------- Alertas ---------- */
.alert {
    border-left: 4px solid;
    border-radius: 8px;
}

.alert-danger {
    border-left-color: #dc3545;
}

/* ---------- Badges morados ---------- */
.bg-purple {
    background-color: #6f42c1 !important;
}

.text-purple {
    color: #9d7bdb !important;
}

/* ---------- Tarjetas de lista (vista móvil, común a Empresas/Módulos/Planes/Servidores) ---------- */
.list-card,
.module-card,
.plan-card,
.servidor-card {
    border-radius: 10px;
    border-left: 4px solid var(--color-primary);
    background-color: var(--bg-surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .list-card:hover,
    .module-card:hover,
    .plan-card:hover,
    .servidor-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(var(--color-primary-rgb), 0.2) !important;
    }

.list-card.inactive,
.inactive-module,
.inactive-servidor {
    opacity: 0.7;
    border-left-color: #6c757d;
}

.module-image {
    border: 2px solid var(--bg-surface-alt);
    transition: transform 0.2s ease;
}

    .module-image:hover {
        transform: scale(1.1);
    }

/* ---------- Cajas de precio / info (Planes) ---------- */
.price-box {
    padding: 0.75rem;
    background-color: var(--bg-surface-alt);
    border-radius: 8px;
    text-align: center;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.info-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

    .info-item i {
        font-size: 1.1rem;
    }

/* ---------- Texto monoespaciado (RUT, etc.) ---------- */
.text-monospace {
    font-family: 'Courier New', Courier, monospace;
}

/* ---------- Botón de cambio de tema ---------- */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

    .theme-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.05) rotate(15deg);
    }

/* ---------- Modo oscuro: clases del sistema legado (conta3-styles.css /
   conta3-modules.css) con colores fijos que nunca se pensaron para tema oscuro ---------- */
[data-bs-theme="dark"] .alert-info-custom {
    background-color: rgba(13, 202, 240, 0.12);
    color: #79dcef;
}

[data-bs-theme="dark"] .alert-warning-custom {
    background-color: rgba(255, 193, 7, 0.14);
    color: #ffd968;
}

[data-bs-theme="dark"] .alert-danger-custom {
    background-color: rgba(220, 53, 69, 0.14);
    color: #ff9aa4;
}

[data-bs-theme="dark"] .alert-success-custom {
    background-color: rgba(25, 135, 84, 0.14);
    color: #7fd8a8;
}

[data-bs-theme="dark"] .limite-warning {
    background: rgba(255, 193, 7, 0.14);
}

[data-bs-theme="dark"] .limite-danger {
    background: rgba(220, 53, 69, 0.14);
}

[data-bs-theme="dark"] .script-preview {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
    color: var(--text-body);
}

[data-bs-theme="dark"] .nav-sidebar,
[data-bs-theme="dark"] .timeline-content,
[data-bs-theme="dark"] .filter-chip {
    background: var(--bg-surface);
}

[data-bs-theme="dark"] .filter-chip {
    border-color: var(--border-color);
    color: var(--text-body);
}

/* ---------- Modo oscuro: menú de usuario (TopNav) ---------- */
[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-hover);
}

[data-bs-theme="dark"] .dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.18);
}

/* ---------- Modo oscuro: selector de empresa (TopNav) ---------- */
/* .empresa-select vive siempre sobre la barra superior con degradé de marca
   (.top-row / --gradient-primary), que NO cambia entre temas. Bootstrap sí
   cambia el ícono de flecha del <select> a un trazo claro en modo oscuro
   (pensado para fondos oscuros del body), lo que sobre este fondo claro-translúcido
   fijo lo vuelve casi invisible. Se fuerza a mantener siempre el trazo oscuro. */
[data-bs-theme="dark"] .empresa-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- Modo oscuro: usos puntuales de .bg-light/.bg-white que son
   superficies planas (no cabeceras de color), confirmados como bug ---------- */
[data-bs-theme="dark"] .card.bg-light,
[data-bs-theme="dark"] .card-header.bg-light,
[data-bs-theme="dark"] .price-annual.bg-light,
[data-bs-theme="dark"] .modal-footer.bg-light {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-body);
}

[data-bs-theme="dark"] .input-group-text.bg-white,
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-body);
}

/* .text-dark es un color literal de Bootstrap que nunca se adapta al tema.
   Se usa masivamente (columnas Id, nombres, encabezados) como texto normal
   sobre la superficie de la página/tarjeta, quedando ilegible en oscuro.
   Se excluyen los .badge porque ahí .text-dark siempre va emparejado con
   su propio fondo claro (bg-light/bg-warning), que es intencional. */
[data-bs-theme="dark"] .text-dark:not(.badge) {
    color: var(--text-body) !important;
}

/* .table-light/.table-dark son variantes literales de Bootstrap: se usan como
   encabezado en prácticamente todas las tablas (GenericCrudList y listados),
   pero no se adaptan al tema. Bootstrap aplica el color vía variables CSS
   (--bs-table-bg/--bs-table-color) que se heredan a los <th>/<td>, así que el
   override debe hacerse sobre esas variables (poner background-color directo
   en ".table-light > th" no funciona: el <th> no es hijo directo del elemento
   con la clase, sino nieto vía <tr>). */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--text-body);
    --bs-table-bg: var(--bg-surface-alt);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-surface-alt);
    --bs-table-striped-color: var(--text-body);
    --bs-table-active-bg: var(--bg-hover);
    --bs-table-active-color: var(--text-body);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--text-body);
    color: var(--text-body);
    border-color: var(--border-color);
}

/* ---------- Gráfico de usuarios conectados en tiempo real (GraficoBarrasRealTime) ---------- */
/* El contenedor tenía fondo/color fijos en blanco (inline), y los ejes/textos del
   SVG tenían colores oscuros hardcodeados: quedaba con fuerte contraste en modo oscuro. */
.realtime-chart-container {
    background: var(--bg-surface);
    color: var(--text-body);
}

.realtime-chart-container .chart-axis-line {
    stroke: var(--text-muted);
}

.realtime-chart-container .chart-grid-line {
    stroke: var(--border-color);
}

.realtime-chart-container .chart-axis-label {
    fill: var(--text-muted);
}

.realtime-chart-container .chart-bar-empty {
    fill: var(--border-color);
}

/* ---------- Ajustes responsive compartidos ---------- */
@media (max-width: 575.98px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .btn-topbar {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}