/*
 * Tema visual unificado del ERP (2026-08-10, rediseño completo a pedido
 * explícito: "siento que uso un ERP del año 80... algo más joven y con más
 * colores" — reemplaza la paleta gris/azul SAP Fiori de antes). Paleta
 * tomada del propio rubro de WSD (vino/bodega) en vez de un azul genérico
 * de ERP: Borgoña como acento primario, Cobre como secundario, Pizarra
 * como neutro, sobre un fondo Piedra (ni blanco puro ni gris frío).
 * Aprobada por el cliente sobre una vista previa real (ver artifact
 * "WSD ERP — propuesta visual", opción A). Se carga en templates/base.html
 * y cascada a todas las pantallas propias del ERP. El equivalente para
 * Django Admin está en static/css/admin_theme.css — mismos valores, misma
 * fuente de verdad de color para que las 2 mitades del ERP nunca diverjan.
 */

:root {
    --wsd-shell-bg: #7b1e3a;
    --wsd-primary: #7b1e3a;
    --wsd-primary-dark: #5e1730;
    --wsd-secondary: #a8792f;
    --wsd-page-bg: #f1eee9;
    --wsd-surface-bg: #fffdfb;
    --wsd-border: #ddd6cc;
    --wsd-text: #241b1d;
    --wsd-text-muted: #6b5f60;
    --wsd-slate: #5b6570;
    --wsd-success: #3f7052;
    --wsd-danger: #a83a2e;
    --wsd-warning: #a8681a;
    --wsd-info: #7b1e3a;
    --wsd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --wsd-shadow: 0 1px 2px rgba(36, 27, 29, 0.05), 0 6px 16px -10px rgba(36, 27, 29, 0.22);

    --bs-primary: var(--wsd-primary);
    --bs-primary-rgb: 123, 30, 58;
    --bs-secondary: var(--wsd-slate);
    --bs-secondary-rgb: 91, 101, 112;
    --bs-success: var(--wsd-success);
    --bs-success-rgb: 63, 112, 82;
    --bs-danger: var(--wsd-danger);
    --bs-danger-rgb: 168, 58, 46;
    --bs-warning: var(--wsd-warning);
    --bs-warning-rgb: 168, 104, 26;
    --bs-info: var(--wsd-info);
    --bs-info-rgb: 123, 30, 58;
    --bs-body-bg: var(--wsd-page-bg);
    --bs-body-color: var(--wsd-text);
    --bs-body-font-family: var(--wsd-font);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
    --bs-link-color: var(--wsd-primary);
    --bs-link-hover-color: var(--wsd-primary-dark);

    /* 2026-08-10, bug real encontrado (no era caché): Bootstrap 5.3 NO deriva
       .alert-*, los "-bg-subtle"/"-border-subtle"/"-text-emphasis" de sus
       propios --bs-warning/--bs-danger/etc. — son variables APARTE, con su
       propio valor default fijo, que nunca se habían tocado. Por eso las
       alertas (warning/danger/success/info) seguían con el amarillo/rojo/
       verde/celeste de fábrica aunque el resto de la app ya estuviera con
       la paleta nueva. */
    --bs-primary-bg-subtle: #f5e5ea;
    --bs-primary-border-subtle: #dba7b7;
    --bs-primary-text-emphasis: #4a1220;
    --bs-secondary-bg-subtle: #e9ebed;
    --bs-secondary-border-subtle: #c3c8cd;
    --bs-secondary-text-emphasis: #363c42;
    --bs-success-bg-subtle: #e1ede4;
    --bs-success-border-subtle: #a9c9b3;
    --bs-success-text-emphasis: #234a30;
    --bs-danger-bg-subtle: #f5e3e0;
    --bs-danger-border-subtle: #d9a89e;
    --bs-danger-text-emphasis: #5c1f18;
    --bs-warning-bg-subtle: #f6ecda;
    --bs-warning-border-subtle: #dcbb84;
    --bs-warning-text-emphasis: #5c3a0e;
    --bs-info-bg-subtle: #f5e5ea;
    --bs-info-border-subtle: #dba7b7;
    --bs-info-text-emphasis: #4a1220;
}

/* Mismo problema que las alertas, pero acá Bootstrap ni siquiera usa
   variables — .table-warning/.table-danger/.table-success traen sus
   colores escritos literal adentro de la propia clase (2026-08-10). Se
   pisan las mismas variables internas (--bs-table-*) que usa Bootstrap,
   con el mismo criterio de siempre: misma selector, carga después, gana. */
.table-warning {
    --bs-table-bg: #f6ecda;
    --bs-table-border-color: #dcbb84;
    --bs-table-striped-bg: #f1e4c9;
    --bs-table-active-bg: #ecdbb8;
    --bs-table-hover-bg: #eee0c0;
}
.table-danger {
    --bs-table-bg: #f5e3e0;
    --bs-table-border-color: #d9a89e;
    --bs-table-striped-bg: #efd7d2;
    --bs-table-active-bg: #e9cbc5;
    --bs-table-hover-bg: #ebd0cb;
}
.table-success {
    --bs-table-bg: #e1ede4;
    --bs-table-border-color: #a9c9b3;
    --bs-table-striped-bg: #d6e5da;
    --bs-table-active-bg: #c9dbcf;
    --bs-table-hover-bg: #cee0d4;
}

/* Mismo problema en .btn-success/.btn-warning/.btn-danger/.btn-outline-*
   (usados en CRM, ver templates/crm/deal_form.html, calendar.html) —
   también hardcodeados adentro de la clase, no derivados de --bs-success
   etc. .btn-outline-primary/.btn-outline-secondary ya se pisan más abajo
   con reglas propias, estos 3 pares seguían con el verde/amarillo/rojo de
   fábrica de Bootstrap. */
.btn-success { --bs-btn-bg: var(--wsd-success); --bs-btn-border-color: var(--wsd-success); --bs-btn-hover-bg: #2f5540; --bs-btn-hover-border-color: #2f5540; --bs-btn-active-bg: #2f5540; --bs-btn-active-border-color: #2f5540; --bs-btn-disabled-bg: var(--wsd-success); --bs-btn-disabled-border-color: var(--wsd-success); }
.btn-warning { --bs-btn-bg: var(--wsd-warning); --bs-btn-border-color: var(--wsd-warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7d4e13; --bs-btn-hover-border-color: #7d4e13; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7d4e13; --bs-btn-active-border-color: #7d4e13; --bs-btn-disabled-bg: var(--wsd-warning); --bs-btn-disabled-border-color: var(--wsd-warning); }
.btn-danger { --bs-btn-bg: var(--wsd-danger); --bs-btn-border-color: var(--wsd-danger); --bs-btn-hover-bg: #832c22; --bs-btn-hover-border-color: #832c22; --bs-btn-active-bg: #832c22; --bs-btn-active-border-color: #832c22; --bs-btn-disabled-bg: var(--wsd-danger); --bs-btn-disabled-border-color: var(--wsd-danger); }
.btn-outline-success { --bs-btn-color: var(--wsd-success); --bs-btn-border-color: var(--wsd-success); --bs-btn-hover-bg: var(--wsd-success); --bs-btn-hover-border-color: var(--wsd-success); --bs-btn-active-bg: var(--wsd-success); --bs-btn-active-border-color: var(--wsd-success); --bs-btn-disabled-color: var(--wsd-success); --bs-btn-disabled-border-color: var(--wsd-success); }
.btn-outline-warning { --bs-btn-color: var(--wsd-warning); --bs-btn-border-color: var(--wsd-warning); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--wsd-warning); --bs-btn-hover-border-color: var(--wsd-warning); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--wsd-warning); --bs-btn-active-border-color: var(--wsd-warning); --bs-btn-disabled-color: var(--wsd-warning); --bs-btn-disabled-border-color: var(--wsd-warning); }
.btn-outline-danger { --bs-btn-color: var(--wsd-danger); --bs-btn-border-color: var(--wsd-danger); --bs-btn-hover-bg: var(--wsd-danger); --bs-btn-hover-border-color: var(--wsd-danger); --bs-btn-active-bg: var(--wsd-danger); --bs-btn-active-border-color: var(--wsd-danger); --bs-btn-disabled-color: var(--wsd-danger); --bs-btn-disabled-border-color: var(--wsd-danger); }

body {
    font-family: var(--wsd-font);
    color: var(--wsd-text);
    font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wsd-text);
}

/* La barra superior (shell bar) vive en static/css/shell_nav.css, único
   archivo compartido con el Admin — ver templates/partials/_shell_nav.html. */

/* --- Tarjetas / superficies --------------------------------------------- */
.card {
    border-color: var(--wsd-border);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--wsd-shadow);
    background-color: var(--wsd-surface-bg);
}
.card.bg-light {
    background-color: #f8f5f0 !important;
}
.card-header {
    background-color: transparent;
    border-bottom-color: var(--wsd-border);
    font-weight: 700;
}

/* --- Botones (redondeados, con un poco de peso) -------------------------- */
.btn {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}
.btn-primary {
    background-color: var(--wsd-primary);
    border-color: var(--wsd-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--wsd-primary-dark);
    border-color: var(--wsd-primary-dark);
}
.btn-outline-primary {
    color: var(--wsd-primary);
    border-color: var(--wsd-primary);
}
.btn-outline-primary:hover {
    background-color: var(--wsd-primary);
    border-color: var(--wsd-primary);
}
.btn-outline-secondary {
    color: var(--wsd-text-muted);
    border-color: var(--wsd-border);
}
/* Acento secundario (Cobre) disponible como utilidad puntual — ej. un botón
   "Ver alertas" o un highlight que no debe competir con el primario. */
.btn-wsd-gold {
    background-color: rgba(168, 121, 47, 0.14);
    border-color: transparent;
    color: var(--wsd-secondary);
}
.btn-wsd-gold:hover {
    background-color: rgba(168, 121, 47, 0.24);
    color: var(--wsd-secondary);
}

/* --- Tablas (listado compacto, zebra tenue) -------------------------------- */
.table {
    font-size: 0.85rem;
}
.table thead th {
    background-color: transparent;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wsd-text-muted);
    border-bottom: 2px solid var(--wsd-border);
}
.table tbody tr:hover {
    background-color: rgba(123, 30, 58, 0.05);
}

/* --- KPI: tarjeta con riel de color a la izquierda (ver artifact de la  --- */
/* --- propuesta visual) — clase de utilidad para pantallas de resumen/   --- */
/* --- dashboard (Análisis financieros, Inventario, etc.), opcional.      --- */
.wsd-kpi {
    position: relative;
    overflow: hidden;
    padding-left: calc(1rem + 4px);
}
.wsd-kpi::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--wsd-kpi-rail, var(--wsd-primary));
}
.wsd-kpi-gold { --wsd-kpi-rail: var(--wsd-secondary); }
.wsd-kpi-success { --wsd-kpi-rail: var(--wsd-success); }
.wsd-kpi-danger { --wsd-kpi-rail: var(--wsd-danger); }
.wsd-kpi .wsd-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wsd-text-muted);
}
.wsd-kpi .wsd-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 0.2rem;
}

/* --- Pestañas (nav-tabs subrayadas) --------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--wsd-border);
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--wsd-text-muted);
    font-weight: 500;
    border-radius: 0;
    padding: 0.5rem 0.9rem;
}
.nav-tabs .nav-link:hover {
    color: var(--wsd-primary);
    border-bottom-color: var(--wsd-border);
}
.nav-tabs .nav-link.active {
    color: var(--wsd-primary);
    border-bottom-color: var(--wsd-primary);
    background: transparent;
}

/* --- Lista lateral (sidebar del CRM, etc.) -------------------------------- */
.list-group-item.list-group-item-action {
    border: 1px solid transparent;
    border-radius: 8px !important;
    margin-bottom: 2px;
    color: var(--wsd-text);
    font-size: 0.88rem;
}
.list-group-item.list-group-item-action:hover {
    background-color: rgba(123, 30, 58, 0.06);
}
.list-group-item.list-group-item-action.active {
    background-color: var(--wsd-primary);
    border-color: var(--wsd-primary);
    color: #fff;
}

/* --- Badges / alertas ------------------------------------------------------ */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding-left: 0.6em;
    padding-right: 0.6em;
}
.alert {
    border-radius: 8px;
    border-width: 1px;
    font-size: 0.88rem;
}

/* --- CRM: tablero Kanban y calendario -------------------------------------- */
.stage-header {
    background-color: #f3ede4 !important;
}
.stage-title {
    cursor: text;
}
.stage-grip {
    cursor: grab;
    color: var(--wsd-text-muted);
}
.deal-card {
    cursor: pointer;
    transition: box-shadow .1s ease;
}
.deal-card:hover {
    box-shadow: 0 0 0 1px var(--wsd-primary);
}
/* Tarjetas más finas/rectangulares (menos altas) y tipografía reducida a
   pedido del cliente: nombre del cliente 2pt menos, datos de contacto /
   info secundaria 4pt menos, botones Ganado/Perdido más chicos. */
.deal-card .card-body {
    padding: 0.15rem 0.35rem;
}
.deal-card .card-body > * + * {
    margin-top: 0.05rem;
}
.deal-card .fw-bold {
    font-size: 0.73rem;
    line-height: 1.15;
}
.deal-card .small,
.deal-card .badge {
    font-size: 0.46rem;
    line-height: 1.15;
}
.deal-card .small + .small {
    margin-top: 0;
}
.deal-card .btn-sm {
    width: 7px;
    height: 7px;
    padding: 0;
    font-size: 5px;
    line-height: 7px;
    border-width: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Dashboard: tarjetas de módulo (2026-08-10) --------------------------- */
.wsd-module-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wsd-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -4px rgba(36, 27, 29, 0.1), 0 14px 28px -14px rgba(36, 27, 29, 0.3);
    border-color: var(--wsd-primary);
}
.wsd-module-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
    line-height: 1;
}