/* ═════════════════════════════════════════════════════════════════════════
   CRM Multitec — sistema de diseño

   Este archivo es la ÚNICA fuente de colores, tamaños y componentes. Una
   pantalla nueva no debería necesitar `style="..."` ni un bloque <style>:
   si le falta algo, va acá, con nombre, para que la siguiente lo reutilice.

   Orden:  1. Tokens  2. Bootstrap con la marca  3. Estructura (menú, barra)
           4. Componentes  5. Compatibilidad con las clases antiguas
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Marca. Los contrastes son sobre blanco; mínimo para texto: 4,5:1. */
  --marino: #01337C;        /* logo; títulos y textos fuertes         11,9:1 */
  --naranja: #F39D39;       /* logo; SOLO acentos                      2,2:1 — nunca texto */
  --azul: #2F7BFF;          /* rellenos, íconos, indicadores           3,9:1 — no texto chico */
  --azul-texto: #1D63E0;    /* botones y enlaces (mismo matiz)         5,4:1 */
  --azul-hover: #174FB4;
  --azul-suave: #EAF2FF;
  --cian: #22D3EE;          /* detalles; como texto solo sobre marino  6,6:1 */

  /* Neutros */
  --fondo: #F5F7FB;
  --superficie: #FFFFFF;
  --borde: #E3E8F0;
  --borde-fuerte: #CBD3E1;
  --texto: #0F1B33;
  --texto-2: #475569;       /* 7,6:1 */
  --texto-3: #64748B;       /* 4,8:1 — el gris más claro admitido para texto */

  /* Semánticos: fondo suave + texto oscuro, todos ≥ 4,5:1 */
  --ok-bg: #E7F7EE;    --ok: #166534;
  --info-bg: #EAF2FF;  --info: #1D4ED8;
  --cola-bg: #E6F8FC;  --cola: #0E7490;
  --aviso-bg: #FFF4E5; --aviso: #B45309;
  --error-bg: #FDECEC; --error: #B91C1C;
  --neutro-bg: #EEF1F5; --neutro: #475569;
  --marca-bg: #E6ECF6; --marca: #01337C;

  /* Solo estos 5 tamaños de letra */
  --t-xs: .75rem;    /* 12 px  etiquetas, encabezados de tabla */
  --t-sm: .8125rem;  /* 13 px  texto secundario */
  --t-base: .875rem; /* 14 px  texto normal y tablas */
  --t-lg: 1.125rem;  /* 18 px  título de tarjeta */
  --t-xl: 1.5rem;    /* 24 px  título de página */

  --radio: .625rem;
  --radio-sm: .375rem;
  --sombra: 0 1px 2px rgba(15,27,51,.05), 0 1px 3px rgba(15,27,51,.06);
  --sombra-alta: 0 10px 30px rgba(15,27,51,.14);
  --foco: 0 0 0 3px rgba(47,123,255,.22);

  --ancho-menu: 248px;
  --ancho-menu-mini: 68px;
  --alto-barra: 60px;
}

/* ─── 2. Bootstrap con la marca ────────────────────────────────────────── */
:root {
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: var(--t-base);
  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--texto);
  --bs-secondary-color: var(--texto-3);
  --bs-border-color: var(--borde);
  --bs-primary: var(--azul-texto);
  --bs-primary-rgb: 29, 99, 224;
  --bs-link-color: var(--azul-texto);
  --bs-link-color-rgb: 29, 99, 224;
  --bs-link-hover-color: var(--azul-hover);
  --bs-link-hover-color-rgb: 23, 79, 180;
  --bs-success-rgb: 22, 101, 52;
  --bs-danger-rgb: 185, 28, 28;
  --bs-warning-rgb: 180, 83, 9;
  --bs-info-rgb: 14, 116, 144;
  --bs-border-radius: var(--radio-sm);
  --bs-focus-ring-color: rgba(47, 123, 255, .22);
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--marino); }
.text-muted { color: var(--texto-3) !important; }

.btn { font-weight: 600; border-radius: var(--radio-sm); }
.btn-primary {
  --bs-btn-bg: var(--azul-texto); --bs-btn-border-color: var(--azul-texto);
  --bs-btn-hover-bg: var(--azul-hover); --bs-btn-hover-border-color: var(--azul-hover);
  --bs-btn-active-bg: var(--azul-hover); --bs-btn-active-border-color: var(--azul-hover);
  --bs-btn-disabled-bg: var(--azul-texto); --bs-btn-disabled-border-color: var(--azul-texto);
  --bs-btn-focus-shadow-rgb: 47, 123, 255;
}
.btn-outline-primary {
  --bs-btn-color: var(--azul-texto); --bs-btn-border-color: #B9D0F8;
  --bs-btn-hover-bg: var(--azul-suave); --bs-btn-hover-color: var(--azul-hover);
  --bs-btn-hover-border-color: var(--azul-texto);
  --bs-btn-active-bg: var(--azul-suave); --bs-btn-active-color: var(--azul-hover);
  --bs-btn-active-border-color: var(--azul-texto);
}
.btn-outline-secondary {
  --bs-btn-color: var(--texto); --bs-btn-border-color: var(--borde);
  --bs-btn-bg: var(--superficie);
  --bs-btn-hover-bg: var(--fondo); --bs-btn-hover-color: var(--texto);
  --bs-btn-hover-border-color: var(--borde-fuerte);
  --bs-btn-active-bg: var(--neutro-bg); --bs-btn-active-color: var(--texto);
  --bs-btn-active-border-color: var(--borde-fuerte);
}
.btn-outline-danger { --bs-btn-color: var(--error); --bs-btn-border-color: #F3C4C4;
  --bs-btn-hover-bg: var(--error-bg); --bs-btn-hover-color: var(--error); --bs-btn-hover-border-color: var(--error); }
.btn-success { --bs-btn-bg: #15803D; --bs-btn-border-color: #15803D;
  --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; }

.form-control, .form-select { border-color: var(--borde); }
.form-control:focus, .form-select:focus { border-color: var(--azul); box-shadow: var(--foco); }
.form-check-input:checked { background-color: var(--azul-texto); border-color: var(--azul-texto); }
.form-check-input:focus { border-color: var(--azul); box-shadow: var(--foco); }
.form-label { font-weight: 500; color: var(--texto-2); }

.progress { --bs-progress-bar-bg: var(--azul); --bs-progress-bg: var(--neutro-bg); }
.pagination { --bs-pagination-color: var(--texto-2); --bs-pagination-border-color: var(--borde);
  --bs-pagination-hover-color: var(--azul-texto); --bs-pagination-hover-bg: var(--fondo);
  --bs-pagination-active-bg: var(--azul-texto); --bs-pagination-active-border-color: var(--azul-texto);
  --bs-pagination-focus-box-shadow: var(--foco); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--azul-texto); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--azul-texto); }
.nav-pills .nav-link.active { color: #fff; }
.list-group { --bs-list-group-border-color: var(--borde); --bs-list-group-action-hover-bg: #FAFBFE; }
.dropdown-menu { border-color: var(--borde); box-shadow: var(--sombra-alta); border-radius: var(--radio-sm); }
.modal-content { border: none; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
kbd { background: var(--neutro-bg); color: var(--texto-2); border: 1px solid var(--borde); box-shadow: none; font-size: var(--t-xs); }

/* ─── 3. Estructura ────────────────────────────────────────────────────── */

/* Menú lateral. Claro, porque el logo es azul marino sobre transparente y en
   un fondo oscuro no se ve. height fijo + flex: la lista del medio scrollea
   y el pie de usuario queda anclado (ver la historia en base.html). */
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  width: var(--ancho-menu); height: 100vh; height: 100dvh;
  background: var(--superficie); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column;
  transition: transform .25s ease, width .2s ease;
}
.menu-logo { display: flex; align-items: center; height: var(--alto-barra); padding: 0 1.25rem;
             border-bottom: 1px solid var(--borde); flex-shrink: 0; text-decoration: none; }
.menu-logo img { height: 32px; width: auto; display: block; }
.menu-logo .monograma { display: none; }
.monograma { width: 34px; height: 34px; border-radius: .5rem; background: var(--marino); color: #fff;
             font-weight: 700; font-size: 1rem; place-items: center; position: relative; }
.monograma::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
                    border: 5px solid transparent; border-left-color: var(--naranja); }

.menu-lista { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .5rem .75rem 1rem;
              scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.menu-lista ul { list-style: none; margin: 0; padding: 0; }
.menu-grupo { font-size: var(--t-xs); font-weight: 600; color: var(--texto-3); text-transform: uppercase;
              letter-spacing: .06em; padding: 1rem .75rem .35rem; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; margin: 1px 0;
             border-radius: var(--radio-sm); color: var(--texto-2); text-decoration: none;
             font-weight: 500; position: relative; white-space: nowrap; }
.menu-item i { font-size: 1.05rem; color: var(--texto-3); width: 1.15rem; text-align: center; flex-shrink: 0; }
.menu-item:hover { background: var(--fondo); color: var(--texto); }
.menu-item:focus-visible { outline: none; box-shadow: var(--foco); }
.menu-item.activo { background: var(--azul-suave); color: var(--azul-texto); font-weight: 600; }
.menu-item.activo i { color: var(--azul); }
/* El acento naranja de la marca marca dónde estás. */
.menu-item.activo::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem;
                            width: 3px; border-radius: 0 3px 3px 0; background: var(--naranja); }

.menu-usuario { border-top: 1px solid var(--borde); padding: .75rem 1rem; display: flex; align-items: center;
                gap: .65rem; flex-shrink: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marino); color: #fff; display: grid;
          place-items: center; font-weight: 600; font-size: var(--t-sm); flex-shrink: 0; text-transform: uppercase; }
.menu-usuario .datos { min-width: 0; flex: 1; }
.menu-usuario .nombre { font-weight: 600; font-size: var(--t-sm); line-height: 1.25; white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.menu-usuario .mfa { font-size: var(--t-xs); text-decoration: none; display: inline-flex; gap: .25rem; align-items: center; }
.menu-usuario .mfa.si { color: var(--ok); } .menu-usuario .mfa.no { color: var(--aviso); }
.btn-compactar { flex-shrink: 0; background: none; border: none; border-top: 1px solid var(--borde);
                 color: var(--texto-3); font-size: var(--t-sm); padding: .55rem 1.25rem; text-align: left;
                 width: 100%; white-space: nowrap; }
.btn-compactar:hover { color: var(--texto); background: var(--fondo); }

.btn-icono { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--radio-sm);
             border: 1px solid transparent; background: none; color: var(--texto-2); padding: 0; flex-shrink: 0; }
.btn-icono:hover { background: var(--superficie); border-color: var(--borde); color: var(--texto); }
.btn-icono:focus-visible { outline: none; box-shadow: var(--foco); }

/* Barra superior */
.principal { margin-left: var(--ancho-menu); min-height: 100vh; transition: margin-left .2s ease; }
.barra { position: sticky; top: 0; z-index: 1030; height: var(--alto-barra);
         background: rgba(245,247,251,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
         border-bottom: 1px solid var(--borde); padding: 0 2rem; display: flex; align-items: center; gap: .75rem; }
.barra .logo-movil { display: none; }
.barra .logo-movil img { height: 26px; }
.buscador { flex: 1; max-width: 520px; position: relative; margin: 0; }
.buscador input { width: 100%; border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--radio-sm);
                  padding: .5rem 4rem .5rem 2.25rem; font-size: var(--t-base); color: var(--texto); }
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: none; border-color: var(--azul); box-shadow: var(--foco); }
.buscador > i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.buscador kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.barra .acciones { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.contenido { padding: 1.75rem 2rem 3rem; max-width: 1480px; }

/* Menú compacto (solo íconos). Dentro del media query de escritorio: en
   móvil el menú se oculta entero y la clase correría el contenido. */
@media (min-width: 992px) {
  body.menu-mini .menu { width: var(--ancho-menu-mini); }
  body.menu-mini .principal { margin-left: var(--ancho-menu-mini); }
  body.menu-mini .menu-logo { justify-content: center; padding: 0; }
  body.menu-mini .menu-logo img { display: none; }
  body.menu-mini .menu-logo .monograma { display: grid; }
  body.menu-mini .menu-grupo, body.menu-mini .menu-item .etiqueta,
  body.menu-mini .menu-usuario .datos, body.menu-mini .btn-compactar .texto { display: none; }
  body.menu-mini .menu-grupo + ul { border-top: 1px solid var(--borde); margin-top: .5rem; padding-top: .5rem; }
  body.menu-mini .menu-item { justify-content: center; padding: .55rem 0; }
  body.menu-mini .menu-usuario { flex-direction: column; padding: .75rem .25rem; }
  body.menu-mini .btn-compactar { text-align: center; padding: .55rem 0; }
  /* El nombre aparece al pasar el mouse */
  body.menu-mini .menu-item:hover::after {
    content: attr(data-nombre); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--marino); color: #fff; padding: .35rem .6rem; border-radius: var(--radio-sm);
    font-size: var(--t-sm); font-weight: 500; white-space: nowrap; z-index: 1050; pointer-events: none;
    box-shadow: var(--sombra-alta);
  }
}

.menu-fondo { display: none; position: fixed; inset: 0; background: rgba(15,27,51,.45); z-index: 1039; }
.menu-fondo.visible { display: block; }

@media (max-width: 991.98px) {
  .menu { transform: translateX(-100%); box-shadow: var(--sombra-alta); }
  .menu.abierto { transform: translateX(0); }
  .principal { margin-left: 0; }
  .barra { padding: 0 1rem; }
  .barra .logo-movil { display: block; }
  .contenido { padding: 1.25rem 1rem 2.5rem; }
}
@media (max-width: 575.98px) {
  .buscador kbd, .barra .acciones .texto-largo { display: none; }
  .buscador input { padding-right: .75rem; }
}

/* ─── 4. Componentes ───────────────────────────────────────────────────── */

/* Encabezado de página */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
               flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-header h1 { font-size: var(--t-xl); font-weight: 700; color: var(--marino); margin: 0; letter-spacing: -.01em; }
/* Los íconos de los títulos traían el azul viejo escrito a mano. */
.page-header h1 > i.bi { color: var(--azul) !important; font-size: .9em; }
.page-header .subtitulo { color: var(--texto-2); margin: .25rem 0 0; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--texto-3); --bs-breadcrumb-item-active-color: var(--texto-3);
              font-size: var(--t-sm); margin-bottom: .25rem; }
.breadcrumb a { color: var(--texto-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul-texto); }

/* Tarjetas */
.card { border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); background: var(--superficie); }
.card-header { background: var(--superficie); border-bottom: 1px solid var(--borde); color: var(--marino); }
.card-header:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.card-footer { background: var(--superficie); border-top: 1px solid var(--borde); }

/* Indicadores: .stat-card es la clase que ya usan las pantallas. */
.stat-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
             box-shadow: var(--sombra); padding: 1.15rem 1.25rem; }
.stat-card .value { font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--marino); }
.stat-card .label { color: var(--texto-3); font-size: var(--t-sm); margin-top: .4rem; }

/* Estados: un solo componente para todo el sistema, vía {% estado objeto %}.
   Lleva un punto además del color: el estado no depende solo del color. */
.estado { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-xs); font-weight: 600;
          padding: .2rem .55rem; border-radius: 1rem; white-space: nowrap; line-height: 1.3; vertical-align: middle; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.estado.ok     { background: var(--ok-bg);     color: var(--ok); }
.estado.info   { background: var(--info-bg);   color: var(--info); }
.estado.cola   { background: var(--cola-bg);   color: var(--cola); }
.estado.aviso  { background: var(--aviso-bg);  color: var(--aviso); }
.estado.error  { background: var(--error-bg);  color: var(--error); }
.estado.neutro { background: var(--neutro-bg); color: var(--neutro); }
.estado.marca  { background: var(--marca-bg);  color: var(--marca); }
.estado.vivo::before { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .estado.vivo::before { animation: none; } }

/* Tablas */
.table { --bs-table-hover-bg: #FAFBFE; --bs-table-border-color: var(--borde); margin-bottom: 0; }
.table > thead th { font-size: var(--t-xs); font-weight: 600; color: var(--texto-3); text-transform: uppercase;
                    letter-spacing: .05em; background: #FAFBFD; border-bottom: 1px solid var(--borde);
                    white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table td { vertical-align: middle; font-size: var(--t-base); }
.table > :not(caption) > * > * { padding-left: 1rem; padding-right: 1rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Avisos (mensajes de Django). Flotantes: los de éxito e información se
   cierran solos; los de error y advertencia esperan a que alguien los lea. */
.avisos { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1090; display: grid; gap: .6rem;
          width: min(420px, calc(100vw - 2.5rem)); }
.aviso { display: flex; gap: .7rem; align-items: flex-start; background: var(--superficie);
         border: 1px solid var(--borde); border-left: 4px solid var(--texto-3); border-radius: var(--radio-sm);
         box-shadow: var(--sombra-alta); padding: .8rem .8rem .8rem 1rem; font-size: var(--t-base);
         transition: opacity .3s ease, transform .3s ease; }
.aviso.saliendo { opacity: 0; transform: translateY(6px); }
.aviso > .bi { font-size: 1.1rem; line-height: 1.3; }
.aviso .texto { flex: 1; color: var(--texto); }
.aviso .cerrar { background: none; border: none; color: var(--texto-3); padding: 0 .2rem; line-height: 1; font-size: 1.1rem; }
.aviso .cerrar:hover { color: var(--texto); }
.aviso.success { border-left-color: #16A34A; } .aviso.success > .bi { color: #16A34A; }
.aviso.info    { border-left-color: var(--azul); } .aviso.info > .bi { color: var(--azul); }
.aviso.warning { border-left-color: #F59E0B; } .aviso.warning > .bi { color: #D97706; }
.aviso.danger  { border-left-color: #DC2626; } .aviso.danger > .bi { color: #DC2626; }

/* Alertas en línea de Bootstrap con la paleta */
.alert-success { --bs-alert-bg: var(--ok-bg);    --bs-alert-color: var(--ok);    --bs-alert-border-color: #BFE6CF; }
.alert-info    { --bs-alert-bg: var(--info-bg);  --bs-alert-color: var(--info);  --bs-alert-border-color: #C9DCFB; }
.alert-warning { --bs-alert-bg: var(--aviso-bg); --bs-alert-color: var(--aviso); --bs-alert-border-color: #F7D9AE; }
.alert-danger  { --bs-alert-bg: var(--error-bg); --bs-alert-color: var(--error); --bs-alert-border-color: #F3C4C4; }

/* Ventana de confirmación (reemplaza al confirm() del navegador) */
.confirmar { display: flex; gap: 1rem; padding: 1.5rem 1.5rem .5rem; }
.confirmar-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
                 font-size: 1.2rem; background: var(--azul-suave); color: var(--azul); }
.confirmar-ico.peligro { background: var(--error-bg); color: var(--error); }
.confirmar-ico.envio   { background: var(--azul-suave); color: var(--azul); }
.confirmar-cuerpo { flex: 1; min-width: 0; }
.confirmar-titulo { font-size: var(--t-lg); font-weight: 700; color: var(--marino); margin: .35rem 0 .4rem; }
.confirmar-texto { color: var(--texto-2); margin-bottom: .75rem; }
.confirmar-pie { border-top: none; padding: .75rem 1.5rem 1.5rem; gap: .5rem; }
.btn-danger { --bs-btn-bg: #B91C1C; --bs-btn-border-color: #B91C1C;
              --bs-btn-hover-bg: #991B1B; --bs-btn-hover-border-color: #991B1B; }
/* Bloque de impacto: «qué va a pasar» en filas etiqueta / valor */
.impacto { background: var(--fondo); border-radius: var(--radio-sm); padding: .75rem 1rem; margin: 0; }
.impacto > div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.impacto dt { font-weight: 400; color: var(--texto-2); }
.impacto dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.impacto dd.aviso { color: var(--aviso); }
.impacto dd.cola { color: var(--cola); }

/* Indicadores del inicio */
.kpi { padding: 1.15rem 1.25rem; height: 100%; }
.kpi .cab { display: flex; align-items: center; gap: .6rem; color: var(--texto-2); font-weight: 500; }
.kpi .ico { width: 34px; height: 34px; border-radius: .5rem; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.ico.azul { background: var(--azul-suave); color: var(--azul); }
.ico.cian { background: var(--cola-bg); color: var(--cola); }
.ico.verde { background: var(--ok-bg); color: var(--ok); }
.ico.ambar { background: var(--aviso-bg); color: var(--aviso); }
.ico.marino { background: var(--marca-bg); color: var(--marino); }
.kpi .cifra { font-size: 1.85rem; font-weight: 700; color: var(--marino); letter-spacing: -.02em;
              margin: .65rem 0 .35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .cifra.vacia { color: var(--texto-3); }
.kpi .nota { font-size: var(--t-sm); color: var(--texto-3); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.delta { font-size: var(--t-xs); font-weight: 600; border-radius: 1rem; padding: .1rem .45rem; white-space: nowrap; }
.delta.sube { background: var(--ok-bg); color: var(--ok); }
.delta.baja { background: var(--error-bg); color: var(--error); }
.delta.igual { background: var(--neutro-bg); color: var(--neutro); }
.marca-inflada { font-size: var(--t-xs); color: var(--aviso); background: var(--aviso-bg); border-radius: 1rem;
                 padding: .05rem .45rem; font-weight: 600; cursor: help; }

/* Tarjeta con cabecera propia (inicio, detalle) */
.tarjeta-cab { padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); display: flex; align-items: center;
               justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.tarjeta-cab h2 { font-size: var(--t-lg); font-weight: 600; color: var(--marino); margin: 0; }
.tarjeta-cab .accion { font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
.tarjeta-cuerpo { padding: 1.25rem; }
.cifra-grande { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--marino); font-variant-numeric: tabular-nums; }
.cifra-grande.vacia { color: var(--texto-3); }
.texto-2 { color: var(--texto-2); } .texto-3 { color: var(--texto-3); }
.t-xs { font-size: var(--t-xs); } .t-sm { font-size: var(--t-sm); } .t-lg { font-size: var(--t-lg); }
.fila-mini { padding: .6rem 1.25rem; border-top: 1px solid var(--borde); font-size: var(--t-sm); }
.fila-mini a { font-weight: 600; text-decoration: none; color: var(--texto); }
.fila-mini a:hover { color: var(--azul-texto); }
.fila-mini .sub { color: var(--texto-3); font-size: var(--t-xs); }

/* Línea de tiempo de una campaña */
.linea-tiempo { display: flex; list-style: none; margin: .5rem 0 1.25rem; padding: 0; }
.paso { flex: 1; text-align: center; position: relative; font-size: var(--t-xs); color: var(--texto-3); font-weight: 500; }
.paso::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--borde); }
.paso:first-child::before { display: none; }
.paso .bola { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto .4rem; display: grid; place-items: center;
              background: var(--superficie); border: 2px solid var(--borde); position: relative; z-index: 1; font-size: .8rem; }
.paso .nombre { display: block; }
.paso.hecho { color: var(--texto-2); }
.paso.hecho::before, .paso.actual::before, .paso.pausa::before, .paso.error::before { background: var(--azul); }
.paso.hecho .bola { background: var(--azul); border-color: var(--azul); color: #fff; }
.paso.actual { color: var(--azul-texto); font-weight: 700; }
.paso.actual .bola { border-color: var(--azul); box-shadow: var(--foco); }
.paso.actual .bola::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.paso.pausa { color: var(--aviso); font-weight: 700; }
.paso.pausa .bola { border-color: #F59E0B; background: var(--aviso-bg); color: var(--aviso); }
.paso.error { color: var(--error); font-weight: 700; }
.paso.error .bola { border-color: #DC2626; background: var(--error-bg); color: var(--error); }

/* Barra de avance: enviados, con error y pendientes */
.avance-cab { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--texto-2); margin-bottom: .35rem; }
.barra-avance { height: 10px; border-radius: 6px; background: var(--neutro-bg); overflow: hidden; display: flex; }
.barra-avance .ok { background: var(--azul); transition: width .4s ease; }
.barra-avance .mal { background: #EF4444; transition: width .4s ease; }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--t-sm); color: var(--texto-2); margin-top: .6rem; }
.leyenda b { color: var(--texto); font-variant-numeric: tabular-nums; }
.cuadro { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.cuadro.ok { background: var(--azul); } .cuadro.mal { background: #EF4444; } .cuadro.pend { background: var(--neutro-bg); border: 1px solid var(--borde); }
.cuadro.marino { background: var(--marino); } .cuadro.cian { background: var(--cian); }

/* Pie de tabla y paginación con «…» */
.pie-tabla { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
             padding: .8rem 1.25rem; border-top: 1px solid var(--borde); color: var(--texto-3); font-size: var(--t-sm); }
.paginacion { display: flex; gap: .2rem; align-items: center; }
.paginacion a, .paginacion span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radio-sm);
  text-decoration: none; color: var(--texto-2); font-weight: 500; border: 1px solid transparent; padding: 0 .45rem; }
.paginacion a:hover { background: var(--fondo); border-color: var(--borde); color: var(--texto); }
.paginacion .actual { background: var(--azul-texto); color: #fff; }

/* Filtros rápidos tipo pestaña, con contador */
.filtros-rapidos { display: flex; gap: .35rem; flex-wrap: wrap; padding: .75rem 1.25rem; border-bottom: 1px solid var(--borde); }
.filtros-rapidos a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 1rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--texto-2); text-decoration: none; border: 1px solid var(--borde);
  background: var(--superficie); }
.filtros-rapidos a:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.filtros-rapidos a.activo { background: var(--azul-suave); border-color: #B9D0F8; color: var(--azul-texto); font-weight: 600; }
.filtros-rapidos .n { font-size: var(--t-xs); font-weight: 600; background: var(--neutro-bg); color: var(--neutro);
  border-radius: 1rem; padding: 0 .4rem; }
.filtros-rapidos a.activo .n { background: #fff; color: var(--azul-texto); }
.filtros-rapidos a.alerta .n { background: var(--error-bg); color: var(--error); }

/* Celdas de tabla */
.celda-titulo { font-weight: 600; color: var(--texto); text-decoration: none; }
.celda-titulo:hover { color: var(--azul-texto); }
.celda-sub { font-size: var(--t-xs); color: var(--texto-3); margin-top: .1rem; }
.fallas { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--t-xs); color: var(--error); font-weight: 600; }

/* Lista de definiciones etiqueta / valor (detalles de una ficha) */
.ficha-datos { margin: 0; }
.ficha-datos > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--borde); }
.ficha-datos > div:first-child { border-top: none; padding-top: 0; }
.ficha-datos dt { font-weight: 400; color: var(--texto-3); white-space: nowrap; }
.ficha-datos dd { margin: 0; text-align: right; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }

/* Estado vacío */
.vacio { text-align: center; padding: 2.5rem 1rem; }
.vacio .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--azul-suave); color: var(--azul);
              display: grid; place-items: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.vacio h3 { font-size: var(--t-lg); font-weight: 600; color: var(--marino); }
.vacio p { color: var(--texto-2); max-width: 380px; margin: 0 auto 1rem; }

/* Resultados del buscador */
.resultado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.resultado .fw-medium { color: var(--texto); }

/* ─── 5. Compatibilidad con las clases antiguas ────────────────────────── */
/* Las pantallas que todavía no se migran usan estas clases. Se mantienen
   con la paleta nueva hasta que cada una pase a {% estado %} / {% chip %}. */
.badge[class*="badge-"] { font-weight: 600; }
.badge-activo, .badge-enviado    { background: var(--ok-bg);     color: var(--ok); }
.badge-cliente_vigente           { background: var(--marca-bg);  color: var(--marca); }
.badge-potencial                 { background: var(--info-bg);   color: var(--info); }
.badge-por_vencer, .badge-baja   { background: var(--aviso-bg);  color: var(--aviso); }
.badge-vencido, .badge-suspendido, .badge-error, .badge-rebote, .badge-spam
                                 { background: var(--error-bg);  color: var(--error); }
.badge-inactivo, .badge-pendiente { background: var(--neutro-bg); color: var(--neutro); }

.dias-badge { font-size: var(--t-xs); padding: .2rem .5rem; border-radius: .3rem; font-weight: 600; }
.dias-ok      { background: var(--ok-bg);    color: var(--ok); }
.dias-warning { background: var(--aviso-bg); color: var(--aviso); }
.dias-danger  { background: var(--error-bg); color: var(--error); }
.min-w-0 { min-width: 0; }
.marco-preview { width: 100%; height: 70vh; border: 0; display: block; }

/* Opción grande seleccionable (radio con .btn-check) */
.opcion-grande { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--borde);
                 border-radius: var(--radio); background: var(--superficie); cursor: pointer; height: 100%;
                 transition: border-color .15s, box-shadow .15s; }
.opcion-grande:hover { border-color: var(--borde-fuerte); }
.btn-check:checked + .opcion-grande { border-color: var(--azul); box-shadow: var(--foco); background: var(--azul-suave); }
.btn-check:focus-visible + .opcion-grande { box-shadow: var(--foco); }
.t-base { font-size: var(--t-base); }
.caja-suave { background: var(--fondo); border-radius: var(--radio-sm); }
/* sticky-top de Bootstrap pega en 0, debajo de la barra superior: se corre. */
.sticky-top.bajo-barra { top: calc(var(--alto-barra) + 1rem); z-index: 10; }

/* ─── Etiquetas de Bootstrap con la paleta de estados ───────────────────────
   Las pantallas viejas usan `badge bg-warning text-dark`, `bg-info text-dark`,
   etc. Al darle a warning/info un tono oscuro (para que su TEXTO se lea),
   esas etiquetas quedaron con texto oscuro sobre fondo oscuro: ilegibles.
   Acá todas pasan al par fondo suave + texto oscuro de los estados, que
   siempre cumple contraste. Con !important porque bg-* y text-* de
   Bootstrap también lo usan. */
.badge { font-weight: 600; }
.badge.bg-success                 { background: var(--ok-bg) !important;     color: var(--ok) !important; }
.badge.bg-danger                  { background: var(--error-bg) !important;  color: var(--error) !important; }
.badge.bg-warning, .badge.bg-warning-subtle { background: var(--aviso-bg) !important; color: var(--aviso) !important; }
.badge.bg-info                    { background: var(--cola-bg) !important;   color: var(--cola) !important; }
.badge.bg-primary                 { background: var(--info-bg) !important;   color: var(--info) !important; }
.badge.bg-secondary, .badge.bg-light { background: var(--neutro-bg) !important; color: var(--neutro) !important; }
.badge.bg-dark                    { background: var(--marca-bg) !important;  color: var(--marca) !important; }
.badge.bg-light.text-success      { color: var(--ok) !important; }
.badge.border { border-color: transparent !important; }

/* Cabeceras de tarjeta de las pantallas viejas, igual que .tarjeta-cab */
.card-header { padding: .9rem 1.25rem; font-weight: 600; }
.card-header.py-3 { padding-top: .9rem !important; padding-bottom: .9rem !important; }
/* Ícono grande de los estados vacíos de las pantallas viejas */
.ico-vacio { font-size: 2.5rem; color: var(--azul); opacity: .55; }
.texto-marino { color: var(--marino); }