/* ============================================================================
   CRM Iberowan — capa visual sobre Bootstrap 5.
   Paleta corporativa sobria (azul marino + acento azul), tema claro/oscuro.
   ============================================================================ */

:root {
    /* Marca */
    --app-navy: #16273f;          /* barra superior / cabeceras */
    --app-navy-2: #1d3350;
    --app-accent: #2563a6;        /* azul acento (botones, enlaces, KPIs) */
    --app-accent-rgb: 37, 99, 166;
    --app-accent-hover: #1f568f;
    --app-accent-active: #1b4a7c;

    /* Superficies (tema claro) */
    --app-bg: #f4f6f9;
    --app-card-border: #e4e8ee;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --app-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10);

    /* Sobrescribe el primario de Bootstrap con el acento sobrio */
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: var(--app-accent-rgb);
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-color-rgb: var(--app-accent-rgb);
}

:root[data-bs-theme="dark"] {
    --app-bg: #0f1620;
    --app-card-border: #2a3542;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --app-shadow-hover: 0 4px 14px rgba(0, 0, 0, .45);
    --bs-body-bg: #0f1620;
    --bs-body-color: #dbe3ec;
}

body {
    background-color: var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

/* ---- Barra superior ---- */
.app-navbar {
    background-color: var(--app-navy);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 2px 8px rgba(16, 24, 40, .18);
}
.app-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    letter-spacing: .2px;
}
.app-navbar .navbar-brand .app-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--app-accent) 0%, #3b82c4 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.app-navbar .nav-link { font-size: .925rem; }
.app-navbar .nav-link:hover { color: #fff; }

/* ---- Botones ---- */
.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
}
.btn { border-radius: .5rem; font-weight: 500; }
.btn-sm { border-radius: .45rem; }

/* ---- Tarjetas ---- */
.card {
    border: 1px solid var(--app-card-border);
    border-radius: .7rem;
    box-shadow: var(--app-shadow);
}
.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--app-card-border);
    font-weight: 600;
}

/* Tarjetas KPI clicables del inicio */
a.text-decoration-none .card,
.kpi-card {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.text-decoration-none:hover .card {
    box-shadow: var(--app-shadow-hover);
    border-color: rgba(var(--app-accent-rgb), .45);
    transform: translateY(-1px);
}
.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(var(--app-accent-rgb), .10);
    color: var(--app-accent);
    flex: 0 0 auto;
}
.kpi-icon.kpi-warning { background: rgba(245, 158, 11, .12); color: #b45309; }
.kpi-icon.kpi-success { background: rgba(22, 163, 74, .12); color: #15803d; }
.kpi-icon.kpi-danger  { background: rgba(220, 53, 69, .12);  color: #b02a37; }
.kpi-icon.kpi-muted   { background: rgba(100, 116, 139, .14); color: #64748b; }
:root[data-bs-theme="dark"] .kpi-icon.kpi-warning { color: #fbbf24; }
:root[data-bs-theme="dark"] .kpi-icon.kpi-success { color: #4ade80; }
:root[data-bs-theme="dark"] .kpi-icon.kpi-danger  { color: #f87171; }

/* ---- Tablas ---- */
.table { --bs-table-hover-bg: rgba(var(--app-accent-rgb), .05); }
.table > thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: #64748b;
    font-weight: 600;
}
:root[data-bs-theme="dark"] .table > thead th { color: #94a3b8; }

/* ---- Badges ---- */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.bg-secondary { background-color: #64748b !important; }

/* ---- Iconos ---- */
.bi { vertical-align: -.125em; }

/* ---- Login ---- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-navy) 0%, #0c1524 100%);
    padding: 1rem;
}
.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: .9rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28);
}
.login-card .card-body { padding: 2.25rem; }
.login-logo {
    width: 52px; height: 52px; border-radius: 13px; margin: 0 auto .75rem;
    background: linear-gradient(135deg, var(--app-accent) 0%, #3b82c4 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700;
}
.brand-title { font-weight: 600; letter-spacing: .3px; }

.dropdown-item form .btn-link { text-decoration: none; color: inherit; padding: 0; }

footer.bg-light { background-color: transparent !important; border-top: 1px solid var(--app-card-border) !important; }

/* ---- Asistente flotante (esquina inferior izquierda) ---- */
#crm-asist-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    background: var(--app-accent, #2563a6);
    border: none;
}
#crm-asist-fab:hover { filter: brightness(1.08); }
#crm-asist-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 5rem;
    z-index: 1050;
    width: 340px;
    max-width: calc(100vw - 2.5rem);
    display: none;
}
#crm-asist-panel.open { display: block; }

/* Resumen de validación: MVC siempre renderiza el <div>, con la clase
   .validation-summary-valid cuando NO hay errores. Sin esto, el recuadro
   rojo (alert-danger) aparece vacío en todos los formularios. Lo ocultamos
   mientras esté válido; al haber errores MVC pone .validation-summary-errors
   y el recuadro se muestra normalmente. */
.validation-summary-valid { display: none; }