/* ── Área de trabajo en modo claro (estilo Notion) ─────────────────
   Aplica fondo blanco con texto oscuro a TODO el contenido dentro de
   `.content-area`. NO toca `.sidebar` ni `.topbar` ni `.avisos-bar`
   (mantienen el theme dark). Tampoco toca el chat flotante ni los
   widgets globales que viven fuera de `.content-area`.

   Carga DESPUÉS de theme.css en base.html para ganar especificidad
   con !important + selectores doblemente clase. */

:root {
    --wa-bg:        #ffffff;
    --wa-bg-alt:    #fafafa;
    --wa-border:    #e5e7eb;
    --wa-text:      #37352f;
    --wa-text-2:    #787774;
    --wa-text-3:    #6b7280;
    --wa-accent:    #2383e2;
    --wa-hover:     #f7f6f3;
    --wa-table-head:#f3f4f6;
}

/* ── Wrapper .content-area: fondo blanco, padding generoso ─────── */
.content-area {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    padding: 24px 28px !important;
    border-radius: 0;
    /* min-height para que en páginas cortas el blanco llegue abajo */
    min-height: calc(100vh - 60px);
}

/* Tipografía */
.content-area, .content-area p, .content-area li, .content-area td,
.content-area th, .content-area span, .content-area div, .content-area label {
    color: var(--wa-text);
}
.content-area h1, .content-area h2, .content-area h3,
.content-area h4, .content-area h5, .content-area h6 {
    color: #111827 !important;
}
.content-area .page-title { color: #111827 !important; }
.content-area .text-muted { color: var(--wa-text-3) !important; }
.content-area .text-secondary { color: var(--wa-text-2) !important; }
.content-area .text-dark { color: #111827 !important; }
.content-area a:not(.btn):not(.bs-btn):not(.bs-action-btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--wa-accent);
}

/* ── Cards ────────────────────────────────────────────────────────── */
.content-area .card {
    background: var(--wa-bg) !important;
    border: 1px solid var(--wa-border) !important;
    border-radius: 8px !important;
    color: var(--wa-text) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.content-area .card-header {
    background: var(--wa-bg-alt) !important;
    color: #111827 !important;
    border-bottom: 1px solid var(--wa-border) !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600;
}
.content-area .card-body { color: var(--wa-text) !important; background: transparent !important; }
.content-area .card-footer {
    background: var(--wa-bg-alt) !important;
    color: var(--wa-text-2) !important;
    border-top: 1px solid var(--wa-border) !important;
}
.content-area .card .card-body strong,
.content-area .card .card-body b { color: #111827 !important; }

/* ── Tablas ──────────────────────────────────────────────────────── */
.content-area .table {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    border-color: var(--wa-border) !important;
}
.content-area .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--wa-text) !important;
    border-bottom-color: var(--wa-border) !important;
}
.content-area .table thead th,
.content-area .table-light thead th,
.content-area .table-light th {
    background: var(--wa-table-head) !important;
    color: #111827 !important;
    border-color: var(--wa-border) !important;
    font-weight: 600;
}
/* Mantenemos table-dark como semántico (algunas vistas lo usan a propósito) */
.content-area .table-dark thead th,
.content-area .table-dark th {
    background: #1f2937 !important;
    color: #ffffff !important;
    border-color: #374151 !important;
}
.content-area .table-hover tbody tr:hover > * {
    background-color: var(--wa-hover) !important;
    color: var(--wa-text) !important;
}
.content-area .table-responsive { background: transparent !important; }

/* ── Forms ────────────────────────────────────────────────────────── */
.content-area .form-control,
.content-area .form-select,
.content-area textarea,
.content-area input[type="text"],
.content-area input[type="email"],
.content-area input[type="password"],
.content-area input[type="number"],
.content-area input[type="date"],
.content-area input[type="time"],
.content-area input[type="datetime-local"],
.content-area input[type="month"],
.content-area input[type="search"],
.content-area input[type="tel"],
.content-area input[type="url"] {
    background: var(--wa-bg) !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
.content-area .form-control:focus,
.content-area .form-select:focus,
.content-area textarea:focus {
    border-color: var(--wa-accent) !important;
    box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.15) !important;
}
.content-area .form-control::placeholder,
.content-area textarea::placeholder { color: #9ca3af !important; }
.content-area .form-label,
.content-area .form-label-sm { color: #374151 !important; font-weight: 500; }
.content-area .form-text { color: var(--wa-text-3) !important; }
.content-area .form-check-label { color: var(--wa-text) !important; }

/* Checkboxes y radios — el theme global los pinta con fondo casi negro
   (rgba(11,16,32,0.85)) que sobre el blanco del workarea se ve roto.
   Aquí los devolvemos al look light: fondo blanco, borde gris, tinte
   celeste Notion al marcar. `background-color` (no `background`) para
   preservar el SVG del check inserto por Bootstrap. */
.content-area .form-check-input,
body .modal-content .form-check-input {
    background-color: #ffffff !important;
    border-color: #c7cdd3 !important;
}
.content-area .form-check-input:checked,
body .modal-content .form-check-input:checked {
    background-color: var(--wa-accent) !important;
    border-color: var(--wa-accent) !important;
}
.content-area .form-check-input:focus,
body .modal-content .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.15) !important;
}
.content-area .input-group-text {
    background: var(--wa-bg-alt) !important;
    color: var(--wa-text) !important;
    border-color: #d1d5db !important;
}

/* ── List groups ─────────────────────────────────────────────────── */
.content-area .list-group-item {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    border-color: var(--wa-border) !important;
}
.content-area .list-group-item-action:hover {
    background: var(--wa-hover) !important;
    color: var(--wa-text) !important;
}

/* ── Modales (viven en <body>, no en .content-area — override
       global pero solo aplicado cuando hay un .content-area en la
       página, que es siempre que la app esté logueada) ──────────── */
body .modal-content {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    border: 1px solid var(--wa-border) !important;
}
body .modal-header,
body .modal-footer {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    border-color: var(--wa-border) !important;
}
body .modal-body { color: var(--wa-text) !important; }
body .modal-content h1, body .modal-content h2,
body .modal-content h3, body .modal-content h4,
body .modal-content h5, body .modal-content h6 { color: #111827 !important; }
body .modal-content .form-label { color: #374151 !important; }
body .modal-content .form-control,
body .modal-content .form-select,
body .modal-content textarea,
body .modal-content input {
    background: var(--wa-bg) !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* ── Dropdowns (viven en <body>) ───────────────────────────────── */
body .dropdown-menu:not(.notif-personales-menu) {
    background: var(--wa-bg) !important;
    border: 1px solid var(--wa-border) !important;
    color: var(--wa-text) !important;
}
body .dropdown-item {
    color: var(--wa-text) !important;
}
body .dropdown-item:hover {
    background: var(--wa-hover) !important;
    color: var(--wa-text) !important;
}
body .dropdown-item.text-danger {
    color: #dc2626 !important;
}
body .dropdown-divider {
    border-color: var(--wa-border) !important;
}

/* ── Alerts: mantienen colores semánticos pero con tipografía clara — */
.content-area .alert-info {
    background: #eff6ff !important; color: #1e40af !important;
    border-color: #dbeafe !important;
}
.content-area .alert-success {
    background: #ecfdf5 !important; color: #065f46 !important;
    border-color: #d1fae5 !important;
}
.content-area .alert-warning {
    background: #fffbeb !important; color: #92400e !important;
    border-color: #fde68a !important;
}
.content-area .alert-danger {
    background: #fee2e2 !important; color: #991b1b !important;
    border-color: #fecaca !important;
}
.content-area .alert-light {
    background: var(--wa-bg-alt) !important; color: var(--wa-text) !important;
    border-color: var(--wa-border) !important;
}

/* ── Botones outline mantienen su look semántico — solo aseguro
   contraste cuando están sobre fondo claro ──────────────────── */
.content-area .btn-outline-secondary { color: #6b7280 !important; border-color: #d1d5db !important; }
.content-area .btn-outline-secondary:hover {
    background: #f3f4f6 !important; color: #111827 !important; border-color: #9ca3af !important;
}
.content-area .btn-link { color: var(--wa-accent) !important; }

/* ── Page header / breadcrumb dentro de content (no el del topbar)  */
.content-area .page-header { color: #111827 !important; }
.content-area .breadcrumb-item { color: var(--wa-text-2) !important; }
.content-area .breadcrumb-item.active { color: #111827 !important; }
.content-area .breadcrumb-item a { color: var(--wa-accent) !important; }

/* ── KPIs / badges varios — el theme dark aplicaba bg #1c2542; en
   el área de trabajo se ven mal sobre fondo blanco. Versión clara: ─*/
.content-area .kpi-card {
    background: var(--wa-bg) !important;
    border: 1px solid var(--wa-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    color: var(--wa-text) !important;
}
.content-area .kpi-card .kpi-label { color: var(--wa-text-2) !important; }
.content-area .kpi-card .kpi-value, .content-area .kpi-card .kpi-num,
.content-area .kpi-card strong { color: #111827 !important; }
.content-area .kpi-card .kpi-sub { color: var(--wa-text-2) !important; }

/* Variantes "soft" del theme (.bg-primary-soft etc.) — en fondo
   oscuro tenían 12% alpha; en fondo claro las hacemos más visibles */
.content-area .bg-primary-soft  { background: #dbeafe !important; color: #1e40af !important; }
.content-area .bg-success-soft  { background: #d1fae5 !important; color: #065f46 !important; }
.content-area .bg-warning-soft  { background: #fef3c7 !important; color: #78350f !important; }
.content-area .bg-danger-soft   { background: #fee2e2 !important; color: #991b1b !important; }
.content-area .bg-info-soft     { background: #cffafe !important; color: #155e75 !important; }

/* ── Nav tabs (cards con tabs dentro de content) ─────────────────── */
.content-area .nav-tabs {
    border-bottom: 1px solid var(--wa-border) !important;
}
.content-area .nav-tabs .nav-link {
    color: var(--wa-text-2) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
.content-area .nav-tabs .nav-link:hover {
    border-color: var(--wa-border) var(--wa-border) transparent !important;
    color: var(--wa-text) !important;
}
.content-area .nav-tabs .nav-link.active {
    background: var(--wa-bg) !important;
    color: #111827 !important;
    border-color: var(--wa-border) var(--wa-border) var(--wa-bg) !important;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.content-area .page-link {
    background: var(--wa-bg) !important;
    color: var(--wa-text) !important;
    border-color: var(--wa-border) !important;
}
.content-area .page-link:hover {
    background: var(--wa-hover) !important;
    color: var(--wa-text) !important;
}
.content-area .page-item.active .page-link {
    background: var(--wa-accent) !important;
    color: #ffffff !important;
    border-color: var(--wa-accent) !important;
}

/* ── Inputs nativos de archivo y file selector ───────────────────── */
.content-area input[type="file"]::file-selector-button {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

/* ── Cards de productos / áreas / ficha ya tienen overrides locales
   con !important; este bloque es defensivo para tipos dinámicos  */
.content-area .table > tbody > tr > td a:not(.btn):not(.bs-btn):not(.bs-action-btn) {
    color: var(--wa-accent);
}

/* ── EXCEPCIONES — zonas que MANTIENEN fondo oscuro y texto claro ─
   Hay heros, banners, KPI cards y headers coloreados que se diseñaron
   con fondo de color de área + texto blanco. El override claro del
   workarea-light les pisaba el texto y quedaba ilegible. Acá los
   re-forzamos al estilo original con !important. */

/* Hero del dashboard de área (/areas/{slug}) — desde el rediseño Notion
   tiene fondo BLANCO con borde lateral del color del área (no banner
   colorido como antes). Por eso ya no forzamos texto blanco aquí.
   Los colores del título y subtítulo ahora vienen del bloque <style>
   inline en `templates/areas/dashboard.html` (texto oscuro #111827
   sobre fondo blanco — regla CLAUDE.md de contraste WCAG AA). */

/* Header del dashboard analítico principal y similares con clase
   .hero-dark / .page-hero-dark — patrón general */
.content-area .hero-dark,
.content-area .hero-dark *,
.content-area .page-hero-dark,
.content-area .page-hero-dark * { color: #ffffff !important; }

/* ── Botones unificados estilo "Calendario de Actividades" ───────
   Look pedido por el usuario: redondeado, azul vibrante con shadow
   sutil, ícono+texto centrados. La paleta toma de los colores del
   calendario para mantener coherencia visual. */
.content-area .btn-primary {
    background: #2383e2 !important;
    border: 1px solid #2383e2 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(35, 131, 226, 0.30) !important;
    transition: background .12s, box-shadow .15s, transform .1s;
}
.content-area .btn-primary:hover {
    background: #1a6ec0 !important;
    border-color: #1a6ec0 !important;
    box-shadow: 0 3px 10px rgba(35, 131, 226, 0.45) !important;
    transform: translateY(-1px);
}
.content-area .btn-primary:active { transform: translateY(0); }
.content-area .btn-primary.btn-sm {
    padding: 5px 12px !important; font-size: .82rem !important;
}

.content-area .btn-success {
    background: #16a34a !important; border: 1px solid #16a34a !important;
    color: #ffffff !important; border-radius: 8px !important;
    padding: 8px 16px !important; font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.30) !important;
    transition: background .12s, box-shadow .15s, transform .1s;
}
.content-area .btn-success:hover {
    background: #15803d !important; border-color: #15803d !important;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.45) !important;
    transform: translateY(-1px);
}
.content-area .btn-success.btn-sm { padding: 5px 12px !important; font-size: .82rem !important; }

.content-area .btn-danger {
    background: #dc2626 !important; border: 1px solid #dc2626 !important;
    color: #ffffff !important; border-radius: 8px !important;
    padding: 8px 16px !important; font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.30) !important;
}
.content-area .btn-danger:hover {
    background: #b91c1c !important; border-color: #b91c1c !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.45) !important;
    transform: translateY(-1px);
}
.content-area .btn-danger.btn-sm { padding: 5px 12px !important; font-size: .82rem !important; }

.content-area .btn-warning {
    background: #d97706 !important; border: 1px solid #d97706 !important;
    color: #ffffff !important; border-radius: 8px !important;
    padding: 8px 16px !important; font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.30) !important;
}
.content-area .btn-warning:hover {
    background: #b45309 !important; border-color: #b45309 !important;
    color: #ffffff !important;
}
.content-area .btn-warning.btn-sm { padding: 5px 12px !important; font-size: .82rem !important; }

.content-area .btn-info,
.content-area .btn-dark { color: #ffffff !important; border-radius: 8px !important; }

/* Outlines: matching radius pero sin shadow */
.content-area .btn-outline-primary,
.content-area .btn-outline-secondary,
.content-area .btn-outline-success,
.content-area .btn-outline-danger,
.content-area .btn-outline-warning,
.content-area .btn-outline-info {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
}
.content-area .btn-outline-primary.btn-sm,
.content-area .btn-outline-secondary.btn-sm,
.content-area .btn-outline-success.btn-sm,
.content-area .btn-outline-danger.btn-sm,
.content-area .btn-outline-warning.btn-sm {
    padding: 4px 10px !important; font-size: .8rem !important;
}

/* Badges con bg-* (fondo saturado) → SIEMPRE texto blanco, incluyendo
   hijos como <i> y <span> internos. Antes los iconos a veces heredaban
   color oscuro de otras reglas y se veían en negro sobre fondo de color.
   Solo `bg-light` y `bg-white` mantienen texto oscuro porque su fondo
   es claro. */
.content-area .badge.bg-primary,   .content-area .badge.bg-primary *,
.content-area .badge.bg-success,   .content-area .badge.bg-success *,
.content-area .badge.bg-danger,    .content-area .badge.bg-danger *,
.content-area .badge.bg-warning,   .content-area .badge.bg-warning *,
.content-area .badge.bg-info,      .content-area .badge.bg-info *,
.content-area .badge.bg-secondary, .content-area .badge.bg-secondary *,
.content-area .badge.bg-dark,      .content-area .badge.bg-dark *,
.content-area .badge[class*="bg-success-"],
.content-area .badge[class*="bg-warning-"],
.content-area .badge[class*="bg-danger-"],
.content-area .badge[class*="bg-info-"],
.content-area .badge[class*="bg-primary-"] { color: #ffffff !important; }

/* Las pocas excepciones con fondo claro: badge `bg-light` / `bg-white`
   y badges con sufijo `-subtle` (variantes claras de Bootstrap 5.3). */
.content-area .badge.bg-light,
.content-area .badge.bg-light *,
.content-area .badge.bg-white,
.content-area .badge.bg-white *,
.content-area .badge[class*="-subtle"],
.content-area .badge[class*="-subtle"] * { color: #1f2937 !important; }

/* ── Estilo Notion unificado para TODOS los calendarios ─────────
   Aplica a .cal-tbl (calendario completo de actividades, operaciones,
   etc.) y a .mini-cal-table (embed del Inicio). Mantiene drag-drop
   y la lógica existente — solo cambia la apariencia. */
.content-area .cal-tbl {
    border-collapse: separate !important;
    border-spacing: 4px !important;
    table-layout: fixed !important;
}
.content-area .cal-tbl th {
    background: transparent !important;
    color: var(--wa-text-3) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    padding: 4px 0 8px !important;
    border: none !important;
}
.content-area .cal-tbl td.cal-dia {
    background: var(--wa-bg-alt) !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    height: 130px;
    vertical-align: top;
    padding: 6px !important;
    transition: background .12s, border-color .12s;
}
.content-area .cal-tbl td.cal-dia[data-fecha]:hover {
    background: var(--wa-hover) !important;
    border-color: var(--wa-border) !important;
}
.content-area .cal-pasado { background: #f9fafb !important; opacity: 0.85; }
.content-area .cal-hoy {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
}
.content-area .cal-dia-num {
    font-size: .75rem; color: #4b5563 !important; font-weight: 600;
    margin-bottom: 4px; padding-left: 2px;
}
.content-area .cal-hoy .cal-dia-num { color: #92400e !important; font-weight: 700; }

/* Cards de actividad/OP — radius más Notion + sombra suave */
.content-area .cal-card {
    border-radius: 6px !important;
    padding: 5px 8px !important;
    margin-bottom: 4px !important;
    font-size: .72rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.content-area .cal-card-act:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.10) !important;
}
.content-area .cal-card-static { box-shadow: none; }

/* ── Excepciones: bordes azules de marca conservados ─────────────── */
/* Las cards con `border-primary` mantienen el borde azul como acento */
.content-area .card.border-primary { border-color: var(--wa-accent) !important; }
.content-area .card.border-success { border-color: #16a34a !important; }
.content-area .card.border-warning { border-color: #d97706 !important; }
.content-area .card.border-danger  { border-color: #dc2626 !important; }
.content-area .card.border-info    { border-color: #0ea5e9 !important; }