/* ===================================================================
   Oficina Virtual — estilos de las pantallas del socio.

   La identidad es la de las plantillas originales (azul #005798,
   Poppins, Bootstrap 5.3); lo que cambia es la estructura: pantallas
   pensadas primero para el celular, con la accion principal siempre a
   mano y los importes legibles de un vistazo.

   Lo cargan TODAS las pantallas, incluidas las de entrada (portada,
   login, registro, olvide, activar, nueva clave y la consulta sin
   usuario), que antes tenian cada una una copia del CSS de su
   plantilla.
   =================================================================== */

:root {
  --coop-azul: #005798;
  --coop-azul-oscuro: #0b3d66;
  --coop-azul-claro: #e8f1f8;
  --coop-fondo: #f3f6f9;
  --coop-texto: #1f2d3d;
  --coop-gris: #6b7a8a;
  --coop-borde: #e3e8ee;
  --coop-verde: #1b8a5a;
  --coop-amarillo: #b7791f;
  --coop-naranja: #d9621b;
  --coop-rojo: #c53030;
  --coop-radio: 14px;
  --coop-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --coop-sombra-alta: 0 12px 32px rgba(16, 24, 40, .14);
}

/* ⚠️ `hidden` tiene que ganar siempre. Las clases d-flex / d-grid de
   Bootstrap llevan display !important y le ganaban al atributo: el aviso
   "Modo de prueba" de pagar.html se veia en produccion con los pagos
   reales, y el del recibo salia vacio mientras cargaba. */
[hidden] { display: none !important; }

/* La copia que fotografia COOP.descargarPDF (api.js): html2canvas no
   respeta tabular-nums y los importes alineados a la derecha quedaban
   corridos. En el PDF, cifras comunes. */
.para-pdf, .para-pdf * { font-variant-numeric: normal !important; }
/* La copia se arma siempre como en una pantalla ancha (html2canvas la
   dibuja con windowWidth 1200), y se mide en la pagina: con una ventana
   angosta las columnas -sm/-md/-lg se apilaban, la hoja daba mas alta y
   el PDF salia achicado. Las columnas de las hojas (factura y recibo): */
.para-pdf .col-sm-6 { flex: 0 0 auto; width: 50%; }
.para-pdf .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
.para-pdf .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
.para-pdf .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
.para-pdf .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }

html, body { background: var(--coop-fondo); }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--coop-texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── Barra superior ─────────────────────────────────────────── */
.coop-barra {
  background: #fff;
  border-bottom: 1px solid var(--coop-borde);
  position: sticky; top: 0; z-index: 1030;
}
.coop-barra .container { display: flex; align-items: center; gap: 12px; height: 64px; }
.coop-barra .logo img { height: 36px; }
.coop-barra .titulo { font-weight: 600; color: var(--coop-azul-oscuro); font-size: .95rem; }
.coop-barra .usuario { margin-left: auto; }
/* El nombre completo del socio; si no entra, se corta con puntos suspensivos
   (queda entero en el title y en el menu desplegable). */
.coop-barra .usuario .nombre { display: inline-block; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.coop-barra .usuario .btn {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--coop-borde); border-radius: 999px; padding: 4px 12px 4px 4px;
  font-size: .9rem; color: var(--coop-texto); background: #fff;
}
.coop-barra .usuario .flecha { font-size: .7rem; color: var(--coop-azul); }
.coop-barra .usuario .btn:hover, .coop-barra .usuario .btn[aria-expanded="true"] {
  border-color: var(--coop-azul); background: var(--coop-azul-claro);
}

/* Las secciones, a la vista (las arma COOP.montarBarra en api.js). En una
   pantalla ancha van en la barra y reemplazan al titulo; en una angosta
   van en .coop-pestanas, abajo. */
.coop-barra .secciones { display: none; gap: 4px; }
.coop-barra .secciones a {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px;
  color: var(--coop-gris); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.coop-barra .secciones a:hover { color: var(--coop-azul); background: var(--coop-fondo); }
.coop-barra .secciones a.activa { color: var(--coop-azul); background: var(--coop-azul-claro); }
@media (min-width: 992px) {
  .coop-barra .secciones { display: flex; }
  .coop-barra .titulo { display: none; }
}

.coop-pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--coop-borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.coop-pestanas .pestana {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; width: 100%; border: 0; background: none; padding: 0;
  color: var(--coop-gris); text-decoration: none; font-size: .72rem; font-weight: 500;
}
.coop-pestanas .pestana i { font-size: 1.15rem; }
.coop-pestanas .pestana.activa { color: var(--coop-azul); }
.coop-pestanas .pestana.activa i { transform: scale(1.08); }
@media (min-width: 992px) { .coop-pestanas { display: none; } }
/* Lo que va fijo abajo en las pantallas sube arriba de las pestanas. */
@media (max-width: 991.98px) {
  body.con-pestanas .coop-pagina { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.con-pestanas .barra-pago { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.con-pestanas .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media print { .coop-pestanas { display: none !important; } }

/* Accesos de la pantalla de cuentas (menu.html): lo que se puede hacer
   ademas de pagar, para que el socio lo vea al entrar. */
.coop-accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.coop-accesos a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--coop-borde); border-radius: var(--coop-radio);
  box-shadow: var(--coop-sombra); color: var(--coop-texto); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.coop-accesos a:hover { border-color: var(--coop-azul); transform: translateY(-1px); }
.coop-accesos .icono {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--coop-azul-claro); color: var(--coop-azul); font-size: 1.05rem;
}
.coop-accesos .nombre { font-weight: 600; display: block; }
.coop-accesos .detalle { font-size: .8rem; color: var(--coop-gris); }
@media (max-width: 767.98px) {
  .coop-accesos { gap: 8px; }
  .coop-accesos a { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
  .coop-accesos .icono { width: 36px; height: 36px; }
  .coop-accesos .nombre { font-size: .82rem; line-height: 1.2; }
  .coop-accesos .detalle { display: none; }
}

.coop-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--coop-azul); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem;
}

/* ─── Estructura ─────────────────────────────────────────────── */
.coop-pagina { padding: 24px 0 120px; }
.coop-encabezado h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.coop-encabezado p { color: var(--coop-gris); margin: 4px 0 0; }
.coop-volver {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--coop-gris); text-decoration: none; font-size: .9rem; margin-bottom: 12px;
}
.coop-volver:hover { color: var(--coop-azul); }

.coop-tarjeta {
  background: #fff; border: 1px solid var(--coop-borde);
  border-radius: var(--coop-radio); box-shadow: var(--coop-sombra);
}

/* ─── Resumen general del menu ───────────────────────────────── */
.coop-total {
  background: linear-gradient(135deg, var(--coop-azul) 0%, var(--coop-azul-oscuro) 100%);
  color: #fff; border-radius: var(--coop-radio); padding: 22px 24px;
  box-shadow: var(--coop-sombra-alta);
}
.coop-total .etiqueta { opacity: .8; font-size: .9rem; }
.coop-total .importe { font-size: 2rem; font-weight: 600; letter-spacing: -.5px; }
.coop-total .detalle { opacity: .85; font-size: .85rem; }

/* ─── Tarjeta de cuenta ──────────────────────────────────────── */
.cuenta-card { padding: 18px 18px 14px; height: 100%; display: flex; flex-direction: column; }
.cuenta-card .cabecera { display: flex; align-items: flex-start; gap: 8px; }
.cuenta-card .referencia { font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.cuenta-card .numero { color: var(--coop-gris); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cuenta-card .opciones { margin-left: auto; }
.cuenta-card .opciones .btn { color: var(--coop-gris); padding: 2px 8px; }
.cuenta-card .titular { margin-top: 10px; font-size: .9rem; }
.cuenta-card .direccion { color: var(--coop-gris); font-size: .85rem; }
.cuenta-card .saldo { margin: 16px 0 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cuenta-card .saldo .importe { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuenta-card .pie {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--coop-borde);
  display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--coop-gris);
}
/* Un renglon por dato: la factura digital y, si la tiene, el debito automatico. */
.cuenta-card .pie > div { display: flex; align-items: center; gap: 8px; }
.cuenta-card .acciones { display: flex; gap: 8px; margin-top: 14px; }
.cuenta-card .acciones .btn { flex: 1; }

/* Cuenta RESTRINGIDA: adeuda la multa por restricción del servicio
   (servicio 88, código de facturación 64; ver cuentas.restringida).
   Rojo suave y la palabra de marca de agua en diagonal.
   La marca va centrada y de un tamaño que entra en la tarjeta más
   angosta, así que la tarjeta NO lleva overflow:hidden: si lo llevara,
   se cortaría el menú de los tres puntos, que se despliega afuera. */
.cuenta-card.restringida {
  position: relative;
  background: #fdf1f1;
  border-color: #f3c4c4;
}
.cuenta-card.restringida::after {
  content: "Restringida";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-24deg);
  font-size: 2.6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(197, 48, 48, .13);
  pointer-events: none; user-select: none;
}
@media (max-width: 380px) { .cuenta-card.restringida::after { font-size: 2.1rem; } }

.cuenta-nueva {
  border: 2px dashed #c9d6e3; background: transparent; box-shadow: none;
  color: var(--coop-azul); min-height: 220px; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s ease, border-color .15s ease;
}
.cuenta-nueva:hover { background: var(--coop-azul-claro); border-color: var(--coop-azul); }
.cuenta-nueva i { font-size: 1.6rem; }

/* ─── Chip de estado ─────────────────────────────────────────── */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500;
  white-space: nowrap;
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.sin_deuda  { background: #eef2f6; color: var(--coop-gris); }
.estado.al_dia     { background: #e6f4ed; color: var(--coop-verde); }
.estado.por_vencer { background: #fdf3e1; color: var(--coop-amarillo); }
.estado.atrasada   { background: #fdebe1; color: var(--coop-naranja); }
.estado.morosa     { background: #fde8e8; color: var(--coop-rojo); }
.estado.pagado     { background: #e6f4ed; color: var(--coop-verde); }
.estado.gestion    { background: #efe9fb; color: #6b46c1; }
.estado.pendiente  { background: #e8f1f8; color: var(--coop-azul); }

/* Aviso arriba de la lista de periodos: lo que el socio ya pago por la
   web y el ERP todavia no imputo. Se ve siempre, sin plegar. */
.aviso-pago {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem 1rem; background: #e8f1f8; color: var(--coop-azul);
  border-bottom: 1px solid #d7e5f1;
}
.aviso-pago .small { color: #3b5a72; }

/* En "A pagar" de una cuenta restringida: lo que se paga desde la solapa
   Restricción se ve, sin casilla, debajo de este aviso. */
.aviso-restriccion {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 1rem; background: #fdf1f1; color: var(--coop-rojo);
  border-bottom: 1px solid #f3c4c4;
}
.aviso-restriccion > div { flex: 1 1 220px; }
.aviso-restriccion .small { color: #8a3b3b; }

/* Cargos en PROCURACIÓN (cod-pago 89): no se pagan por la web y se dice
   adónde ir, el estudio jurídico (cuentas.ESTUDIO_JURIDICO). Se ve
   siempre, sin plegar: es lo que el usuario tiene que hacer. */
.aviso-estudio {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem 1rem; background: #fff6e0; color: #7a4a00;
  border-bottom: 1px solid #f1dca8;
}
.aviso-estudio .small { color: #6b5320; }
.aviso-estudio .estudio { font-weight: 600; color: #5c3b00; }

/* Lo mismo en la tarjeta de cada cuenta del menu. */
.en-verificacion {
  display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  margin-top: .5rem; padding: .4rem .6rem; border-radius: .5rem;
  background: #e8f1f8; color: var(--coop-azul); font-size: .82rem;
}

/* ─── Botones ────────────────────────────────────────────────── */
.btn-coop { background: var(--coop-azul); border-color: var(--coop-azul); color: #fff; font-weight: 500; }
.btn-coop:hover, .btn-coop:focus { background: var(--coop-azul-oscuro); border-color: var(--coop-azul-oscuro); color: #fff; }
.btn-coop:disabled { background: #9fb6c9; border-color: #9fb6c9; }
.btn-coop-suave { background: var(--coop-azul-claro); color: var(--coop-azul); border: 0; font-weight: 500; }
.btn-coop-suave:hover { background: #d6e6f3; color: var(--coop-azul-oscuro); }

/* ─── Pestañas ───────────────────────────────────────────────── */
.coop-tabs { border-bottom: 1px solid var(--coop-borde); gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.coop-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; color: var(--coop-gris);
  font-weight: 500; padding: 10px 14px; white-space: nowrap; background: none;
}
.coop-tabs .nav-link.active { color: var(--coop-azul); border-bottom-color: var(--coop-azul); }
.coop-tabs .contador {
  background: #eef2f6; color: var(--coop-gris); border-radius: 999px;
  padding: 0 7px; font-size: .75rem; margin-left: 4px;
}
.coop-tabs .nav-link.active .contador { background: var(--coop-azul-claro); color: var(--coop-azul); }

/* ─── Lista de periodos a pagar ──────────────────────────────── */
.periodo {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--coop-borde); cursor: pointer;
  transition: background .12s ease;
}
.periodo:last-child { border-bottom: 0; }
.periodo:hover { background: #f8fafc; }
.periodo.bloqueado { cursor: default; opacity: .75; }
.periodo.bloqueado:hover { background: transparent; }
.periodo .form-check-input { width: 1.2rem; height: 1.2rem; margin: 0; cursor: pointer; }
.periodo .nombre { font-weight: 500; }
.periodo .sub { color: var(--coop-gris); font-size: .8rem; }
.periodo .monto { text-align: right; font-variant-numeric: tabular-nums; }
.periodo .monto .total { font-weight: 600; }
.periodo .monto .desglose { color: var(--coop-gris); font-size: .75rem; }

/* El paquete de una cuenta restringida: UN renglón con casilla y su
   detalle adentro (cuenta.html, solapa Restricción). */
.paquete .periodo { border-bottom: 0; }
.paquete-detalle { padding: 0 16px 12px 56px; }
.paquete-detalle .renglon {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 7px 0; border-top: 1px dashed var(--coop-borde); font-size: .88rem;
}
.paquete-detalle .renglon .sub { color: var(--coop-gris); font-size: .78rem; }
.paquete-detalle .renglon .monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paquete-detalle .multa {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px;
  background: #fde8e8; color: var(--coop-rojo); font-size: .72rem; font-weight: 600;
}
.paquete-detalle .grupo { padding: 10px 0 4px; font-size: .8rem; color: var(--coop-azul); font-weight: 500; }
@media (max-width: 575.98px) { .paquete-detalle { padding-left: 16px; } }

.lista-cabecera {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--coop-borde); background: #fafbfc;
  border-radius: var(--coop-radio) var(--coop-radio) 0 0; font-size: .85rem; color: var(--coop-gris);
}

/* ─── Barra de pago fija ─────────────────────────────────────── */
.barra-pago {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  background: #fff; border-top: 1px solid var(--coop-borde);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .2s ease;
}
.barra-pago.visible { transform: translateY(0); }
.barra-pago .container { display: flex; align-items: center; gap: 16px; }
.barra-pago .seleccion { font-size: .8rem; color: var(--coop-gris); }
.barra-pago .importe { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-pago .btn { margin-left: auto; min-width: 160px; padding: 10px 20px; }

/* ─── Tablas ─────────────────────────────────────────────────── */
.coop-tabla { font-size: .88rem; margin: 0; }
.coop-tabla th {
  font-weight: 500; color: var(--coop-gris); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .03em; background: #fafbfc; border-bottom-width: 1px; white-space: nowrap;
}
.coop-tabla td { vertical-align: middle; white-space: nowrap; }
.coop-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Estados vacios y esqueletos de carga ───────────────────── */
.coop-vacio { text-align: center; padding: 48px 16px; color: var(--coop-gris); }
.coop-vacio .icono {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--coop-azul-claro); color: var(--coop-azul);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.coop-vacio h2 { font-size: 1.1rem; color: var(--coop-texto); font-weight: 600; }

.esqueleto {
  background: linear-gradient(90deg, #eef2f6 25%, #f7f9fb 37%, #eef2f6 63%);
  background-size: 400% 100%; animation: brillo 1.3s ease infinite; border-radius: 8px;
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ─── Ayuda de la factura en el alta de cuenta ───────────────── */
.ayuda-factura {
  background: var(--coop-azul-claro); border-radius: 10px; padding: 10px 12px;
  font-size: .8rem; color: var(--coop-azul-oscuro);
}

/* ─── La foto del edificio de fondo ──────────────────────────────
   La portada y el login la llevan, como en la web vieja
   (TPL\xINICIO.html: `background-image: url('./img/fondo.jpg')` en el
   body). No se sirve el archivo original —4032x2268 y 698 KB, que queda
   de referencia en plantillas-originales\img\fondo.jpg, la carpeta que el
   servidor NO sirve—, sino dos versiones livianas de la MISMA foto, igual
   que con el video: 1080p de 250 KB y 720p de 119 KB para pantallas
   chicas. Se regeneran con Pillow:
     Image.open(orig).convert("RGB").resize((1920, 1080), Image.LANCZOS) \
          .save(destino, "JPEG", quality=76, optimize=True, progressive=True)

   Va casi entera, sin el velo al 90 % del video: la foto ES el fondo y
   tiene que verse. Lo que hay que leer va arriba de una superficie
   blanca —la tarjeta del login, el panel de la portada—, que es como lo
   resolvia la web vieja. El degrade es sólo para que el texto chico no
   quede sobre el cielo. Se dibuja en dos pseudoelementos fijos, no con
   background-attachment: fixed, que en iOS salta al hacer scroll.

   El body queda TRANSPARENTE a proposito: con un color propio taparia al
   ::before, que por el z-index negativo se pinta antes que el fondo del
   body. Es lo mismo que hace api.js con el video. */
body.con-foto { background: transparent; }
body.con-foto::before,
body.con-foto::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
body.con-foto::before {
  z-index: -2; background: #cfd8de url('img/fondo-720.jpg') center / cover no-repeat;
}
body.con-foto::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34),
                                      rgba(255, 255, 255, .10) 45%, rgba(11, 61, 102, .22));
}
@media (min-width: 768px) { body.con-foto::before { background-image: url('img/fondo-1080.jpg'); } }
@media print { body.con-foto::before, body.con-foto::after { display: none; } }

/* Lo poco que queda suelto sobre la foto: el "Volver" de arriba y la
   nota de abajo, que sin esto se leen contra el edificio. */
body.con-foto .sobre-foto,
body.con-foto .coop-volver {
  padding: 7px 16px; border-radius: 999px; box-shadow: var(--coop-sombra);
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(4px);
}
body.con-foto .sobre-foto { display: inline-block; }
body.con-foto .coop-volver { color: var(--coop-azul-oscuro); }
body.con-foto .coop-volver:hover { color: var(--coop-azul); }

/* ─── Paginas de entrada ─────────────────────────────────────────
   Login, registro, olvide mi clave, activacion y clave nueva: una
   tarjeta centrada sobre el video de fondo, todas iguales. Los estilos
   van colgados de .caja-entrada y no sueltos, para no pisarle a las
   otras pantallas sus formularios (el buscador del menu, por ejemplo). */
.caja-entrada { max-width: 460px; margin: 0 auto; }
.caja-entrada .cabecera {
  background: linear-gradient(135deg, var(--coop-azul), #0f7dd1);
  color: #fff; text-align: center; padding: 26px 22px;
}
.caja-entrada .cabecera h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.caja-entrada .cabecera p { margin: 6px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.caja-entrada .input-group-text {
  background: var(--coop-azul-claro); border-color: var(--coop-borde); color: var(--coop-azul);
}
.caja-entrada .form-control { border-color: var(--coop-borde); }
.caja-entrada .form-control:focus {
  border-color: var(--coop-azul); box-shadow: 0 0 0 .2rem rgba(0, 87, 152, .15);
}
.caja-entrada .form-text { color: var(--coop-gris); font-size: .82rem; }
.caja-entrada .enlaces { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.caja-entrada .enlaces a { color: var(--coop-azul); text-decoration: none; font-size: .9rem; }
.caja-entrada .enlaces a:hover { text-decoration: underline; }

/* El aviso del formulario: antes era la marca <? ERROR ?> que rellenaba
   el COBOL al devolver la plantilla. */
.caja-entrada .aviso { display: none; text-align: center; font-size: .9rem; margin-top: 12px; }
.caja-entrada .aviso.visible { display: block; }
.caja-entrada .aviso.error { color: var(--coop-rojo); }
.caja-entrada .aviso.ok { color: var(--coop-verde); }
.caja-entrada .aviso.info { color: var(--coop-azul-oscuro); }

/* El resultado de un tramite: alta enviada, cuenta activada, clave nueva. */
.caja-entrada .resultado { text-align: center; }
.caja-entrada .resultado .simbolo {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.caja-entrada .resultado .simbolo.ok { background: #e6f4ed; color: var(--coop-verde); }
.caja-entrada .resultado .simbolo.error { background: #fdecea; color: var(--coop-rojo); }
.caja-entrada .resultado .simbolo.espera { background: var(--coop-azul-claro); color: var(--coop-azul); }

/* ─── Aviso de conexion y toast (los crea api.js) ────────────── */
.conexion-aviso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1080;
  padding: 8px 12px; text-align: center; font-size: .9rem;
  background: #ffc107; color: #222;
  transform: translateY(-100%); transition: transform .2s ease;
}
.conexion-aviso.visible { transform: translateY(0); }
.conexion-aviso.error { background: var(--coop-rojo); color: #fff; }
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px);
  z-index: 1090; padding: 10px 18px; border-radius: 10px; width: auto; max-width: 90vw;
  background: #1f2d3d; color: #fff; font-size: .9rem; display: block;
  opacity: 0; pointer-events: none; transition: all .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--coop-rojo); }
.toast.ok { background: var(--coop-verde); }

@media (max-width: 575.98px) {
  .coop-total .importe { font-size: 1.6rem; }
  .barra-pago .btn { min-width: 0; }
  .coop-barra .titulo { display: none; }
}