/* ═══════════════════════════════════════════════════════════════
   IBARRA PROTOCOL — TEMA CLARO PROFESIONAL
   Archivo: /opt/ibarra/ibarra_protocol/static/tema.css
═══════════════════════════════════════════════════════════════ */

:root {
    --negro:     #f8fafc;
    --grafito:   #1e3a5f;
    --carbon:    #ffffff;
    --acero:     #f1f5f9;
    --pizarra:   #e2e8f0;
    --borde:     #cbd5e1;
    --oro:       #c9a84c;
    --oro-luz:   #e8c97a;
    --oro-dim:   #92650a;
    --texto:     #1e293b;
    --texto-dim: #475569;
    --blanco:    #0f172a;
    --rojo:      #ef4444;
    --verde:     #10b981;
}

/* ── BODY ── */
body {
    background: #f8fafc !important;
    font-size: 15px !important;
}

/* ── SIDEBAR ── */
.sidebar {
    background: linear-gradient(180deg, #1e3a5f 0%, #0f2744 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
}

.logo-marca {
    color: #f0c040 !important;
}

.logo-subtitulo {
    color: rgba(255,255,255,0.45) !important;
}

.logo-linea {
    background: linear-gradient(90deg, #c9a84c, transparent) !important;
}

.status-dot {
    background: #34d399 !important;
    box-shadow: 0 0 8px #34d399 !important;
}

.status-texto {
    color: rgba(255,255,255,0.5) !important;
}

.nav-seccion {
    color: rgba(255,255,255,0.4) !important;
}

.nav-item {
    color: rgba(255,255,255,0.78) !important;
    font-size: 13.5px !important;
}

.nav-item:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.09) !important;
}

.nav-item.activo {
    color: #f0c040 !important;
    background: rgba(240,192,64,0.12) !important;
    border-left: 3px solid #f0c040 !important;
}

.submenu-item {
    color: rgba(255,255,255,0.62) !important;
}

.submenu-item:hover {
    color: #ffffff !important;
    border-left-color: #c9a84c !important;
}

.flecha {
    color: rgba(255,255,255,0.4) !important;
}

.sidebar-footer .version-texto {
    color: rgba(255,255,255,0.3) !important;
}

/* ── TOPBAR ── */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

.topbar-titulo {
    color: #1e3a5f !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
}

.topbar-ruta {
    color: #94a3b8 !important;
}

.topbar-ruta span {
    color: #c9a84c !important;
}

/* ── CONTENIDO ── */
.contenido {
    background: #f8fafc !important;
}

/* ── CARDS ── */
.card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
}

.card::before {
    background: linear-gradient(180deg, #c9a84c, transparent) !important;
    width: 4px !important;
    border-radius: 10px 0 0 10px !important;
}

.card-titulo {
    color: #1e293b !important;
    font-size: 28px !important;
}

.card-subtitulo {
    color: #94a3b8 !important;
    font-size: 10px !important;
}

.card-divider {
    background: #e2e8f0 !important;
}

/* ── STATS ── */
.stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
}

.stat-numero {
    color: #1e293b !important;
    font-size: 42px !important;
}

.stat-label {
    color: #64748b !important;
}

.stat-delta {
    color: #10b981 !important;
}

/* ── MÓDULOS ── */
.modulo-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
}

.modulo-card:hover {
    border-color: #c9a84c !important;
    box-shadow: 0 8px 28px rgba(201,168,76,0.18) !important;
    transform: translateY(-3px) !important;
}

.modulo-nombre {
    color: #1e293b !important;
    font-size: 19px !important;
}

.modulo-desc {
    color: #64748b !important;
    font-size: 13px !important;
}

.modulo-tag {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid #c9a84c !important;
    color: #92650a !important;
}

/* ── FORMULARIOS ── */
.form-label {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.form-input, .form-select, .form-textarea {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 14.5px !important;
    border-radius: 6px !important;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: #c9a84c !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}

.form-select option {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* ── FILE ZONE ── */
.file-zone {
    border: 2px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

.file-zone:hover {
    border-color: #c9a84c !important;
    background: rgba(201,168,76,0.04) !important;
}

.file-zone-texto {
    color: #94a3b8 !important;
}

/* ── BOTONES ── */
.btn-primario {
    background: linear-gradient(135deg, #c9a84c, #e8c97a) !important;
    color: #1a1200 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(201,168,76,0.3) !important;
}

.btn-primario:hover {
    background: linear-gradient(135deg, #e8c97a, #f5d98a) !important;
    box-shadow: 0 4px 18px rgba(201,168,76,0.45) !important;
}

.btn-secundario {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 6px !important;
}

.btn-secundario:hover {
    border-color: #1e3a5f !important;
    color: #1e3a5f !important;
    background: #f1f5f9 !important;
}

/* ── RESULTADOS IA ── */
.resultado-pre {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    line-height: 1.9 !important;
}

.sello-ia {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid #c9a84c !important;
    color: #92650a !important;
}

/* ── TABLA ── */
.tabla th {
    color: #1e3a5f !important;
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.tabla td {
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.tabla tr:hover td {
    background: #fafbfc !important;
}

/* ── BADGES ── */
.badge-oro {
    background: rgba(201,168,76,0.12) !important;
    color: #92650a !important;
    border: 1px solid #c9a84c !important;
}

.badge-verde {
    background: rgba(16,185,129,0.1) !important;
    color: #065f46 !important;
    border: 1px solid #10b981 !important;
}

.badge-rojo {
    background: rgba(239,68,68,0.1) !important;
    color: #991b1b !important;
    border: 1px solid #ef4444 !important;
}

/* ── HASH BOX ── */
.hash-box {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    border-radius: 6px !important;
}

/* ── LOADING ── */
.spinner {
    border-color: #e2e8f0 !important;
    border-top-color: #c9a84c !important;
}

.loading-texto {
    color: #64748b !important;
}

/* ── SEMÁFORO ── */
.semaforo.verde {
    background: rgba(16,185,129,0.1) !important;
    border: 1px solid #10b981 !important;
    color: #065f46 !important;
}

.semaforo.amarillo {
    background: rgba(201,168,76,0.12) !important;
    border: 1px solid #c9a84c !important;
    color: #92650a !important;
}

.semaforo.rojo {
    background: rgba(239,68,68,0.1) !important;
    border: 1px solid #ef4444 !important;
    color: #991b1b !important;
}

body, .main, .contenido {
    background-color: #f8fafc !important;
}
.card, .stat-card, .modulo-card {
    background-color: #ffffff !important;
}

:root {
    --negro:     #f8fafc !important;
    --grafito:   #1e3a5f !important;
    --carbon:    #ffffff !important;
    --acero:     #f1f5f9 !important;
    --pizarra:   #e2e8f0 !important;
    --borde:     #cbd5e1 !important;
    --texto:     #1e293b !important;
    --texto-dim: #475569 !important;
    --blanco:    #0f172a !important;
}

.sidebar-logo img {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

.sidebar-logo img {
    filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}