/* ============================================
   MasivaSAT — Tema A2 · Marino + Esmeralda (override de style.css)
   Rediseño aprobado el 24-sep-2026: fondo claro, menú lateral blanco,
   marino como color de marca y esmeralda como acento. Sin morado.
   Los colores viven en variables: cambiar la marca es cambiar :root.
   ============================================ */

:root {
    --ms-marca: #1D4ED8;          /* botones, enlaces, activo */
    --ms-marca-osc: #1E3A8A;      /* hover */
    --ms-acento: #059669;         /* esmeralda: éxito, cobrado, prueba gratis */
    --ms-acento-osc: #047857;
    --ms-tinte: #E8EEFC;          /* fondo del elemento activo */
    --ms-tinte-acento: #E7F6EF;
    --ms-fondo: #F6F8FC;
    --ms-superficie: #FFFFFF;
    --ms-borde: #E3E8F2;
    --ms-borde-suave: #EEF1F6;
    --ms-texto: #0F172A;
    --ms-texto-2: #334155;
    --ms-texto-3: #64748B;
    --ms-aviso: #92400E;          /* ámbar: advertencias */
    --ms-aviso-fondo: #FEF3C7;
    --ms-error: #B91C1C;
    --ms-error-fondo: #FEE2E2;
    --ms-radio: 12px;
    --ms-radio-tarjeta: 16px;
    --ms-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Tipografía --- */
body,
.btn, .form-control, .form-select, .dropdown-menu, .table,
.swal2-popup, .select2-container {
    font-family: var(--ms-fuente) !important;
}

body {
    color: var(--ms-texto);
    background: var(--ms-fondo) !important;
}

a { color: var(--ms-marca); }
a:hover { color: var(--ms-marca-osc); }

/* --- Menú lateral: blanco, activo en tinte de marca --- */
.sidebar-wrapper {
    background: var(--ms-superficie) !important;
    border-right: 1px solid var(--ms-borde) !important;
    box-shadow: none !important;
}

.sidebar-wrapper .sidebar-header {
    background: var(--ms-superficie) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ms-borde-suave) !important;
}

.sidebar-wrapper .sidebar-header .logo-text {
    color: var(--ms-texto) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}

.sidebar-wrapper .sidebar-header .logo-icon {
    width: 38px !important;
    border-radius: 10px !important;
}

.toggle-icon {
    color: var(--ms-texto-3) !important;
}

.sidebar-wrapper .metismenu a {
    color: var(--ms-texto-2) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 12px !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.sidebar-wrapper .metismenu a:hover {
    color: var(--ms-marca) !important;
    background-color: var(--ms-fondo) !important;
}

.sidebar-wrapper .metismenu .mm-active>a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus {
    color: var(--ms-marca) !important;
    background-color: var(--ms-tinte) !important;
    font-weight: 700 !important;
}

.sidebar-wrapper .metismenu a .parent-icon {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    color: inherit !important;
}

.sidebar-wrapper .metismenu .menu-label {
    color: var(--ms-texto-3) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 16px 12px 6px !important;
}

/* --- Barra superior --- */
.top-header .navbar {
    background: var(--ms-superficie) !important;
    border-bottom: 1px solid var(--ms-borde) !important;
    box-shadow: none !important;
}

/* --- Fondo de página --- */
.page-content {
    background: var(--ms-fondo) !important;
}

/* --- Títulos: sólidos, sin degradado --- */
.page-content .page-title-heading,
.page-content h5.mb-0,
.page-content .breadcrumb-title {
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: var(--ms-texto) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.breadcrumb-item a { color: var(--ms-texto-3) !important; }
.breadcrumb-item.active { color: var(--ms-texto-3) !important; }

/* --- Tarjetas --- */
.card {
    border-radius: var(--ms-radio-tarjeta) !important;
    border: 1px solid var(--ms-borde) !important;
    box-shadow: none !important;
    background: var(--ms-superficie);
}

.card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* Acentos de las tarjetas de resumen (nombres históricos; ya no hay morado) */
.stat-card-accent-blue { border-top: 3px solid var(--ms-marca) !important; }
.stat-card-accent-green { border-top: 3px solid var(--ms-acento) !important; }
.stat-card-accent-purple { border-top: 3px solid #0891B2 !important; }
.stat-card-accent-orange { border-top: 3px solid #D97706 !important; }

/* --- Botones --- */
.btn {
    border-radius: var(--ms-radio) !important;
    font-weight: 600 !important;
}

.btn-primary {
    background: var(--ms-marca) !important;
    border-color: var(--ms-marca) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.18) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--ms-marca-osc) !important;
    border-color: var(--ms-marca-osc) !important;
}

.btn-success {
    background: var(--ms-acento) !important;
    border-color: var(--ms-acento) !important;
    color: #FFFFFF !important;
}

.btn-success:hover, .btn-success:focus {
    background: var(--ms-acento-osc) !important;
    border-color: var(--ms-acento-osc) !important;
}

.btn-outline-primary {
    color: var(--ms-marca) !important;
    border-color: var(--ms-marca) !important;
}

.btn-outline-primary:hover {
    background: var(--ms-marca) !important;
    color: #FFFFFF !important;
}

/* --- Formularios --- */
.form-control, .form-select {
    border-radius: 10px !important;
    border-color: var(--ms-borde) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ms-marca) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--ms-acento) !important;
    border-color: var(--ms-acento) !important;
}

/* --- Etiquetas de estado --- */
.badge.bg-success, .badge-success { background-color: var(--ms-acento) !important; }
.badge.bg-danger, .badge-danger { background-color: var(--ms-error) !important; }
.badge.bg-info, .badge-info { background-color: var(--ms-marca) !important; }
.badge.bg-warning, .badge-warning { background-color: #D97706 !important; }

.badge-vigente {
    background: var(--ms-tinte-acento) !important;
    color: var(--ms-acento-osc) !important;
    border: 1px solid #B7E4CF;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.badge-cancelado {
    background: var(--ms-error-fondo) !important;
    color: var(--ms-error) !important;
    border: 1px solid #FECACA;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.badge-contaai-enviado {
    background: var(--ms-tinte);
    color: var(--ms-marca);
    border: 1px solid #C7D6F8;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
}

.badge-contaai-pendiente {
    background: var(--ms-aviso-fondo);
    color: var(--ms-aviso);
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
}

/* --- Tablas y DataTables --- */
.table thead th {
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--ms-texto-3) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--ms-borde-suave) !important;
}

.table td { border-color: var(--ms-borde-suave) !important; }

.table tbody tr:hover {
    background-color: #F8FAFD !important;
}

.page-item.active .page-link,
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--ms-tinte) !important;
    border-color: var(--ms-tinte) !important;
    color: var(--ms-marca) !important;
    font-weight: 700;
}

.page-link { color: var(--ms-texto-2) !important; border-radius: 8px !important; }

table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--ms-tinte) !important;
    color: var(--ms-texto) !important;
}

/* --- UUID/RFC en monoespaciada --- */
.text-mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
}

/* --- Avatar del menú --- */
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ms-marca-osc), var(--ms-acento));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
}

/* --- Interruptor de ContaAI --- */
.contaai-toggle {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: #CBD5E1;
    cursor: pointer;
    transition: background 0.2s;
}

.contaai-toggle.active {
    background: var(--ms-acento);
}

.contaai-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: left 0.2s;
}

.contaai-toggle.active .knob {
    left: 20px;
}

/* --- Indicador de conexión --- */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.status-indicator.connected {
    background: var(--ms-tinte-acento);
    color: var(--ms-acento-osc);
    border: 1px solid #B7E4CF;
}

.status-indicator.disconnected {
    background: var(--ms-error-fondo);
    color: var(--ms-error);
    border: 1px solid #FECACA;
}

.status-indicator .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-anim 2s infinite;
}

@keyframes pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .status-indicator .pulse, .contaai-toast { animation: none !important; }
}

/* --- Aviso emergente --- */
.contaai-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--ms-borde);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 340px;
    z-index: 9999;
    animation: toast-slide-in 0.3s ease;
}

@keyframes toast-slide-in {
    from { transform: translateX(120px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.contaai-toast .toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.contaai-toast .toast-icon.success { background: var(--ms-tinte-acento); color: var(--ms-acento-osc); }
.contaai-toast .toast-icon.error { background: var(--ms-error-fondo); color: var(--ms-error); }

.contaai-toast .toast-title { font-size: 13px; font-weight: 700; color: var(--ms-texto); }
.contaai-toast .toast-msg { font-size: 12px; color: var(--ms-texto-3); margin-top: 2px; }

/* --- SweetAlert con la marca --- */
.swal2-styled.swal2-confirm { background-color: var(--ms-marca) !important; border-radius: 10px !important; }
.swal2-icon.swal2-success { border-color: var(--ms-acento) !important; color: var(--ms-acento) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--ms-acento) !important; }

/* --- Botones de acción secundarios (Editar / Borrar / Documentos) --- */
.btn-warning {
    background: #D97706 !important;
    border-color: #D97706 !important;
    color: #FFFFFF !important;
}
.btn-warning:hover, .btn-warning:focus { background: #B45309 !important; border-color: #B45309 !important; }

.btn-danger {
    background: var(--ms-error) !important;
    border-color: var(--ms-error) !important;
    color: #FFFFFF !important;
}
.btn-danger:hover, .btn-danger:focus { background: #991B1B !important; border-color: #991B1B !important; }

.btn-info {
    background: var(--ms-tinte) !important;
    border-color: var(--ms-tinte) !important;
    color: var(--ms-marca) !important;
}
.btn-info:hover, .btn-info:focus { background: #D6E1FB !important; border-color: #D6E1FB !important; }

.btn-secondary {
    background: var(--ms-superficie) !important;
    border: 1px solid var(--ms-borde) !important;
    color: var(--ms-texto-2) !important;
}

/* --- Avisos --- */
.alert { border-radius: 14px !important; border-width: 1px !important; }
.alert-info {
    background: var(--ms-tinte) !important;
    border-color: #C7D6F8 !important;
    color: var(--ms-marca-osc) !important;
}
.alert-success {
    background: var(--ms-tinte-acento) !important;
    border-color: #B7E4CF !important;
    color: var(--ms-acento-osc) !important;
}
.alert-warning {
    background: var(--ms-aviso-fondo) !important;
    border-color: #FDE68A !important;
    color: var(--ms-aviso) !important;
}
.alert-danger {
    background: var(--ms-error-fondo) !important;
    border-color: #FECACA !important;
    color: var(--ms-error) !important;
}

/* Etiqueta azul con texto oscuro (Bootstrap «bg-info text-dark»): con la marca
   marino el texto oscuro no se lee; va en tinte con texto de marca. */
.badge.bg-info.text-dark {
    background: var(--ms-tinte) !important;
    color: var(--ms-marca) !important;
}

/* --- Pie de página ---
   style.css le pone `left: 260px` Y `width: 100%`: se salía 260 px a la derecha
   y toda la página tenía barra de desplazamiento horizontal. */
.footer {
    width: auto !important;
    background: var(--ms-superficie) !important;
    border-top: 1px solid var(--ms-borde) !important;
    color: var(--ms-texto-3) !important;
    font-size: 12.5px;
}