/* ============================================================================
   coverizeTheme.css — Capa de unificación visual (identidad Coverbot)
   ----------------------------------------------------------------------------
   Se carga en TODAS las vistas, DESPUÉS de la CSS propia de cada pantalla, para
   poder armonizar la apariencia sin reescribir cada fichero.

   REGLA DE SEGURIDAD: esta capa SOLO toca apariencia
   (color / background / border / border-radius / box-shadow / font / transition).
   NUNCA toca layout (display / position / width / height / flex / grid / float),
   por lo que no altera la estructura ni la maquetación de ninguna pantalla.
   ============================================================================ */

:root {
  /* Marca */
  --cb-purple:       #6B1B7C;   /* primario */
  --cb-purple-2:     #8B2BA0;   /* acento / degradado */
  --cb-purple-dark:  #54155E;   /* hover */
  --cb-purple-deep:  #3b1a4a;   /* tinta cabecera */
  --cb-purple-light: #BE8FCB;
  --cb-purple-rgb:      107, 27, 124;   /* primario en rgb (para sombras/rgba) */
  --cb-purple-deep-rgb:  59, 26, 74;    /* tinta cabecera en rgb */
  --cb-on-primary: #FFFFFF;             /* texto legible sobre el primario */
  --cb-on-accent:  #FFFFFF;             /* texto legible sobre el acento */

  /* Superficies */
  --cb-surface: #FFFFFF;
  --cb-bg:      #F4F2F7;
  --cb-tint:    #FAF6FB;
  --cb-tint-2:  #F5EEF8;
  --cb-border:  #E5E1EB;

  /* Texto */
  --cb-text:       #2A1B33;
  --cb-text-muted: #5C4768;
  --cb-text-rgb:   42, 27, 51;

  /* Sombras / radios */
  --cb-shadow:    0 2px 8px rgba(0, 0, 0, .04);
  --cb-shadow-lg: 0 10px 30px rgba(var(--cb-purple-deep-rgb), .12);
  --cb-radius:    10px;
  --cb-radius-sm: 8px;

  /* Fondo lavanda unificado (el "resto de pantallas") */
  --cb-lavender: radial-gradient(circle at top, #f4effc, #ede9fe);

  /* Degradados de botón */
  --cb-grad:       linear-gradient(135deg, var(--cb-purple-2) 0%, var(--cb-purple) 100%);
  --cb-grad-hover: linear-gradient(135deg, var(--cb-purple-2) 0%, var(--cb-purple-dark) 100%);
}

/* ── Tipografía unificada ─────────────────────────────────────────────────── */
body.page-chrome,
body.login-page,
body.mant-screen-body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--cb-text);
}

/* ── Fondo lavanda unificado en TODAS las pantallas ───────────────────────── */
body.page-chrome { background: var(--cb-lavender) fixed; }
body.login-page  { background: var(--cb-lavender) fixed; }

/* Coverbot: el landing pintaba un gris plano (--cb-bg). Ahora usa el mismo
   lavanda que el resto, conservando las dos auras de marca muy sutiles. */
body.coverbot-page #screenUpload.cb-screen-landing {
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--cb-purple-rgb), .06) 0%, transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(var(--cb-purple-rgb), .05) 0%, transparent 46%),
    var(--cb-lavender);
}

/* ── BOTONES (Bootstrap) del contenido ────────────────────────────────────
   Ojo: NO se tocan los botones del header (.btn-gear / .btn-quota / #logout-button)
   que ya estiliza indexStyle.css. */
body.page-chrome .btn-primary,
body.login-page  .btn-primary {
  background: var(--cb-grad);
  border: none;
  color: var(--cb-on-primary);
  border-radius: var(--cb-radius-sm);
  font-weight: 600;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
body.page-chrome .btn-primary:hover,
body.login-page  .btn-primary:hover {
  background: var(--cb-grad-hover);
  box-shadow: 0 4px 14px rgba(var(--cb-purple-rgb), .28);
}
body.page-chrome .btn-primary:active { transform: translateY(1px); }

body.page-chrome .btn-outline-primary {
  border: 1px solid var(--cb-purple);
  color: var(--cb-purple);
  background: transparent;
  border-radius: var(--cb-radius-sm);
  font-weight: 600;
}
body.page-chrome .btn-outline-primary:hover {
  background: var(--cb-tint-2);
  color: var(--cb-purple-dark);
  border-color: var(--cb-purple);
}

body.page-chrome .btn-secondary {
  background: #fff;
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  font-weight: 600;
}
body.page-chrome .btn-secondary:hover {
  background: var(--cb-tint);
  color: var(--cb-purple-dark);
  border-color: var(--cb-purple-light);
}

/* Radio consistente en el resto de variantes (danger/success/warning…),
   sin alterar su color semántico. */
body.page-chrome .btn { border-radius: var(--cb-radius-sm); }

/* ── FORMULARIOS ──────────────────────────────────────────────────────────── */
body.page-chrome .form-control,
body.page-chrome .form-select,
body.login-page  .form-control,
body.login-page  .form-select {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  color: var(--cb-text);
  background: #fff;
}
body.page-chrome .form-control:focus,
body.page-chrome .form-select:focus,
body.login-page  .form-control:focus,
body.page-chrome .btn:focus-visible {
  border-color: var(--cb-purple);
  box-shadow: 0 0 0 .2rem rgba(var(--cb-purple-rgb), .20);
  outline: none;
}
body.page-chrome .form-check-input:checked {
  background-color: var(--cb-purple);
  border-color: var(--cb-purple);
}

/* ── TABLAS ───────────────────────────────────────────────────────────────── */
body.page-chrome .table {
  color: var(--cb-text);
  border-color: var(--cb-border);
}
body.page-chrome .table thead th {
  background: var(--cb-tint);
  color: var(--cb-purple-deep);
  border-bottom: 1px solid var(--cb-border);
  font-weight: 700;
}
body.page-chrome .table > :not(caption) > * > * { border-color: var(--cb-border); }
body.page-chrome .table-hover > tbody > tr:hover > * { background: var(--cb-tint-2); }

/* ── MODALES ──────────────────────────────────────────────────────────────── */
body.page-chrome .modal-content {
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  box-shadow: var(--cb-shadow-lg);
  overflow: hidden;
}
body.page-chrome .modal-header { border-bottom: 1px solid var(--cb-border); }
body.page-chrome .modal-title  { color: var(--cb-purple-deep); font-weight: 700; }
body.page-chrome .modal-footer { border-top: 1px solid var(--cb-border); }

/* ── PESTAÑAS (Bootstrap nav-tabs) ────────────────────────────────────────── */
body.page-chrome .nav-tabs { border-bottom: 1px solid var(--cb-border); }
body.page-chrome .nav-tabs .nav-link {
  color: var(--cb-text-muted);
  border: none;
  font-weight: 600;
}
body.page-chrome .nav-tabs .nav-link:hover { color: var(--cb-purple); }
body.page-chrome .nav-tabs .nav-link.active {
  color: var(--cb-purple);
  background: transparent;
  border-bottom: 2px solid var(--cb-purple);
}

/* ── BADGES Bootstrap de marca ────────────────────────────────────────────── */
body.page-chrome .badge.bg-primary { background: var(--cb-purple) !important; }
body.page-chrome a { color: var(--cb-purple); }
body.page-chrome a:hover { color: var(--cb-purple-dark); }

/* ── FAMILIAS DE TARJETAS / PANELES PROPIOS DE CADA PANTALLA ──────────────────
   Unifica radio, borde y sombra (no toca su contenido ni su layout). */
body.page-chrome .cons-card,
body.page-chrome .sin-card,
body.page-chrome .sin-ramo-card,
body.page-chrome .home-card,
body.page-chrome .stat-box,
body.page-chrome .pii-table-card,
body.page-chrome .pii-filters-card,
body.page-chrome .repo-detail-panel,
body.page-chrome .chart-container,
body.page-chrome .table-container {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
}

/* ── Títulos: casos sin regla propia (unificados a var(--cb-purple-deep) / 800) ─────────── */
body.page-chrome .lang-hero-title {   /* estaba sin estilar → caía al default de Bootstrap */
  font-size: 34px;
  font-weight: 800;
  color: var(--cb-purple-deep);
  text-align: center;
  margin: 0 0 6px;
}
body.page-chrome.statistics-page h1 { font-size: 34px; }  /* faltaba tamaño explícito */

/* ============================================================================
   RONDA 2 — Consistencia fina (títulos, stat-cards, texto de tabla)
   Cargada al final: gana por orden de cascada a igual especificidad.
   ============================================================================ */

/* ── TÍTULOS DE PÁGINA: mismo color / tipografía / peso en TODAS las pantallas ──
   (el estándar es el del coverbot: var(--cb-purple-deep), Inter, 800). Se respeta el tamaño
   propio de cada layout; solo se unifica color, familia, peso y tracking. */
body.page-chrome .hero h1,
body.page-chrome .historic-header h1,
body.page-chrome .configuration-header h1,
body.page-chrome .comparison-header h1,
body.page-chrome .users-header h1,
body.page-chrome .sin-hero h1,
body.page-chrome .cmp-title,
body.page-chrome .cons-title,
body.page-chrome .repo-hero h1,
body.page-chrome .lang-hero-title,
body.page-chrome .mant-page-title,
body.page-chrome .pii-title,
body.page-chrome .statistics-page h1 {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.8px;
  /* Degradado de texto idéntico al del coverbot (.cb-landing-title) */
  color: var(--cb-purple-deep); /* fallback si no hay soporte de background-clip:text */
  background: linear-gradient(135deg, var(--cb-text) 0%, var(--cb-purple) 60%, var(--cb-purple-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* pii-title era el único a 22px/700: lo alineamos al resto de encabezados */
body.page-chrome .pii-title { font-size: 26px; }
/* Iconos dentro de un título (p.ej. Consumos): restaurar su relleno para que
   el clip de texto del degradado no los deje transparentes. */
body.page-chrome .cons-title i,
body.page-chrome h1 i,
body.page-chrome h1 svg {
  -webkit-text-fill-color: initial;
  background: none;
}

/* Subtítulos bajo el título: color mutado unificado */
body.page-chrome .hero p,
body.page-chrome .historic-header p,
body.page-chrome .configuration-header p,
body.page-chrome .comparison-header p,
body.page-chrome .users-header p,
body.page-chrome .sin-hero p,
body.page-chrome .cmp-subtitle,
body.page-chrome .cons-subtitle,
body.page-chrome .repo-hero p,
body.page-chrome .pii-subtitle {
  color: var(--cb-text-muted);
}

/* ── STAT-CARDS / TARJETAS DE INFO → superficie blanca coherente ──────────────
   Consumos las pintaba en lavanda vía un selector con #id (#consContenido
   .cons-card) que ganaba a la capa v1; el resto de la app usa tarjetas blancas
   sobre el fondo lavanda (patrón coverbot/home). Unificamos a blanco con borde
   y sombra canónicos. Los iconos internos conservan su tinte de marca. */
body.page-chrome #consContenido .cons-card,
body.page-chrome .cons-card,
body.page-chrome .cons-sin-panel,
body.page-chrome .stat-box {
  background: var(--cb-surface) !important;
  border: 1px solid var(--cb-border);
  box-shadow: var(--cb-shadow);
}

/* ── TEXTO DE TABLA: cuerpo en tinta neutra (como coverbot), no aubergine ──── */
body.page-chrome table tbody td,
body.page-chrome .dataTable tbody td {
  color: var(--cb-text);
}

/* ============================================================================
   RONDA 3 — Fondos que aún no encajaban con el lavanda común
   ============================================================================ */

/* Consumos pintaba un fondo plano (var(--cb-tint)) sobre el body. Transparente para
   que se vea el mismo lavanda del resto de pantallas. */
body.page-chrome .consumos-page { background: transparent; }

/* Coverbot (landing): la zona principal es una card blanca con sombra/bordes
   (.cb-main) que resaltaba como un recuadro sobre el lavanda. Solo en el landing
   la hacemos transparente y sin card, para que el fondo lavanda del body se vea
   uniforme como en el resto de pantallas. El chat (#screenChat) conserva su
   superficie blanca. */
body.coverbot-page .cb-app:has(#screenUpload:not([hidden])) .cb-main,
body.coverbot-page .cb-app.cb-app--landing-fullscreen .cb-main {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* El landing hereda el lavanda del body (sin auras ni gris propio). */
body.coverbot-page #screenUpload.cb-screen-landing {
  background: transparent;
}

/* ============================================================================
   RONDA 4 — Centrado del landing del coverbot igual que /comparative y /siniestros
   ----------------------------------------------------------------------------
   Antes: el landing se centraba VERTICALMENTE (align/justify center en un área
   de alto completo) → quedaba en mitad de la pantalla. /siniestros y
   /comparative fluyen desde arriba (margin:0 auto + padding-top), solo centrados
   en horizontal. Igualamos: contenido arriba y centrado horizontalmente.
   ============================================================================ */
body.coverbot-page:not(.cb-procesando) #screenUpload.cb-screen-landing,
body.coverbot-page:not(.cb-procesando) #screenUpload.cb-screen-landing.cb-screen-active {
  /* #screenUpload es flex-direction:column. El centrado vertical lo forzaba
     coverbotProcessing.css con `#screenUpload.cb-screen-active { justify-content:
     center !important }`. Lo vencemos con mayor especificidad + !important y lo
     pasamos a flex-start (contenido arriba), manteniendo el centrado horizontal.
     Scopeado con :not(.cb-procesando) para NO tocar la animación de procesado. */
  flex-direction: column !important;
  justify-content: flex-start !important;  /* contenido arriba */
  align-items: center !important;          /* centrado horizontal */
  padding-top: 56px;                       /* aire superior ~72px como Comparar (cb-app aporta 16px) */
}

/* ============================================================================
   RONDA 5 — Chips de capacidad homogéneos (look del Coverbot)
   ----------------------------------------------------------------------------
   El chip del Coverbot (.cb-cap-chip + .cb-cap-icon) es el estándar. Aquí
   igualamos los chips de Siniestros (.sin-chip, icono <i> directo) e Idiomas
   (.lang-chip + .lang-chip-ic), y definimos .cvz-chip para la pantalla Comparar.
   (.cb-cap-chip no se toca: ya tiene este estilo en su propia hoja.)
   ============================================================================ */
body.page-chrome .sin-chip,
body.page-chrome .lang-chip,
body.page-chrome .cvz-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(229, 211, 236, 0.9);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-text);
  box-shadow: 0 1px 2px rgba(var(--cb-purple-rgb), 0.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  list-style: none;
}
body.page-chrome .sin-chip:hover,
body.page-chrome .lang-chip:hover,
body.page-chrome .cvz-chip:hover {
  transform: translateY(-2px);
  border-color: #B589C7;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(var(--cb-purple-rgb), 0.12);
}
/* Icono en círculo con degradado (idéntico a .cb-cap-icon).
   Siniestros usa <i> directo; Idiomas y Comparar usan un wrapper. */
body.page-chrome .sin-chip > i,
body.page-chrome .lang-chip .lang-chip-ic,
body.page-chrome .cvz-chip .cvz-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cb-tint-2) 0%, var(--cb-border) 100%);
  color: var(--cb-purple);
  flex-shrink: 0;
  font-size: 12px;
}
body.page-chrome .sin-chip > i::before { font-size: 12px; }

/* Contenedor de chips en Comparar (misma disposición que el landing coverbot) */
body.page-chrome .cmp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 4px;
  padding: 6px 0;
  list-style: none;
}

/* ============================================================================
   RONDA 6 — Cabeceras homogéneas: TODAS a hero centrado (patrón Coverbot)
   ----------------------------------------------------------------------------
   Había dos patrones: centrado (mayoría) y alineado a la izquierda con icono
   (Consumos, Repositorio, Mantenimiento, PII). Los unificamos al centrado.
   ============================================================================ */

/* Tamaño de título unificado a 34px (color/gradiente/peso/tracking ya iguales).
   Los @media de cada pantalla que bajan a 24px en móvil siguen mandando ahí. */
body.page-chrome .hero h1,
body.page-chrome .historic-header h1,
body.page-chrome .configuration-header h1,
body.page-chrome .comparison-header h1,
body.page-chrome .users-header h1,
body.page-chrome .sin-hero h1,
body.page-chrome .cmp-title,
body.page-chrome .cons-title,
body.page-chrome .repo-hero h1,
body.page-chrome .lang-hero-title,
body.page-chrome .mant-page-title,
body.page-chrome .pii-title,
body.page-chrome .statistics-page h1 {
  font-size: 34px;
}

/* Consumos y Repositorio: de flex "space-between" (título a la izquierda) a
   columna centrada; el botón/meta de acción cae en su propia línea a la derecha
   (mismo criterio que Estadísticas). */
body.page-chrome .cons-head,
body.page-chrome .repo-hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.page-chrome .cons-head .cons-export-btn,
body.page-chrome .repo-hero .repo-hero-meta {
  align-self: flex-end;
  margin-top: 8px;
}

/* Mantenimiento y PII: cabecera icono+texto en fila → columna centrada
   (icono arriba, título y subtítulo centrados, como Coverbot/Siniestros). */
body.page-chrome .mant-page-header,
body.page-chrome .pii-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ============================================================================
   RONDA 7 — Aire superior homogéneo (~72px, como Comparar) en toda la app
   ----------------------------------------------------------------------------
   Comparar = main.app-shell(padding-top 40) + .cmp-comparator(margin-top 32) ≈ 72px.
   El resto tenía tops dispares (10/24/60px…). Unificamos vía el wrapper común
   .main-content y neutralizamos los tops propios de cada cabecera para no sumar.
   ============================================================================ */
body.page-chrome .main-content { padding-top: 72px !important; }

body.page-chrome .historic-header,
body.page-chrome .configuration-header,
body.page-chrome .comparison-header,
body.page-chrome .users-header,
body.page-chrome .repo-hero,
body.page-chrome .pii-header,
body.page-chrome .mant-page-header,
body.page-chrome .stats-header,
body.page-chrome .lang-hero { margin-top: 0 !important; }

body.page-chrome .cons-wrap { padding-top: 0 !important; }

/* Tool-landing Siniestros al mismo aire que Comparar (Coverbot se ajusta arriba). */
body.page-chrome .sin-wrap { padding-top: 72px !important; }

/* ============================================================================
   RONDA 8 — Tablas homogéneas con el estilo de "Repositorio de condicionados"
   ----------------------------------------------------------------------------
   Objetivo (Repo): cabecera en MAYÚSCULAS 11px, peso 600, muted, tinte var(--cb-tint-2);
   filas aireadas; acciones como iconos minimalistas (sin círculo relleno).
   Aplicado a las tablas DataTables (Históricos, Config, Usuarios, Archivos).
   Solo cambia APARIENCIA: orden, búsqueda, paginación y acciones siguen igual.
   ============================================================================ */

/* ── Cabeceras de tabla → look Repo (uppercase, 11px, muted). Se incluyen los
   #id de cada tabla para vencer las reglas por-página con !important. ──────── */
body.page-chrome table.dataTable thead th,
body.page-chrome #historicTable.dataTable thead th,
body.page-chrome #usersTable.dataTable thead th,
body.page-chrome #comparisonFilesTable.dataTable thead th,
body.page-chrome .cons-tabla thead th,
body.page-chrome .pii-table thead th {
  background: var(--cb-tint-2) !important;
  color: var(--cb-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--cb-border) !important;
}

/* ── Ocultar los diamantes de orden en las tablas que siguen el look Repo
   (comparativas, etc.). Históricos y Registros SÍ muestran flecha propia
   (ver bloque "Flechas de ordenación" más abajo). ────────────────────────── */
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting::before,
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting::after,
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting_asc::before,
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting_asc::after,
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting_desc::before,
body.page-chrome table.dataTable:not(#historicTable):not(#usersTable):not(#comparisonFilesTable) thead .sorting_desc::after {
  display: none !important;
}
body.page-chrome table.dataTable thead th.sorting { cursor: pointer; }

/* ── Botones de acción → iconos minimalistas (como .repo-action-btn) ────────
   Quitamos fondo/círculo de los .btn.btn-sm y del botón "añadir docs" de
   Históricos; icono morado; papelera en rojo. NO se tocan onclick ni iconos. */
body.page-chrome table.dataTable td .btn.btn-sm,
body.page-chrome #historicTable .btn.btn-sm,
body.page-chrome #usersTable .btn.btn-sm,
body.page-chrome #comparisonFilesTable .btn.btn-sm,
body.page-chrome .btn-add-docs-historic {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: var(--cb-purple) !important;
  padding: 6px 8px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  transition: background 0.15s ease !important;
}
body.page-chrome table.dataTable td .btn.btn-sm i,
body.page-chrome #historicTable .btn.btn-sm i,
body.page-chrome #usersTable .btn.btn-sm i,
body.page-chrome #comparisonFilesTable .btn.btn-sm i,
body.page-chrome .btn-add-docs-historic i { color: inherit !important; }

body.page-chrome table.dataTable td .btn.btn-sm.btn-danger,
body.page-chrome #historicTable .btn.btn-sm.btn-danger,
body.page-chrome #usersTable .btn.btn-sm.btn-danger,
body.page-chrome #comparisonFilesTable .btn.btn-sm.btn-danger {
  color: #C7332C !important;
}
body.page-chrome table.dataTable td .btn.btn-sm:hover,
body.page-chrome #historicTable .btn.btn-sm:hover,
body.page-chrome #usersTable .btn.btn-sm:hover,
body.page-chrome #comparisonFilesTable .btn.btn-sm:hover,
body.page-chrome .btn-add-docs-historic:hover { background: var(--cb-tint-2) !important; }
body.page-chrome table.dataTable td .btn.btn-sm.btn-danger:hover,
body.page-chrome #historicTable .btn.btn-sm.btn-danger:hover { background: #FCEAEA !important; }

/* ============================================================================
   RONDA 9 — Botones de acción de las tablas de COMPARATIVA a estilo minimalista
   ----------------------------------------------------------------------------
   La columna de acciones de las comparativas (comparativeStyle "ACTIONS COLUMN")
   pintaba el botón editar como recuadro blanco con borde + sombra ("borde raro")
   y el resto como círculos rellenos. Los igualamos al look de Repo/resto de
   tablas: icono sin fondo, sin borde, sin sombra. Se conservan onclick e iconos.
   Especificidad alta (6 clases) + !important para vencer a comparativeStyle.
   ============================================================================ */
body.page-chrome.comparative-page table.dataTable tbody td:last-child .btn.btn-sm,
body.page-chrome.comparative-page .comparative-table tbody td:last-child .btn.btn-sm,
body.page-chrome.comparative-page .results-table tbody td:last-child .btn.btn-sm {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: var(--cb-purple) !important;
  padding: 6px 8px !important;
  transition: background 0.15s ease !important;
}
body.page-chrome.comparative-page table.dataTable tbody td:last-child .btn.btn-sm.btn-danger,
body.page-chrome.comparative-page .comparative-table tbody td:last-child .btn.btn-sm.btn-danger,
body.page-chrome.comparative-page .results-table tbody td:last-child .btn.btn-sm.btn-danger {
  color: #C7332C !important;
}
body.page-chrome.comparative-page table.dataTable tbody td:last-child .btn.btn-sm i,
body.page-chrome.comparative-page .comparative-table tbody td:last-child .btn.btn-sm i,
body.page-chrome.comparative-page .results-table tbody td:last-child .btn.btn-sm i {
  color: inherit !important;
}
body.page-chrome.comparative-page table.dataTable tbody td:last-child .btn.btn-sm:hover,
body.page-chrome.comparative-page .comparative-table tbody td:last-child .btn.btn-sm:hover,
body.page-chrome.comparative-page .results-table tbody td:last-child .btn.btn-sm:hover {
  background: var(--cb-tint-2) !important;
}
body.page-chrome.comparative-page table.dataTable tbody td:last-child .btn.btn-sm.btn-danger:hover,
body.page-chrome.comparative-page .comparative-table tbody td:last-child .btn.btn-sm.btn-danger:hover,
body.page-chrome.comparative-page .results-table tbody td:last-child .btn.btn-sm.btn-danger:hover {
  background: #FCEAEA !important;
}

/* ============================================================================
   RONDA 10 — Quitar el borde anidado en las tablas de comparativa
   ----------------------------------------------------------------------------
   En la Ronda 1, .table-container recibió borde (tratamiento de tarjeta). En
   Históricos/Config ese contenedor ES la card exterior (correcto), pero en las
   comparativas va DENTRO de .table-block (ya card) → se veía un recuadro anidado.
   Se lo quitamos solo en comparativa.
   ============================================================================ */
body.page-chrome.comparative-page .table-container,
body.page-chrome.comparative-page .table-wrapper,
body.page-chrome.comparative-page .table-responsive {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ============================================================================
   RONDA 11 — Alinear la vista de Auditoría RGPD (PII) con el resto de la app
   ============================================================================ */

/* Cabecera "desnuda" como el resto (quitamos la card blanca del hero). */
body.page-chrome .pii-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Badges de ámbito: de azul/índigo/naranja a la paleta de la app
   (lavanda + morado), coherentes con el resto de chips/badges. */
body.page-chrome .pii-scope-coverbot,
body.page-chrome .pii-scope-comp-project,
body.page-chrome .pii-scope-comp-condicionado,
body.page-chrome .pii-scope-other {
  background: var(--cb-tint-2) !important;
  color: var(--cb-purple) !important;
}

/* Título de sección PII al color de marca (como el resto). */
body.page-chrome .pii-section-title { color: var(--cb-purple-deep) !important; }

/* PII: el contenedor de página pintaba un plano var(--cb-tint-2) que tapaba el lavanda
   del body (mismo caso que Consumos). Transparente para heredar el lavanda. */
body.page-chrome .pii-audit-page { background: transparent !important; }

/* PII: su contenido va dentro de <section class="container-fluid">, y en
   indexStyle.css `body.page-chrome .container-fluid` lleva un fondo pálido
   (rgba(245,243,255,.65) !important) pensado para la barra superior. Eso pintaba
   un rectángulo de tono distinto sobre el lavanda. Lo hacemos transparente solo
   aquí (mayor especificidad para vencer al !important de indexStyle). */
body.page-chrome .pii-audit-page .container-fluid {
  background: transparent !important;
}

/* Comparar: ocultar los chips de capacidad del hero mientras se genera la
   comparativa (mismo criterio que .cmp-title/.cmp-subtitle en comparativeProcesando.css). */
body.cmp-procesando #uploadProjectsContainer .cmp-chips { display: none !important; }

/* ============================================================================
   RONDA SOBRIEDAD — afinar el tono: mantener lo bonito (lavanda, cards suaves,
   Inter, sombras sutiles) pero quitar los gestos "consumer" (texto y botones en
   degradado) y ganar densidad. Todo apariencia; sin tocar layout.
   ============================================================================ */

/* Base del sistema: tokens semánticos + escala de espaciado (rejilla 8px).
   No cambian nada por sí solos; dejan cimiento para estados y futuras pantallas. */
:root {
  --cb-success: #2E7D53; --cb-success-bg: #E8F3ED;
  --cb-warning: #B5720E; --cb-warning-bg: #FBF0DD;
  --cb-danger:  #B23A48; --cb-danger-bg:  #F7E4E6;
  --cb-info:    #3A5CB2; --cb-info-bg:    #E6EBF7;

  --cb-sp-1: 4px;  --cb-sp-2: 8px;  --cb-sp-3: 12px; --cb-sp-4: 16px;
  --cb-sp-5: 24px; --cb-sp-6: 32px; --cb-sp-7: 48px;

  /* Texto mutado un punto más oscuro: mejor contraste sobre los tintes lavanda. */
  --cb-text-muted: #4E3A5B;
}

/* ── Títulos sobrios: tinta sólida en vez de degradado, peso 700, tracking suave.
   Conservan tamaño y posición de cada layout (no tocamos maquetación). El
   degradado deja de usarse en las pantallas de trabajo; se reserva para la
   landing/login, que mantienen su propio estilo. */
body.page-chrome .hero h1,
body.page-chrome .historic-header h1,
body.page-chrome .configuration-header h1,
body.page-chrome .comparison-header h1,
body.page-chrome .users-header h1,
body.page-chrome .sin-hero h1,
body.page-chrome .cmp-title,
body.page-chrome .cons-title,
body.page-chrome .repo-hero h1,
body.page-chrome .lang-hero-title,
body.page-chrome .mant-page-title,
body.page-chrome .pii-title,
body.page-chrome .statistics-page h1 {
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--cb-purple-deep) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── Botón primario sólido (enterprise) en vez de degradado + glow.
   Morado plano, sombra mínima y hover limpio: sobrio pero cuidado. */
body.page-chrome .btn-primary,
body.login-page  .btn-primary {
  background: var(--cb-purple) !important;
  box-shadow: 0 1px 2px rgba(42, 20, 51, .10) !important;
}
body.page-chrome .btn-primary:hover,
body.login-page  .btn-primary:hover {
  background: var(--cb-purple-dark) !important;
  box-shadow: 0 2px 6px rgba(42, 20, 51, .16) !important;
}

/* ── Densidad: acercar el contenido en las pantallas con datos (de 72 a 56px).
   Gana altura útil sin que las cabeceras queden pegadas al header. */
body.page-chrome .main-content { padding-top: 56px !important; }

/* ── Coverbot: es una pantalla de trabajo, no una landing -> su título va en
   tinta sólida como el resto (antes se quedaba en degradado). */
#screenUpload .cb-landing-title,
body.coverbot-page .cb-landing-title {
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--cb-purple-deep) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ── Animación de giro para iconos de carga (sustituye a fa-spin de Font Awesome,
   ya que Bootstrap Icons no la incluye). */
.cvz-spin { display: inline-block; animation: cvz-spin .9s linear infinite; }
@keyframes cvz-spin { to { transform: rotate(360deg); } }

/* ── Estadísticas: "Descargar Word" y "Descargar Excel" eran ambos primarios
   (rellenos) y competían entre sí y con "Aplicar filtros". Los pasamos a
   secundario (outline morado) para que haya una sola acción primaria por zona.
   Mismo lenguaje visual que .btn-outline-primary del tema. */
body.page-chrome #exportStatisticsBtn,
body.page-chrome #exportStatisticsExcelBtn {
  background: transparent !important;
  color: var(--cb-purple) !important;
  border: 1px solid var(--cb-purple) !important;
  box-shadow: none !important;
}
body.page-chrome #exportStatisticsBtn:hover,
body.page-chrome #exportStatisticsExcelBtn:hover {
  background: var(--cb-tint-2) !important;
  color: var(--cb-purple-dark) !important;
  border-color: var(--cb-purple-dark) !important;
}

/* ── Home: los iconos <i> de tarjeta pasan a morado sólido (antes usaban
   var(--purple) = tinta oscura var(--cb-purple-deep)). El robot (SVG) conserva su degradado
   para ser IDÉNTICO al de la pantalla de Coverbot. */
body.page-chrome .home-icon i { color: var(--cb-purple) !important; }

/* ── Login / OTP / recuperación: alinear con la pasada de sobriedad, pero
   conservando el momento de marca (el botón mantiene su degradado, solo se
   suaviza). Afecta a la tarjeta compartida .login-container y a .login-button. */
.login-container {
  /* Antes: 0 40px 80px rgba(0,0,0,.2) -> sombra negra muy dura. Ahora ligera y
     con tinte aubergine, coherente con las tarjetas del resto de la app. */
  box-shadow: 0 24px 60px rgba(var(--cb-purple-deep-rgb), .14) !important;
  border: 1px solid var(--cb-border) !important;
}
.login-button {
  font-weight: 700 !important;                       /* antes 800 */
  box-shadow: 0 6px 16px rgba(var(--cb-purple-deep-rgb), .14) !important;
}
.login-button:hover,
.login-button:focus,
.login-button:active {
  box-shadow: 0 8px 20px rgba(var(--cb-purple-deep-rgb), .18) !important;
}

/* ============================================================================
   HISTÓRICOS + REGISTROS DE USUARIOS
   (solo #historicTable y #usersTable — NO afecta a comparativas)
   - Flechas de ordenación claras (asc ↑ / desc ↓ / ordenable ↕)
   - Tamaño de letra del cuerpo unificado (14px, como el resto de tablas)
   - Cabecera pre-render (evita el salto "estilo antiguo → morado")
   - Altura fija de filas + expandir/plegar (clases .cz-* creadas por JS)
   ============================================================================ */

/* ── Cabecera ANTES de que DataTables añada .dataTable: mismo look, sin salto ─ */
body.page-chrome #historicTable thead th,
body.page-chrome #usersTable thead th {
  background: var(--cb-tint-2);
  color: var(--cb-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--cb-border);
  padding: 16px 20px;
}

/* ── Cabecera: forzar mayúsculas/11px también en históricos. La regla por
   página (body.historic-page table#historicTable…) era MÁS específica que el
   bloque general de arriba, por eso históricos no cogía el look. Aquí igualamos
   especificidad (añadiendo table) y, al cargar después, ganamos. ───────────── */
body.page-chrome table#historicTable.dataTable thead th,
body.page-chrome table#usersTable.dataTable thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: left !important;
  color: var(--cb-text-muted) !important;
}

/* ── Cuerpo unificado a 14px (históricos venía a 16px) ─────────────────────── */
body.page-chrome table#historicTable.dataTable tbody td,
body.page-chrome table#usersTable.dataTable tbody td {
  font-size: 14px !important;
}

/* ── Flechas de ordenación ─────────────────────────────────────────────────── */
body.page-chrome #historicTable.dataTable thead th.sorting,
body.page-chrome #historicTable.dataTable thead th.sorting_asc,
body.page-chrome #historicTable.dataTable thead th.sorting_desc,
body.page-chrome #usersTable.dataTable thead th.sorting,
body.page-chrome #usersTable.dataTable thead th.sorting_asc,
body.page-chrome #usersTable.dataTable thead th.sorting_desc {
  position: relative !important;
  padding-right: 34px !important;
  cursor: pointer;
}

/* Ocultamos el glifo "before" por defecto de DataTables en estas dos tablas */
body.page-chrome #historicTable.dataTable thead th.sorting::before,
body.page-chrome #historicTable.dataTable thead th.sorting_asc::before,
body.page-chrome #historicTable.dataTable thead th.sorting_desc::before,
body.page-chrome #usersTable.dataTable thead th.sorting::before,
body.page-chrome #usersTable.dataTable thead th.sorting_asc::before,
body.page-chrome #usersTable.dataTable thead th.sorting_desc::before {
  display: none !important;
}

/* Reutilizamos "after" como único indicador */
body.page-chrome #historicTable.dataTable thead th.sorting::after,
body.page-chrome #historicTable.dataTable thead th.sorting_asc::after,
body.page-chrome #historicTable.dataTable thead th.sorting_desc::after,
body.page-chrome #usersTable.dataTable thead th.sorting::after,
body.page-chrome #usersTable.dataTable thead th.sorting_asc::after,
body.page-chrome #usersTable.dataTable thead th.sorting_desc::after {
  display: inline-block !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  content: "\2195" !important; /* ↕ ordenable, sin orden aplicado */
  opacity: 0.35 !important;
  color: var(--cb-purple-deep) !important;
}

body.page-chrome #historicTable.dataTable thead th.sorting_asc::after,
body.page-chrome #usersTable.dataTable thead th.sorting_asc::after {
  content: "\2191" !important; /* ↑ ascendente */
  opacity: 1 !important;
}

body.page-chrome #historicTable.dataTable thead th.sorting_desc::after,
body.page-chrome #usersTable.dataTable thead th.sorting_desc::after {
  content: "\2193" !important; /* ↓ descendente */
  opacity: 1 !important;
}

/* ── Altura fija de filas + expandir/plegar (JS: tableRowExpand.js) ───────────
   IMPORTANTE: se usa `height` (techo real) + overflow:hidden para recortar de
   forma universal. `min-height` NO recorta (es un suelo) y `-webkit-line-clamp`
   solo se usa para el "…"; si el navegador lo ignora, el height recorta igual. */
/* Recorte a 2 líneas: el texto ENVUELVE y, si pasa de 2 líneas, se corta con "…".
   Altura fija (2 líneas) para TODAS las filas → mismo alto, estético. */
body.page-chrome #historicTable tbody td > .cz-clamp,
body.page-chrome #usersTable tbody td > .cz-clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.5;
  height: 3em !important;            /* 2 líneas × 1.5em → uniforme */
  white-space: normal !important;    /* que envuelva (NO en una sola línea) */
}

body.page-chrome #historicTable tbody tr.cz-expanded td > .cz-clamp,
body.page-chrome #usersTable tbody tr.cz-expanded td > .cz-clamp {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  height: auto !important;
}

/* La flecha de expandir se estiliza IGUAL que editar/descargar/papelera
   (plana, morada, sin círculo). Se reserva su hueco en todas las filas y se
   oculta (sin ocupar clic) cuando la fila no tiene contenido oculto, para que
   los iconos queden alineados fila a fila. */
body.page-chrome #historicTable tbody td .cz-expand-toggle,
body.page-chrome #usersTable tbody td .cz-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 1px;
  padding: 6px 8px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: var(--cb-purple);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}

body.page-chrome #historicTable tbody td .cz-expand-toggle:hover,
body.page-chrome #usersTable tbody td .cz-expand-toggle:hover {
  background: var(--cb-tint-2);
}

/* Fila sin contenido oculto: hueco reservado pero flecha invisible/no clicable */
body.page-chrome #historicTable tbody td .cz-expand-toggle.cz-toggle-off,
body.page-chrome #usersTable tbody td .cz-expand-toggle.cz-toggle-off {
  visibility: hidden;
  pointer-events: none;
}

body.page-chrome #historicTable tbody td .cz-expand-toggle i,
body.page-chrome #usersTable tbody td .cz-expand-toggle i {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}

body.page-chrome #historicTable tbody tr.cz-expanded .cz-expand-toggle i,
body.page-chrome #usersTable tbody tr.cz-expanded .cz-expand-toggle i {
  transform: rotate(180deg);
}

/* Separación uniforme y compacta entre los iconos de acción. El hueco venía del
   espacio en blanco (saltos de línea) entre los <button> del marcado; con
   font-size:0 en la celda se colapsa, y damos un margen igual a cada icono. */
body.page-chrome #historicTable tbody td:last-child,
body.page-chrome #usersTable tbody td:last-child {
  font-size: 0 !important;
  white-space: nowrap !important;
}
body.page-chrome #historicTable tbody td:last-child > *,
body.page-chrome #usersTable tbody td:last-child > * {
  font-size: 14px !important;
  margin: 0 1px !important;
  vertical-align: middle;
}

/* ============================================================================
   HISTÓRICOS/REGISTROS — reparto de columnas limpio
   ============================================================================ */

/* Solo estas columnas parten palabras largas (nombres de archivo / emails):
   Históricos → Descripción(3) y Documentos(4); Registros → Email(2) y Empresa(3).
   El resto NO parte palabras (evita cortes feos tipo "victorgonzal-ez"). */
body.page-chrome #historicTable tbody td:nth-child(3) > .cz-clamp,
body.page-chrome #historicTable tbody td:nth-child(4) > .cz-clamp,
body.page-chrome #usersTable tbody td:nth-child(2) > .cz-clamp,
body.page-chrome #usersTable tbody td:nth-child(3) > .cz-clamp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Históricos: anchos fijos por columna → reparto equilibrado y la Descripción
   trunca con "…" en vez de comerse el espacio de las demás. */
body.page-chrome #historicTable {
  table-layout: fixed !important;
}
body.page-chrome #historicTable th:nth-child(1),
body.page-chrome #historicTable td:nth-child(1) { width: 3.5% !important; }   /* ver */
body.page-chrome #historicTable th:nth-child(2),
body.page-chrome #historicTable td:nth-child(2) { width: 10% !important; }    /* tipo */
body.page-chrome #historicTable th:nth-child(3),
body.page-chrome #historicTable td:nth-child(3) { width: 21% !important; }   /* descripción */
body.page-chrome #historicTable th:nth-child(4),
body.page-chrome #historicTable td:nth-child(4) { width: 16% !important; }    /* documentos */
body.page-chrome #historicTable th:nth-child(5),
body.page-chrome #historicTable td:nth-child(5) { width: 10% !important; }    /* correduría */
body.page-chrome #historicTable th:nth-child(6),
body.page-chrome #historicTable td:nth-child(6) { width: 9% !important; }     /* usuario */
body.page-chrome #historicTable th:nth-child(7),
body.page-chrome #historicTable td:nth-child(7) { width: 10.5% !important; }  /* fecha registro */
body.page-chrome #historicTable th:nth-child(8),
body.page-chrome #historicTable td:nth-child(8) { width: 10.5% !important; }  /* fecha modificación */
body.page-chrome #historicTable th:nth-child(9),
body.page-chrome #historicTable td:nth-child(9) { width: 9.5% !important; }   /* acciones */

/* ============================================================================
   PILLS de columnas categóricas (Históricos: Tipo · Registros: Rol)
   ============================================================================ */
body.page-chrome #historicTable .cz-pill,
body.page-chrome #usersTable .cz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  background: var(--pill-bg, #F3EAF8);
  color: var(--pill-fg, var(--cb-purple));
}
body.page-chrome #historicTable .cz-pill .cz-pill-dot,
body.page-chrome #usersTable .cz-pill .cz-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--pill-dot, #9B4DB8);
}

/* Variantes de color (solo definen variables; se usan en .cz-pill) */
.cz-pill--azul   { --pill-bg: #EAF1FB; --pill-fg: #2857A8; --pill-dot: #3B7DD8; }
.cz-pill--ambar  { --pill-bg: #FDF0E1; --pill-fg: #9A5B14; --pill-dot: #E08A2B; }
.cz-pill--verde  { --pill-bg: #E6F5EE; --pill-fg: #1E7A4F; --pill-dot: #2F9E68; }
.cz-pill--morado { --pill-bg: #F3EAF8; --pill-fg: var(--cb-purple); --pill-dot: #9B4DB8; }
.cz-pill--rosa   { --pill-bg: #FCEAF1; --pill-fg: #A82866; --pill-dot: #D8497F; }
.cz-pill--cian   { --pill-bg: #E5F4F6; --pill-fg: #1A6B77; --pill-dot: #2BA3B3; }

/* ── Pills de DOCUMENTOS (Históricos): una por línea, icono + nombre truncado ── */
body.page-chrome #historicTable .cz-doc-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 1px 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F1EDF6;
  color: #4A2A5A;
  font-size: 11px !important;
  line-height: 1.4;
}
body.page-chrome #historicTable .cz-doc-pill > i {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--cb-purple);
}
body.page-chrome #historicTable .cz-doc-pill .cz-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Al expandir la fila, los nombres de documento se muestran completos */
body.page-chrome #historicTable tbody tr.cz-expanded .cz-doc-pill {
  align-items: flex-start;
}
body.page-chrome #historicTable tbody tr.cz-expanded .cz-doc-pill .cz-doc-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* ============================================================
   Coverize · Sistema de botones "píldora"
   ------------------------------------------------------------
   Extraído del estilo de /comparative (comparativeStyle.css),
   que solo funcionaba si el <body> tenía la clase
   "comparative-page". Aquí funciona en cualquier vista que ya
   cargue este tema (body.page-chrome), sin depender de esa clase.

   Uso:
     <button class="cz-btn-pill">
       <i class="bi bi-download"></i> Exportar CSV
     </button>

   Variante sólida (relleno morado, para la acción principal de
   una barra, ej. "+ Añadir"):
     <button class="cz-btn-pill cz-btn-pill--solid">...</button>
   ============================================================ */

body.page-chrome {
  --cz-pill-bg: #ffffff;
  --cz-pill-border: rgba(124, 58, 237, 0.38);
  --cz-pill-border-hover: rgba(124, 58, 237, 0.6);
  --cz-pill-hover-bg: rgba(124, 58, 237, 0.06);
  --cz-pill-active-bg: rgba(124, 58, 237, 0.1);
  --cz-pill-text: var(--cb-purple-deep);
  --cz-pill-ring: rgba(124, 58, 237, 0.16);
  --cz-pill-solid-from: var(--cb-purple-deep);
  --cz-pill-solid-to: var(--cb-purple);
  --cz-pill-shadow: 0 14px 26px rgba(var(--cb-purple-deep-rgb), 0.18);
}

body.page-chrome .cz-btn-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  background: var(--cz-pill-bg) !important;
  background-image: none !important;
  color: var(--cz-pill-text) !important;
  border: 1.5px solid var(--cz-pill-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  font-family: inherit;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  margin-bottom: 0 !important;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease !important;
}

body.page-chrome .cz-btn-pill i {
  font-size: 15px;
  line-height: 1;
}

body.page-chrome .cz-btn-pill:hover {
  background: var(--cz-pill-hover-bg) !important;
  border-color: var(--cz-pill-border-hover) !important;
  color: var(--cz-pill-text) !important;
  transform: translateY(-1px);
}

body.page-chrome .cz-btn-pill:active {
  background: var(--cz-pill-active-bg) !important;
  transform: translateY(0);
}

body.page-chrome .cz-btn-pill:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 5px var(--cz-pill-ring) !important;
}

body.page-chrome .cz-btn-pill:disabled,
body.page-chrome .cz-btn-pill.disabled {
  background: var(--cb-border) !important;
  border-color: var(--cb-border) !important;
  box-shadow: none !important;
  color: rgba(17, 24, 39, 0.45) !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.7;
}

/* Variante sólida (relleno morado) — para la acción principal de una
   barra (ej. "+ Añadir", "Nueva comparativa"). El resto de acciones
   secundarias (exportar, descargar, filtrar...) usan la base outline. */
body.page-chrome .cz-btn-pill--solid {
  background: linear-gradient(135deg, var(--cz-pill-solid-from), var(--cz-pill-solid-to)) !important;
  background-image: linear-gradient(135deg, var(--cz-pill-solid-from), var(--cz-pill-solid-to)) !important;
  color: var(--cb-on-primary) !important;
  border: 0 !important;
  box-shadow: var(--cz-pill-shadow) !important;
}

body.page-chrome .cz-btn-pill--solid:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  border: 0 !important;
}

body.page-chrome .cz-btn-pill--solid:active {
  transform: translateY(0) !important;
}

body.page-chrome .cz-btn-pill--solid:disabled,
body.page-chrome .cz-btn-pill--solid.disabled {
  background: var(--cb-border) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(17, 24, 39, 0.45) !important;
}

/* ─── Cabecera de página unificada (icono + título + subtítulo) ─────────── */
.cz-page-header { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-bottom: 1.75rem; width: 100%; align-self: stretch; text-align: center; }
.cz-page-header-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(var(--cb-purple-rgb), 0.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--cb-purple-2); flex-shrink: 0;
}
.cz-page-title { font-size: 1.5rem; font-weight: 800; color: var(--cb-purple-deep); margin: 0 0 .25rem; }
.cz-page-subtitle { font-size: .95rem; color: rgba(var(--cb-purple-deep-rgb), 0.6); margin: 0; line-height: 1.5; max-width: 820px; }

/* ─── Cabeceras CENTRADAS con .cz-page-header (patrón hero de Coverize) ─────── */
body.page-chrome .cz-page-title { font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.25 !important; }
body.page-chrome .cz-page-subtitle { font-size: .95rem !important; line-height: 1.5 !important; margin: 0 auto !important; max-width: 820px; }
/* Chips/pildoras informativas centradas (Comparar, Siniestros, Idiomas). */
body.page-chrome .cmp-chips,
body.page-chrome .sin-chips,
body.page-chrome .lang-hero-chips { justify-content: center !important; width: 100%; }
/* Contenedores hero centrados. */
body.page-chrome .lang-hero,
body.page-chrome .repo-hero { align-items: center !important; text-align: center !important; }
body.page-chrome .cons-head { align-items: center !important; text-align: center !important; }
/* Siniestros: banner beta, selector de tipo y hint centrados. */
body.page-chrome .sin-disclaimer-beta { margin-left: auto !important; margin-right: auto !important; }
body.page-chrome .sin-ramo { align-items: center !important; }
body.page-chrome .sin-elige-hint { text-align: center !important; }

/* ============================================================================
   ARCHIVOS DE COMPARATIVAS — mismos chips/flechita/recorte que Usuarios/Históricos
   (los estilos base estaban limitados a #historicTable/#usersTable; los
   replicamos para #comparisonFilesTable para que se vean y funcionen igual).
   ============================================================================ */
body.page-chrome #comparisonFilesTable tbody td > .cz-clamp {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.5;
  height: 3em !important;
  white-space: normal !important;
}
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded td > .cz-clamp {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  height: auto !important;
}
body.page-chrome #comparisonFilesTable tbody td:nth-child(4) > .cz-clamp {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.page-chrome #comparisonFilesTable tbody td .cz-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 1px;
  padding: 6px 8px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: var(--cb-purple);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease;
}
body.page-chrome #comparisonFilesTable tbody td .cz-expand-toggle:hover {
  background: var(--cb-tint-2);
}
body.page-chrome #comparisonFilesTable tbody td .cz-expand-toggle.cz-toggle-off {
  visibility: hidden;
  pointer-events: none;
}
body.page-chrome #comparisonFilesTable tbody td .cz-expand-toggle i {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded .cz-expand-toggle i {
  transform: rotate(180deg);
}
body.page-chrome #comparisonFilesTable tbody td:last-child {
  font-size: 0 !important;
  white-space: nowrap !important;
}
body.page-chrome #comparisonFilesTable tbody td:last-child > * {
  font-size: 14px !important;
  margin: 0 1px !important;
  vertical-align: middle;
}
body.page-chrome #comparisonFilesTable .cz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  background: var(--pill-bg, #F3EAF8);
  color: var(--pill-fg, var(--cb-purple));
}
body.page-chrome #comparisonFilesTable .cz-pill .cz-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--pill-dot, #9B4DB8);
}

/* ── Flechas de ordenación también en Archivos de Comparativas (como Usuarios) ── */
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_asc,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_desc {
  position: relative !important;
  padding-right: 34px !important;
  cursor: pointer;
}
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting::before,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_asc::before,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_desc::before {
  display: none !important;
}
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting::after,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_asc::after,
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_desc::after {
  display: inline-block !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  content: "\2195" !important;
  opacity: 0.35 !important;
  color: var(--cb-purple-deep) !important;
}
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_asc::after {
  content: "\2191" !important; opacity: 1 !important;
}
body.page-chrome #comparisonFilesTable.dataTable thead th.sorting_desc::after {
  content: "\2193" !important; opacity: 1 !important;
}

/* ── Chips de documentos en Archivos de Comparativas (igual que Históricos, sin descarga) ── */
body.page-chrome #comparisonFilesTable .cz-doc-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 1px 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: #F1EDF6;
  color: #4A2A5A;
  font-size: 11px !important;
  line-height: 1.4;
}
body.page-chrome #comparisonFilesTable .cz-doc-pill > i {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--cb-purple);
}
body.page-chrome #comparisonFilesTable .cz-doc-pill .cz-doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded .cz-doc-pill {
  align-items: flex-start;
}
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded .cz-doc-pill .cz-doc-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* Indicador de recuento total de documentos (Archivos) — visible solo colapsado.
   Absoluto respecto a la celda (que es position:relative), así el clamp con
   overflow:hidden NO lo recorta. Deja hueco a la derecha en los chips. */
body.page-chrome #comparisonFilesTable tbody td:nth-child(4) { position: relative; }
body.page-chrome #comparisonFilesTable tbody td:nth-child(4) > .cz-clamp { padding-right: 46px; }
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded td:nth-child(4) > .cz-clamp { padding-right: 0; }
body.page-chrome #comparisonFilesTable .cz-doc-more {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cb-purple, #6f2da8);
  color: #fff;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
body.page-chrome #comparisonFilesTable .cz-doc-more > i { font-size: 11px; }
body.page-chrome #comparisonFilesTable tbody tr.cz-expanded .cz-doc-more { display: none; }

/* La columna de DOCUMENTOS lleva chips (más altos que una línea de texto). La
   altura colapsada del recorte se calcula para 2 chips EXACTOS: así con 1-2
   documentos NO aparece flechita, y solo con 3+ se recorta y sale flechita +
   badge de recuento. (Aplica a Históricos y a Archivos de Comparativas.) */
body.page-chrome #historicTable tbody td:nth-child(4) > .cz-clamp,
body.page-chrome #comparisonFilesTable tbody td:nth-child(4) > .cz-clamp {
  height: 48px !important;
}

/* Badge de recuento total de documentos también en Históricos (igual que Archivos) */
body.page-chrome #historicTable tbody td:nth-child(4) { position: relative; }
body.page-chrome #historicTable tbody td:nth-child(4) > .cz-clamp { padding-right: 46px; }
body.page-chrome #historicTable tbody tr.cz-expanded td:nth-child(4) > .cz-clamp { padding-right: 0; }
body.page-chrome #historicTable .cz-doc-more {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cb-purple, #6f2da8);
  color: #fff;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
body.page-chrome #historicTable .cz-doc-more > i { font-size: 11px; }
body.page-chrome #historicTable tbody tr.cz-expanded .cz-doc-more { display: none; }

/* ============================================================================
   FILTROS estilo Estadísticas (con TomSelect multi-selección), reutilizables en
   Históricos y Usuarios. Clases propias .cz-filters-* para NO tocar la pantalla
   de Estadísticas (que usa .filters-box). TomSelect (.ts-*) se estiliza acotado
   dentro de .cz-filters-box.
   ============================================================================ */
body.page-chrome .cz-filters-box {
  background: var(--cb-tint, #f6f2fb);
  border: 1px solid var(--cb-border, #e4dcef);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 0 0 22px;
}
body.page-chrome .cz-filters-box[hidden] { display: none !important; }
body.page-chrome .cz-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 16px;
  align-items: end;
}
body.page-chrome .cz-filters-box .filter-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-chrome .cz-filters-box .filter-group > label,
body.page-chrome .cz-filters-box .filter-group .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-text, #4a3b5c);
  margin: 0;
}
body.page-chrome .cz-filters-box .filter-input {
  border-radius: 12px !important;
  padding: 10px 14px;
  border: 1px solid var(--cb-border, #e4dcef);
}
body.page-chrome .cz-filters-box .filter-select { width: 100%; }
body.page-chrome .cz-filters-box .filters-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
body.page-chrome .cz-filters-box .filters-actions .btn {
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}
/* TomSelect (acotado a .cz-filters-box) */
body.page-chrome .cz-filters-box .ts-wrapper { width: 100% !important; }
body.page-chrome .cz-filters-box .ts-control {
  border-radius: 12px !important;
  padding: 6px 10px;
  border: 1px solid var(--cb-border, #e4dcef);
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
body.page-chrome .cz-filters-box .ts-control.focus {
  border-color: var(--cb-purple, #6f2da8);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
body.page-chrome .cz-filters-box .ts-wrapper.multi .ts-control > div {
  background: #ede9fe;
  border-radius: 8px;
  padding: 2px 6px;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}