/* Estilos del módulo "Cierre" (prefijo cl-). Reutiliza variables y componentes de estilos.css y reliquidacion.css.
   Sin style="..." en el HTML: la CSP no lo permite. */

.cl-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.cl-pill { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto-2); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.cl-pill:hover { background: var(--tinte); color: var(--azul); }
.cl-pill.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cl-pill .rl-insignia { background: var(--naranjo); }

.cl-barra, .cl-filtro, .cl-selector, .cl-acciones { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cl-mes { font-weight: 700; color: var(--azul); }
.cl-kpis, .cl-grid, .cl-grid3 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cl-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cl-grid3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cl-form > * + * { margin-top: 12px; }
.cl-buscar { width: 100%; max-width: 360px; }
.cl-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cl-reg { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.cl-reg-det { color: var(--texto-2); font-size: 0.875rem; }
.cl-reg-tipo, .cl-quien, .cl-colab { font-weight: 700; }
.cl-reg-acc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cl-sub, .cl-nota, .cl-mini { color: var(--texto-3); font-size: 0.75rem; }
.cl-nota-r { color: #9a3412; font-size: 0.8125rem; }
.cl-motivo { font-style: italic; color: var(--texto-2); }
.cl-clip { color: var(--azul); }
.cl-horas { font-weight: 700; }

.cl-grupo { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.cl-grupo-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 12px; background: var(--tinte); border-radius: var(--radio) var(--radio) 0 0; }
.cl-grupo > .cl-lista { padding: 8px; }

.cl-tipo, .cl-est, .cl-paga { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; font-weight: 700; background: #F2F4F7; color: var(--texto-2); }
.cl-t-hhee { background: var(--tinte); color: var(--azul); }
.cl-t-movilizacion { background: #ECFDF3; color: #166534; }
.cl-t-inventario { background: #F3E8FF; color: #6b21a8; }
.cl-t-ausencia { background: #FEF3C7; color: #92400e; }
.cl-e-pendiente { background: #FEF3C7; color: #92400e; }
.cl-e-aprobado { background: #DCFCE7; color: #166534; }
.cl-e-rechazado, .cl-e-anulado { background: #FEE2E2; color: #991b1b; }
.cl-info { background: #F2F4F7; color: var(--texto-3); }

.cl-aviso, .cl-bloqueo, .cl-error { margin: 0; }
.cl-error { color: #b91c1c; font-size: 0.8125rem; }
.cl-malo { color: #b91c1c; }
.cl-stepper { display: inline-flex; align-items: center; gap: 10px; }
.cl-stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: var(--superficie); font-size: 1.25rem; font-weight: 700; color: var(--azul); cursor: pointer; }
.cl-stepper output { min-width: 3.5ch; text-align: center; font-weight: 700; font-size: 1.125rem; }
.cl-archivo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; font-size: 0.875rem; }
.cl-enviar, .cl-descargar { min-height: 44px; }

.cl-vent { display: block; }
.cl-vent-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.cl-hist { margin: 6px 0 0; padding-left: 16px; font-size: 0.8125rem; color: var(--texto-2); }
.cl-contenido { min-width: 0; }
.cl-f-estado, .cl-f-sup, .cl-f-texto, .cl-f-tipo { min-width: 140px; }

@media (max-width: 559px) {
  .cl-reg-acc .btn { flex: 1 1 auto; min-height: 44px; }
  .cl-buscar { max-width: none; }
}
.cl-reg-acc > span { display: inline-flex; gap: 14px; align-items: center; }

.cl-selector .campo { flex: 1 1 260px; max-width: 420px; }
.cl-selector select, .cl-selector input { width: 100%; }
@media (max-width: 559px) { .cl-selector .campo { max-width: none; } }