/* ============================================================================
   CuentaFácil · Sistema de interfaz
   ----------------------------------------------------------------------------
   Un solo lugar para colores, tipografía, botones, estados y tablas.

   Antes de este archivo, el degradado verde de la marca estaba escrito inline
   en unos quince blades con valores ligeramente distintos, y los estados usaban
   `style="color: orange"` suelto en cada vista. Todo eso vive acá ahora.

   Reglas de uso:
   · Todo va con prefijo `cf-`. No pisa nada de Bootstrap.
   · Ningún color nuevo se escribe a mano en un blade: se agrega un token acá.
   · Todo control tocable mide mínimo 44px de alto (umbral en que un dedo acierta).

   Se carga desde resources/views/layouts/app.blade.php
   ========================================================================== */

/* Los componentes `cf-` calculan sus anchos contando el padding. Sin esto,
   un `width: 100%` más padding lateral se desborda del contenedor: las tablas
   en modo tarjeta se salen por la derecha y el texto queda cortado.
   Bootstrap ya lo aplica globalmente, pero este archivo no debe depender de eso. */
/* Incluye los descendientes: dentro de `.cf-tabla` los `<td>` no llevan clase
   propia, así que un selector que solo mire `[class^="cf-"]` los deja por fuera
   y se desbordan igual. */
[class^="cf-"],
[class*=" cf-"],
[class^="cf-"] *,
[class*=" cf-"] *,
[class^="cf-"]::before,
[class*=" cf-"]::before,
[class^="cf-"]::after,
[class*=" cf-"]::after {
  box-sizing: border-box;
}

:root {
  /* ── Marca ───────────────────────────────────────────────────────────── */
  --cf-lima:        #C9FB4A;  /* Solo relleno y acentos. NUNCA texto sobre blanco. */
  --cf-verde:       #568C1D;  /* Primario de marca. */
  --cf-verde-deep:  #2A4B0D;  /* Texto de marca sobre fondo claro. Contraste AA. */
  --cf-verde-soft:  #EDFBC9;  /* Fondos suaves, resaltados. */

  /* El degradado de encabezado va oscuro, con el texto en blanco. Al revés
     —lima de fondo— el título caía sobre el extremo #C9FB4A y quedaba en 1.2:1;
     oscurecer el texto lo salva en el borde izquierdo, pero un título largo
     llega al verde y se apaga otra vez. Así contrasta parejo en todo el ancho
     y la lima queda de acento, que es para lo que sirve. */
  --cf-grad-marca:  linear-gradient(30deg, #2A4B0D 12%, #568C1D 71%);
  /* El original, para rellenos y acentos. Nunca detrás de texto. */
  --cf-grad-lima:   linear-gradient(30deg, #C9FB4A 12%, #568C1D 71%);
  --cf-grad-accion: linear-gradient(90deg, #4CAF50, #2E7D32);

  /* ── Estados semánticos ──────────────────────────────────────────────── */
  /* Separados de la marca a propósito: el verde de CuentaFácil y el verde de
     "esto salió bien" son cosas distintas y no deben ser el mismo token. */
  --cf-ok:            #1F7A3D;
  --cf-ok-bg:         #E7F5EC;
  --cf-pendiente:     #B87503;
  --cf-pendiente-bg:  #FDF4E3;
  --cf-devuelta:      #B3261E;
  --cf-devuelta-bg:   #FCEBEA;
  --cf-info:          #1B5FB0;
  --cf-info-bg:       #E8F0FB;

  /* ── Neutros ─────────────────────────────────────────────────────────── */
  /* Con una leve inclinación al verde para que convivan con la marca en vez
     de verse como un gris de plantilla. */
  --cf-tinta:       #131A0E;
  --cf-tinta-suave: #4A5443;
  --cf-tinta-tenue: #7C8574;
  --cf-linea:       #E0E4D8;
  --cf-linea-suave: #EFF1E9;
  --cf-fondo:       #F7F8F3;
  --cf-superficie:  #FFFFFF;

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --cf-fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fija. Se acabaron los `font-size: 2rem` puntuales. */
  --cf-txt-xs: 13px;
  --cf-txt-sm: 15px;
  --cf-txt-md: 17px;
  --cf-txt-lg: 20px;
  --cf-txt-xl: 26px;

  /* ── Espaciado, bordes, sombras ──────────────────────────────────────── */
  --cf-esp-1: 4px;
  --cf-esp-2: 8px;
  --cf-esp-3: 12px;
  --cf-esp-4: 16px;
  --cf-esp-5: 24px;
  --cf-esp-6: 32px;

  --cf-radio:    8px;
  --cf-radio-sm: 6px;
  --cf-radio-lg: 12px;

  --cf-sombra:    0 1px 3px rgba(19, 26, 14, 0.08);
  --cf-sombra-md: 0 4px 12px rgba(19, 26, 14, 0.10);

  /* Altura mínima de cualquier cosa que se toque con el dedo. */
  --cf-tocable: 44px;
}


/* ============================================================================
   ENCABEZADO DE MARCA
   El degradado, definido una sola vez, y el puente para que los encabezados de
   Bootstrap que quedan en la app usen el mismo.
   ========================================================================== */

.cf-header-marca {
  background: var(--cf-grad-marca);
  color: var(--cf-superficie);
  font-size: var(--cf-txt-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-esp-3);
  padding: var(--cf-esp-3) var(--cf-esp-4);
}

.cf-header-marca__titulo {
  margin: 0;
  font-size: var(--cf-txt-md);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Puente con Bootstrap: 63 vistas siguen usando `.card-header` y no se van a
   migrar de una. Esta regla las alinea con el encabezado de marca sin tocar el
   build de Bootstrap; cf-ui.css carga después de app.css, así que gana.

   El `:not([class*="bg-"])` es lo que respeta a los encabezados que ya eligieron
   su propio fondo (`card-header bg-white`, `bg-primary`). No basta con que las
   utilidades `.bg-*` lleven !important: esas fijan `background-color`, y un
   color de fondo no tapa el `background-image` del degradado — sin el :not, un
   `bg-white` seguía saliendo verde. */
.card-header:not([class*="bg-"]) {
  background: var(--cf-grad-marca);
  color: var(--cf-superficie);
  border-bottom: none;
}

/* Los encabezados que sí eligieron fondo (`bg-primary`, `bg-light`…) tampoco
   lo estaban mostrando: las utilidades `.bg-*` fijan `background-color`, y eso
   no tapa el `background-image` del degradado que trae `.card-header`. Salían
   todos verdes, con el texto blanco sobre el extremo lima: 1.2:1. */
.card-header[class*="bg-"] {
  background-image: none;
}

/* `bg-primary` pide "el color primario". En esta app el primario es el verde de
   marca, no el azul de Bootstrap —que además daría 3.98:1 con texto blanco, o
   sea que dejarlo salir tampoco pasaría AA. */
.card-header.bg-primary {
  background: var(--cf-grad-marca);
  color: var(--cf-superficie);
  border-bottom: none;
}

/* Fondos claros: acá el problema no es el fondo sino el texto, que hereda el
   `color: white` de `.card-header` en app.css y desaparece. Los que ya traen
   `text-dark` en el marcado no cambian: esa utilidad lleva !important. */
.card-header.bg-light,
.card-header.bg-white {
  color: var(--cf-tinta);
}

/* La lima vuelve acá, de acento sobre el verde oscuro: los iconos del
   encabezado y nada más. */
.card-header:not([class*="bg-"]) > .fa,
.card-header:not([class*="bg-"]) .cf-header-icono {
  color: var(--cf-lima);
}


/* ============================================================================
   ESTADOS
   Reemplaza los `style="color: red|orange|green"` regados por los blades.
   Uso: <span class="cf-estado cf-estado--devuelta">DEVUELTA</span>
   ========================================================================== */

.cf-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--cf-txt-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.5;
}

/* El color de fondo hace el trabajo, no solo el color del texto: así el estado
   se reconoce de un vistazo y no depende de distinguir tonos. */
.cf-estado--ok         { color: var(--cf-ok);        background: var(--cf-ok-bg); }
.cf-estado--pendiente  { color: var(--cf-pendiente); background: var(--cf-pendiente-bg); }
.cf-estado--devuelta   { color: var(--cf-devuelta);  background: var(--cf-devuelta-bg); }
.cf-estado--info       { color: var(--cf-info);      background: var(--cf-info-bg); }
.cf-estado--neutro     { color: var(--cf-tinta-suave); background: var(--cf-linea-suave); }


/* ============================================================================
   BOTONES
   Siempre 44px de alto. Varios botones de hoy miden 30px.
   ========================================================================== */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-esp-2);
  min-height: var(--cf-tocable);
  padding: 0 var(--cf-esp-4);
  border: 1px solid transparent;
  border-radius: var(--cf-radio);
  font-family: var(--cf-fuente);
  font-size: var(--cf-txt-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.cf-btn:hover      { filter: brightness(0.94); text-decoration: none; }
.cf-btn:active     { filter: brightness(0.88); }

/* El color en hover lo fija cada variante, más abajo, y no aquí.
   Motivo: cuando el botón es un <a>, Bootstrap trae `a:hover { color: #1D68A7 }`
   con especificidad (0,1,1), que le gana a `.cf-btn` (0,1,0). El texto blanco
   de un botón principal se volvía azul sobre el verde y no se leía. Declarar
   el color en `.cf-btn--x:hover` sube a (0,2,0) y manda. */
.cf-btn:focus-visible {
  outline: 3px solid var(--cf-verde);
  outline-offset: 2px;
}

.cf-btn[disabled],
.cf-btn.cf-esta-cargando {
  opacity: 0.6;
  pointer-events: none;
}

.cf-btn--principal,
.cf-btn--principal:hover,
.cf-btn--principal:focus,
.cf-btn--principal:active {
  background: var(--cf-grad-accion);
  color: #FFFFFF;
}

.cf-btn--marca,
.cf-btn--marca:hover,
.cf-btn--marca:focus,
.cf-btn--marca:active {
  background: var(--cf-verde);
  color: #FFFFFF;
}

.cf-btn--secundario,
.cf-btn--secundario:hover,
.cf-btn--secundario:focus,
.cf-btn--secundario:active {
  background: var(--cf-superficie);
  color: var(--cf-verde-deep);
  border-color: var(--cf-linea);
}

/* El secundario va sobre blanco, así que oscurecerlo un 6% no se nota: no
   tenía señal de hover. Se tiñe de verde suave y marca el borde. */
.cf-btn--secundario:hover,
.cf-btn--secundario:focus {
  background: var(--cf-verde-soft);
  border-color: var(--cf-verde);
}

.cf-btn--peligro,
.cf-btn--peligro:hover,
.cf-btn--peligro:focus,
.cf-btn--peligro:active {
  background: var(--cf-devuelta);
  color: #FFFFFF;
}

/* Para filas de tabla y barras de acción: ícono solo, pero sigue midiendo 44px. */
.cf-btn--icono {
  width: var(--cf-tocable);
  padding: 0;
  flex-shrink: 0;
}

/* Ancho completo en móvil, donde el pulgar agradece el blanco de tiro.
   En pantalla grande vuelve a su ancho natural: un botón de 900px de ancho
   para decir "Documentos" se ve roto y obliga a recorrer la pantalla entera
   para llegar a él. */
.cf-btn--ancho { width: 100%; }

@media (min-width: 768px) {
  .cf-btn--ancho {
    width: auto;
    /* `width: auto` no basta dentro de un contenedor flex en columna: el
       estirado lo produce align-items: stretch del padre, no el ancho propio. */
    align-self: flex-start;
  }
}

.cf-btn-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-esp-2);
}

/* Grupo de acciones de una tarjeta: apiladas en móvil, en fila en escritorio. */
.cf-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-2);
}

@media (min-width: 768px) {
  .cf-acciones {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}


/* ============================================================================
   TARJETAS
   ========================================================================== */

.cf-card {
  background: var(--cf-superficie);
  border: 1px solid var(--cf-linea);
  border-radius: var(--cf-radio-lg);
  box-shadow: var(--cf-sombra);
  overflow: hidden;
}

.cf-card__cuerpo {
  padding: var(--cf-esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-3);
}

/* ── Tarjeta que se queda quieta y hace scroll por dentro ────────────────────
   En escritorio la tarjeta se ajusta al alto de la ventana: el encabezado y el
   pie (con el paginado) quedan siempre a la vista y lo único que se mueve es la
   lista. Antes había que recorrer toda la página para llegar al paginado, que
   vivía en otra tarjeta más abajo.

   `--cf-chrome` es lo que ocupa el navbar más el respiro del <main>. Se puede
   pisar por página si algún encabezado extra cambia esa cuenta.

   En móvil no aplica: un panel con scroll propio dentro de una página que
   también hace scroll es justo lo que atrapa el dedo. Ahí manda el flujo normal.
   ------------------------------------------------------------------------- */
.cf-card__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Contexto de apilamiento propio para toda la lista. `app.css` trae un
     `span { position: relative; z-index: 3 }` global —de Bootstrap heredado—,
     así que cada píldora de estado y cada número flotaban por encima del
     encabezado pegado y se veían montados sobre él al hacer scroll. Con el
     z-index: 0 acá, nada de adentro puede subir por encima del encabezado ni
     del pie, hoy ni cuando se agregue algo nuevo. */
  position: relative;
  z-index: 0;
}

.cf-card__pie {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cf-esp-3);
  padding: var(--cf-esp-3) var(--cf-esp-4);
  border-top: 1px solid var(--cf-linea);
  background: var(--cf-superficie);
}

@media (min-width: 768px) {
  .cf-card--pantalla {
    --cf-chrome: 170px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--cf-chrome));
    max-height: calc(100dvh - var(--cf-chrome));
  }

  /* `min-height: 0` es lo que permite encoger a un hijo flex: sin eso el área
     mantiene el alto de su contenido y el que hace scroll termina siendo la
     página, no la tarjeta. */
  .cf-card--pantalla .cf-card__scroll {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Encabezado y pie mantienen su alto: sin esto el reparto flex los aplasta
     cuando la lista es larga. */
  .cf-card--pantalla > .cf-header-marca,
  .cf-card--pantalla > .cf-card__pie {
    flex: 0 0 auto;
  }
}

.cf-card__titulo {
  margin: 0;
  font-size: var(--cf-txt-md);
  font-weight: 700;
  color: var(--cf-tinta);
}

/* Pares dato/valor dentro de una tarjeta. */
.cf-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cf-esp-2) var(--cf-esp-4);
  margin: 0;
  font-size: var(--cf-txt-sm);
}
.cf-datos dt { color: var(--cf-tinta-tenue); font-weight: 600; }
.cf-datos dd { margin: 0; color: var(--cf-tinta); font-variant-numeric: tabular-nums; }


/* ============================================================================
   MODAL DE DOCUMENTOS DE UNA CUENTA
   ----------------------------------------------------------------------------
   Lo comparten la bandeja de cuentas y la de contratos: es el mismo modal, con
   la lista de formatos a un lado y el documento al otro. Vive acá y no en cada
   pantalla porque copiado en las dos terminan divergiendo, que es de donde
   venía el desorden que esto reemplaza.
   Las dos columnas son celdas de una rejilla y no columnas de Bootstrap: así
   empiezan y terminan en la misma línea solas. Con `row`/`col` la lista iba
   centrada verticalmente y el visor pegado arriba, y ninguna cuadraba con la
   otra.
   ========================================================================== */

.cf-docs-modal .modal-dialog { max-width: min(1500px, 96vw); }

.cf-docs-modal .modal-content {
  height: 92vh;
  height: 92dvh;
  border: 0;
  border-radius: var(--cf-radio-lg);
  box-shadow: var(--cf-sombra-md);
  overflow: hidden;
}

.cf-docs-modal .modal-header { border-bottom: 0; }

/* Los botones de cerrar de la app son iconos claros sobre el verde de marca. */
.cf-docs__cerrar {
  width: var(--cf-tocable);
  height: var(--cf-tocable);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--cf-radio);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--cf-txt-lg);
  cursor: pointer;
  flex-shrink: 0;
}

.cf-docs__cerrar:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* Rejilla de dos celdas: las dos empiezan y terminan en la misma línea sin que
   nadie tenga que igualar alturas a mano. */
.cf-docs {
  display: grid;
  grid-template-columns: minmax(300px, 34%) 1fr;
  gap: var(--cf-esp-4);
  padding: var(--cf-esp-4);
  background: var(--cf-fondo);
  min-height: 0;   /* deja encoger a los hijos; sin esto scrollea el modal entero */
  overflow: hidden;
}

.cf-docs__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cf-superficie);
  border: 1px solid var(--cf-linea);
  border-radius: var(--cf-radio-lg);
  overflow: hidden;
}

.cf-docs__visor { padding: var(--cf-esp-3); gap: var(--cf-esp-3); }

/* La hoja: fondo neutro para que el papel blanco del PDF se recorte contra él
   igual que en el visor de la vista previa del contratista. */
.cf-docs__hoja {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--cf-radio);
  background: var(--cf-fondo);
  overflow: hidden;
}

.cf-docs__hoja > #pdfEmbed,
.cf-docs__hoja > #panelReevaluacion {
  width: 100%;
  height: 100%;
  border: 0;
}

.cf-docs__hoja > #panelReevaluacion {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  display: none;
  z-index: 2;
}

.cf-docs__acciones {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-3);
}

.cf-docs__botones { justify-content: flex-end; }

/* La hoja de un documento en el teléfono. */
.cf-hoja-doc .modal-content {
  border: 0;
  border-radius: var(--cf-radio-lg);
  overflow: hidden;
  box-shadow: var(--cf-sombra-md);
}

.cf-hoja-doc .modal-header { border-bottom: 0; }

.cf-hoja-doc__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-3);
  padding: var(--cf-esp-4);
  background: var(--cf-fondo);
}

.cf-hoja-doc__cuerpo .cf-estado { align-self: flex-start; }

.cf-hoja-doc__visor {
  height: 52vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cf-superficie);
  border: 1px solid var(--cf-linea);
  border-radius: var(--cf-radio);
  padding: var(--cf-esp-2);
}

/* Cada página al ancho del contenedor, una debajo de la otra. */
.cf-hoja-doc__visor canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto var(--cf-esp-2);
  box-shadow: var(--cf-sombra);
}

.cf-hoja-doc__aviso {
  margin: 0;
  padding: var(--cf-esp-4);
  text-align: center;
  font-size: var(--cf-txt-xs);
  color: var(--cf-tinta-tenue);
}


/* ============================================================================
   CABECERA DE UNA BANDEJA: TÍTULO Y BUSCADOR
   ----------------------------------------------------------------------------
   Un solo campo con forma de píldora sobre el verde de la cabecera, en vez de
   cuatro cajas pegadas de Bootstrap con tres bordes distintos entre ellas.

   Lo comparten las bandejas de cuentas y de contratos, que buscan de maneras
   distintas —una filtra en el navegador, la otra recarga con ?buscar=— pero se
   ven igual: quien las usa no tiene por qué notar esa diferencia.
   ========================================================================== */

.cf-cabecera-bandeja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-esp-3);
  flex-wrap: wrap;
}

.cf-cabecera-bandeja__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-esp-2);
  color: #fff;
  font-weight: 700;
  font-size: var(--cf-txt-sm);
}

.cf-buscador {
  position: relative;   /* el desplegable de resultados cuelga de acá */
  display: flex;
  align-items: center;
  gap: var(--cf-esp-2);
  width: 400px;
  max-width: 100%;
  min-height: var(--cf-tocable);
  padding: 4px 4px 4px var(--cf-esp-4);
  background: var(--cf-superficie);
  border-radius: 999px;
  box-shadow: var(--cf-sombra);
}

/* El foco se marca en el conjunto, no en el <input>: el
   campo no tiene borde propio y un contorno suyo se
   vería flotando dentro de la píldora. */
.cf-buscador:focus-within {
  box-shadow: 0 0 0 3px var(--cf-lima);
}

.cf-buscador__lupa { color: var(--cf-tinta-tenue); flex-shrink: 0; }

.cf-buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cf-tinta);
  font-family: var(--cf-fuente);
  /* 16px es el mínimo que evita que Safari iOS haga zoom
     al enfocar el campo y descuadre la pantalla. */
  font-size: 16px;
}

.cf-buscador__campo::placeholder { color: var(--cf-tinta-tenue); }

/* Borrar sólo aparece cuando hay algo que borrar. */
.cf-buscador__limpiar {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cf-tinta-tenue);
  cursor: pointer;
}

.cf-buscador--con-texto .cf-buscador__limpiar { display: inline-flex; }
.cf-buscador__limpiar:hover { background: var(--cf-linea-suave); color: var(--cf-tinta); }

.cf-buscador__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-esp-2);
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 var(--cf-esp-4);
  border: 0;
  border-radius: 999px;
  background: var(--cf-grad-accion);
  color: #fff;
  font-family: var(--cf-fuente);
  font-size: var(--cf-txt-sm);
  font-weight: 700;
  cursor: pointer;
}

.cf-buscador__accion:hover { filter: brightness(0.94); }

.cf-buscador__aviso { font-size: var(--cf-txt-xs); margin: var(--cf-esp-2) 0 0; }
.cf-buscador__aviso--error { color: #FFD7D3; font-weight: 600; }
.cf-buscador__aviso--resumen { color: #EDFBC9; }

.search-mark { background-color: var(--cf-pendiente-bg); color: var(--cf-pendiente); padding: 0 .1rem; border-radius: 2px; }
.nav-link.has-results { border-bottom: 2px solid var(--cf-verde); }

@media (max-width: 767px) {
  /* El rótulo de la sección va primero: es el título de
     lo que se está mirando, y el buscador la herramienta.
     En la fila de escritorio el orden natural es el
     contrario porque se lee de izquierda a derecha. */
  .cf-cabecera-bandeja { flex-direction: column; align-items: stretch; }
  .cf-cabecera-bandeja__titulo { order: -1; }
  .cf-buscador { width: 100%; }
  .cf-buscador__accion { padding: 0 var(--cf-esp-3); }
}

@media (max-width: 380px) {
  /* Con la pantalla más angosta, la lupa dice lo mismo
     que la palabra y le deja el sitio al texto escrito. */
  .cf-buscador__accion .cf-buscador__rotulo { display: none; }
}


/* ============================================================================
   PESTAÑAS DE LAS BANDEJAS
   ----------------------------------------------------------------------------
   Acotado a `.tab-bar2`, que es la barra que usan las cuatro bandejas —cuentas,
   contratos y los dos buzones—. No se toca `.nav-tabs` a secas: esa clase la
   usan decenas de vistas que no se están renovando y les cambiaría el aspecto
   de golpe.

   Lo que arregla: la pestaña activa venía en verde sobre lima —dos colores de
   la misma familia y casi el mismo brillo—, así que la que estabas mirando era
   la que peor se leía. Ahora el activo es verde oscuro sobre verde suave, con
   una barra abajo que dice cuál es sin depender del color del texto.
   ========================================================================== */

.tab-bar2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-esp-1);
  border-bottom: 1px solid var(--cf-linea);
  margin-bottom: var(--cf-esp-4);
  padding: 0;
  list-style: none;
}

.tab-bar2 > li { margin: 0; }

.tab-bar2 .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cf-esp-2);
  min-height: var(--cf-tocable);
  padding: 0 var(--cf-esp-4);
  border: 0;
  border-radius: var(--cf-radio) var(--cf-radio) 0 0;
  background: transparent;
  color: var(--cf-tinta-suave);
  font-family: var(--cf-fuente);
  font-size: var(--cf-txt-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  /* La barra de abajo se dibuja siempre, transparente mientras no toca: sin
     esto la pestaña activa crece 3px y empuja a las demás al cambiar. */
  box-shadow: inset 0 -3px 0 transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tab-bar2 .nav-link:hover,
.tab-bar2 .nav-link:focus {
  background: var(--cf-linea-suave);
  color: var(--cf-tinta);
  text-decoration: none;
}

.tab-bar2 .nav-link:focus-visible {
  outline: 3px solid var(--cf-verde);
  outline-offset: -3px;
}

/* `.nav-tabs .nav-link.active` de app.css tiene la misma especificidad (0,2,0)
   y va antes en el orden de carga, así que basta con igualarla; el !important
   sobra y sólo estorbaría a quien quiera afinar esto después. */
.tab-bar2 .nav-link.active,
.tab-bar2 .nav-item.show .nav-link {
  background: var(--cf-verde-soft);
  color: var(--cf-verde-deep);
  border: 0;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--cf-verde);
}

/* El icono de cada pestaña dice de qué va sin leerla; el color sale de los
   mismos tokens de estado que usan las píldoras de la lista. */
.tab-bar2 .nav-link i { font-size: 1.05em; }

/* Cuántos hay en cada bandeja. Discreto mientras la pestaña no es la que se
   está mirando: el número importa para decidir a cuál ir, no para competir con
   el nombre. En la activa se tiñe de marca, que es donde sí se está contando. */
.tab-bar2__conteo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  background: var(--cf-linea);
  color: var(--cf-tinta-suave);
  font-size: var(--cf-txt-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Verde profundo y no el verde de marca: blanco sobre --cf-verde da 4.07:1 y
   este número va en 13px, por debajo del 4.5:1 que pide la norma a ese tamaño.
   Con --cf-verde-deep pasa de once. */
.tab-bar2 .nav-link.active .tab-bar2__conteo {
  background: var(--cf-verde-deep);
  color: #fff;
}

/* En el teléfono las pestañas se cambian por un desplegable —lo arma
   `js/bandejas/pestanas.js`—, que ocupa un renglón en vez de tres. En pantalla
   ancha sobra: ahí las pestañas caben todas y se ven de una. */
select.cf-pestanas-movil { display: none; }

@media (max-width: 767px) {
  /* `select.` y no `.cf-pestanas-movil` a secas: con una sola clase empata con
     `.cf-campo__control`, que va más abajo en este archivo y por eso ganaba. */
  select.cf-pestanas-movil {
    display: block;
    margin-bottom: var(--cf-esp-3);
    /* Es el control con el que se navega toda la pantalla, no un campo más de
       un formulario: se le da el cuerpo que corresponde a eso. */
    min-height: 52px;
    font-size: var(--cf-txt-md);
    font-weight: 700;
    color: var(--cf-verde-deep);
    border-color: var(--cf-verde);
    border-width: 2px;
    background-color: var(--cf-verde-soft);
  }

  /* El desplegable que abre el sistema hereda de aquí en Chrome y Android; en
     iOS lo dibuja el propio teléfono y no atiende. */
  select.cf-pestanas-movil option {
    font-size: var(--cf-txt-md);
    font-weight: 600;
    color: var(--cf-tinta);
    background-color: var(--cf-superficie);
  }

  /* Sólo se esconde si el desplegable llegó a construirse. */
  .tab-bar2--con-select { display: none; }

  .tab-bar2 {
    gap: 2px;
    margin-bottom: var(--cf-esp-3);
  }

  /* Más juntas para que las tres de la bandeja quepan en un renglón; las
     pantallas con cinco o seis pasan a dos, que es preferible a esconderlas
     detrás de un desplazamiento lateral que nadie descubre. */
  .tab-bar2 .nav-link {
    padding: 0 var(--cf-esp-3);
    font-size: var(--cf-txt-xs);
  }
}


/* ============================================================================
   TABLAS QUE SE VUELVEN TARJETAS EN MÓVIL
   ----------------------------------------------------------------------------
   Este es el arreglo central del problema móvil: hoy las tablas se scrollean
   en horizontal y los botones de acción, que viven en la última columna,
   quedan fuera de pantalla. El usuario nunca los ve.

   Uso — cada <td> declara qué columna es:

     <table class="cf-tabla">
       <thead><tr><th>Cuenta</th><th>Estado</th><th></th></tr></thead>
       <tbody>
         <tr>
           <td data-cf-col="Cuenta">Cuota 3</td>
           <td data-cf-col="Estado"><span class="cf-estado cf-estado--ok">APROBADA</span></td>
           <td class="cf-tabla__acciones"><a class="cf-btn cf-btn--principal">Cargar</a></td>
         </tr>
       </tbody>
     </table>

   Bajo 768px cada fila se apila como tarjeta, con la etiqueta a la izquierda y
   las acciones abajo, a todo el ancho. Nada se sale de la pantalla.
   ========================================================================== */

.cf-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cf-txt-sm);
  background: var(--cf-superficie);
}

.cf-tabla th {
  text-align: left;
  padding: var(--cf-esp-3) var(--cf-esp-4);
  font-size: var(--cf-txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cf-tinta-tenue);
  background: var(--cf-fondo);
  border-bottom: 1px solid var(--cf-linea);
  white-space: nowrap;
}

.cf-tabla td {
  padding: var(--cf-esp-3) var(--cf-esp-4);
  border-bottom: 1px solid var(--cf-linea-suave);
  vertical-align: middle;
  color: var(--cf-tinta);
}

.cf-tabla tbody tr:last-child td { border-bottom: none; }

.cf-tabla__acciones {
  white-space: nowrap;
}

/* En una fila de tabla los botones no necesitan los 44px del dedo: ahí manda
   el ratón, y a esa altura tres acciones seguidas estiran la fila al doble. */
@media (min-width: 768px) {
  .cf-tabla__acciones .cf-btn {
    min-height: 34px;
    padding: 0 var(--cf-esp-3);
    font-size: var(--cf-txt-xs);
  }

  .cf-tabla__acciones .cf-btn + .cf-btn { margin-left: var(--cf-esp-1); }
}

/* Encabezado que no se va con el scroll. Solo sirve dentro de un contenedor
   que scrollee (`.cf-card__scroll`); pegado a la ventana no hace nada. */
@media (min-width: 768px) {
  .cf-tabla--fija thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* El borde de un th pegajoso se despinta al desplazar en varios motores;
       la sombra interior sí viaja con la celda. */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--cf-linea);
  }
}

/* Celdas de una línea: fechas, montos y contadores no deben partirse en dos
   renglones y estirar la fila al doble de alto. */
.cf-tabla .cf-nowrap { white-space: nowrap; }
.cf-tabla .cf-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .cf-tabla thead {
    /* Oculto para lectores de pantalla también: en modo tarjeta cada celda
       lleva su propia etiqueta, así que el encabezado sería redundante. */
    display: none;
  }

  .cf-tabla,
  .cf-tabla tbody,
  .cf-tabla tr,
  .cf-tabla td {
    display: block;
    width: 100%;
  }

  .cf-tabla tr {
    background: var(--cf-superficie);
    border: 1px solid var(--cf-linea);
    border-radius: var(--cf-radio-lg);
    box-shadow: var(--cf-sombra);
    margin-bottom: var(--cf-esp-3);
    padding: var(--cf-esp-2) 0;
    overflow: hidden;
  }

  .cf-tabla td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-esp-4);
    padding: var(--cf-esp-2) var(--cf-esp-4);
    border-bottom: none;
    text-align: right;
  }

  .cf-tabla td::before {
    content: attr(data-cf-col);
    flex-shrink: 0;
    text-align: left;
    font-size: var(--cf-txt-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cf-tinta-tenue);
  }

  /* Celdas sin etiqueta (típicamente la de acciones) ocupan el ancho completo. */
  .cf-tabla td:not([data-cf-col])::before { content: none; }

  .cf-tabla__acciones {
    display: flex !important;
    flex-direction: column;
    gap: var(--cf-esp-2);
    white-space: normal;
    padding-top: var(--cf-esp-3);
    margin-top: var(--cf-esp-2);
    border-top: 1px solid var(--cf-linea-suave);
  }

  /* También los `.btn` de Bootstrap: las tablas que ya existen usan esas clases
     y migrarlas de golpe cambiaría su aspecto en escritorio sin necesidad. */
  .cf-tabla__acciones .cf-btn,
  .cf-tabla__acciones > form > .btn,
  .cf-tabla__acciones > .btn {
    width: 100%;
    min-height: var(--cf-tocable);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
  }

  /* El formulario que envuelve las acciones no debe romper el apilado. */
  .cf-tabla__acciones > form {
    display: flex !important;
    flex-direction: column;
    gap: var(--cf-esp-2);
    width: 100%;
  }

  /* La subtabla de formatos se despliega dentro de la celda de acciones; va al
     ancho completo y sin el text-align heredado de la fila. */
  .cf-tabla__acciones .tabla-anidada {
    width: 100%;
    text-align: left;
    font-size: var(--cf-txt-xs);
  }
}


/* ============================================================================
   LAS TABLAS DE LAS BANDEJAS EN EL TELÉFONO
   ----------------------------------------------------------------------------
   `cf-tabla` ya convierte cada fila en tarjeta. Acá sólo se decide qué destacar
   y qué sobra cuando una fila ocupa la pantalla de ancho. Las clases las pone
   `js/bandejas/tarjetas.js` leyendo el encabezado: por posición no vale, porque
   el nombre es la segunda columna en la bandeja de cuentas y la cuarta o la
   quinta en la de contratos, según la pestaña.
   ========================================================================== */

@media (max-width: 767px) {
  /* La tarjeta se ordena, no se deja al orden de las columnas: el nombre va
     arriba y las acciones al final, esté donde esté esa columna en la tabla.
     En la bandeja de cuentas el nombre es la segunda y quedaba arriba por
     casualidad; en la de contratos es la cuarta y salía en medio de la ficha. */
  .cf-tabla tbody tr { display: flex; flex-direction: column; }
  .cf-tabla tbody td.cf-tabla__titulo   { order: -1; }
  .cf-tabla tbody td.cf-tabla__acciones { order: 99; }

  /* El consecutivo ayuda a recorrer una tabla larga de un vistazo. En una pila
     de tarjetas no ayuda a nada y se lleva un renglón entero. */
  .cf-tabla tbody td.cf-tabla__consecutivo { display: none; }

  /* El nombre es por lo que se busca la fila: encabeza la tarjeta en vez de ser
     un dato más de la lista. */
  .cf-tabla tbody td.cf-tabla__titulo {
    display: block;
    text-align: left;
    font-size: var(--cf-txt-md);
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: var(--cf-esp-3);
    margin-bottom: var(--cf-esp-1);
    border-bottom: 1px solid var(--cf-linea-suave);
  }

  .cf-tabla tbody td.cf-tabla__titulo::before { display: none; }

  /* Varias tablas traen una última celda vacía de sobra. Como bloque de
     acciones dejaba una franja con su línea de separación y nada dentro. */
  .cf-tabla tbody td.cf-tabla__acciones:empty { display: none !important; }
}


/* ============================================================================
   FORMULARIOS
   ========================================================================== */

.cf-campo {
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-1);
}

.cf-campo__etiqueta {
  font-size: var(--cf-txt-xs);
  font-weight: 700;
  color: var(--cf-tinta-suave);
}

.cf-campo__control {
  min-height: var(--cf-tocable);
  padding: var(--cf-esp-2) var(--cf-esp-3);
  border: 1px solid var(--cf-linea);
  border-radius: var(--cf-radio);
  background: var(--cf-superficie);
  color: var(--cf-tinta);
  font-family: var(--cf-fuente);
  /* 16px es el mínimo que evita que Safari iOS haga zoom automático al enfocar
     el campo. Por debajo de eso la pantalla salta y desorienta al usuario. */
  font-size: 16px;
  width: 100%;
}

.cf-campo__control:focus {
  outline: none;
  border-color: var(--cf-verde);
  box-shadow: 0 0 0 3px var(--cf-verde-soft);
}

.cf-campo__control[aria-invalid="true"] {
  border-color: var(--cf-devuelta);
}

.cf-campo__error {
  font-size: var(--cf-txt-xs);
  color: var(--cf-devuelta);
  font-weight: 600;
}

.cf-campo__ayuda {
  font-size: var(--cf-txt-xs);
  color: var(--cf-tinta-tenue);
}

textarea.cf-campo__control {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}


/* ============================================================================
   BARRA DE PROGRESO DE SUBIDA
   Para reemplazar el spinner ambiguo que hoy no dice si el archivo avanza.
   ========================================================================== */

.cf-progreso {
  height: 6px;
  border-radius: 999px;
  background: var(--cf-linea);
  overflow: hidden;
}

.cf-progreso__barra {
  height: 100%;
  width: 0;
  background: var(--cf-grad-accion);
  transition: width 0.2s ease;
}


/* ============================================================================
   PAGINADO
   ----------------------------------------------------------------------------
   Reemplaza el paginado de Bootstrap, que llega en inglés ("Showing 1 to 10 of
   34 results"), con enlaces de 30px que no se aciertan con el dedo.

   Se usa desde la vista resources/views/vendor/pagination/cf.blade.php:
       {{ $contratos->links('vendor.pagination.cf') }}

   El resumen sale siempre, incluso con una sola página: dice cuántos registros
   hay, que es la pregunta que uno se hace al mirar una lista.
   ========================================================================== */

.cf-paginado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-esp-3);
  flex-wrap: wrap;
  width: 100%;
}

.cf-paginado__resumen {
  margin: 0;
  font-size: var(--cf-txt-xs);
  color: var(--cf-tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.cf-paginado__resumen strong { color: var(--cf-tinta-suave); font-weight: 700; }

.cf-paginado__lista {
  display: flex;
  align-items: center;
  gap: var(--cf-esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-paginado__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-esp-2);
  min-width: var(--cf-tocable);
  min-height: var(--cf-tocable);
  padding: 0 var(--cf-esp-3);
  border: 1px solid transparent;
  border-radius: var(--cf-radio);
  font-size: var(--cf-txt-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cf-tinta-suave);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cf-paginado__enlace:hover {
  background: var(--cf-verde-soft);
  color: var(--cf-verde-deep);
  text-decoration: none;
}

.cf-paginado__enlace:focus-visible {
  outline: 3px solid var(--cf-verde);
  outline-offset: 2px;
}

.cf-paginado__enlace--activo {
  background: var(--cf-verde);
  color: #FFFFFF;
  cursor: default;
}
.cf-paginado__enlace--activo:hover {
  background: var(--cf-verde);
  color: #FFFFFF;
}

/* Los extremos cuando ya no hay a dónde ir: siguen ocupando su lugar para que
   la barra no se mueva de sitio al cambiar de página. */
.cf-paginado__enlace--inerte {
  color: var(--cf-linea);
  pointer-events: none;
}

.cf-paginado__salto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cf-esp-5);
  color: var(--cf-tinta-tenue);
}

/* En pantallas chicas sobran los números: quedan anterior/siguiente y el
   "Página 2 de 7", que es lo que se necesita para moverse con el pulgar. */
.cf-paginado__pagina {
  font-size: var(--cf-txt-sm);
  font-weight: 700;
  color: var(--cf-tinta-suave);
  padding: 0 var(--cf-esp-2);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .cf-paginado__pagina { display: none; }
}

@media (max-width: 767px) {
  .cf-paginado { justify-content: center; }
  .cf-paginado__numero,
  .cf-paginado__salto { display: none; }
  .cf-paginado__resumen { width: 100%; text-align: center; }
}


/* ============================================================================
   UTILIDADES
   ========================================================================== */

.cf-pila {
  display: flex;
  flex-direction: column;
  gap: var(--cf-esp-3);
}

.cf-fila {
  display: flex;
  align-items: center;
  gap: var(--cf-esp-3);
  flex-wrap: wrap;
}

.cf-contenedor {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--cf-esp-4);
}

/* Para listados de muchas columnas. A 960px las fechas se parten en dos
   renglones y cada fila crece al doble de alto sin ganar información. */
.cf-contenedor--ancho { max-width: 1400px; }

/* Contenido ancho que no debe empujar la página entera de lado. */
.cf-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cf-solo-movil      { display: none; }
.cf-vacio {
  padding: var(--cf-esp-6) var(--cf-esp-4);
  text-align: center;
  color: var(--cf-tinta-tenue);
  font-size: var(--cf-txt-sm);
}

@media (max-width: 767px) {
  .cf-solo-movil      { display: block; }
  .cf-solo-escritorio { display: none !important; }
  .cf-contenedor      { padding: var(--cf-esp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .cf-btn,
  .cf-progreso__barra { transition: none; }
}


/* ============================================================================
   VISOR DE HOJA
   ----------------------------------------------------------------------------
   Muestra un documento pensado para imprimir —hoja carta, márgenes en
   centímetros— dentro de la pantalla, con zoom propio. Lo usan la vista previa
   del formato y la de evidencias, que enseñan exactamente lo que va a quedar
   cargado antes de decidir.
   ========================================================================== */

.cf-visor {
  position: relative;
  background: var(--cf-fondo);
  border: 1px solid var(--cf-linea);
  border-radius: var(--cf-radio);
  overflow: auto;
  /* Alto fijo, no máximo: la hoja va posicionada y ya no levanta la caja. Es
     además una ventana estable, que no cambia de tamaño al acercar. */
  height: 70vh;
  /* Al llegar al borde con el dedo, el gesto no debe seguir arrastrando la
     página de atrás: se está revisando el documento, no navegando. */
  overscroll-behavior: contain;
}

@media (max-width: 767px) {
  /* En el celular la pantalla es casi toda lo que hay: cada centímetro que se
     le quite al visor es uno más de arrastre para revisar. */
  .cf-visor { height: 76vh; }
}

/* La hoja mide 8.5 pulgadas —816px— y no cabe entera en ningún teléfono. El
   factor lo calcula el JS midiendo la hoja contra el contenedor.

   Se usa `zoom` y no `transform: scale()`: con transform el elemento se ve más
   pequeño pero el navegador sigue reservando su alto original, y quedaba medio
   metro de espacio en blanco debajo. */
.cf-visor__hoja {
  /* Fuera del flujo a propósito. Como bloque normal, sus 816px de ancho se
     propagan hacia arriba como ancho mínimo y terminan estirando la página
     entera —el `min-width: 0` del contenedor pone un piso, no un techo—.
     Posicionada, el contenedor la desplaza por dentro, que es para lo que tiene
     scroll propio. */
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  /* Ancho natural, no el del contenedor: al acercar, la hoja crece y se
     recorre, en vez de reacomodar el texto en otro ancho y dejar de parecerse a
     la hoja que se va a cargar. */
  width: max-content;
  zoom: 1;
}

/* El documento va dentro de un shadow root, así que ni su CSS sale ni el de acá
   entra: lo que haya que ajustarle —esconder su botón de imprimir, dibujar los
   márgenes de @page— lo inyecta formato.js al montarlo. */

/* Barra de zoom pegada arriba de la hoja: al acercar hay que arrastrar
   bastante, y volver a buscar el control cada vez sobra. */
.cf-zoom {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--cf-esp-2);
  padding-bottom: var(--cf-esp-2);
  background: var(--cf-superficie);
}

.cf-zoom__valor {
  min-width: 82px;
  font-variant-numeric: tabular-nums;
}

.cf-zoom__ayuda {
  font-size: var(--cf-txt-xs);
  color: var(--cf-tinta-tenue);
}

@media (max-width: 480px) {
  .cf-zoom__ayuda { display: none; }
}