/* ── KPI Cards ── */
.kpi-card {
  border-top: 3px solid var(--green);
  transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}
.kpi-card.teal { border-top-color: var(--teal); }
.kpi-card .kpi-icon {
  font-size: 1.8rem;
  opacity: .15;
  position: absolute;
  top: 12px;
  right: 16px;
}
.kpi-card .kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.1;
}
.kpi-card.teal .kpi-value { color: var(--teal); }
.kpi-card .kpi-label {
  font-size: .8rem;
  color: #6b6b6b;
  margin-top: 4px;
}
@media(min-width:768px) {
  .kpi-card .kpi-value { font-size: 2.2rem; }
  .kpi-card .kpi-icon { font-size: 2.2rem; }
}

/* ── Sidebar comercial: fijo a la izquierda en desktop, drawer deslizante en móvil ── */
.comercial-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 250px);
}
.comercial-main {
  flex: 1 1 auto;
  min-width: 0;
}
.comercial-sidebar {
  order: -1;
  flex: 0 0 248px;
  width: 248px;
  background: #fff;
  border-right: 1px solid #eee;
  box-shadow: 2px 0 12px rgba(0, 0, 0, .03);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.comercial-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.comercial-brand {
  font-weight: 800;
  color: var(--green-dark);
  text-decoration: none;
  font-size: 1.05rem;
}
.comercial-brand:hover { color: var(--green-dark); text-decoration: none; }
.comercial-sidebar-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  color: #666;
  font-size: 1rem;
}
.comercial-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--green-dark);
}
.comercial-sidebar-toggle-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0fce3;
  border: none;
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 1.1rem;
}
.comercial-sidebar-toggle-icon:hover { background: #e8f5d6; }
.comercial-backdrop {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1040;
}
.comercial-nav-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}
.nav-group-title {
  font-size: .7rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  padding: 0 10px;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-group + .nav-group {
  border-top: 1px solid #f5f5f5;
  padding-top: 14px;
}
.comercial-sidebar a,
.comercial-sidebar .nav-disabled {
  display: flex;
  align-items: center;
  color: #555;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.comercial-sidebar a i,
.comercial-sidebar .nav-disabled i {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  font-size: .85rem;
  opacity: .75;
}
.comercial-sidebar a:hover { background: #f0fce3; color: var(--green-dark); }
.comercial-sidebar a.active {
  background: #e8f5d6;
  color: var(--green-dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--green);
}
.comercial-sidebar a.active i { opacity: 1; }
.comercial-sidebar .nav-disabled { cursor: not-allowed; }
.comercial-sidebar-footer {
  border-top: 1px solid #f1f1f1;
  padding: 14px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comercial-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.comercial-user-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f5d6;
  color: var(--green-dark);
  font-weight: 800;
  border-radius: 50%;
  font-size: .95rem;
}
.comercial-user-name {
  font-size: .85rem;
  font-weight: 600;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comercial-sidebar-footer form { margin: 0; }
.comercial-sidebar-footer .btn-link {
  color: #389A03;
  text-decoration: none;
  padding: 0;
  font-size: .85rem;
}

@media (min-width: 992px) {
  .comercial-sidebar {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .comercial-shell { flex-direction: column; }
  .comercial-sidebar-toggle { display: flex; }
  .comercial-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    flex: 0 0 auto;
    border-right: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1050;
    overflow-y: auto;
  }
  .comercial-sidebar.is-open { transform: translateX(0); }
  .comercial-backdrop.is-open { display: block; }
  .comercial-sidebar a,
  .comercial-sidebar .nav-disabled {
    padding: 12px 10px;
    font-size: .95rem;
  }
}

/* ── Tablas mejoradas ── */
.table-comercial thead th {
  background: #f8fdf5;
  font-size: .78rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
}
.table-comercial tbody tr:hover { background: #f9fff6; }

/* Padding más ajustado para que quepan más columnas en pantallas de escritorio */
.table-comercial td,
.table-comercial th {
  padding: .5rem .6rem;
}

/* ── Tablas → tarjetas en móvil ── (aplica a .table-stack-mobile y al alias .contacto-table)
   Cada dato va con la etiqueta arriba (pequeña) y el valor abajo a ancho completo, para que los valores
   largos (nombres, establecimientos) no queden apretados. La celda marcada .principal es el título. */
@media (max-width: 767.98px) {
  .contacto-table thead,
  .table-stack-mobile thead { display: none; }

  .contacto-table tbody tr,
  .table-stack-mobile tbody tr {
    display: block;
    border: 1px solid #e6ece1;
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 6px 16px 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20,40,25,.06);
  }

  .contacto-table tbody td,
  .table-stack-mobile tbody td {
    display: block;
    width: 100%;
    text-align: left !important;
    border: none;
    border-top: 1px solid #f1f4ee;
    padding: 10px 0 2px;
    font-size: .95rem;
    line-height: 1.4;
    word-break: break-word;
  }
  /* La etiqueta (data-label) arriba del valor */
  .contacto-table tbody td::before,
  .table-stack-mobile tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #7a8a7f;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  /* Celda vacía o sin etiqueta: no ocupa espacio */
  .contacto-table tbody td:empty,
  .table-stack-mobile tbody td:empty { display: none; }
  .contacto-table tbody td:not([data-label])::before,
  .table-stack-mobile tbody td:not([data-label])::before { content: none; }

  /* Título de la tarjeta: celda principal (nombre/persona), grande y sin etiqueta */
  .contacto-table tbody td.principal,
  .table-stack-mobile tbody td.principal {
    border-top: 0;
    padding-top: 10px;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid #eef2ea;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--green-dark);
  }
  .contacto-table tbody td.principal::before,
  .table-stack-mobile tbody td.principal::before { content: none; }
  /* Cuando la primera celda no es la principal, no le pintamos el separador superior */
  .contacto-table tbody td:first-child,
  .table-stack-mobile tbody td:first-child { border-top: 0; }

  /* Botones dentro de la tarjeta (columna de acciones): fila cómoda, buena área táctil */
  .contacto-table tbody td .btn,
  .table-stack-mobile tbody td .btn { min-height: 40px; }
  .contacto-table tbody td > .d-flex,
  .table-stack-mobile tbody td > .d-flex { margin-top: 4px; }
}

/* ── Filtros ── */
.filtros-card label {
  font-size: .75rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}

/* ── Ajustes de filtros y paginación en móvil ── */
@media (max-width: 767.98px) {
  /* Botones de la tarjeta de filtros (Filtrar / Ver todo) a ancho completo y con altura táctil */
  .comercial-main .filtros-card .d-flex.align-items-end { flex-wrap: wrap; gap: 8px; }
  .comercial-main .filtros-card .d-flex.align-items-end .btn { flex: 1 1 46%; min-height: 44px; }
  /* Paginación con objetivos táctiles más grandes */
  .comercial-main .pagination .page-link { min-width: 44px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Responsive helpers ── */
@media (max-width: 575.98px) {
  .form-control-sm,
  select.form-control-sm,
  input.form-control-sm {
    min-height: 44px;
    font-size: 1rem;
  }
  .btn-block-mobile { width: 100%; }

  /* Tarjeta a sangre (edge-to-edge) en móvil, usada por evento_form.html / evento_confirm_delete.html */
  .serbima-card--flush-sm { border-radius: 0; margin: 0 -12px; }
}

/* ── Columna "Documentos" (afiliación): ícono + modal, ver templates/afiliacion/_documentos.html ── */
.documentos-iconos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.documentos-icono {
  border-radius: 20px;
  font-size: .78rem;
  padding: 4px 12px;
  min-height: 30px;
}
.documentos-icono--ok {
  background: #e6f7e0;
  border: 1px solid #b7e6a8;
  color: #2f7a1f;
}
.documentos-icono--pendiente {
  background: #fff6e5;
  border: 1px solid #ffdb99;
  color: #8a5a00;
}
@media (max-width: 575.98px) {
  .documentos-icono { min-height: 44px; font-size: .85rem; }
}

/* ── Buscador por nombre/RUT/código (establecimiento/empleador en afiliación), reusable ──
   Alto acotado con scroll interno en todos los tamaños de pantalla — un panel de resultados chico y
   contenido es mejor que dejarlo fluir sin límite (en móvil eso generaba un scroll de página enorme). */
.ee-list { max-height: 240px; overflow-y: auto; }
.ee-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid #f1f1f1; border-radius: 8px;
  margin-top: 6px; background: #fff; transition: border-color .15s, background .15s;
}
.ee-item:hover { border-color: var(--green); background: #f6fff5; }
.ee-info { flex: 1; min-width: 0; }
.ee-nombre { font-weight: 600; font-size: .85rem; color: #222; word-break: break-word; }
.ee-meta { font-size: .74rem; color: #6b6b6b; }
/* Aviso al pie del buscador cuando quedaron coincidencias fuera del tope (ver _MAX_RESULTADOS_BUSCADOR). */
.ee-hay-mas {
  padding: 8px 10px;
  margin-top: 6px;
  font-size: .76rem;
  color: #7a6a00;
  background: #fffbe6;
  border: 1px solid #f2e6a8;
  border-radius: 8px;
}

/* ── Navegación rápida entre secciones del formulario de afiliación (pegajosa + sección activa) ── */
.form-secciones-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px;
  margin: 0 -4px 20px;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.form-secciones-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
  color: var(--green-dark);
  background: #f0fce3;
  border-radius: 20px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.form-secciones-nav a:hover { background: #e8f5d6; }
.form-secciones-nav a.active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 193, 42, .35);
}
html { scroll-behavior: smooth; }

/* ── Pulido de los formularios de afiliación (interno + público), una sola página ── */
.serbima-form h6[id^="seccion-"] {
  position: relative;
  padding-left: 12px;
  margin-top: 26px;
  margin-bottom: 14px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--green-dark);
  scroll-margin-top: 76px;
}
.serbima-form h6[id^="seccion-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: var(--green);
}
/* el acento del encabezado ya separa cada sección: el <hr> previo sobra */
.serbima-form hr { display: none; }

/* Separación entre secciones: una línea tenue sobre cada encabezado (menos el primero) da el corte
   visual que antes intentaba el <hr>, sin el peso de una regla completa. */
.serbima-form h6[id^="seccion-"]:not(:first-of-type) {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid #eef1ea;
}

/* Marca de campo obligatorio, uniforme en todos los labels. */
.req-marca { color: #c0392b; font-weight: 700; }
.form-leyenda-obligatorios {
  font-size: .78rem;
  color: var(--muted, #6b6b6b);
  margin: -6px 0 18px;
}

/* Bloques que aparecen según lo que marque quien completa (empleador/establecimiento a mano, datos de
   la liquidación). El fondo ámbar los identifica como "esto salió porque marcaste algo", en vez de
   parecer campos sueltos intercalados entre los normales. */
.bloque-condicional {
  background: #fffbf0;
  border: 1px solid #f3e2b8;
  border-left: 4px solid var(--yellow, #FFC107);
  border-radius: 10px;
  padding: 14px 14px 2px;
  margin-bottom: 18px;
}
/* Cuando el bloque es a la vez la .row de Bootstrap, hay que anular sus márgenes negativos o el fondo
   se desborda de la tarjeta. */
.bloque-condicional.row { margin-left: 0; margin-right: 0; }
.bloque-condicional-titulo {
  font-size: .82rem;
  font-weight: 700;
  color: #8a6100;
  margin-bottom: 10px;
}

/* Casillas "no está en la lista" (empleador / establecimiento). Van fuera de los contenedores que el JS
   oculta según el modo — dentro de ellos, marcarlas las hacía desaparecer y quedaban imposibles de
   desmarcar. Se presentan como dos opciones equivalentes, cada una bajo su buscador. */
.casillas-fuera-lista { margin-bottom: 4px; }
.casilla-fuera-lista {
  height: 100%;
  background: #fafcf6;
  border: 1px dashed #d6e4c0;
  border-radius: 10px;
  padding: 10px 12px;
}
.casilla-fuera-lista .form-check-label {
  font-size: .82rem;
  font-weight: 600;
  color: #444;
  cursor: pointer;
}
.casilla-fuera-lista .form-text { margin-top: 4px; font-size: .75rem; }
/* Deshabilitada: con el empleador fuera de lista, la de establecimiento deja de aplicar. */
.casilla-fuera-lista.casilla-inactiva { opacity: .5; }
.casilla-fuera-lista.casilla-inactiva .form-check-label { cursor: not-allowed; }

@media (max-width: 767.98px) {
  /* Área táctil cómoda: en móvil estas casillas son el escape cuando no encuentran su establecimiento. */
  .casilla-fuera-lista { padding: 12px; }
  .casilla-fuera-lista .form-check-label { font-size: .85rem; }
}

/* Vista previa del documento dentro del modal: evita tener que descargar el archivo para revisarlo. */
.documento-visor {
  background: #f4f4f4;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
.documento-visor-img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  margin: 0 auto;
  object-fit: contain;
}
.documento-visor-pdf {
  display: block;
  width: 100%;
  height: 60vh;
  border: 0;
}
.documento-visor-aviso {
  margin: 0;
  padding: 18px 14px;
  font-size: .85rem;
  color: var(--muted, #6b6b6b);
}
@media (max-width: 767.98px) {
  /* Más bajo en móvil: si la vista previa ocupa toda la pantalla, los botones del modal quedan fuera. */
  .documento-visor-img { max-height: 45vh; }
  .documento-visor-pdf { height: 45vh; }
}

/* Campo neutralizado por una casilla (p. ej. "Sin número"). Se usa readOnly en vez de disabled para no
   perder el foco en móvil —eso hacía saltar la página al inicio—, así que el gris hay que ponerlo aquí. */
.serbima-form .campo-bloqueado,
.serbima-form .campo-bloqueado:focus {
  background: #f1f1f1;
  color: #888;
  box-shadow: none;
  border-color: #e2e2e2;
}

/* Confirmación de archivo adjunto: el <input type="file"> no muestra el nombre en todos los móviles. */
.archivo-elegido {
  margin: 6px 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--green-dark);
  word-break: break-all;
}

.serbima-form .form-group { margin-bottom: 1rem; }
.serbima-form label {
  font-weight: 600;
  font-size: .82rem;
  color: #444;
  margin-bottom: 5px;
}
.serbima-form .form-control {
  border-radius: 8px;
  border-color: #e2e2e2;
  transition: border-color .15s, box-shadow .15s;
}
.serbima-form .form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(124, 193, 42, .18);
}

/* Encabezado verde del formulario interno. Redondea sus esquinas por cuenta propia porque la tarjeta ya
   no puede usar overflow:hidden (anulaba el position:sticky de la nav de secciones y de la barra de
   guardar). */
.serbima-form-encabezado {
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Botón "Seleccionar" de los buscadores empleador/establecimiento con mejor área táctil */
.ee-item .btn { border-radius: 8px; }

@media (max-width: 767.98px) {
  .serbima-form .form-control,
  .serbima-form select.form-control,
  .serbima-form input.form-control {
    min-height: 46px;
    font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  }
  .ee-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .ee-item .btn { width: 100%; min-height: 42px; }

  /* Más aire entre secciones: en una sola columna cuesta distinguir dónde termina cada una. */
  .serbima-form h6[id^="seccion-"] { margin-top: 34px; }
  /* Casillas (Sin número / Depto. / Referencia / consentimiento) con mejor área táctil. */
  .serbima-form .form-check-input { width: 18px; height: 18px; }
  .serbima-form .form-check-label { padding-left: 4px; }

  /* Barra de envío siempre a mano en móvil */
  .form-acciones {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin: 16px -1rem 0;
    padding: 12px 1rem;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    z-index: 15;
  }
}

/* Afiliación capturada sin empleador del catálogo (empleador manual) — se resalta en la cola del jefe
   para avisar que va sin los datos reales del empleador y no puede exportarse a ventura aún. */
.fila-sin-empleador > td {
  background-color: #fff3cd;
}
.table-hover .fila-sin-empleador:hover > td {
  background-color: #ffeeba;
}
.fila-sin-empleador > td:first-child {
  box-shadow: inset 4px 0 0 0 #e0a800;
}

/* Asignar clasificación inline (jefe) en "Autorizar afiliaciones" — evita que el select+botón se
   desborden en la columna estrecha y se ordena bien en la tarjeta móvil. */
.asignar-clasificacion { min-width: 170px; }
.asignar-clasificacion select { min-width: 120px; }

/* Fila de re-ingreso (RUT que ya existía en ventura) en la cola unificada de "Autorizar afiliaciones" —
   acento celeste, distinto del ámbar de "sin empleador"; ambas pueden coexistir en una misma fila. */
.fila-reingreso > td:first-child {
  box-shadow: inset 4px 0 0 0 #17a2b8;
}
.fila-reingreso:not(.fila-sin-empleador) > td {
  background-color: #eaf6f8;
}
.table-hover .fila-reingreso:not(.fila-sin-empleador):hover > td {
  background-color: #d8eef2;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pulido de consistencia de las listas (botones, filtros, tablas, paginación).
   Todo scoped a .comercial-main para no afectar el sitio público ni los forms.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Botones ── */
.comercial-main .btn {
  border-radius: 8px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.comercial-main .btn i { line-height: 1; }
.comercial-main .btn-sm { padding: .28rem .55rem; }
/* Botones de acción dentro de tablas: compactos para que quepan las columnas de acciones densas. */
.comercial-main .table-comercial td .btn-sm { padding: .22rem .45rem; }
/* Columna de acciones de afiliaciones: ancho mínimo + íconos centrados en una línea bajo "Detalle". */
.comercial-main .acciones-cell { min-width: 150px; }
.comercial-main .acciones-cell .d-flex { justify-content: center; }
.comercial-main .btn-serbima {
  box-shadow: 0 2px 8px rgba(124, 193, 42, .28);
}
.comercial-main .btn-serbima:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 193, 42, .38);
}
.comercial-main .btn-serbima:active { transform: translateY(0); }
/* Secundarios (Descargar Excel, Ver todo, Volver, etc.): hover con tinte de marca */
.comercial-main .btn-outline-secondary {
  border-color: #d7dcd3;
  color: #4a4a4a;
}
.comercial-main .btn-outline-secondary:hover,
.comercial-main .btn-outline-secondary:focus {
  border-color: var(--green);
  color: var(--green-dark);
  background: #f6fff5;
}
.comercial-main .btn:focus,
.comercial-main .btn.focus {
  box-shadow: 0 0 0 3px rgba(124, 193, 42, .22);
}

/* ── Barra de acciones del encabezado ── */
.comercial-main .d-flex.flex-wrap { gap: 8px; }

/* ── Tarjeta de filtros ── */
.comercial-main .filtros-card {
  background: #fbfef9;
  border: 1px solid #eef3ea;
}
.comercial-main .filtros-card .form-control:focus,
.comercial-main .filtros-card .form-control-sm:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(124, 193, 42, .18);
}

/* ── Tablas ── */
.comercial-main .table-comercial tbody tr:nth-child(even) > td { background: #fcfdfb; }
.comercial-main .table-comercial tbody tr:hover > td { background: #f2fbec; }
.comercial-main .table-comercial td { vertical-align: middle; }
.comercial-main .table-comercial .badge-pill { padding: .35em .8em; font-weight: 600; }

/* Cabecera fija al hacer scroll — solo escritorio; en móvil la tabla se apila en tarjetas.
   Se apunta a los contenedores de las tablas de lista (todas llevan .table-stack-mobile). */
@media (min-width: 768px) {
  .comercial-main .table-responsive:has(> table.table-stack-mobile) {
    max-height: 72vh;
    overflow: auto;
  }
  .comercial-main .table-comercial thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f0f9e8;
  }
}

/* ── Paginación (tema de marca) ── */
.comercial-main .pagination { gap: 4px; }
.comercial-main .pagination .page-link {
  color: var(--green-dark);
  border-color: #e5e9e1;
  border-radius: 8px;
  min-width: 38px;
  text-align: center;
}
.comercial-main .pagination .page-link:hover {
  background: #f0fce3;
  border-color: var(--green);
  color: var(--green-dark);
}
.comercial-main .pagination .page-item.active .page-link {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.comercial-main .pagination .page-item.disabled .page-link {
  color: #8a8a8a;
  background: #f8f8f8;
  border-color: #eee;
}

/* ── Declaración legal del formulario público de afiliación ── */
.declaracion-legal {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fbfbfb;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.45;
  color: #444;
}
.declaracion-legal p:last-child { margin-bottom: 0; }

/* ── Novedades de la plataforma (comercial/novedades.html) ── */
.novedad-tipo {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 3px 10px;
  border-radius: 12px;
}
.novedad-tipo--nuevo      { background: #e8f7d4; color: #3d6b00; }
.novedad-tipo--mejora     { background: #e2f1fb; color: #14607f; }
.novedad-tipo--correccion { background: #fdeaea; color: #98342c; }
.novedad-tipo--nueva      { background: var(--yellow, #FFC107); color: #4a3800; }

/* Las que el usuario no había visto se distinguen con el acento verde de la marca. */
.novedad-item--nueva { border-left: 4px solid var(--green); }

/* ============================================================================
   Dashboard / Mi resumen / Reporte — indicadores
   ========================================================================= */

/* Encabezado de cada bloque del dashboard (Gestiones, Afiliaciones, Cargas...). */
.dash-seccion {
  font-weight: 700;
  color: var(--green-dark);
  margin: 8px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e6e6e6;
}

.dash-subtitulo {
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
}

/* Letra chica bajo un KPI: dice sobre qué base está calculado. Sin esto los números no son
   auditables — es justo lo que hacía dudar del conteo. */
.kpi-card .kpi-nota {
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
}

/* --- Barra de estados (afiliaciones / cargas) --- */
.dash-barra-estados {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: #eee;
}

.dash-barra-tramo { height: 100%; }

.dash-leyenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: #444;
}

.dash-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* Un color por estado, compartido por la barra y su leyenda. Los nombres son los valores del
   TextChoices de Afiliacion/CargaSalud, así que agregar un estado nuevo pide una regla aquí. */
.dash-estado--pendiente              { background: #cfcfcf; }
.dash-estado--documentacion_recibida { background: var(--yellow, #FFC107); }
.dash-estado--aprobada               { background: var(--green, #7CC12A); }
.dash-estado--rechazada              { background: #d9534f; }

/* --- Evolución día a día ---
   Barras en CSS puro, sin librería de gráficos: el sitio no carga recursos externos. */
.dash-evolucion {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dash-evolucion-col {
  flex: 1 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.dash-evolucion-barra {
  width: 100%;
  max-width: 34px;
  background: var(--green);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: background .15s ease;
}

.dash-evolucion-col:hover .dash-evolucion-barra { background: var(--green-dark); }

.dash-evolucion-fecha {
  margin-top: 6px;
  font-size: .66rem;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Fila de totales de las tablas de desglose --- */
.tabla-totales td {
  border-top: 2px solid var(--green);
  background: #f7fcf2;
}

/* --- Bloque "¿Cómo se calcula cada indicador?" --- */
.dash-definiciones-toggle {
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
}

.dash-definiciones-toggle:hover { color: var(--green-dark); text-decoration: underline; }

.dash-definiciones dt {
  color: var(--green-dark);
  font-weight: 700;
  font-size: .88rem;
  margin-top: 12px;
}

.dash-definiciones dd {
  font-size: .85rem;
  color: #444;
  margin-bottom: 0;
}

/* Honeypot anti-bot del formulario público de afiliación — fuera de pantalla en vez de display:none,
   porque algunos bots ya ignoran los campos ocultos con display:none. Ver afiliacion_publica_form.html. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Tablas de listado (las 17 listas de registros): letra y padding más chicos para que entre el detalle
   sin scroll horizontal. Se define acá y no como style="font-size:..." en la plantilla
   —que es lo que hacen las tablas más viejas— para tener un solo lugar donde ajustar la densidad.
   Convive con .table-stack-mobile: bajo 767.98px la tabla se apila en tarjetas y esto deja de aplicar. */
/* .8rem es un punto intermedio deliberado: las listas venían en .9rem inline, se bajaron a .72rem
   (el valor con el que nació esta clase, pensada para UNA tabla muy ancha) y al aplicarlo a las 17
   listas resultó ilegible. Si hay que ajustarlo otra vez, es acá y cambian todas juntas. */
.table-densa { font-size: .8rem; }

.table-densa td,
.table-densa th { padding: .3rem .4rem; }

/* El encabezado necesita su propia regla: `.table-comercial thead th` le fija un font-size, y un tamaño
   aplicado directamente le gana a lo heredado de .table-densa por más específico que sea el selector del
   padre. Sin esto el <thead> quedaba MÁS GRANDE que el cuerpo de la tabla. Se usan las dos clases juntas
   (van en el mismo <table>) para no depender del orden de las reglas en el archivo. */
.table-comercial.table-densa thead th {
  font-size: .72rem;
  letter-spacing: .2px;
}

.table-densa .badge {
  font-size: .67rem;
  padding: .2em .5em !important;
}

/* Los badges de la tabla densa suelen ir con un texto chico debajo (motivo, revisor). */
.table-densa small { font-size: .72rem; }

/* Los iconos de acción y el botón "Detalle" también encogen, o desentonan con el texto. */
.table-densa .btn-sm {
  font-size: .75rem;
  padding: .2rem .45rem;
}

/* ── Filtros en una sola fila (afiliacion/_filtros.html) ──
   Flex y no la grilla de Bootstrap: los campos son 7 u 8 según el rol ("Ejecutivo" solo aparece para
   quien puede filtrar por él) y con col-md-2 siempre caía una segunda fila. Con flex cada campo se
   reparte lo que haya y el número de campos deja de importar. */
.filtros-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.filtros-fila .filtro-campo {
  flex: 1 1 110px;
  min-width: 0;          /* sin esto un <select> con opciones largas se niega a encoger */
  margin-bottom: 0;
}

/* Región, comuna y ejecutivo llevan nombres largos: se les da algo más de aire que a RUT o las fechas. */
.filtros-fila .filtro-campo--ancho { flex: 1.4 1 140px; }

/* El botón no se estira: ocupa lo suyo y deja el resto del ancho a los campos. */
.filtros-fila .filtro-campo--accion { flex: 0 0 auto; }

.filtros-card--compacta label {
  font-size: .65rem;
  margin-bottom: 2px;
}

/* Cubre también el <input> que genera select-buscable.js: ese input copia las clases del <select>
   original (input.className = clasesOriginales), así que ya llega con .form-control-sm. */
.filtros-card--compacta .form-control-sm {
  font-size: .72rem;
  height: calc(1.4em + .4rem + 2px);
  padding: .2rem .4rem;
}

.filtros-card--compacta .btn-sm {
  font-size: .72rem;
  padding: .25rem .6rem;
}

/* En móvil los campos vuelven a dos por fila y el botón ocupa el ancho completo: en pantalla chica una
   fila de ocho controles es ilegible, y los objetivos táctiles tienen que seguir siendo grandes. */
@media (max-width: 767.98px) {
  .filtros-fila .filtro-campo { flex: 1 1 46%; }
  .filtros-fila .filtro-campo--accion { flex: 1 1 100%; }
  .filtros-fila .filtro-campo--accion .btn { width: 100%; min-height: 44px; }
  .filtros-card--compacta .form-control-sm {
    font-size: .8rem;
    height: calc(1.5em + .6rem + 2px);
  }
}