/* ==========================================================================
   components.css
   Botones, badges, tabla densa, formularios, alertas.
   Depende de tokens-brand.css y tokens-admin.css.
   REGLA DURA: ningún valor literal de color o espaciado aquí.
               Todo valor debe venir de un token. Un literal = bug.
   ========================================================================== */


/* ==========================================================================
   BOTONES
   El botón primario lleva texto oscuro (--ink) sobre turquesa.
   Blanco sobre brand-500 = 2,06:1 — ilegible. Ink sobre brand-500 = 8,15:1.
   ========================================================================== */

.btn-admin {
  display: inline-flex;
  align-items: center;
  margin-top: 0 !important;
  margin-left: 0 !important;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  height: var(--form-input-height);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-system);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  -webkit-font-smoothing: antialiased;
}

.btn-admin:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Primario — fondo teal, texto blanco */
.btn-admin--primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #ffffff;
}
.btn-admin--primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.btn-admin--primary:active {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}

/* Secundario — contorno, fondo blanco */
.btn-admin--secondary {
  background: var(--surface-card);
  border-color: var(--border);
  color: var(--ink);
}
.btn-admin--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--brand-700);
  color: var(--brand-900);
}

/* Guardar — verde semántico */
.btn-admin--save {
  background: #00a65a;
  border-color: #008d4c;
  color: #fff;
}
.btn-admin--save:hover {
  background: #008d4c;
  border-color: #006b39;
  color: #fff;
}

/* Flanks / Ironía — gris */
.btn-admin--flanks {
  background: var(--btn-flanks);
  border-color: var(--btn-flanks);
  color: #fff;
}
.btn-admin--flanks:hover {
  background: var(--btn-flanks-hover);
  border-color: var(--btn-flanks-hover);
  color: #fff;
}

/* Aportaciones — naranja */
.btn-admin--aportaciones {
  background: var(--btn-aportaciones);
  border-color: var(--btn-aportaciones);
  color: #fff;
}
.btn-admin--aportaciones:hover {
  background: var(--btn-aportaciones-hover);
  border-color: var(--btn-aportaciones-hover);
  color: #fff;
}

/* Supercuenta / Atención — amarillo */
.btn-admin--supercuenta,
.btn-admin--attention {
  background: var(--btn-supercuenta);
  border-color: var(--btn-supercuenta);
  color: #fff;
}
.btn-admin--supercuenta:hover,
.btn-admin--attention:hover {
  background: var(--btn-supercuenta-hover);
  border-color: var(--btn-supercuenta-hover);
  color: #fff;
}

/* Cancelar / Destructivo — rojo semántico */
.btn-admin--danger {
  background: var(--btn-danger);
  border-color: var(--btn-danger);
  color: #fff;
}
.btn-admin--danger:hover {
  background: var(--btn-danger-hover);
  border-color: var(--btn-danger-hover);
  color: #fff;
}

/* Pagos — rosa */
.btn-admin--pagos {
  background: var(--btn-pagos);
  border-color: var(--btn-pagos);
  color: #fff;
}
.btn-admin--pagos:hover {
  background: var(--btn-pagos-hover);
  border-color: var(--btn-pagos-hover);
  color: #fff;
}

.btn-admin--optimizacion {
  background: #65ca06;
  border-color: #65ca06;
  color: #fff;
}
.btn-admin--optimizacion:hover {
  background: #b3de69;
  border-color: #b3de69;
  color: #fff;
}

/* Negro */
.btn-admin--black {
  background: #111;
  border-color: #000;
  color: #fff;
}
.btn-admin--black:hover {
  background: #444;
  border-color: #222;
  color: #fff;
}

/* Verde semántico */
.btn-admin--green {
  background: #54c13c;
  border-color: #3f9a2b;
  color: #fff;
}
.btn-admin--green:hover {
  background: #80ce6e;
  border-color: #54c13c;
  color: #fff;
}

/* Warning Ironía — rojo */
.btn-admin--warningironia {
  background: var(--btn-warningironia);
  border-color: var(--btn-warningironia);
  color: #fff;
}
.btn-admin--warningironia:hover {
  background: var(--btn-warningironia-hover);
  border-color: var(--btn-warningironia-hover);
  color: #fff;
}

/* Mail Autopilot — fucsia */
.btn-admin--mailautopilot {
  background: var(--btn-mailautopilot);
  border-color: var(--btn-mailautopilot);
  color: #fff;
}
.btn-admin--mailautopilot:hover {
  background: var(--btn-mailautopilot-hover);
  border-color: var(--btn-mailautopilot-hover);
  color: #fff;
}

/* Contar/Desasignar — naranja oscuro */
.btn-admin--contardesasignar {
  background: var(--btn-contardesasignar);
  border-color: var(--btn-contardesasignar);
  color: #fff;
}
.btn-admin--contardesasignar:hover {
  background: var(--btn-contardesasignar-hover);
  border-color: var(--btn-contardesasignar-hover);
  color: #fff;
}

/* Victor — morado */
.btn-admin--victor {
  background: var(--btn-victor);
  border-color: var(--btn-victor);
  color: #fff;
}
.btn-admin--victor:hover {
  background: var(--btn-victor-hover);
  border-color: var(--btn-victor-hover);
  color: #fff;
}

/* Comentario — rosa */
.btn-admin--comentario {
  background: #f366f8;
  border-color: #f366f8;
  color: #fff;
}
.btn-admin--comentario:hover {
  background: #fca9ff;
  border-color: #fca9ff;
  color: #fff;
}

/* Cambios — azul claro */
.btn-admin--cambios {
  background: #56b3e2;
  border-color: #56b3e2;
  color: #fff;
}
.btn-admin--cambios:hover {
  background: #91c6ec;
  border-color: #91c6ec;
  color: #fff;
}

/* Magia — azul/violeta */
.btn-admin--magia {
  background: var(--btn-magia);
  border-color: var(--btn-magia);
  color: #fff;
}
.btn-admin--magia:hover {
  background: var(--btn-magia-hover);
  border-color: var(--btn-magia-hover);
  color: #fff;
}

/* Seguros — teal */
.btn-admin--seguros {
  background: var(--btn-seguros);
  border-color: var(--btn-seguros);
  color: #fff;
}
.btn-admin--seguros:hover {
  background: var(--btn-seguros-hover);
  border-color: var(--btn-seguros-hover);
  color: #fff;
}

/* Ghost — solo texto */
.btn-admin--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand-700);
}
.btn-admin--ghost:hover {
  background: var(--brand-050);
  color: var(--brand-900);
}

/* Tamaños */
.btn-admin--sm {
  height: 26px;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
}
.btn-admin--lg {
  height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-md);
}

/* Deshabilitado */
.btn-admin:disabled,
.btn-admin[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Botones que son <a>: pulsado y con el foco puesto ---------------------
   AdminLTE.css declara `a:hover, a:active, a:focus { color: #72AFD2 }`, con
   especificidad (0,1,1), por encima del color de cada variante (0,1,0). Efecto: al
   clicar un botón-enlace el texto blanco se volvía azul claro, y se quedaba así
   mientras el botón conservaba el foco. El :hover ya está cubierto porque cada
   variante lo declara (0,2,0); lo que faltaba era :focus y :active, y es lo que se
   fija aquí. Con <button> no pasa: las reglas de AdminLTE solo tocan a los enlaces.
   Va al final de la sección para ganar los empates de especificidad por orden. */
a.btn-admin--primary:focus,
a.btn-admin--primary:active,
a.btn-admin--save:focus,
a.btn-admin--save:active,
a.btn-admin--flanks:focus,
a.btn-admin--flanks:active,
a.btn-admin--aportaciones:focus,
a.btn-admin--aportaciones:active,
a.btn-admin--supercuenta:focus,
a.btn-admin--supercuenta:active,
a.btn-admin--attention:focus,
a.btn-admin--attention:active,
a.btn-admin--danger:focus,
a.btn-admin--danger:active,
a.btn-admin--pagos:focus,
a.btn-admin--pagos:active,
a.btn-admin--optimizacion:focus,
a.btn-admin--optimizacion:active,
a.btn-admin--black:focus,
a.btn-admin--black:active,
a.btn-admin--green:focus,
a.btn-admin--green:active,
a.btn-admin--warningironia:focus,
a.btn-admin--warningironia:active,
a.btn-admin--mailautopilot:focus,
a.btn-admin--mailautopilot:active,
a.btn-admin--contardesasignar:focus,
a.btn-admin--contardesasignar:active,
a.btn-admin--victor:focus,
a.btn-admin--victor:active,
a.btn-admin--comentario:focus,
a.btn-admin--comentario:active,
a.btn-admin--cambios:focus,
a.btn-admin--cambios:active,
a.btn-admin--magia:focus,
a.btn-admin--magia:active,
a.btn-admin--seguros:focus,
a.btn-admin--seguros:active {
  color: #fff;
  text-decoration: none;
}
/* Las dos variantes que no llevan texto blanco mantienen el color de su hover */
a.btn-admin--secondary:focus,
a.btn-admin--secondary:active,
a.btn-admin--ghost:focus,
a.btn-admin--ghost:active {
  color: var(--brand-900);
  text-decoration: none;
}


/* ==========================================================================
   BADGES DE ESTADO — cinco familias (§4)
   Regla: el color nunca va solo — todos llevan texto.
   ========================================================================== */

.badge-admin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--badge-pad-v) var(--badge-pad-h);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-weight);
  line-height: 1.4;
  border-radius: var(--badge-radius);
  white-space: nowrap;
  font-family: var(--font-system);
  border: 1px solid transparent;
}

/* Positivo — cliente OK, ticket solucionado, aportacion confirmada, seguro en vigor */
.badge-admin--positive {
  background: var(--color-positive-bg);
  color: var(--color-positive-fg);
  border-color: var(--color-positive-fg);
}

/* Atención — moroso, ticket pendiente, rentabilidad rara */
.badge-admin--attention {
  background: var(--color-attention-bg);
  color: var(--color-attention-fg);
  border-color: var(--color-attention-fg);
}

/* Negativo — incidencia, cobro rechazado, cliente de baja (estado=3) */
.badge-admin--negative {
  background: var(--color-negative-bg);
  color: var(--color-negative-fg);
  border-color: var(--color-negative-fg);
}

/* Neutro — no compra (estado=0), amigos pendiente, sin asignar */
.badge-admin--neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
  border-color: var(--border);
}

/* Categoría — modo, autopilot, tipo seguro, origen. Contorno, sin carga semántica */
.badge-admin--category {
  background: var(--color-category-bg);
  color: var(--color-category-fg);
  border-color: var(--color-category-bd);
}

/* Info — renovación, estado pendiente de acción (azul) */
.badge-admin--info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #1d4ed8;
}

/* Morado — propuesta enviada, estado informativo sin urgencia */
.badge-admin--purple {
  background: #f3e8ff;
  color: #7c3aed;
  border-color: #7c3aed;
}


/* ==========================================================================
   TABLA DENSA
   Cabecera fija, cifras a la derecha, zebra sutil, ancho de columna estable.
   ========================================================================== */

.table-admin {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0 !important;
  font-size: var(--table-font-size);
  color: var(--ink);
  font-family: var(--font-system);
  font-variant-numeric: tabular-nums lining-nums;
}

.table-admin thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.table-admin thead th {
  background: var(--surface-card);
  border-bottom: 2px solid var(--border);
  padding: var(--table-cell-pad-v) var(--table-cell-pad-h);
  font-size: var(--table-head-size);
  font-weight: var(--table-head-weight);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

/* Columnas numéricas — siempre alineadas a la derecha */
.table-admin th.num,
.table-admin td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-admin tbody tr {
  height: var(--table-row-height);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

/* Zebra — filas pares. Las clases fila-* llevan !important y siempre ganan. */
.table-admin tbody tr:nth-child(even):not(.fila-verde):not(.fila-amarilla):not(.fila-roja):not(.fila-azul):not(.fila-morada):not(.fila-singularcover) {
  background: #F6F7F6;
}

.table-admin tbody tr:hover:not(.fila-verde):not(.fila-amarilla):not(.fila-roja):not(.fila-azul):not(.fila-morada):not(.fila-alta-reciente):not(.fila-singularcover) {
  background: #C8E4E4;
}
.table-admin tbody tr.fila-singularcover:hover td { background: #007a40; }

/* Hover en filas con color especial — background directo en td para no afectar a badges */
.table-admin tbody tr.fila-verde:hover td       { background: #C8EDD4; }
.table-admin tbody tr.fila-amarilla:hover td     { background: #F5EFA0; }
.table-admin tbody tr.fila-roja:hover td         { background: #F5CCCC; }
.table-admin tbody tr.fila-azul:hover td         { background: #C5D9F0; }
.table-admin tbody tr.fila-morada:hover td       { background: #E2D4F5; }
.table-admin tbody tr.fila-alta-reciente:hover td { background: #C8E0E0; }

/* Fila seleccionada */
.table-admin tbody tr.is-selected {
  background: var(--brand-050);
  outline: 2px solid var(--brand-700);
  outline-offset: -2px;
}

.table-admin tbody td {
  padding: var(--table-cell-pad-v) var(--table-cell-pad-h);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* Truncado de texto largo con tooltip nativo */
.table-admin td[title] {
  cursor: default;
}

/* Tabla sin striped — para cards de aportaciones u otros contextos donde
   el fondo alterno distrae. Hereda todo de table-admin salvo el nth-child. */
.table-aportacion {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0 !important;
  font-size: var(--table-font-size);
  color: var(--ink);
  font-family: var(--font-system);
  font-variant-numeric: tabular-nums lining-nums;
}
.table-aportacion thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.table-aportacion thead th {
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: none;
  white-space: nowrap;
}
.table-aportacion tbody tr {
  border-bottom: 1px solid var(--border);
}
.table-aportacion tbody tr:hover {
  background: var(--surface-hover);
}
.table-aportacion tbody tr.fila-total {
  border-top: none;
  border-bottom: none;
}
.table-aportacion tbody tr:has(+ .fila-total),
.table-aportacion tbody tr.fila-ultimo-fondo,
.table-aportacion tbody tr:last-child {
  border-bottom: none;
}
.table-aportacion tbody td {
  padding: var(--sp-1) var(--sp-2);
  vertical-align: middle;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.table-aportacion thead th {
  text-align: center;
}

/* Contenedor scrollable — sin borde propio, lo lleva el fixed-table-container
   para que la paginación quede fuera del recuadro visualmente */
.table-admin-wrap {
  overflow-x: auto;
}

.table-admin-wrap .fixed-table-container {
  height: auto !important;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   BADGES DE TIPO DE SEGURO
   ========================================================================== */

.badge-seguro {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-pad-v) var(--badge-pad-h);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-weight);
  line-height: 1.4;
  border-radius: var(--badge-radius);
  white-space: nowrap;
  font-family: var(--font-system);
  color: #fff;
  margin: 1px 2px;
}

.badge-seguro--coche      { background: var(--seg-coche); }
.badge-seguro--hogar      { background: var(--seg-hogar); }
.badge-seguro--salud      { background: var(--seg-salud); }
.badge-seguro--vida       { background: var(--seg-vida); }
.badge-seguro--moto       { background: var(--seg-moto); }
.badge-seguro--empresa    { background: var(--seg-empresa); }
.badge-seguro--otros      { background: var(--seg-otros); }
.badge-seguro--respcivil  { background: var(--seg-resp-civil); }
.badge-seguro--agro       { background: var(--seg-agro); }

/* Separador vertical de sección en tabla */
.table-admin th.left-border,
.table-admin td.left-border {
  border-left: 2px solid var(--border) !important;
}

/* Botones de acciones en tabla */
.table-admin td a.like {
  color: var(--brand-500) !important;
  vertical-align: middle;
}
.table-admin td a.like:hover {
  color: var(--brand-700) !important;
}
.table-admin td a.like i {
  vertical-align: middle;
}

/* Avisos en la columna de acciones (p.ej. dato roto): no son enlaces, son un span,
   asi que necesitan la misma alineacion que los a.like para no descolgarse de la
   fila. El color lo pone quien lo pinta (aqui no, para no tapar el rojo del aviso). */
.table-admin td span.like {
  vertical-align: middle;
}
.table-admin td span.like i {
  vertical-align: middle;
}

/* Iconos de orden de bootstrap-table — la librería no carga su CSS propio;
   el proyecto los tiene definidos en micappital.css bajo .tabla-ajax.
   Los replicamos aquí bajo .table-admin para no depender de esa clase. */
.table-admin thead th .sortable {
  cursor: pointer;
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 22px;
  filter: grayscale(1) brightness(0.75);
}
.table-admin thead th .both {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
}
.table-admin thead th .asc {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
}
.table-admin thead th .desc {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=');
}

/* Paginación — página activa con el color del topAdmin */
.table-admin-wrap .fixed-table-pagination .pagination > .active > a,
.table-admin-wrap .fixed-table-pagination .pagination > .active > span,
.fixed-table-pagination .pagination > .active > a,
.fixed-table-pagination .pagination > .active > span {
  background-color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: #fff !important;
}
.table-admin-wrap .fixed-table-pagination .pagination > li > a:hover,
.fixed-table-pagination .pagination > li > a:hover {
  background-color: var(--brand-050) !important;
  border-color: var(--brand-500) !important;
  color: var(--brand-900) !important;
}


/* ==========================================================================
   TOGGLE SWITCH
   Uso: <label class="toggle-switch"><input type="checkbox" id="..."><span class="toggle-switch__track"></span></label>
   ========================================================================== */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--table-head-size);
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-system);
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch__track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--color-neutral-fg);
  border-radius: 10px;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.toggle-switch input:checked + .toggle-switch__track {
  background: var(--brand-500);
}

.toggle-switch input:checked + .toggle-switch__track::after {
  transform: translateX(16px);
}


/* ==========================================================================
   FORMULARIOS
   Labels consistentes, estados de error explícitos.
   ========================================================================== */

.form-admin {
  font-family: var(--font-system);
  font-size: var(--form-input-size);
  color: var(--ink);
}

.form-admin__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--form-gap);
}

.form-admin__label {
  font-size: var(--form-label-size);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.form-admin__label--optional::after {
  content: " (opcional)";
  font-weight: 400;
  color: var(--muted);
}

.form-admin__input,
.form-admin__select,
.form-admin__textarea {
  height: var(--form-input-height);
  padding: 0 var(--sp-3);
  font-size: var(--form-input-size);
  font-family: var(--font-system);
  color: var(--ink);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}

.form-admin__textarea {
  height: auto;
  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
  min-height: 80px;
}

.form-admin__input:hover,
.form-admin__select:hover,
.form-admin__textarea:hover {
  border-color: var(--brand-700);
}

.form-admin__input:focus,
.form-admin__select:focus,
.form-admin__textarea:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(0, 128, 104, 0.15);
  outline: none;
}

/* Error */
.form-admin__input--error,
.form-admin__select--error {
  border-color: var(--color-negative-fg);
}
.form-admin__input--error:focus,
.form-admin__select--error:focus {
  box-shadow: 0 0 0 3px rgba(165, 35, 29, 0.15);
}

.form-admin__error-msg {
  font-size: var(--text-xs);
  color: var(--color-negative-fg);
  font-weight: 500;
  margin-top: var(--sp-1);
}

.form-admin__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--sp-1);
}

/* Deshabilitado */
.form-admin__input:disabled,
.form-admin__select:disabled,
.form-admin__textarea:disabled {
  background: var(--surface);
  color: var(--muted);
  cursor: not-allowed;
}


/* ==========================================================================
   ALERTAS / BANNERS
   ========================================================================== */

.alert-admin {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-size: var(--text-base);
  line-height: var(--leading);
}

.alert-admin--positive {
  background: var(--color-positive-bg);
  color: var(--color-positive-fg);
  border-color: var(--color-positive-fg);
}

.alert-admin--attention {
  background: var(--color-attention-bg);
  color: var(--color-attention-fg);
  border-color: var(--color-attention-fg);
}

.alert-admin--negative {
  background: var(--color-negative-bg);
  color: var(--color-negative-fg);
  border-color: var(--color-negative-fg);
}

.alert-admin--neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
  border-color: var(--border);
}


/* ==========================================================================
   FILAS DE TABLA — RESALTADO POR COLOR
   Uso: <tr class="fila-verde"> o <tr class="fila-roja"> etc.
   Texto siempre oscuro sobre fondo pastel — nunca texto blanco.
   Reemplaza: .filaEco, .filaFinect, .filaWarning, .filaDanger (micappital.css)
   ========================================================================== */

.fila-verde {
  background: #E6F9EC !important;
  color: #1A7232 !important;
  box-shadow: inset 3px 0 0 #259A45;
}
.fila-verde td { color: #1A7232 !important; }

.fila-amarilla {
  background: #FFFBD6 !important;
  color: #7A5C00 !important;
  box-shadow: inset 3px 0 0 #C89600;
}
.fila-amarilla td { color: #7A5C00 !important; }

.fila-roja {
  background: #FDECEC !important;
  color: #A5231D !important;
  box-shadow: inset 3px 0 0 #A5231D;
}
.fila-roja td { color: #A5231D !important; }

.fila-azul {
  background: #E3EEFB !important;
  color: #1A4E8A !important;
  box-shadow: inset 3px 0 0 #2E6099;
}
.fila-azul td { color: #1A4E8A !important; }

.fila-morada {
  background: #F3EDFB !important;
  color: #5A2480 !important;
  box-shadow: inset 3px 0 0 #7832A8;
}
.fila-morada td { color: #5A2480 !important; }

/* SINGULARCOVER / partner especial — fondo verde oscuro, texto blanco */
.fila-singularcover {
  background: #00964e !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 #006b38;
}
.fila-singularcover td { color: #fff !important; }
.fila-singularcover td a.like { color: rgba(255,255,255,0.9) !important; }
.fila-singularcover td a.like:hover { color: #fff !important; }

/* Celdas de rentabilidad — td.cell-rent-* tiene especificidad (0,1,1), igual que
   .fila-* td, pero al ir después en el fichero gana en la cascada */
td.cell-rent-positiva { background: #E6F9EC !important; color: #1A7232 !important; font-weight: 600 !important; }
td.cell-rent-negativa { background: #FDECEC !important; color: #A5231D !important; font-weight: 600 !important; }

/* Alta reciente — cliente dado de alta en los últimos 7 días */
.fila-alta-reciente {
  background: var(--brand-050) !important;
  color: var(--brand-900) !important;
  box-shadow: inset 3px 0 0 var(--brand-500);
}
.fila-alta-reciente td { color: var(--brand-900) !important; }


/* ==========================================================================
   CABECERO DE TARJETA DE SEGURO (.seg-card__header)
   Usado en editarSeguros.php — cuatro estados semánticos.
   Reemplaza: cabeceroCaja1 / cabeceroCaja6 / cabeceroWarning / cabeceroCajaDesactivada.
   ========================================================================== */

.seg-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 10px 14px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-system);
}

/* Asesorado — botón primario: brand-500 sólido, texto blanco */
.seg-card__header--asesorado {
  background: var(--brand-500) !important;
  border-bottom: 3px solid var(--brand-700) !important;
  color: #fff !important;
}

/* No asesorado — teal suave */
.seg-card__header--pendiente {
  background: var(--brand-050) !important;
  border-bottom: 3px solid var(--brand-500) !important;
  color: var(--brand-900) !important;
}

/* Póliza emitida incompleta — misma base que pendiente, borde ámbar */
.seg-card__header--warning {
  background: var(--brand-050) !important;
  border-bottom: 3px solid var(--color-attention-fg) !important;
  color: var(--brand-900) !important;
}

/* Pendiente de renovar — misma base que pendiente, borde naranja */
.seg-card__header--renovar {
  background: var(--brand-050) !important;
  border-bottom: 3px solid #D98A6A !important;
  color: var(--brand-900) !important;
}

/* Inactivo / finalizado — todo apagado, no compite con activos */
.seg-card__header--inactivo {
  background: var(--surface) !important;
  border-bottom: 3px solid #C8CDD6 !important;
  color: var(--muted) !important;
}


/* ==========================================================================
   ZONA DE CARGA DE ARCHIVOS (.dropzone-admin)
   Reemplaza los inline styles hardcodeados en editarSeguros.php.
   ========================================================================== */

.dropzone-admin {
  border: 2px dashed var(--brand-500);
  border-radius: var(--border-radius);
  background: var(--brand-050);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dropzone-admin:hover,
.dropzone-admin.dragover {
  background: #d4ecec;
  border-color: var(--brand-700);
}

.dropzone-admin i {
  font-size: 28px;
  color: var(--brand-700);
  display: block;
  margin-bottom: 8px;
}

.dropzone-admin strong {
  font-size: 14px;
  color: var(--ink);
}

.dropzone-admin .dropzone-admin__hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: inline-block;
}


/* ==========================================================================
   TARJETAS EN MÓVIL — render propio (.cards-movil)
   Breakpoint móvil = 768px. Bajo ese ancho, las vistas de tabla densa
   (buscador, buscadorSeguros, …) ocultan la tabla y muestran una tarjeta por
   fila que pinta el JS de la vista reutilizando sus formatters. Aquí solo vive
   el estilo. La tabla lleva .table-admin-wrap.oculta-movil y las tarjetas van
   en un contenedor .cards-movil.activa; el @media decide cuál se ve. Así no
   dependemos de los contenedores de bootstrap-table (sin scroll interno).
   ========================================================================== */
.cards-movil { display: none; }
.filtro-movil-label { display: none; } /* solo visibles en móvil (ver #filtros1 @media) */

/* Separación del botón Filtrar respecto al campo anterior en los filtros de tabla
   (#filtros1 con <table>). Las variantes flex ya usan gap. En móvil se anula (@media). */
#filtros1 td:last-child { padding-left: 10px; }

/* Cabecera "Filtros" colapsable: la inyecta filtrosMovil.js en cada contenedor
   de filtros. En escritorio no se ve; el comportamiento (sticky/colapso) va en el
   @media de más abajo. */
.filtros-toggle { display: none; }

@media (max-width: 768px) {
  .table-admin-wrap.oculta-movil,
  .oculta-movil { display: none; }
  .cards-movil.activa { display: flex; flex-direction: column; gap: var(--sp-3); }

  .cm-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3);
  }
  .cm-card.cm-fila-verde    { border-left: 3px solid var(--brand-500); }
  .cm-card.cm-fila-azul     { border-left: 3px solid #2E6099; }
  .cm-card.cm-fila-roja     { border-left: 3px solid var(--color-negative-fg); }
  .cm-card.cm-fila-amarilla { border-left: 3px solid var(--color-attention-fg); }

  /* Nombre y acciones en líneas separadas: con nombres largos se solapaban */
  .cm-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .cm-head-main { min-width: 0; }
  .cm-nombre { margin: 0; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
  .cm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

  .cm-acciones { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; order: -1; }
  .cm-acciones a.like {
    min-width: 32px; height: 32px; flex-shrink: 0; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-500) !important; white-space: nowrap;
  }
  .cm-acciones a.like:hover { background: var(--brand-050); color: var(--brand-700) !important; }

  /* Avisos (span, no enlace): misma caja que los botones, sin hover ni color propio */
  .cm-acciones span.like {
    min-width: 32px; height: 32px; flex-shrink: 0; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
  }

  .cm-contacto { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-3); font-size: var(--text-base); color: var(--muted); }
  .cm-contacto span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-contacto i { width: 16px; text-align: center; margin-right: 8px; }

  .cm-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
    margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  }
  .cm-stats.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cm-stats > div { min-width: 0; }
  .cm-stat-val {
    font-size: var(--text-base); font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cm-stat-val.cm-pos { color: var(--color-positive-fg); }
  .cm-stat-val.cm-neg { color: var(--color-negative-fg); }
  .cm-stat-cap { font-size: var(--text-xs); color: var(--muted); }

  .cm-seguros { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
  .cm-segrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .cm-seglabel { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .cm-segprima { margin-left: auto; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* Línea de metadatos al pie (origen, fecha, póliza…) con iconos, sin etiquetas */
  .cm-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted); }
  .cm-meta span { display: inline-flex; align-items: center; }
  .cm-meta i { margin-right: 6px; }
  .cm-meta-lab { color: var(--muted); font-weight: 600; margin-right: 4px; }

  /* Fila de botones de acción al pie de la tarjeta (ej. Cobros: Perdonar/Cobrar) */
  .cm-botones { display: flex; gap: 8px; margin-top: var(--sp-3); }
  .cm-botones .btn-admin { flex: 1; justify-content: center; }

  .cm-vacio { color: var(--muted); text-align: center; padding: var(--sp-4); }

  /* Tablas con paginación en servidor: ocultar la tabla interna pero conservar
     la paginación (para poder navegar páginas en móvil). Las tarjetas van en un
     #cardsMovil colocado ANTES de .table-admin-wrap. */
  .table-admin-wrap.solo-cards-movil .fixed-table-container { border: none; box-shadow: none; background: transparent; }
  .table-admin-wrap.solo-cards-movil .fixed-table-body,
  .table-admin-wrap.solo-cards-movil .fixed-table-toolbar,
  .table-admin-wrap.solo-cards-movil .fixed-table-header,
  .table-admin-wrap.solo-cards-movil .fixed-table-footer { display: none; }
  .table-admin-wrap.solo-cards-movil .fixed-table-pagination { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-2) 0; }
  .table-admin-wrap.solo-cards-movil .fixed-table-pagination > div { float: none !important; width: auto; margin: 0; }
  .table-admin-wrap.solo-cards-movil .fixed-table-pagination .pagination { flex-wrap: wrap; justify-content: center; margin: 0; }

  /* Filtro (#filtros1) usable en móvil: campos y botón a ancho completo, apilados.
     Genérico para todas las vistas de tabla (buscadores, adminSeguros, listaSeguros…).
     El <thead> se oculta y filtrosMovil.js inyecta cada título como .filtro-movil-label
     justo encima de su control, para no perder qué etiqueta va con qué campo. */
  /* width:100% !important porque algunas vistas (ej. clientesMejorado) traen
     width:10%/20% en el style inline de cada <td>, que si no gana y estruja los campos */
  #filtros1 table, #filtros1 tbody, #filtros1 tr, #filtros1 td { display: block; width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; }
  #filtros1 thead { display: none; }
  #filtros1 .filtro-movil-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--muted); margin: var(--sp-3) 0 4px; }
  #filtros1 .form-admin__input, #filtros1 .form-admin__select,
  #filtros1 input:not([type="checkbox"]):not([type="radio"]), #filtros1 select { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
  #filtros1 .btn-admin { width: 100%; margin-top: var(--sp-3) !important; }

  /* listaSeguros: el texto "En vigor" y su toggle en una línea, centrados.
     El botón Filtrar sigue abajo a ancho completo (regla general de arriba). */
  #filtros1 .td-envigor {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: var(--sp-3);
  }
  #filtros1 .td-envigor .filtro-movil-label { margin: 0; }

  /* --- Cabecera de filtros colapsable + sticky (todas las vistas) --- */
  /* El contenedor de filtros se queda pegado bajo la barra del topAdmin. */
  .filtros-colapsable {
    position: sticky;
    top: var(--shell-topbar-h, 48px);
    z-index: 25;
    background: #f1f1f1;
    border-radius: 10px;
    padding: 6px 12px 10px;
  }
  /* Si el filtro desplegado es más alto que la pantalla, scroll dentro del panel */
  .filtros-colapsable:not(.colapsado) {
    max-height: calc(100vh - var(--shell-topbar-h, 48px) - 24px);
    overflow-y: auto;
  }
  /* El toggle queda fijo arriba del panel mientras el cuerpo hace scroll */
  .filtros-toggle {
    position: sticky; top: 0; z-index: 1; background: #f1f1f1;
  }
  /* Cabecera-toggle: se ve como una etiqueta de campo (el título del primer
     filtro, p. ej. "Buscar") con una flecha, no como una barra/botón extra. */
  .filtros-toggle {
    display: flex; align-items: center; justify-content: space-between;
    box-sizing: border-box;
    cursor: pointer; user-select: none;
    padding: 2px 0 4px;
    /* mismo estilo que .filtro-movil-label */
    font-size: var(--text-sm); font-weight: 600; color: var(--muted);
  }
  .filtros-toggle::after {
    content: "\f078"; font-family: FontAwesome; font-size: 10px;
    color: var(--muted); transition: transform .2s;
  }
  .filtros-colapsable:not(.colapsado) .filtros-toggle::after { transform: rotate(180deg); }
  /* Desplegado: el toggle hace de etiqueta del primer campo → poca separación
     con su control, y se oculta la etiqueta duplicada que inyecta el propio JS. */
  .filtros-colapsable:not(.colapsado) .filtros-toggle { margin-bottom: 4px; }
  #filtros1 tr td:first-child .filtro-movil-label { display: none; }
  /* Colapsado: se oculta todo el cuerpo, solo queda la barra */
  .filtros-colapsable.colapsado > *:not(.filtros-toggle) { display: none !important; }
  /* Al colapsar no queremos el margen inferior original del contenedor */
  .filtros-colapsable.colapsado { margin-bottom: 8px !important; }
}