/* Cuentas CVU: estilos propios de la pantalla (cuentas.html).
   Solo tokens de estilos.css; todas las clases llevan el prefijo cvu-. */

/* Aviso de capacidad arriba de todo */
.cvu-aviso { margin-bottom: var(--e-6); }
.cvu-aviso .aviso__titulo { font-size: var(--t-15); }
.cvu-aviso .aviso__texto { max-width: 92ch; }

/* ---------- Barra de herramientas: filtros, búsqueda y cambio de vista ---------- */
.cvu-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.cvu-herramientas .filtros { margin-bottom: 0; }
.cvu-herramientas .buscador { flex: 1 1 220px; max-width: 340px; }
.cvu-herramientas .buscador .campo__control { padding-right: 12px; }

/* Pestañas con forma de control segmentado (Tarjetas / Tabla) */
.pestanas__lista.cvu-vistas {
  margin: 0 0 0 auto; padding: 3px; gap: 2px; border-bottom: 0;
  background: var(--superficie-3); border-radius: var(--radio-2); overflow: visible; flex: none;
}
.cvu-vistas .pestana { min-height: 34px; padding: 0 var(--e-3); border-radius: 7px; font-size: var(--t-13); font-weight: 600; gap: 6px; }
.cvu-vistas .pestana .ico { width: 16px; height: 16px; }
.cvu-vistas .pestana:hover { background: color-mix(in srgb, var(--superficie) 55%, transparent); }
.cvu-vistas .pestana[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.cvu-vistas .pestana[aria-selected="true"]::after { display: none; }
.cvu-vistas .pestana:focus-visible { outline-offset: 0; }

/* ---------- Tarjeta de cuenta CVU (versión completa) ---------- */
.cvu-grilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.cvu { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); }
.cvu__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.cvu__identidad { min-width: 0; }
.cvu__titulo { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cvu__apodo { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cvu__titulo .btn { color: var(--texto-3); }
.cvu__titulo .btn:hover { color: var(--texto); }
.cvu__sucursal { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--t-13); color: var(--texto-2); }
.cvu__sucursal .ico { color: var(--texto-3); flex: none; }

.cvu__cifras { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-6); }
.cvu__etiqueta { display: block; font-size: var(--t-12); font-weight: 600; color: var(--texto-3); letter-spacing: 0.02em; }
.cvu__valor {
  display: block; font-family: var(--fuente-titulo); font-size: var(--t-28); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cvu__valor small { font-size: 0.55em; font-weight: 600; color: var(--texto-3); letter-spacing: 0; }
.cvu__valor--chico { font-size: var(--t-20); }
.cvu__cobros { text-align: right; }

/* Nota de estado dentro de la tarjeta (qué le pasa a esta cuenta en la rotación) */
.cvu__nota {
  display: flex; gap: var(--e-2); align-items: flex-start; padding: 10px var(--e-3);
  border-radius: var(--radio-2); border: 1px solid var(--borde); background: var(--superficie-2);
  font-size: var(--t-13); color: var(--texto-2); line-height: 1.5;
}
.cvu__nota .ico { flex: none; margin-top: 2px; color: var(--texto-3); }
.cvu__nota strong { color: var(--texto); }
.cvu__nota--marca { background: var(--primario-suave); border-color: transparent; }
.cvu__nota--marca .ico { color: var(--primario-texto); }
.cvu__nota--alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.cvu__nota--alerta .ico { color: var(--alerta); }
.cvu__nota--peligro { background: var(--peligro-fondo); border-color: var(--peligro-borde); }
.cvu__nota--peligro .ico { color: var(--peligro); }
.cvu__nota--neutro { background: var(--neutro-fondo); border-color: var(--neutro-borde); }
.cvu__nota--neutro .ico { color: var(--neutro); }

/* Datos para transferir (CVU, alias, titular) */
.cvu__datos { margin: 0; display: grid; border-top: 1px solid var(--borde); }
.cvu__datos > div {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--e-3);
  min-height: 42px; padding: 3px 0; border-bottom: 1px dashed var(--borde);
}
.cvu__datos dt { font-size: var(--t-12); font-weight: 600; color: var(--texto-3); }
.cvu__datos dd { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: var(--t-14); }
.cvu__datos dd > span { min-width: 0; overflow-wrap: anywhere; }
.cvu__datos .btn { flex: none; margin-right: -6px; }
.cvu__numero { font-size: var(--t-14); letter-spacing: 0.04em; color: var(--texto); }

.cvu__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: auto; }
.cvu__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Estados de la tarjeta */
.cvu--pausada .tope__relleno { opacity: 0.5; }
.cvu--pausada .cvu__valor { color: var(--texto-2); }

/* Tope propio de cada cuenta, debajo de la barra */
.cvu__tope-cifras { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--e-3); }
.cvu__tope-cifras > :last-child { color: var(--texto-2); font-weight: 600; }

/* Estados que pone Lucky Cobros (Con demora, Bloqueada): badges juntos y aviso dentro de la tarjeta */
.cvu__cabecera { flex-wrap: wrap; }
.cvu__identidad { flex: 1 1 9rem; }
.cvu-estados { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.cvu-tabla .cvu-estados { justify-content: flex-start; margin-left: 0; margin-bottom: 2px; }
.cvu__aviso { padding: 10px var(--e-3); border-radius: var(--radio-2); font-size: var(--t-13); line-height: 1.5; }
.cvu__aviso > .ico { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.cvu__aviso-motivo { color: var(--texto); font-weight: 600; }
.cvu--demora { border-color: var(--alerta-borde); }
.cvu--bloqueada { border-color: var(--peligro-borde); }
.cvu--bloqueada .tope__relleno { opacity: 0.5; }
.cvu--bloqueada .cvu__valor { color: var(--texto-2); }

/* Chip "Con problemas": la cantidad se pinta de alerta cuando hay alguna */
.cvu-chip-problemas[data-hay] .chip__cuenta {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radio-total);
  background: var(--alerta-fondo); color: var(--alerta); border: 1px solid var(--alerta-borde); font-weight: 700;
}

/* Pedido de cuenta nueva en curso */
.cvu-pedido { margin-bottom: var(--e-4); align-items: center; }
.cvu-pedido > .ico { align-self: flex-start; margin-top: 2px; }
.cvu-pedido__ref { flex: none; }

/* Leyenda de estados */
.cvu-leyenda__grupo { margin-bottom: calc(var(--e-2) * -1); font-size: var(--t-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.cvu-leyenda { margin: 0; display: grid; gap: var(--e-3); }
.cvu-leyenda > div { display: grid; gap: 4px; justify-items: start; }
.cvu-leyenda dd { margin: 0; font-size: var(--t-14); color: var(--texto-2); line-height: 1.5; }
.cvu-leyenda a { color: var(--primario-texto); }

/* Estado vacío del filtro */
.cvu-vacio { margin-top: 0; }

/* Leyenda de la raya del 90 % */
.cvu-raya { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3); }
.cvu-raya__muestra { position: relative; flex: none; width: 34px; height: 8px; border-radius: var(--radio-total); background: var(--pista); }
.cvu-raya__muestra::after { content: ""; position: absolute; left: 90%; top: -3px; bottom: -3px; width: 2px; background: var(--texto-3); border-radius: 1px; }

/* ---------- Vista en tabla ---------- */
.cvu-tabla { font-size: var(--t-13); }
.cvu-tabla td { vertical-align: middle; }
.cvu-tabla .copiable .mono { color: var(--texto); font-size: var(--t-13); }
.cvu-tope-celda { min-width: 108px; gap: 5px; }
.cvu-tabla th, .cvu-tabla td { padding-left: 8px; padding-right: 8px; }
.cvu-tabla th:first-child, .cvu-tabla td:first-child { padding-left: 14px; }
.cvu-tope-celda .tope__cabecera { color: var(--texto); }
.cvu-acciones-tabla { display: inline-flex; gap: 2px; }
.cvu-btn-reactivar { color: var(--primario-texto); }

/* ---------- Rotación ---------- */
.cvu-rotacion { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.cvu-rotacion__principal { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-6); min-width: 0; }
.cvu-rotacion__lateral {
  padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); min-width: 0;
  background: var(--superficie-2); border-left: 1px solid var(--borde); border-radius: 0 var(--radio-3) var(--radio-3) 0;
}
.cvu-rotacion__lateral h3 { font-size: var(--t-15); }
.cvu-rotacion__encabezado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-4); align-items: start; }
.cvu-rotacion__ico { width: 48px; height: 48px; border-radius: var(--radio-3); display: grid; place-items: center; background: var(--primario-suave); color: var(--primario-texto); }
.cvu-rotacion__textos { display: grid; gap: var(--e-2); min-width: 0; }
.cvu-rotacion__lema { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--texto); max-width: 44ch; }
.cvu-rotacion__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-14); color: var(--texto-2); }
.cvu-rotacion__switch {
  min-height: 44px; padding: 0 var(--e-4) 0 var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2);
  background: var(--superficie); font-weight: 600; white-space: nowrap;
}
.cvu-rotacion__switch:has(input:focus-visible) { border-color: var(--foco); }

/* Los tres pasos de la rotación */
.cvu-pasos-rot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.cvu-pasos-rot li { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2); min-width: 0; }
.cvu-pasos-rot__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--texto); color: var(--fondo); font-size: var(--t-12); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cvu-pasos-rot strong { display: block; font-size: var(--t-14); line-height: 1.35; }
.cvu-pasos-rot p { margin-top: 2px; font-size: var(--t-13); color: var(--texto-2); }

.cvu-regla fieldset { padding: var(--e-4); }
.cvu-regla .opcion-tarjeta { padding: var(--e-3) var(--e-4); }
.cvu-regla__aviso { align-content: start; }

/* Fila de asignación */
.cvu-orden { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.cvu-orden__item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  padding: 10px var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--superficie);
}
.cvu-orden__item--actual { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.cvu-orden__pos {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--superficie-3); color: var(--texto-2); font-size: var(--t-13); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cvu-orden__item--actual .cvu-orden__pos { background: var(--primario); color: var(--en-primario); }
.cvu-orden__nombre { display: block; font-size: var(--t-14); font-weight: 600; }
.cvu-orden__meta { display: block; font-size: var(--t-12); color: var(--texto-3); }
.cvu-orden--fuera .cvu-orden__item { background: transparent; border-style: dashed; }
.cvu-orden--fuera .cvu-orden__pos { background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--texto-3); }
.cvu-orden__titulo { margin-top: var(--e-1); margin-bottom: calc(var(--e-2) * -1); font-size: var(--t-11); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.cvu-rotacion__lateral .divisor { margin: var(--e-1) 0; }

/* Reparto del mes: barra apilada */
.cvu-reparto { display: flex; gap: 2px; height: 14px; border-radius: var(--radio-total); overflow: hidden; }
.cvu-reparto > span { width: var(--parte); background: var(--color); }
.cvu-reparto__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-13); }
.cvu-reparto__leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-2); }
.cvu-reparto__leyenda .num { text-align: right; white-space: nowrap; }
.cvu-reparto__leyenda li > :last-child { min-width: 4.4em; }
.cvu-reparto__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--color); }

/* ---------- Escala del tope ---------- */
.cvu-escala { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); font-size: var(--t-14); color: var(--texto-2); }
.cvu-escala li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.cvu-escala strong { color: var(--texto); }
.cvu-escala__muestra { margin-top: 7px; width: 28px; height: 8px; border-radius: var(--radio-total); background: var(--color); }

/* ---------- Modales ---------- */
.cvu-opcion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); flex: 1; min-width: 0; }
.cvu-opcion__fin { align-self: center; }
.cvu-lista-efectos { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-2); color: var(--texto-2); font-size: var(--t-14); }
.cvu-despues { background: var(--superficie-2); box-shadow: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cvu-rotacion { grid-template-columns: minmax(0, 1fr); }
  .cvu-rotacion__lateral { border-left: 0; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio-3) var(--radio-3); }
}

@media (max-width: 767px) {
  .cvu-herramientas .buscador { max-width: none; flex-basis: 100%; order: 2; }
  .cvu-herramientas .filtros { order: 1; }
  .pestanas__lista.cvu-vistas { order: 3; margin-left: 0; }
  .cvu-rotacion__encabezado { grid-template-columns: auto minmax(0, 1fr); }
  .cvu-rotacion__switch { grid-column: 1 / -1; justify-self: start; }
  .cvu-rotacion__lema { font-size: var(--t-18); }
  .cvu-pasos-rot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .cvu-pedido { flex-wrap: wrap; }
  .cvu-pedido .aviso__cuerpo { flex: 1 1 calc(100% - 40px); }
  .cvu-pedido__ref { margin-left: 32px; }
  .cvu, .cvu-rotacion__principal, .cvu-rotacion__lateral { padding: var(--e-4); }
  .cvu-rotacion__principal { gap: var(--e-5); }
  .cvu__valor { font-size: var(--t-24); }
  .cvu__valor--chico { font-size: var(--t-18); }
  .cvu__pie { flex-direction: column; align-items: stretch; }
  .cvu__acciones .btn { flex: 1 1 auto; }
  /* tabla como tarjetas */
  .cvu-tabla .cvu-vacia-movil { display: none !important; }
  .tabla--tarjetas td .cvu-tope-celda { min-width: 0; width: 100%; justify-self: stretch; }
  .cvu-tabla tfoot tr { margin-top: var(--e-3); background: var(--superficie-2); }
  .cvu-tabla td.acciones { width: 100%; display: block; text-align: left; padding-top: var(--e-2); }
  .cvu-tabla .cvu-acciones-tabla { gap: var(--e-2); }
}

@media (pointer: coarse) {
  .cvu-vistas .pestana { min-height: 40px; }
}

/* Tooltips de las acciones de la tabla: abren hacia la izquierda para no salirse del contenedor */
.cvu-acciones-tabla [data-tooltip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.cvu-acciones-tabla [data-tooltip]:hover::after,
.cvu-acciones-tabla [data-tooltip]:focus-visible::after { transform: translate(0, 0); }