/* =========================================================================
   Catálogo público para clientes (/catalogo)
   Usa la misma marca del sistema (azul y dorado), pero con una presentación
   pensada para el cliente y sobre todo para el celular, que es desde donde
   la mayoría lo va a ver.
   ========================================================================= */
:root {
  /* ---- Las superficies, de la mas honda a la mas cercana ----
     Azul marino y no negro: el negro puro sobre OLED deja la letra
     flotando y marca cada borde como un corte. El marino sostiene la
     pagina y deja que el dorado sea lo unico que brilla. */
  --fondo: #101c44;
  --superficie: #192a5c;
  --superficie-2: #22366f;
  --superficie-3: #2b4284;
  --borde: #2e4489;
  --borde-suave: #223160;

  /* ---- La letra. El gris de siempre sobre marino se ve sucio:
     los apoyos van teñidos del mismo azul. ---- */
  --texto: #eaeefb;
  --texto-2: #a3afd4;
  --texto-3: #8c9acb;

  /* ---- La marca ----
     El dorado de antes (#e9c572) era un oro lavado: sobre el azul marino
     se leia como un amarillo apagado. Este tiene mas saturacion y mas luz,
     que es lo que lo hace ver metal y no papel viejo. De paso gana
     contraste contra el fondo, que nunca sobra. ---- */
  --dorado: #ffcf4d;
  --dorado-claro: #ffe49a;
  --dorado-osc: #d9a52a;
  --dorado-tenue: rgba(255, 207, 77, .15);
  --azul: #4668f0;
  --azul-claro: #7d95f7;
  --azul-osc: #0b1430;
  --azul-tenue: rgba(70, 104, 240, .16);

  /* ---- Los estados ---- */
  --verde: #3ddc97;
  --verde-tenue: rgba(61, 220, 151, .13);
  --rojo: #ff8071;
  --rojo-tenue: rgba(255, 128, 113, .13);
  --ambar: #f5b945;
  --ambar-tenue: rgba(245, 185, 69, .13);

  /* ---- Nombres de antes, apuntando a la paleta nueva. Siguen vivos
     porque la hoja los usa en 336 reglas y renombrarlos todos no
     cambiaria ni un pixel. ---- */
  --gris-100: #101c44;
  --gris-200: #223160;
  --gris-400: #3a4f94;
  --gris-600: #a3afd4;

  /* El piso de la letra chica. Lo mismo que usa la hoja del sistema: la
     letra de apoyo y los rotulos no bajan de 12 px, y si algun dia hay que
     subirlos se suben aqui y no en treinta reglas. */
  --texto-apoyo: 12px;
  --texto-rotulo: 12px;

  /* El aire a los lados del lienzo. Va en una ficha porque la marca de
     agua tiene que salirse exactamente de el: si se queda dentro, las
     dos mitades de la A no cierran al juntar las pantallas. */
  --relleno-lienzo: 16px;

  --radio: 14px;
  --radio-chico: 10px;
  --transicion-boton: 150ms cubic-bezier(.4, 0, .2, 1);
  --sombra: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --sombra-alta: 0 4px 8px rgba(0, 0, 0, .34), 0 18px 48px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gris-100);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

/* -------- Encabezado -------- */
.cat-header {
  background: linear-gradient(90deg, var(--azul-osc), var(--azul) 85%);
  color: var(--texto);
  border-bottom: 3px solid var(--dorado);
}
.cat-header-interno {
  max-width: 1180px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.cat-marca { display: flex; align-items: center; gap: 12px; }
.cat-logo { height: 42px; width: auto; }
.cat-nombre { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.cat-nombre span { color: var(--dorado-claro); }
.cat-tagline { font-size: 13px; color: var(--texto-2); margin-top: 2px; }

.cat-tasa {
  font-size: 13px; color: var(--texto-2); text-align: right;
  background: rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 7px 14px;
}
.cat-tasa strong { color: var(--texto); }

/* -------- Buscador -------- */
.cat-main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 120px; }

.cat-buscador { margin-bottom: 20px; }

.cat-campo-busqueda { position: relative; }
.cat-lupa {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
#cat-buscar {
  width: 100%; font-family: inherit; font-size: 16px; padding: 15px 16px 15px 46px;
  border: 1px solid var(--gris-200); border-radius: var(--radio); background: var(--superficie);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
#cat-buscar:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }

.cat-filtros {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
#cat-categoria {
  font-family: inherit; font-size: 14px; padding: 9px 12px; min-height: 44px;
  border: 1px solid var(--gris-400); border-radius: 8px; background: var(--superficie);
}
/* La casilla mide 17px, pero lo que se toca es el rótulo entero: una casilla
   de 17 en un teléfono se falla una de cada tres veces. */
.cat-check {
  display: flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--gris-600); cursor: pointer;
}
.cat-check input { width: 20px; height: 20px; accent-color: var(--azul); }

.cat-conteo { margin-top: 12px; font-size: 13px; color: var(--gris-600); }

/* -------- Rejilla de productos -------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px;
}

.cat-card {
  background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--gris-200);
  padding: 16px 18px 14px; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.cat-card.agotado { background: var(--superficie); opacity: .62; }
.cat-card { transition: box-shadow var(--transicion-boton), transform var(--transicion-boton); }
.cat-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cat-card:hover { transform: none; } }

.cat-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.cat-categoria {
  font-size: var(--texto-apoyo); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--dorado); background: var(--dorado-tenue); padding: 4px 10px; border-radius: 20px;
}
.cat-estado { font-size: var(--texto-apoyo); font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cat-estado.hay { background: var(--verde-tenue); color: var(--verde); }
.cat-estado.no-hay { background: var(--gris-200); color: var(--gris-600); }

.cat-card h3 { margin: 0 0 2px; font-size: 17px; line-height: 1.3; color: var(--texto); }
/* Marca, modelo y color: lo que distingue dos productos que se llaman casi
   igual. Van en etiquetas debajo del nombre, y si el producto no los tiene
   cargados la tarjeta no cambia de alto. */
.cat-ficha { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.cat-dato {
  font-size: var(--texto-apoyo); color: var(--gris-600); background: var(--gris-100);
  border: 1px solid var(--gris-200); border-radius: 20px; padding: 3px 9px;
  /* "Modelo: UTCS11110242" no puede ensanchar su columna: se parte. */
  overflow-wrap: anywhere;
}
.cat-dato b { color: var(--texto); font-weight: 700; }

.cat-codigo { font-size: 12px; color: var(--gris-600); margin-bottom: 12px; }

.cat-precios { border-top: 1px solid var(--gris-200); padding-top: 12px; margin-top: auto; }
.cat-bloque-precio + .cat-bloque-precio {
  border-top: 1px dashed var(--gris-200); margin-top: 10px; padding-top: 10px;
}
.cat-precio-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cat-precio-label { font-size: 12.5px; font-weight: 700; color: var(--gris-600); text-transform: uppercase; letter-spacing: 0.4px; }
.cat-precio-monto { font-size: 20px; font-weight: 800; color: var(--texto); }
.cat-precio-detalle { font-size: 12.5px; color: var(--dorado); margin-top: 3px; }
.cat-precio-inicial { font-size: 12.5px; color: var(--dorado-osc); margin-top: 3px; font-weight: 600; }
.cat-precio-descuento { font-size: 12.5px; color: var(--verde); font-weight: 600; margin-top: 3px; }
/* Las tres formas de pagar en divisas, en chico y sin gritar: es una
   aclaracion del precio de arriba, no una segunda oferta. */
.cat-precio-descuento small { display: block; font-weight: 500;
  font-size: var(--texto-apoyo); color: var(--gris-600); margin-top: 1px; }
/* El contrato se paga aparte del producto. Va en tono sobrio: es un dato que
   el cliente debe conocer antes de venir, ni una oferta ni una advertencia. */
.cat-precio-contrato { font-size: 12.5px; color: var(--gris-600); margin-top: 3px; }
.cat-precio-contrato strong { color: var(--texto); }

.cat-acciones { display: flex; gap: 9px; margin-top: 14px; }


/* -------- Foto del producto -------- */
.cat-foto {
  position: relative; margin: -16px -18px 12px; height: 200px; overflow: hidden;
  border-radius: var(--radio) var(--radio) 0 0; background: var(--gris-100);
  display: flex; align-items: center; justify-content: center;
}
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-foto.sin-foto span { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.cat-cinta-encargo {
  position: absolute; top: 10px; left: 0; background: rgba(9, 16, 40, .92); color: var(--dorado);
  font-size: var(--texto-apoyo); font-weight: 700; padding: 5px 12px; border-radius: 0 20px 20px 0;
  letter-spacing: 0.4px;
}
.cat-card.agotado .cat-foto img { filter: grayscale(0.55) opacity(0.85); }

.cat-item-foto {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--gris-200); display: block; background: var(--gris-100);
}
.cat-item-foto.sin-foto { border-style: dashed; }

@media (max-width: 640px) { .cat-foto { height: 210px; } }

/* -------- Botones -------- */
/* 44px de alto mínimo. Medido: los dos botones de cada ficha de producto
   —los que más se tocan en todo el catálogo— quedaban en 38, por debajo de
   lo que un pulgar acierta sin apuntar. Es la medida que recomiendan tanto
   Apple (44pt) como Material (48dp), y aquí además se tocan en movimiento. */
.cat-btn {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  min-height: 44px;
  border: 1px solid transparent; border-radius: 9px; padding: 11px 16px; text-align: center;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--superficie); border-color: var(--gris-200); color: var(--texto-2);
  transition: background var(--transicion-boton), border-color var(--transicion-boton),
              color var(--transicion-boton), box-shadow var(--transicion-boton),
              transform var(--transicion-boton);
}
.cat-btn:hover { background: var(--gris-100); border-color: var(--gris-400); transform: translateY(-1px); }
.cat-btn:active { transform: translateY(0); transition-duration: 60ms; }
.cat-btn:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.cat-btn-principal {
  background: linear-gradient(90deg, var(--dorado-osc), var(--dorado));
  border-color: transparent; color: var(--texto); box-shadow: 0 1px 3px rgba(156, 118, 38, .3);
}
.cat-btn-principal:hover {
  background: linear-gradient(90deg, var(--dorado-osc), var(--dorado));
  border-color: transparent; color: var(--texto); box-shadow: 0 6px 16px rgba(156, 118, 38, .38);
}

.cat-btn-whatsapp { background: #25d366; border-color: transparent; color: #052b15;
  box-shadow: 0 1px 3px rgba(37, 211, 102, .3); }
.cat-btn-whatsapp:hover { background: #1fbe5b; border-color: transparent; color: #052b15;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .35); }

.cat-btn-ancho { width: 100%; margin-top: 10px; }
.cat-acciones .cat-btn { flex: 1; }
.cat-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* "✓ Agregado": confirma sin gritar */
.cat-btn-agregado { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }
.cat-btn-agregado:hover { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }

.cat-btn-sutil { background: none; border-color: transparent; color: var(--gris-600); }
.cat-btn-sutil:hover { background: var(--gris-100); border-color: var(--gris-200); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .cat-btn, .cat-btn:hover, .cat-btn:active { transition: none; transform: none; }
}

/* -------- Estados de la página -------- */
.cat-vacio, .cat-cargando { padding: 50px 20px; text-align: center; color: var(--gris-600); }
.cat-vacio p { margin: 4px 0; }
.cat-hint { font-size: 13px; color: var(--gris-600); }
.cat-aviso {
  margin-top: 26px; font-size: 12.5px; color: var(--gris-600); line-height: 1.6;
  border-top: 1px solid var(--gris-200); padding-top: 16px;
}

.cat-footer {
  background: var(--azul-osc); color: var(--texto-2); text-align: center;
  padding: 18px 20px; font-size: 13px;
}

.catalogo-apagado { max-width: 420px; margin: 90px auto; text-align: center; padding: 0 20px; }
.apagado-icono { height: 60px; margin-bottom: 14px; }
.catalogo-apagado h1 { font-size: 22px; color: var(--texto); }
.catalogo-apagado p { color: var(--gris-600); }


/* -------- Ayuda: cómo se compra -------- */
.cat-header-derecha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cat-btn-ayuda {
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--fondo); background: var(--dorado-claro); border: none;
  border-radius: 20px; padding: 9px 16px; white-space: nowrap;
}
.cat-btn-ayuda {
  transition: background var(--transicion-boton), box-shadow var(--transicion-boton),
              transform var(--transicion-boton);
}
.cat-btn-ayuda:hover { background: var(--superficie); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cat-btn-ayuda:active { transform: translateY(0); }

.cat-invitacion {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
}
.cat-invitacion-texto { display: flex; flex-direction: column; gap: 2px; }
.cat-invitacion-texto strong { font-size: 15px; color: var(--texto); }
.cat-invitacion-texto span { font-size: 13.5px; color: var(--gris-600); }
.cat-invitacion-botones { display: flex; gap: 9px; }
.cat-btn-sutil { background: none; color: var(--gris-600); }
.cat-btn-sutil:hover { background: var(--gris-200); }

.cat-ayuda-pregunta {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--texto);
}
.cat-tabs {
  /* Eran dos pestanas y ahora son tres (se sumo «Pagar mi cuota»): se reparten
     solas en vez de ir a dos columnas fijas, que dejaba la tercera sola en
     una segunda fila. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; margin-bottom: 16px;
  background: var(--gris-100); padding: 5px; border-radius: 11px;
}
.cat-tab {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  /* con tres, el rotulo mas largo no puede empujar a los otros */
  min-width: 0; overflow-wrap: break-word;
  border: none; background: none; color: var(--gris-600);
  padding: 10px 8px; border-radius: 8px;
}
.cat-tab.activa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 4px rgba(0, 0, 0, .36); }

.cat-pasos { list-style: none; margin: 0 0 4px; padding: 0; }
.cat-pasos li {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  font-size: 14.5px; line-height: 1.45; color: var(--texto);
  border-bottom: 1px solid var(--gris-200);
}
.cat-pasos li:last-child { border-bottom: none; }
.cat-paso-icono { font-size: 20px; line-height: 1.2; flex-shrink: 0; }

/* la línea de las cuotas y la del descuento se pueden tocar para que
   expliquen esa modalidad */
.cat-explicable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cat-explicable:hover { filter: brightness(0.85); }

@media (max-width: 640px) {
  .cat-btn-ayuda { width: 100%; }
  .cat-invitacion { padding: 13px 15px; }
  .cat-invitacion-botones { width: 100%; }
  .cat-invitacion-botones .cat-btn { flex: 1; }
}



/* -------- Pago de la inicial -------- */
.cat-paso-pago {
  border: 1px solid var(--dorado-claro); background: var(--superficie);
  border-radius: 12px; padding: 14px; margin: 4px 0 16px;
}
.cat-pago-encabezado { text-align: center; margin-bottom: 12px; }
.cat-pago-encabezado span { display: block; font-size: 12px; color: var(--gris-600);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cat-pago-encabezado strong { display: block; font-size: 27px; font-weight: 800; color: var(--texto); }
.cat-pago-encabezado small { display: block; font-size: 13px; color: var(--gris-600); }

.cat-pago-pregunta { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.cat-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-metodo {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 11px 8px; border-radius: 9px; border: 1px solid var(--gris-400);
  background: var(--superficie); color: var(--texto-2); text-align: center;
}
.cat-metodo { transition: background var(--transicion-boton), border-color var(--transicion-boton),
              color var(--transicion-boton), transform var(--transicion-boton); }
.cat-metodo:hover { border-color: var(--dorado); background: var(--superficie); transform: translateY(-1px); }
.cat-metodo:active { transform: translateY(0); }
.cat-metodo.elegido {
  background: var(--dorado-tenue); border-color: var(--dorado); color: var(--texto);
}

.cat-datos-pago {
  background: var(--superficie); border: 1px solid var(--gris-200); border-radius: 10px;
  padding: 12px 14px; margin-top: 12px;
}
.cat-datos-pago .cat-dato {
  display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--gris-100);
  background: none; border-radius: 0; border-top: none; border-left: none;
  border-right: none; color: var(--texto);
}
.cat-datos-pago .cat-dato:last-child { border-bottom: none; }

/* Mandar USDT por la red equivocada es perder el dinero, y no se puede
   deshacer. Por eso este aviso no es un 'hint' gris mas: tiene que
   verse antes de que el cliente copie la direccion. */
.cat-aviso-red { margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--ambar-tenue); border: 1px solid var(--ambar); color: var(--ambar);
  font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.cat-datos-pago .cat-dato span { color: var(--gris-600); }
.cat-datos-pago .cat-dato strong {
  color: var(--texto); text-align: right; overflow-wrap: anywhere;
}

.cat-campos-pago { margin-top: 12px; }
.cat-campos-pago label { margin-bottom: 10px; }

.cat-comprobante { margin-top: 4px; }
.cat-btn-archivo { display: inline-flex; cursor: pointer; font-size: 13px; padding: 9px 14px; }
.cat-comprobante small { display: block; margin-top: 5px; font-size: 12px; color: var(--gris-600); }
.cat-comprobante-vista { display: flex; flex-direction: column;
                         align-items: flex-start; margin-top: 8px; }
.cat-comprobante-vista img { max-width: 130px; max-height: 130px; border-radius: 9px;
  border: 1px solid var(--gris-200); display: block; }
.cat-comprobante-vista button {
  margin-top: 8px; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--borde);
  color: var(--texto-2); font: inherit; font-size: 13px; line-height: 1;
  transition: border-color var(--transicion-boton), color var(--transicion-boton);
}

.cat-aviso-tienda {
  margin-top: 12px; background: var(--superficie); border: 1px solid var(--gris-200);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--texto);
}

@media (max-width: 480px) { .cat-metodos { grid-template-columns: 1fr; } }

/* -------- Confirmación del encargo -------- */
.cat-listo-icono.pendiente { background: var(--dorado-tenue); color: var(--dorado-osc); }

.cat-codigo-caja {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--gris-100); border: 1px dashed var(--gris-400);
  border-radius: 12px; padding: 12px; margin: 14px 0 10px;
}
.cat-codigo-caja span { font-size: var(--texto-apoyo); color: var(--gris-600); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px; }
.cat-codigo-caja strong {
  font-size: 30px; font-weight: 800; letter-spacing: 5px; color: var(--texto);
  font-family: "Consolas", "Courier New", monospace;
}

.cat-aparta {
  background: var(--dorado-tenue); border-radius: 9px; padding: 10px 13px; margin: 12px 0 0;
  font-size: 12.5px; color: var(--dorado-osc); line-height: 1.5;
}

/* -------- Barra flotante del encargo -------- */
.cat-barra-encargo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--superficie); border-top: 1px solid var(--gris-200);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .36);
  padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.cat-barra-info { display: flex; flex-direction: column; line-height: 1.35; }
.cat-barra-info strong { font-size: 15px; color: var(--texto); }
.cat-barra-info span { font-size: 12.5px; color: var(--gris-600); }

/* -------- Modales -------- */
.cat-modal-fondo {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.cat-modal {
  background: var(--superficie); border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 100%; overflow-y: auto;
  /* si algun dia algo vuelve a pasarse de ancho, se recorta en vez de
     obligar a mover la pantalla de lado */
  overflow-x: hidden;
}
.cat-modal-angosto { max-width: 400px; }
.cat-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--gris-200);
}
.cat-modal-header h2 { margin: 0; font-size: 19px; color: var(--texto); }
.cat-cerrar {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--texto-2); width: 34px; height: 34px; border-radius: 9px;
  transition: background var(--transicion-boton), color var(--transicion-boton);
}
.cat-cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.cat-modal-cuerpo { padding: 18px 22px 22px; }

.cat-lista-encargo { margin-bottom: 18px; }
.cat-item-encargo {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--gris-200);
}
.cat-item-nombre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--texto); }
.cat-item-nombre small { display: block; font-weight: 400; color: var(--gris-600); font-size: 12.5px; }
.cat-cantidad { display: flex; align-items: center; gap: 6px; }
.cat-cantidad button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gris-200);
  background: var(--superficie); font-size: 17px; line-height: 1; cursor: pointer; color: var(--texto);
  transition: background var(--transicion-boton), border-color var(--transicion-boton);
}
.cat-cantidad button:hover { background: var(--gris-100); border-color: var(--gris-400); }
.cat-cantidad span { min-width: 22px; text-align: center; font-weight: 700; }
.cat-quitar {
  background: none; border: none; color: var(--gris-400); font-size: 18px; cursor: pointer;
  padding: 4px; width: 30px; height: 30px; border-radius: 8px;
  transition: background var(--transicion-boton), color var(--transicion-boton);
}
.cat-quitar:hover { background: var(--rojo-tenue); color: var(--rojo); }

.cat-total-encargo {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; font-size: 15px; font-weight: 700; color: var(--texto);
}
.cat-total-encargo small { display: block; font-weight: 400; font-size: 12.5px; color: var(--gris-600); text-align: right; }

#cat-form-encargo label,
#mi-form-pague label {
  display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700;
  color: var(--texto-2); margin-bottom: 12px;
}
#cat-form-encargo input, #cat-form-encargo textarea,
#mi-form-pague input, #mi-form-pague select {
  font-family: inherit; font-size: 16px; font-weight: 400; padding: 11px 12px;
  border: 1px solid var(--gris-400); border-radius: 9px; resize: vertical;
}
.cat-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cat-nota-legal { font-size: 12px; color: var(--gris-600); line-height: 1.55; margin: 4px 0 0; }
.cat-error { color: var(--rojo); font-size: 13.5px; min-height: 18px; margin: 8px 0 0; }

.cat-listo { padding: 30px 26px; text-align: center; }
.cat-listo-icono {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--verde-tenue); color: var(--verde); font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cat-listo h2 { margin: 0 0 8px; font-size: 21px; color: var(--texto); }
.cat-listo p { margin: 0 0 8px; font-size: 14px; }

/* -------- Celulares -------- */
@media (max-width: 640px) {
  .cat-header-interno { padding: 13px 16px; }
  .cat-logo { height: 36px; }
  .cat-nombre { font-size: 18px; }
  .cat-tasa { text-align: left; width: 100%; font-size: 12.5px; }
  .cat-main { padding: 18px 12px 130px; }

  /* Dos por fila: se ve el doble de mercancía en el mismo golpe de vista.
     A esta anchura (unos 165 px por tarjeta) todo lo de dentro tiene que
     encoger, o se desborda. */
  .cat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

  .cat-card { padding: 10px 10px 12px; border-radius: 12px; }

  /* la foto manda: es lo que hace que alguien se detenga */
  .cat-foto { margin: -10px -10px 9px; height: 132px; border-radius: 12px 12px 0 0; }
  .cat-cinta-encargo { font-size: var(--texto-apoyo); padding: 3px 8px; top: 7px; }

  /* la categoría y el "disponible" se apilan si no caben al lado */
  .cat-card-top { flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
  .cat-categoria { font-size: var(--texto-apoyo); padding: 3px 7px; letter-spacing: .3px; }
  .cat-estado { font-size: var(--texto-apoyo); padding: 3px 7px; }

  .cat-card h3 { font-size: 14px; line-height: 1.25; }
  .cat-codigo { font-size: var(--texto-apoyo); margin-bottom: 8px; }

  .cat-precios { padding-top: 9px; }
  .cat-bloque-precio + .cat-bloque-precio { margin-top: 7px; padding-top: 7px; }
  /* la etiqueta y el monto, uno debajo del otro: en la misma línea no caben */
  .cat-precio-linea { display: block; }
  .cat-precio-label { font-size: var(--texto-apoyo); letter-spacing: .2px; }
  .cat-precio-monto { font-size: 18px; display: block; }
  .cat-precio-detalle,
  .cat-precio-inicial,
  .cat-precio-descuento,
  .cat-precio-contrato { font-size: var(--texto-apoyo); margin-top: 2px; line-height: 1.3; }

  /* uno encima del otro: lado a lado darían botones de 75 px, que no se
     aciertan con el dedo */
  .cat-acciones { flex-direction: column; gap: 6px; margin-top: 10px; }
  .cat-acciones .cat-btn { width: 100%; padding: 10px 8px; font-size: 12.5px; }
  .cat-filtros { gap: 10px; }
  #cat-categoria { flex: 1; }
  .cat-barra-encargo { padding: 11px 16px; }
  .cat-barra-encargo .cat-btn { padding: 11px 14px; font-size: 13.5px; }
  .cat-modal-cuerpo { padding: 16px; }
  .cat-form-fila { grid-template-columns: 1fr; gap: 0; }
}

/* Por debajo de 340 px dos tarjetas ya no dan: mejor una bien vista que
   dos ilegibles. Son teléfonos viejos, pero los hay. */
@media (max-width: 339px) {
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-foto { height: 190px; }
  .cat-card h3 { font-size: 16px; }
  .cat-precio-monto { font-size: 20px; }
  .cat-acciones { flex-direction: row; }
}

/* -------- La lámina de requisitos -------- */
/* La lámina se abre por encima del encargo, que está después en el documento
   y si no la taparia. */
#cat-modal-requisitos { z-index: 70; }

.cat-aviso-requisitos {
  margin: 0 0 14px; padding: 10px 14px; font-size: 13.5px; color: var(--texto);
  background: var(--dorado-tenue); border: 1px solid var(--dorado); border-radius: 10px;
}
.cat-aviso-requisitos button {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--azul); font-weight: 700; text-decoration: underline;
}
.cat-aviso-requisitos button:hover { color: var(--dorado-osc); }

.cat-modal-lamina { max-width: 620px; }
.cat-lamina {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--gris-200); background: var(--gris-100);
}
.cat-lamina-nota {
  font-size: 12.5px; color: var(--gris-600); text-align: center; margin: 10px 0 14px;
}
/* El cuadro lleva dos láminas, una debajo de la otra: los requisitos y lo
   que pasa si se atrasa. Sin este aire quedan pegadas y se leen como una
   sola imagen partida por la mitad. */
.cat-lamina + .cat-btn { margin-top: 12px; }
/* Dorado y no azul: el cuadro tiene el fondo azul oscuro, y un título azul
   sobre azul se lee a medias. */
.cat-lamina-titulo {
  margin: 26px 0 10px; font-size: 16px; font-weight: 800;
  color: var(--dorado); text-align: center;
}

/* -------- Llegó escaneando la etiqueta de un producto -------- */
.cat-escaneado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--dorado-tenue); border: 1px solid var(--dorado-osc);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
}
.cat-escaneado span { display: block; font-size: 13px; color: var(--dorado); }
.cat-escaneado strong { display: block; font-size: 17px; color: var(--texto); }

/* la tarjeta a la que apunta la etiqueta, para que se reconozca de una */
.cat-card.escaneado {
  border-color: var(--dorado);
  box-shadow: 0 0 0 4px var(--dorado), 0 12px 30px rgba(0, 0, 0, .6);
}


/* -------- Interruptor de moneda -------- */
/* Cambia todos los precios de la pagina, asi que no puede parecer un filtro
   mas: va en su propia barra, antes de los productos. */
.cat-modo-pago { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borde); }
/* Era el rótulo del interruptor de moneda; desde que el precio es uno solo
   es el sello de la tasa, y por eso va en dorado y no en gris. */
.cat-modo-titulo { font-size: 13.5px; font-weight: 800; color: var(--dorado);
  letter-spacing: .02em; white-space: nowrap; }
.cat-modo-nota { font-size: 12.5px; color: var(--gris-600); flex: 1 1 200px; }
.cat-modo-nota b { color: var(--verde); }

/* La linea de equivalencia bajo el precio: en modo bolivares dice lo que
   costaria en divisas, y en modo divisas lo que costaria en bolivares. */
.cat-precio-otra-moneda { font-size: 12.5px; color: var(--gris-600); margin-top: 3px; }
.cat-precio-otra-moneda strong { color: var(--texto); }

@media (max-width: 560px) {
  .cat-modo-pago { gap: 8px; }
  .cat-modo-nota { flex-basis: 100%; }
}

/* un producto que se vende solo de contado */
.cat-solo-detal .cat-no-aplica { font-size: .95rem; opacity: .6; }
.cat-precio-detalle-fijo { font-size: .85rem; opacity: .75; margin-top: .2rem; }

/* ===================================================================
   Mi cuenta — la pantalla donde el cliente ve lo que debe.

   Va aquí y no en un archivo aparte porque esa pantalla ya carga este
   CSS: un archivo más sería una petición más en un teléfono con datos
   malos, para ahorrarse un kilobyte que la caché guarda un año igual.
   =================================================================== */

.mi-cuenta { max-width: 560px; margin: 0 auto; padding: 16px; }
.mi-cargando { text-align: center; color: var(--texto-2); padding: 40px 0; }

.mi-saludo { font-size: 1.35rem; margin: 8px 0 14px; color: var(--texto); }
.mi-total-general { margin: 0 0 14px; color: var(--texto-2); }
.mi-total-general strong { color: var(--rojo); }

/* El contrato, plegado. El renglón de arriba es todo lo que se ve hasta
   que lo toquen: qué es, cómo va, y cuánto falta. Con tres contratos, tres
   renglones; antes eran tres pantallazos. */
.mi-card { padding: 0; margin-bottom: 12px; }
.mi-card-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  min-height: 56px;
}
.mi-card-top::-webkit-details-marker { display: none; }
.mi-card-que { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mi-card-que strong { font-size: .97rem; font-weight: 700; color: var(--texto); }
.mi-card-productos {
  font-size: var(--texto-apoyo); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi-card-estado {
  font-size: var(--texto-apoyo); font-weight: 600; color: var(--texto-3);
}
.mi-card-estado.vencida { color: var(--rojo); }
.mi-card-estado.hoy { color: var(--dorado); }
.mi-card-estado.al-dia { color: var(--verde); }
.mi-card-cifras { flex: none; display: grid; gap: 1px; text-align: right; }
.mi-card-saldo {
  font-size: 1.02rem; font-weight: 800; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.mi-card-pie { font-size: var(--texto-apoyo); color: var(--texto-3); }
.mi-card > summary .ap-flecha {
  flex: none; width: 16px; height: 16px; color: var(--texto-3);
  transition: transform 160ms ease;
}
.mi-card[open] > summary .ap-flecha { transform: rotate(90deg); }
.mi-card-detalle { padding: 0 16px 16px; }
.mi-pausado { font-size: .9rem; color: var(--verde); margin: 0; }

.mi-renglon { display: flex; justify-content: space-between; gap: 12px;
              padding: 7px 0; border-bottom: 1px solid var(--borde);
              font-size: .92rem; color: var(--texto-2); }
.mi-renglon.mi-recargo strong { color: var(--ambar); }
.mi-renglon.mi-total { border-bottom: 0; border-top: 2px solid var(--borde);
                       margin-top: 4px; padding-top: 10px;
                       font-size: 1.05rem; color: var(--texto); }
.mi-renglon.mi-total strong { color: var(--rojo); }

.mi-en-bs { margin: 10px 0 0; font-size: .95rem; color: var(--texto); }
.mi-en-bs span { display: block; font-size: .78rem; color: var(--texto-2); }

.mi-donde-pagar h2 { font-size: 1rem; margin: 0 0 10px; color: var(--texto); }
/* Cada bloque termina en su propio botón de copiar, así que necesita más aire
   que antes: pegados, el botón de uno parecía el encabezado del siguiente. */
.mi-pago-bloque { margin-bottom: 20px; }
.mi-pago-bloque:last-of-type { margin-bottom: 0; }
.mi-pago-bloque h3 { font-size: .85rem; margin: 0 0 3px; color: var(--texto-2);
                     text-transform: uppercase; letter-spacing: .04em; }
.mi-pago-bloque p { margin: 1px 0; font-size: .95rem; color: var(--texto);
                    /* se copian con el dedo: que se puedan seleccionar */
                    user-select: all; }
.mi-aviso { margin: 10px 0 0; font-size: .85rem; color: var(--texto-2); }

.mi-al-dia p { margin: 0; color: var(--verde); }
.mi-error h2 { font-size: 1rem; margin: 0 0 6px; color: var(--rojo); }
.mi-error p { margin: 0; font-size: .92rem; color: var(--texto-2); }

.mi-pie { max-width: 560px; margin: 0 auto; padding: 8px 16px 32px;
          text-align: center; }
.mi-pie p { font-size: .85rem; color: var(--texto-2); margin: 0 0 10px; }
/* `.mi-pie p` es mas especifico y le pisaba el margen de arriba: la version
   quedaba pegada al boton de WhatsApp. Por eso va con el padre delante. */
.mi-pie .mi-version {
  font-size: var(--texto-apoyo); color: var(--texto-3); margin: 22px 0 0;
}

/* Sin modo oscuro a proposito: el catalogo que ya usan los clientes es claro
   —fondo #f5f7fa y tarjetas blancas, sin un solo prefers-color-scheme para
   ellas—, asi que un bloque oscuro aqui pintaba texto claro sobre blanco y
   dejaba los numeros casi invisibles en cualquier telefono en modo noche. */

/* ---- Los tres botones de «Ya pagué» ----
   Van en AZUL, no en dorado. El dorado es el de «entrar a mi cuenta», y en
   esta ventana dos dorados seguidos —adjuntar y avisar— se leían como el
   mismo botón repetido. Así queda una escalera: el de la tarjeta abre, el de
   adjuntar prepara, y el azul lleno manda. */

/* Adjuntar es el paso que PREPARA, no la acción. El borde punteado es el
   gesto de adjuntar que el cliente ya conoce de cualquier aplicación, y lo
   saca de la fila de los botones de verdad. */
#mi-form-pague .cat-btn-archivo {
  width: 100%; font-size: 14px; padding: 13px 14px;
  background: var(--gris-100); border: 1.5px dashed var(--gris-400);
  color: var(--texto);
}
#mi-form-pague .cat-btn-archivo:hover {
  background: var(--superficie-2); border-color: var(--azul); color: var(--texto);
}

/* Y el único primario de la ventana. */
#mi-pague-enviar {
  background: var(--azul); border-color: transparent; color: var(--texto);
  box-shadow: 0 1px 3px rgba(20, 48, 156, .3);
}
#mi-pague-enviar:hover {
  background: var(--azul-osc); border-color: transparent; color: var(--texto);
  box-shadow: 0 6px 16px rgba(20, 48, 156, .35);
}

/* ===================================================================
   El panel de pagar la cuota, y el recorrido guiado.
   =================================================================== */

/* Resalta a proposito: es lo que mas gente viene a hacer. El borde dorado es
   el de la marca, el mismo del boton de Ingresar del sistema. */
.cat-pagar { display: flex; flex-wrap: wrap; align-items: center;
             justify-content: space-between; gap: 14px;
             background: linear-gradient(135deg, #1a2c62 0%, #243a7e 100%);
             border: 2px solid var(--dorado-osc); border-radius: 14px;
             padding: 16px 18px; margin-bottom: 16px;
             box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.cat-pagar-texto { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.cat-pagar-texto strong { color: var(--texto); font-size: 1.08rem; }
.cat-pagar-texto span { color: var(--azul-claro); font-size: .9rem; }
.cat-pagar-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-btn-pagar { background: var(--dorado-osc); color: var(--fondo); font-weight: 700;
                 border: 0; }
.cat-btn-pagar:hover { background: var(--dorado-claro);   color: var(--fondo);
}
.cat-pagar .cat-btn-sutil { color: var(--azul-claro); border-color: var(--borde); background: transparent; }
.cat-pagar .cat-btn-sutil:hover { color: var(--texto); border-color: var(--dorado); }

@media (max-width: 520px) {
  .cat-pagar { flex-direction: column; align-items: stretch; }
  .cat-pagar-botones { flex-direction: column; }
  .cat-pagar-botones .cat-btn { width: 100%; }
}

/* El recorrido: un velo con un hueco encima de lo que se esta senalando. El
   hueco no se recorta de verdad —eso pide mascaras y da guerra en telefonos
   viejos—: es un recuadro con una sombra enorme que oscurece todo lo demas. */
.cat-paseo { position: absolute; inset: 0; z-index: 70; }
.cat-paseo-fondo { position: fixed; inset: 0; }
.cat-paseo-foco { position: absolute; border-radius: 12px;
                  border: 2px solid var(--dorado-osc);
                  box-shadow: 0 0 0 9999px rgba(6, 14, 43, .72);
                  pointer-events: none;
                  transition: top .25s, left .25s, width .25s, height .25s; }
/* Centrado con translateX y no con un margen negativo: «-min(...)» no es CSS
   valido —hay que negar con calc()— y el globo se salia por la derecha. El
   JS le cambia el transform para ponerlo encima o debajo de lo senalado, asi
   que el desplazamiento horizontal va dentro de ese mismo transform. */
.cat-paseo-globo { position: absolute; left: 50%; transform: translateX(-50%);
                   width: min(92vw, 380px);
                   background: var(--superficie); border-radius: 14px; padding: 16px;
                   box-shadow: 0 12px 32px rgba(0, 0, 0, .32); }
.cat-paseo-globo h3 { margin: 0 0 6px; font-size: 1rem; color: var(--texto); }
.cat-paseo-globo p { margin: 0 0 14px; font-size: .92rem; color: var(--texto-2);
                     line-height: 1.45; }
.cat-paseo-pie { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; flex-wrap: wrap; }
.cat-paseo-navega { display: flex; gap: 8px; margin-left: auto; }
.cat-paseo-cuenta { font-size: .8rem; color: var(--texto-2); }
.cat-paseo-saltar { background: none; border: 0; padding: 0; cursor: pointer;
                    font-size: .85rem; color: var(--texto-2); text-decoration: underline; }


/* -------- Mi cuenta: el progreso y las opciones de pago -------- */

.mi-compra { border-bottom: 1px solid var(--borde); }

.mi-progreso { padding: 10px 0 2px; }
.mi-progreso-datos { display: flex; justify-content: space-between; gap: 12px;
                     font-size: .92rem; color: var(--texto-2); margin-bottom: 7px; }
.mi-progreso-datos strong { color: var(--texto); white-space: nowrap; }
/* La barra: dorado sobre gris, los dos colores de la marca. Marca lo que ya
   pago, no lo que debe — es la misma cifra contada por el lado bueno. */
.mi-barra { height: 7px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.mi-barra span { display: block; height: 100%; border-radius: 99px;
                 background: linear-gradient(90deg, var(--dorado-osc), #e3c04a);
                 transition: width .4s; min-width: 3px; }

.mi-opciones { margin-top: 14px; }
.mi-opciones-titulo { margin: 0 0 8px; font-size: .95rem; font-weight: 700;
                      color: var(--texto); }
/* Cada opcion es un boton de verdad (no un div con un clic encima): asi se
   llega con el teclado y el lector de pantalla dice si esta elegida. */
.mi-opcion { color: var(--texto);
             display: flex; align-items: center; gap: 11px; width: 100%;
             padding: 12px 13px; margin-bottom: 8px; cursor: pointer;
             font: inherit; text-align: left;
             background: var(--superficie); border: 1.5px solid var(--borde); border-radius: 12px; }
.mi-opcion:hover { border-color: var(--dorado-osc); }
.mi-opcion-marca { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
                   border: 2px solid #c6cbd6; }
.mi-opcion[aria-pressed="true"] {
  border-color: var(--dorado); background: var(--dorado-tenue);
}
.mi-opcion[aria-pressed="true"] .mi-opcion-marca { border-color: var(--dorado-osc);
                   box-shadow: inset 0 0 0 4px var(--dorado-osc); }
.mi-opcion-que { flex: 1; font-weight: 600; color: var(--texto); }
.mi-opcion-cuanto { text-align: right; font-weight: 700; color: var(--texto);
                    white-space: nowrap; }
.mi-opcion-cuanto small { display: block; font-weight: 400; font-size: .76rem;
                          color: var(--texto-2); }

/* «Pagar otro monto»: el que no puede con la cuota entera abona lo que tenga.
   El campo se abre debajo de su propio renglon y la cuenta en bolivares se
   rehace con cada tecla, que es lo que el cliente va a transferir. */
.mi-otro { margin-top: 8px; }
.mi-otro-campo {
  margin: 8px 0 0; padding: 12px 14px 10px;
  border: 1px solid var(--dorado-osc); border-top: none;
  border-radius: 0 0 12px 12px; background: rgba(255, 207, 77, .06);
}
.mi-otro-rotulo { display: block; font-size: .85rem; color: var(--texto-2);
                  margin-bottom: 7px; }
.mi-otro-caja {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo-2); padding: 0 12px;
}
.mi-otro-caja i { font-style: normal; font-weight: 800; color: var(--texto-2);
                  font-size: 1.05rem; }
/* Tres clases a proposito: `.ap-body input[type=number]` pinta TODOS los
   campos de la app con su fondo y su borde, y aqui el campo tiene que
   desaparecer dentro de su recuadro. Con menos peso gana la otra y se ven
   dos cajas, una dentro de la otra. */
.mi-otro-campo .mi-otro-caja input[type="number"] {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--texto); font: inherit; font-size: 1.25rem; font-weight: 700;
  padding: 11px 0; border-radius: 0;
}
/* Las flechitas de los campos numericos: con el dedo no sirven de nada y
   roban el ancho donde va el monto. */
.mi-otro-caja input::-webkit-outer-spin-button,
.mi-otro-caja input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mi-otro-caja input[type=number] { -moz-appearance: textfield; }
.mi-otro-nota { margin: 7px 0 0; font-size: .82rem; color: var(--texto-2); }
.mi-otro-nota.mi-otro-mal { color: #ff8f8f; }
.mi-opcion-libre[aria-pressed="true"] { border-radius: 12px 12px 0 0; }

/* El desglose, plegado: explica el numero de arriba a quien no lo da por bueno.
   Antes iba desplegado y era lo primero que se leia, que es justo al reves. */
.mi-desglose { margin-top: 12px; }
.mi-desglose summary { cursor: pointer; font-size: .85rem; color: var(--texto-2);
                       padding: 4px 0; }
.mi-desglose[open] summary { margin-bottom: 4px; }

.mi-elegido { margin: 0 0 12px; padding: 11px 13px; border-radius: 11px;
              background: var(--dorado-tenue); border: 1px solid var(--dorado-osc);
              color: var(--dorado-claro);
              font-size: .93rem; color: var(--texto); line-height: 1.5; }

/* -------- Los dos paneles: catálogo y mi cuenta -------- */
/* Dos pestañas, no un menú: son dos sitios y solo dos, y el cliente tiene que
   ver de un vistazo en cuál está. En el catálogo «Mi cuenta» es un <button>
   (abre el formulario o lleva al enlace guardado) y en mi cuenta es un <span>
   —la pestaña donde ya estás no se toca—, así que se estilan las tres igual. */
/* Sin relleno horizontal propio: va dentro de .cat-main, que ya tiene el
   suyo, y sumando los dos las pestanas quedaban mas adentro que el panel de
   abajo. */
.cat-paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
               margin: 0 0 14px; }
.cat-panel-tab { display: flex; align-items: center; justify-content: center;
                 gap: 7px; padding: 11px 10px; border-radius: 11px;
                 font: inherit; font-size: .95rem; font-weight: 700;
                 text-decoration: none; cursor: pointer;
                 color: #5b6577; background: var(--superficie-2); border: 0; }
.cat-panel-tab:hover { color: var(--texto); }
.cat-panel-tab.activa { color: var(--texto); background: #0a1a54; cursor: default; }
.cat-panel-tab.activa:hover { color: var(--texto); }

.mi-salir { display: block; margin: 12px auto 0; padding: 0;
            background: none; border: 0; cursor: pointer;
            font: inherit; font-size: .85rem; color: var(--texto-2);
            text-decoration: underline; }

/* En «Mi cuenta» la barra va fuera del <main>, asi que ahi si lleva el relleno
   y el ancho de la columna, para quedar a plomo con las tarjetas. */
.mi-cuenta-barra { max-width: 560px; margin: 16px auto 0; padding: 0 16px; }

/* ===================================================================
   Los avisos por la app.
   =================================================================== */

/* La tarjeta va callada a proposito: no compite con «Ya pague esta cuota»,
   que es lo que la gente viene a hacer. Es una oferta, no una tarea. */
.mi-avisos h2 { display: flex; align-items: center; gap: 8px;
                font-size: 16px; margin: 0 0 8px; }
.mi-avisos p { margin: 0 0 12px; color: var(--gris-600); font-size: 14px; }
.mi-avisos p:last-child { margin-bottom: 0; }

/* Prender si es una accion, asi que lleva boton de verdad —pero del mismo
   tipo que «Ya pague esta cuota» y no uno mas fuerte. Se probo relleno y
   quedaba gritando mas que lo que la gente de verdad viene a hacer. */
.mi-avisos-prender {
  width: 100%; padding: 13px 14px; font-size: 15px; font-weight: 600;
  border-radius: 10px; cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--azul); color: var(--texto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
}
.mi-avisos-prender:hover {
  background: var(--superficie-2); border-color: var(--dorado);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .48);
}
.mi-avisos-prender:active { transform: translateY(1px); }
.mi-avisos-prender:disabled { opacity: .6; cursor: default; transform: none; }

/* Ya prendido: el verde de "listo" y el apagar en segundo plano, que es lo
   que casi nadie va a tocar. */
.mi-avisos-prendido { border-color: var(--verde); background: var(--verde-tenue); }
.mi-avisos-falla { color: var(--rojo); font-size: 13px; margin-top: 10px; }

/* =========================================================================
   LA APP DEL CLIENTE
   -------------------------------------------------------------------------
   Lo que ve quien abre catalogo.trade en su teléfono: la bienvenida, la
   entrada con cédula y PIN, y el formulario de quien todavía no es cliente.

   Una sola voz: fondo marino, UNA cosa dorada por pantalla —la que hay que
   tocar— y la letra teñida del mismo azul en vez de gris. El gris sobre
   marino se ve sucio; el azul claro se ve del mismo mundo.
   ========================================================================= */

.ap-body {
  margin: 0;
  min-height: 100svh;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Las partes que no dibuja uno también son del diseño: sin esto la selección
   sale azul de Windows y la barra de desplazamiento gris de fábrica, encima
   de una página marino y oro. */
.ap-body ::selection { background: var(--dorado); color: var(--fondo); }
.ap-body { scrollbar-color: var(--superficie-3) transparent; scrollbar-width: thin; }
.ap-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.ap-body ::-webkit-scrollbar-thumb {
  background: var(--superficie-3); border-radius: 20px;
  border: 3px solid var(--fondo);
}
.ap-body :focus-visible {
  outline: 2px solid var(--dorado); outline-offset: 2px; border-radius: 6px;
}
.ap-body input, .ap-body textarea { caret-color: var(--dorado); }

/* `hidden` tiene que ganar siempre. Las reglas de abajo ponen `display` por
   clase, y una clase le gana al [hidden] del navegador: sin esto, un boton
   escondido desde el JS se sigue viendo. Paso: el boton de instalar salia en
   los telefonos donde no hay nada que instalar. */
.ap-body [hidden] { display: none !important; }

.ic { width: 20px; height: 20px; flex: none; display: block; }

.ap-lienzo {
  max-width: 460px; margin: 0 auto;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) var(--relleno-lienzo)
           max(16px, env(safe-area-inset-bottom));
}

.ap-pantalla { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ap-pantalla[hidden] { display: none; }

/* Una sola entrada autorizada, y desde algo ya visible: la pantalla no
   aparece de la nada, se asienta. */
.ap-pantalla:not([hidden]) {
  animation: ap-entra 320ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes ap-entra {
  from { opacity: .4; transform: translateY(10px); }
  to   { opacity: 1;  transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-pantalla:not([hidden]) { animation: none; }
}

.ap-centro {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 8px 0 24px;
}
.ap-desplaza { flex: 1; padding-bottom: 28px; }

/* -------- Portada -------- */
.ap-portada { text-align: center; padding: 22px 0 26px; }
.ap-portada-logo {
  width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(233, 197, 114, .22));
}
.ap-portada-titulo {
  margin: 14px 0 8px; font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
}
.ap-portada-titulo span { color: var(--dorado); font-weight: 400; }
.ap-portada-bajada {
  margin: 0 auto; max-width: 30ch; color: var(--texto-2);
  font-size: .98rem; line-height: 1.55;
}

/* -------- Los tres pasos -------- */
.ap-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-paso {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px;
  gap: 13px; align-items: start;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); padding: 15px 15px 15px 13px;
  transition: border-color 180ms ease, background 180ms ease;
}
.ap-paso-numero {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-2);
  font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ap-paso-cuerpo h2 { margin: 4px 0 4px; font-size: 1rem; font-weight: 700; }
.ap-paso-cuerpo p { margin: 0; color: var(--texto-2); font-size: .88rem; line-height: 1.5; }
.ap-paso-cuerpo .ap-btn { margin-top: 11px; }
.ap-paso-listo { color: var(--verde); opacity: 0; margin-top: 6px;
                 transition: opacity 200ms ease; }
.ap-paso.listo { border-color: rgba(61, 220, 151, .34); }
.ap-paso.listo .ap-paso-listo { opacity: 1; }
.ap-paso.listo .ap-paso-numero { background: var(--verde-tenue); color: var(--verde); }
.ap-paso.listo .ap-btn, .ap-paso.listo .ap-instruccion { display: none; }

.ap-instruccion { margin-top: 11px; }
.ap-instruccion p { margin: 0 0 7px; }
.ap-instruccion-paso {
  display: flex; align-items: center; gap: 9px;
  color: var(--texto); font-size: .88rem;
  background: var(--superficie-2); border-radius: var(--radio-chico);
  padding: 9px 11px;
}
.ap-instruccion-paso .ic { color: var(--dorado); }

/* -------- Botones -------- */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 18px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .97rem; font-weight: 700; line-height: 1;
  border: 1.5px solid transparent; text-decoration: none;
  transition: background var(--transicion-boton), border-color var(--transicion-boton),
              color var(--transicion-boton), transform 90ms ease;
}
.ap-btn-ancho { width: 100%; }
.ap-btn:active { transform: translateY(1px); }
.ap-btn:disabled { opacity: .5; cursor: default; transform: none; }

.ap-btn-dorado {
  background: var(--dorado); color: var(--fondo);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px rgba(233, 197, 114, .14);
}
.ap-btn-dorado:hover:not(:disabled) { background: var(--dorado-claro); }

.ap-btn-borde {
  background: transparent; border-color: var(--borde); color: var(--texto);
}
.ap-btn-borde:hover:not(:disabled) {
  border-color: var(--dorado); color: var(--dorado);
}

.ap-btn-whatsapp {
  background: none; color: #25d366;
  border: 1px solid rgba(37, 211, 102, .32);
  padding: 10px 16px; font-size: .9rem; font-weight: 700;
}
.ap-btn-whatsapp .ic { color: #25d366; }
.ap-btn-whatsapp:hover {
  background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .55);
  color: #25d366;
}
/* El del pie de «mi cuenta» no necesita ni ancho completo: es un enlace con
   forma de botón, no una cosa que haya que tocar sí o sí. */
.mi-pie .ap-btn-whatsapp { width: auto; }

.ap-icono-btn {
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  color: var(--texto);
  transition: border-color var(--transicion-boton), color var(--transicion-boton);
}
.ap-icono-btn:hover { border-color: var(--dorado); color: var(--dorado); }

.ap-enlace-suave {
  display: block; margin: 14px auto 0; padding: 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--texto-2);
  text-align: center; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: var(--borde);
}
.ap-enlace-suave:hover { color: var(--dorado); text-decoration-color: var(--dorado); }

.ap-pie-fijo { padding-top: 18px; margin-top: auto; }

/* -------- Cabecera de pantalla -------- */
.ap-cabecera { display: flex; align-items: center; gap: 12px; padding: 2px 0 6px; }
.ap-cabecera-titulo { font-size: .95rem; font-weight: 700; color: var(--texto-2); }
/* Al lado de la flecha, para que se entienda a dónde lleva: ya no es
   «volver», es entrar con otra cuenta. */
.ap-otra-cuenta { margin: 0; padding: 4px 0; }

.ap-titulo {
  margin: 0 0 6px; font-size: 1.55rem; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18; text-wrap: balance;
}
.ap-bajada {
  margin: 0 0 18px; color: var(--texto-2); font-size: .95rem; line-height: 1.55;
  max-width: 34ch;
}

.ap-sello {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--dorado-tenue); color: var(--dorado);
}
.ap-sello .ic { width: 25px; height: 25px; }
.ap-sello.verde { background: var(--verde-tenue); color: var(--verde); }
.ap-sello.roja  { background: var(--rojo-tenue);  color: var(--rojo); }

/* -------- Campos -------- */
.ap-campo { margin-bottom: 16px; }
.ap-campo label {
  display: block; margin-bottom: 7px;
  font-size: .85rem; font-weight: 600; color: var(--texto-2);
}
.ap-campo input[type="text"],
.ap-campo input[type="tel"],
.ap-campo textarea {
  width: 100%; padding: 14px 15px; border-radius: 12px;
  background: var(--superficie); border: 1.5px solid var(--borde);
  color: var(--texto); font: inherit; font-size: 1rem;
  transition: border-color var(--transicion-boton), background var(--transicion-boton);
}
.ap-campo textarea { resize: vertical; min-height: 86px; line-height: 1.5; }
.ap-campo input::placeholder, .ap-campo textarea::placeholder { color: var(--texto-3); }
.ap-campo input:focus, .ap-campo textarea:focus {
  outline: none; border-color: var(--dorado); background: var(--superficie-2);
}
.ap-campo input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }
.ap-campo .ap-btn { margin-top: 10px; }
.ap-ayuda { margin: 8px 0 0; font-size: .82rem; color: var(--texto-3); line-height: 1.45; }
.ap-ayuda.bien { color: var(--verde); }

/* -------- Las cuatro casillas del PIN -------- */
.ap-pin-casillas { display: flex; gap: 11px; justify-content: flex-start; }
.ap-pin-casillas input {
  width: 100%; max-width: 62px; aspect-ratio: 1 / 1; padding: 0;
  text-align: center; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--superficie); border: 1.5px solid var(--borde);
  border-radius: 13px; color: var(--texto);
  transition: border-color 140ms ease, background 140ms ease;
}
.ap-pin-casillas input:focus {
  outline: none; border-color: var(--dorado); background: var(--superficie-2);
}
.ap-pin-casillas input.puesto { border-color: var(--dorado-osc); }
.ap-pin-casillas.mala { animation: ap-sacude 320ms ease; }
@keyframes ap-sacude {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(5px); }
  50%      { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) { .ap-pin-casillas.mala { animation: none; } }

.ap-error {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radio-chico);
  background: var(--rojo-tenue); color: var(--rojo);
  font-size: .89rem; line-height: 1.45;
}

/* -------- Pantalla angosta -------- */
@media (max-width: 360px) {
  :root { --relleno-lienzo: 13px; }
  .ap-portada-titulo { font-size: 1.65rem; }
  .ap-titulo { font-size: 1.38rem; }
  .ap-pin-casillas { gap: 8px; }
  .ap-paso { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 10px; padding: 13px; }
  .ap-paso-numero { width: 26px; height: 26px; font-size: .82rem; }
}

/* =========================================================================
   EL PANEL DEL CLIENTE
   La barra de arriba, la de abajo, y el resumen de lo que debe.
   ========================================================================= */

.ap-barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(16, 28, 68, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
  padding-top: env(safe-area-inset-top);
}
.ap-barra-dentro {
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
}
.ap-barra-logo { width: 30px; height: 30px; object-fit: contain; }
.ap-barra-nombre {
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
  margin-right: auto;
}
.ap-barra-nombre em { font-style: normal; font-weight: 400; color: var(--dorado); }
.ap-barra-salir { width: 36px; height: 36px; }

/* -------- La navegación de abajo --------
   Dos sitios y nada más. Una barra de cinco iconos en una app que hace dos
   cosas es una barra con tres mentiras. */
.ap-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; gap: 4px;
  background: rgba(16, 28, 68, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
}
.ap-abajo-item {
  flex: 1; max-width: 160px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 6px 5px; border-radius: 12px;
  font-size: .76rem; font-weight: 600; text-decoration: none;
  color: var(--texto-3);
  transition: color var(--transicion-boton), background var(--transicion-boton);
}
.ap-abajo-item .ic { width: 22px; height: 22px; }
.ap-abajo-item:hover { color: var(--texto-2); }
.ap-abajo-item.activa { color: var(--dorado); background: var(--dorado-tenue); }

/* «Pagar», en el medio de los dos sitios. Estaba dentro de la tarjeta del
   contrato, donde hay que bajar a buscarlo; aqui esta fijo y el pulgar le
   cae encima.

   Es un hermano de los otros dos: misma forma, mismo tamaño, mismo renglón
   y apagado igual que ellos mientras no se esté parado ahí. Lo único suyo
   es el color con el que se enciende —verde y no dorado—, que es lo que lo
   separa de «dónde estoy» y lo marca como «lo que vengo a hacer». */
.ap-abajo-pagar {
  border: none; background: none; font: inherit;
  font-size: .76rem; font-weight: 600; cursor: pointer;
  color: var(--verde);
}
.ap-abajo-pagar:hover { color: var(--verde); background: var(--verde-tenue); }
/* El recuadro aparece al estar parado ahi, igual que el dorado de los otros
   dos: el color dice «esto es lo que vienes a hacer» y el fondo, «aqui
   estas». Son dos cosas distintas y por eso se dicen aparte. */
.ap-abajo-pagar.activa { color: var(--verde); background: var(--verde-tenue); }
.ap-abajo-pagar[hidden] { display: none; }

/* El contenido no puede quedar debajo de la barra fija. */
.con-barra-abajo { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

.ap-candado { min-height: calc(100svh - 120px); }

/* -------- El resumen: lo primero y lo único grande --------
   La pregunta con la que el cliente abre la app es una sola: cuánto tengo
   que llevar y cuándo. Eso va arriba, en grande, antes que nada. */
/* Dos columnas: el monto a la izquierda y los puntos en el rincón derecho,
   que antes quedaba vacío. El «por qué» de los puntos cae debajo de las dos,
   a todo lo ancho. */
.mi-resumen {
  background: linear-gradient(158deg, #15224d 0%, #0d1534 62%);
  border: 1px solid var(--borde);
  border-radius: 18px; padding: 20px 18px 18px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 14px;
}
.mi-resumen-cifras { min-width: 0; }
.mi-resumen-rotulo {
  margin: 0 0 6px; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3);
}
.mi-resumen-monto {
  margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  color: var(--dorado);
}
.mi-resumen-bs {
  margin: 7px 0 0; font-size: .92rem; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.mi-resumen-cuando {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 7px 12px 7px 10px; border-radius: 20px;
  font-size: .85rem; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2);
}
.mi-resumen-cuando .ic { width: 17px; height: 17px; }
.mi-resumen-cuando.vencida { background: var(--rojo-tenue); color: var(--rojo); }
.mi-resumen-cuando.hoy { background: var(--ambar-tenue); color: var(--ambar); }
.mi-resumen-cuando.al-dia { background: var(--verde-tenue); color: var(--verde); }

/* -------- La tira de próximos pagos -------- */
.mi-proximos { margin-bottom: 16px; }
.mi-proximos h2 {
  margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--texto-2);
}
.mi-tira {
  display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mi-tira::-webkit-scrollbar { display: none; }
/* La agenda: quince casillas seguidas, una por día. Las vacías van flacas
   y calladas —solo marcan el ritmo— y la del día que toca se enciende. Se
   arrastra con el dedo; el de hoy queda siempre a la izquierda. */
.mi-dia {
  flex: none; width: 58px; scroll-snap-align: start;
  display: grid; justify-items: center; gap: 2px;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: 13px; padding: 9px 4px;
}
.mi-dia-semana {
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--texto-3);
}
.mi-dia-numero {
  font-size: 1.15rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--texto-2);
}
.mi-dia-mes {
  font-size: 12px; font-weight: 600; color: var(--texto-3);
}
.mi-dia-monto {
  margin-top: 3px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--texto);
  white-space: nowrap;
}
.mi-dia-vacio { margin-top: 3px; font-size: 12px; color: var(--texto-3); }
.mi-dia.hoy { border-color: var(--borde); }
.mi-dia.hoy .mi-dia-semana { color: var(--texto-2); }
.mi-dia.con-pago {
  border-color: var(--dorado-osc); background: var(--dorado-tenue);
  cursor: pointer;
}
.mi-dia.con-pago:hover, .mi-dia.con-pago:focus-visible {
  border-color: var(--dorado);
}
.mi-dia.con-pago .mi-dia-numero { color: var(--texto); }
.mi-dia.con-pago .mi-dia-monto { color: var(--dorado); }
.mi-dia.vencido { border-color: rgba(255, 128, 113, .45); }
.mi-dia.vencido .mi-dia-numero,
.mi-dia.vencido .mi-dia-monto,
.mi-dia.vencido .mi-dia-semana { color: var(--rojo); }


/* Las dos ayudas del catálogo: una fila discreta, no dos pastillas doradas. */
.cat-ayudas { display: flex; gap: 9px; margin: 0 0 16px; }
.cat-ayudas .ap-btn { flex: 1; padding: 11px 12px; font-size: .88rem; }
.ap-barra-tasa {
  font-size: .8rem; font-weight: 600; color: var(--texto-2);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.3;
}

/* =========================================================================
   Arreglos del 08/11/2026, mirando la app en un teléfono de verdad.
   ========================================================================= */

/* Quitar una captura que uno mismo subió no es una alarma: se apaga, no se
   enciende en rojo. El rojo se guarda para lo que de verdad va mal. */
.cat-comprobante-vista button:hover {
  border-color: var(--rojo); color: var(--rojo);
}

/* Las cuatro casillas del PIN, centradas bajo su texto y con aire antes del
   botón. Pegadas a la izquierda y pegadas al botón parecían un campo más de
   un formulario, no el gesto de abrir una cerradura. */
.ap-pin-casillas { justify-content: center; margin-bottom: 22px; }
.ap-pin-casillas input { max-width: 66px; }
#ap-pin .ap-titulo, #ap-pin .ap-bajada,
#mi-candado .ap-titulo, #mi-candado .ap-bajada { text-align: center; }
#ap-pin .ap-bajada, #mi-candado .ap-bajada { margin-left: auto; margin-right: auto; }
#ap-pin .ap-sello, #mi-candado .ap-sello { margin-left: auto; margin-right: auto; }
/* En el registro el PIN es un campo más de la fila, así que ahí sí va a la
   izquierda, a plomo con los demás. */
#ap-reg-pin-casillas { justify-content: flex-start; margin-bottom: 0; }

/* -------- Copiar un dato al portapapeles --------
   El cliente tiene la pantalla del banco abierta en la otra mano y va
   copiando número por número. Antes los leía y los tecleaba: un dígito
   bailado en una cuenta de veinte y el pago se va a otra parte. */
.mi-dato-copiable {
  display: flex; align-items: center; gap: 10px;
  margin: 3px 0 !important; padding: 7px 8px 7px 11px;
  background: var(--superficie-2); border-radius: 9px;
}
.mi-dato-copiable > span {
  flex: 1; min-width: 0; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.mi-copiar {
  flex: none; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--borde); color: var(--texto-2);
  transition: border-color var(--transicion-boton), color var(--transicion-boton),
              background var(--transicion-boton);
}
.mi-copiar:hover { border-color: var(--dorado); color: var(--dorado); }
.mi-copiar.copiado {
  border-color: var(--verde); color: var(--verde); background: var(--verde-tenue);
}
.mi-copiar .ic { width: 18px; height: 18px; }

/* Los iconos dibujados dentro de botones y rotulos: alineados con su texto,
   no flotando. Un icono y una palabra son una sola cosa. */
.cat-btn-archivo, .cat-lamina-nota, .cat-listo-icono {
  display: inline-flex; align-items: center; gap: 8px;
}
.cat-lupa { display: grid; place-items: center; color: var(--texto-3); }
.cat-lupa .ic { width: 18px; height: 18px; }
.cat-listo-icono { justify-content: center; }
.cat-listo-icono .ic { width: 30px; height: 30px; }

/* Las pistas de los campos del catálogo: eran casi invisibles sobre el fondo
   nuevo, y la del buscador es la única instrucción que tiene esa caja. */
#cat-buscar::placeholder, .cat-filtros select,
.cat-form-fila input::placeholder {
  color: var(--texto-2);
}

/* En pantalla angosta la categoría bajaba a 9,5 px. La casa no deja ninguna
   letra suelta por debajo de 12. */
@media (max-width: 420px) {
  .cat-categoria { font-size: var(--texto-apoyo); padding: 3px 8px; letter-spacing: .4px; }
  .cat-cinta-encargo { font-size: var(--texto-apoyo); padding: 4px 9px; }
}

/* -------- Los campos de los formularios del cliente --------
   Nadie les habia puesto color, asi que salian los del navegador: fondo
   blanco y letra negra en medio de una app azul marino. Se leen —negro
   sobre blanco contrasta de sobra— pero parecen de otro programa, y en un
   telefono de noche el recuadro blanco encandila. */
.ap-body input[type="text"],
.ap-body input[type="tel"],
.ap-body input[type="number"],
.ap-body input[type="search"],
.ap-body input[type="email"],
.ap-body select,
.ap-body textarea {
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  color: var(--texto);
  border-radius: 11px;
  font: inherit;
  caret-color: var(--dorado);
}
.ap-body input::placeholder, .ap-body textarea::placeholder { color: var(--texto-2); }
.ap-body input:focus, .ap-body select:focus, .ap-body textarea:focus {
  outline: none; border-color: var(--dorado); background: var(--superficie-3);
}
/* La flecha del desplegable la pinta el navegador con el color de la letra:
   sin esto quedaba negra sobre azul y no se veia. */
.ap-body select { color-scheme: dark; }

/* Las casillas de verificar y los redondeles, del mismo oro que el resto. */
.ap-body input[type="checkbox"], .ap-body input[type="radio"] {
  accent-color: var(--dorado);
}

/* El botón de avisar un pago era el único azul de toda la app. El azul aquí
   es el fondo, no una acción: la acción es dorada, como en el resto. */
#mi-pague-enviar {
  background: var(--dorado); border-color: transparent; color: var(--fondo);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px rgba(233, 197, 114, .14);
}
#mi-pague-enviar:hover {
  background: var(--dorado-claro); border-color: transparent; color: var(--fondo);
}

/* La ventana flotante y su cabecera, del color de las tarjetas. */
.cat-modal { background: var(--superficie); }
.cat-modal-header { border-bottom: 1px solid var(--borde); }
.cat-modal-fondo { background: rgba(4, 8, 22, .76); }

/* =========================================================================
   EL ORO CON SU BRILLO
   -------------------------------------------------------------------------
   El dorado plano se veía a mostaza. El de la A del logo no es un color: es
   una rampa que va de #a8761f a #e8cb7a con un destello en el medio, y eso
   es lo que lo hace leer como metal y no como pintura.

   Los tonos salieron del PNG del logo, no del ojo: se leyeron sus píxeles
   dorados y se ordenaron por luminosidad.

   El punto más oscuro de la rampa se subió a #bb872f a propósito. El del
   logo (#a8761f) deja la letra azul marino encima en 4,25 de contraste, por
   debajo del 4,5 que hace falta para leer; con este queda en 4,89.

   NUNCA sobre texto: un degradado en la letra se lee peor que un color
   plano. Va en los rellenos.
   ========================================================================= */
:root {
  --oro: linear-gradient(135deg,
          #bb872f 0%, #e3c175 24%, #f7e6ae 46%, #dcb45f 64%, #bb872f 100%);
  --oro-suave: linear-gradient(135deg,
          rgba(232, 203, 122, .16) 0%, rgba(247, 230, 174, .22) 48%,
          rgba(187, 135, 47, .14) 100%);
  /* El filo de arriba que tiene cualquier pieza de metal con luz. */
  --oro-filo: inset 0 1px 0 rgba(255, 246, 214, .55);
}

/* Los botones de acción: el relleno es la rampa, y el filo la levanta. */
.ap-btn-dorado,
.cat-btn-principal,
#mi-pague-enviar,
.cat-btn-pagar {
  background: var(--oro);
  border-color: transparent;
  color: #141005;
  box-shadow: var(--oro-filo), 0 2px 4px rgba(0, 0, 0, .34),
              0 10px 26px rgba(187, 135, 47, .22);
}
.ap-btn-dorado:hover:not(:disabled),
.cat-btn-principal:hover,
#mi-pague-enviar:hover,
.cat-btn-pagar:hover {
  background: linear-gradient(135deg,
          #c99433 0%, #eccd82 24%, #fdf0c4 46%, #e6c069 64%, #c99433 100%);
  border-color: transparent; color: #141005;
}
.ap-btn-dorado:disabled { background: var(--oro); opacity: .45; }

/* El sello del candado y los tintes: el mismo brillo, al 15 %. */
.ap-sello { background: var(--oro-suave); }

/* La tarjeta que hay que mirar primero lleva el filo dorado arriba, no un
   borde entero: un marco dorado alrededor de todo grita y no jerarquiza. */
.cat-pagar { position: relative; overflow: hidden; }
.cat-pagar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--oro);
}

/* =========================================================================
   SU HISTORIA: PUNTAJE, CRONOGRAMA, PAGOS Y LO QUE YA PAGÓ
   ========================================================================= */

/* -------- Los puntos --------
   El número va grande porque es lo que el cliente viene a mirar, y el aro
   que lo rodea dice de un vistazo si va bien sin tener que leer la cifra. */
/* Dentro del recuadro del monto, en columna y centrado: el aro, «Tus puntos»
   y el nivel. Sin fondo ni borde propios — ya está dentro de una tarjeta, y
   una tarjeta dentro de otra es ruido. */
.mi-puntos {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding-top: 2px;
}
.mi-puntos-rotulo {
  font-size: var(--texto-rotulo); font-weight: 600; color: var(--texto-3);
  letter-spacing: .03em; text-transform: uppercase;
}
/* El aro se recorta con máscara en vez de taparle el centro con un círculo
   del color de la tarjeta: ahora vive sobre un degradado, y un tapón de
   color plano encima de un degradado se ve. Así el hueco es transparente y
   deja pasar lo que haya detrás, sea lo que sea. */
.mi-puntos-aro {
  flex: none; width: 74px; height: 74px;
  display: grid; place-items: center; position: relative;
}
.mi-puntos-aro::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--tono) calc(var(--parte) * 1%),
                              var(--superficie-2) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57%);
          mask: radial-gradient(circle, transparent 0 56%, #000 57%);
}
.mi-puntos-cifra {
  position: relative; z-index: 1; font-size: 1.5rem; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--tono);
}
.mi-puntos-nivel { font-size: .88rem; font-weight: 700; color: var(--tono); }
/* A todo lo ancho, debajo de las dos columnas: con dos contratos atrasados
   son dos renglones y al lado del aro no caben. */
.mi-puntos-por-que {
  grid-column: 1 / -1;
  margin: 14px 0 0; padding: 10px 0 0; list-style: none;
  border-top: 1px solid var(--borde);
  font-size: var(--texto-apoyo); color: var(--texto-2); line-height: 1.5;
}
.mi-puntos-por-que li { display: flex; gap: 6px; }
.mi-puntos-por-que li::before { content: "·"; color: var(--texto-3); }

/* Los cuatro escalones. El tono lo lee el aro y la cifra, así que cambiar
   un nivel de color es cambiar un sitio. */
.nivel-excelente { --tono: var(--verde); --parte: 100; }
.nivel-bueno     { --tono: var(--dorado); }
.nivel-irregular { --tono: var(--ambar); }
.nivel-riesgo    { --tono: var(--rojo); }

/* -------- Los plegables de historia --------
   Van cerrados: el cliente entra a ver cuánto debe, no a leer su historia.
   La historia está ahí para el día que la busque. */
.mi-plegable {
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); margin-bottom: 10px; overflow: hidden;
}
.mi-plegable > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: .97rem; font-weight: 700; color: var(--texto);
}
.mi-plegable > summary::-webkit-details-marker { display: none; }
.mi-plegable > summary .ic { color: var(--dorado); }
.mi-plegable-cuenta {
  margin-left: auto; font-size: var(--texto-apoyo); font-weight: 600;
  color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.mi-plegable > summary .ap-flecha {
  transition: transform 180ms ease; color: var(--texto-3); margin-left: 4px;
}
.mi-plegable[open] > summary .ap-flecha { transform: rotate(90deg); }
.mi-plegable-cuerpo { padding: 0 16px 14px; }

/* -------- El cronograma -------- */
.mi-cuota {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--borde-suave);
}
.mi-cuota:first-child { border-top: 0; }
.mi-cuota-numero {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--texto-apoyo); font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--superficie-2); color: var(--texto-2);
}
.mi-cuota-fecha { font-size: .9rem; color: var(--texto); }
.mi-cuota-nota { font-size: var(--texto-apoyo); color: var(--texto-3); }
.mi-cuota-monto {
  text-align: right; font-weight: 700; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.mi-cuota.pagada .mi-cuota-numero { background: var(--verde-tenue); color: var(--verde); }
.mi-cuota.pagada .mi-cuota-fecha { color: var(--texto-2); }
.mi-cuota.pagada .mi-cuota-monto { color: var(--texto-3); text-decoration: line-through; }
.mi-cuota.vencida .mi-cuota-numero { background: var(--rojo-tenue); color: var(--rojo); }
.mi-cuota.vencida .mi-cuota-monto { color: var(--rojo); }
.mi-cuota.a_medias .mi-cuota-numero { background: var(--ambar-tenue); color: var(--ambar); }
.mi-cuota.a_medias .mi-cuota-monto { color: var(--ambar); }

/* -------- Los pagos recibidos -------- */
.mi-pago {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--borde-suave);
}
.mi-pago:first-child { border-top: 0; }
.mi-pago-fecha {
  font-size: .9rem; color: var(--texto); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mi-pago-como {
  flex: 1; min-width: 0; font-size: var(--texto-apoyo); color: var(--texto-3);
}
.mi-pago-monto {
  font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -------- Lo que ya pagó -------- */
.mi-terminado {
  padding: 12px 0; border-top: 1px solid var(--borde-suave);
}
.mi-terminado:first-child { border-top: 0; }
.mi-terminado-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.mi-terminado-top strong { font-size: .95rem; }
.mi-terminado-total {
  font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.mi-terminado p { margin: 4px 0 0; font-size: var(--texto-apoyo); color: var(--texto-3); }
.mi-sello-pagado {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  padding: 4px 10px 4px 8px; border-radius: 20px;
  font-size: var(--texto-apoyo); font-weight: 700;
  background: var(--verde-tenue); color: var(--verde);
}
.mi-sello-pagado .ic { width: 15px; height: 15px; }

/* -------- Copiar todos los datos de una vez -------- */
.mi-copiar-todo {
  width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700;
  background: transparent; border: 1.5px solid var(--borde); color: var(--texto);
  transition: border-color var(--transicion-boton), color var(--transicion-boton);
}
.mi-copiar-todo:hover { border-color: var(--dorado); color: var(--dorado); }
/* «Pagar»: lo que nueve de cada diez vienen a hacer. Va arriba de las
   opciones y en dorado — es la acción, no una más de la lista. */

/* El recargo, dicho donde se nota el número más grande. En rojo porque es
   una penalidad, no una línea más del desglose. */
.mi-opciones-mora {
  margin: -4px 0 9px; font-size: var(--texto-apoyo); font-weight: 700;
  color: var(--rojo);
}

/* =========================================================================
   LA HOJA DE PAGO
   -------------------------------------------------------------------------
   Sube desde abajo, como la bandeja de compartir del teléfono: el pulgar la
   alcanza sin estirarse y el fondo sigue a la vista, así que se entiende que
   es un paso encima de la pantalla y no otra pantalla.
   ========================================================================= */
.mi-hoja-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 10, 28, .66);
  display: flex; align-items: flex-end; justify-content: center;
}
.mi-hoja-fondo[hidden] { display: none; }
body.con-hoja { overflow: hidden; }

.mi-hoja {
  position: relative; width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border: 1px solid var(--borde); border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 10px var(--relleno-lienzo)
           calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
  animation: mi-hoja-sube .22s ease-out;
}
@keyframes mi-hoja-sube { from { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .mi-hoja { animation: none; }
}
.mi-hoja-arriba {
  position: relative; min-height: 34px; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
}
.mi-hoja-agarre {
  width: 40px; height: 4px; border-radius: 2px; margin: 0;
  background: var(--superficie-3);
}
.mi-hoja-cerrar {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.mi-hoja-titulo {
  margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--texto);
}
.mi-hoja-atras {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 0; border: none; background: none;
  font: inherit; font-size: var(--texto-apoyo); font-weight: 600;
  color: var(--texto-2); cursor: pointer;
}
.mi-hoja-atras .ic { width: 15px; height: 15px; }

/* Cuánto se va a pagar. Va arriba de todo y se queda a la vista mientras el
   cliente elige por dónde: es el dato que se le olvida. */
.mi-hoja-monto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: 14px; padding: 11px 13px; border-radius: 12px;
  background: var(--dorado-tenue); border: 1px solid var(--dorado-osc);
}
.mi-hoja-monto-que {
  flex: 1 1 100%; font-size: var(--texto-rotulo); color: var(--texto-2);
}
.mi-hoja-monto strong {
  font-size: 1.35rem; font-weight: 800; color: var(--dorado-claro);
  font-variant-numeric: tabular-nums;
}
.mi-hoja-monto span:not(.mi-hoja-monto-que) {
  font-size: .9rem; color: var(--texto-2); font-variant-numeric: tabular-nums;
}

/* El monto rebajado: el de antes tachado al lado, y el ahorro dicho. Verde y
   no dorado — es dinero a favor del cliente, no una cifra más. */
.mi-hoja-monto.con-descuento {
  background: var(--verde-tenue); border-color: var(--verde);
}
.mi-hoja-monto.con-descuento strong { color: var(--verde); }
.mi-hoja-antes {
  text-decoration: line-through; color: var(--texto-3);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.mi-hoja-ahorro {
  font-size: var(--texto-rotulo); font-weight: 800; color: var(--verde);
}

/* La oferta en la fila de la forma de pago: pequeña, al lado del nombre, no
   un cartel. Es un dato de esa fila, no un anuncio. */
/* 12px es el piso de toda la pantalla del cliente: la lee en un teléfono, de
   noche, y muchos pasan de los cincuenta. Lo corta se gana con el texto —«20%
   descuento»—, no achicando la letra. */
.mi-forma-oferta {
  flex: none; padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--verde-tenue); color: var(--verde);
}

/* La lista de formas de pago */
.mi-formas { display: grid; gap: 9px; }
.mi-forma {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border-radius: 13px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto); font: inherit; text-align: left;
  transition: border-color var(--transicion-boton),
              background var(--transicion-boton);
}
.mi-forma:hover, .mi-forma:focus-visible {
  border-color: var(--dorado); background: var(--superficie-3);
}
.mi-forma-icono {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--superficie-3); color: var(--dorado);
}
.mi-forma-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mi-forma-texto strong { font-size: .97rem; font-weight: 700; }
.mi-forma-texto small { font-size: var(--texto-apoyo); color: var(--texto-3); }
/* En qué anda ese contrato. Es lo mismo que dice su renglón en la cuenta:
   dos sitios con el mismo dato tienen que decirlo igual. */
.mi-forma-estado {
  font-size: var(--texto-apoyo); font-weight: 600; color: var(--texto-3);
}
.mi-forma-estado.vencida { color: var(--rojo); }
.mi-forma-estado.hoy { color: var(--dorado); }
.mi-forma-estado.al-dia { color: var(--verde); }
/* El que ya se venció o vence hoy se ve de lejos: no hay que leer los tres
   renglones para saber cuál urge. */
.mi-forma.urgente { border-color: rgba(255, 128, 113, .42); }
.mi-forma-flecha { flex: none; width: 17px; height: 17px; color: var(--texto-3); }

/* =========================================================================
   LA PANTALLA DE PAGAR
   -------------------------------------------------------------------------
   Misma caja, mismo oro y mismos recuadros que el resto de la aplicación:
   es otra pantalla de la misma app, no otra app. Lo único suyo es la
   cabecera con la flecha, que dice que de aquí se vuelve.
   ========================================================================= */
.mi-pagar-top {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
}
.mi-pagar-titulo {
  margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--texto);
}
.mi-pagar-subtitulo {
  margin: 18px 0 10px; font-size: .95rem; font-weight: 700;
  color: var(--texto-2);
}

/* El total del mes: un renglón, no un cartel. Es para saber, no para
   decidir; lo que se paga se elige en la lista de abajo. Por eso va
   apretado: el rótulo, la cifra, y al abrirlo las dos quincenas pegaditas
   debajo, sin recuadros ni líneas de por medio. */
.mi-mes { margin-bottom: 14px; }
.mi-mes > summary { padding: 11px 14px; gap: 10px; }
.mi-mes-sello {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dorado-tenue); color: var(--dorado);
}
.mi-mes-sello .ic { width: 15px; height: 15px; }
.mi-mes-que {
  flex: 1; min-width: 0;
  font-size: .91rem; font-weight: 600; color: var(--texto-2);
}
.mi-mes-cifra {
  font-size: .98rem; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mi-mes .mi-plegable-cuerpo { padding: 0 14px 10px 50px; }
/* Apunta a donde va a pasar: hacia abajo porque se despliega hacia abajo, y
   hacia arriba cuando ya esta abierto y lo que toca es recogerlo. */
.mi-mes > summary .ap-flecha { transform: rotate(90deg); }
.mi-mes[open] > summary .ap-flecha { transform: rotate(-90deg); }

/* Las dos quincenas. El cliente cobra el 15 y el 30: partir el mes en esas
   dos mitades es lo que de verdad usa para saber con qué plata paga. */
.mi-quincena {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 4px 0;
  font-size: .88rem; color: var(--texto-2);
}
.mi-quincena strong {
  font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mi-nota-antes {
  margin: 8px 0 0; font-size: var(--texto-apoyo); color: var(--texto-2);
}
.mi-nota-antes strong { color: var(--rojo); }


/* El monto del contrato en la lista de «¿cuál vas a pagar?»: es el dato por
   el que se elige, así que va al mismo peso que el nombre. */
/* El monto se pinta del color de su aviso: si ese contrato esta vencido, su
   cifra tambien lo dice. Lo que esta en orden se queda en blanco, que es lo
   que hace que el rojo signifique algo. */
.mi-forma-monto {
  flex: none; font-size: .97rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.mi-forma-monto.vencida { color: var(--rojo); }
.mi-forma-monto.hoy { color: var(--dorado); }
.mi-card-saldo.vencida { color: var(--rojo); }
.mi-card-saldo.hoy { color: var(--dorado); }
.mi-hoja-pie {
  margin: -4px 0 12px; font-size: var(--texto-apoyo); color: var(--texto-2);
}
.mi-hoja #mi-hoja-seguir { margin-top: 14px; }

.mi-hoja .mi-pago-bloque { margin-bottom: 14px; }
.mi-hoja .mi-aviso { margin-top: 12px; }
.mi-copiar-todo.copiado {
  border-color: var(--verde); color: var(--verde); background: var(--verde-tenue);
}

/* =========================================================================
   LA MARCA DE AGUA
   -------------------------------------------------------------------------
   La A de AVANZA, en grande, repartida entre dos pantallas: si se pusieran
   una al lado de la otra —la cedula a la izquierda, el PIN a la derecha— la
   A quedaria entera, justo en la costura.

   Por eso la de la cedula asoma su MITAD IZQUIERDA pegada al borde derecho,
   y la del PIN su mitad derecha pegada al borde izquierdo. Cada media A
   esta corrida exactamente la mitad de su ancho hacia afuera.

   Va MUY apagada a proposito. Es una marca de agua: si se nota mas que lo
   que hay que escribir, deja de ser fondo y pasa a estorbar. Y nunca debajo
   de un texto chico: se comprobo con el medidor de contraste.
   ========================================================================= */
.ap-marca-agua {
  position: absolute; top: 50%; z-index: 0;
  width: min(132vw, 648px); aspect-ratio: 262 / 204;
  pointer-events: none; user-select: none;
  /* El oro pintado A TRAVES de la silueta del logo. Poner el PNG tal cual
     no sirve: su mitad azul se pierde en el fondo marino y queda media A.
     Con la mascara, la forma es la del logo y el color es el nuestro.
     El oro va en un hijo y no aqui: la silueta tiene que quedarse apagada
     (.38 x .45 = el .17 de siempre) mientras las lineas suben a .38. Si
     todo colgara de la misma transparencia, o no se ve la A o no se ven
     las lineas. */
  -webkit-mask: url("/static/img/icono.svg") center / contain no-repeat;
  mask: url("/static/img/icono.svg") center / contain no-repeat;
  opacity: .38;
}
.ap-marca-agua::before {
  content: ""; position: absolute; inset: 0;
  background: var(--oro); opacity: .45;
}
/* Las lineas neon que corren POR DENTRO de la A. Son un hijo, no un fondo
   mas: la mascara del padre recorta tambien a los hijos, asi que las
   lineas solo se ven dentro de la silueta y en ningun lado mas.

   El truco del bucle: las bandas son verticales (to right) y el giro se
   hace ANTES de correrlas, con lo cual se corren por su propio eje, que
   es perpendicular a ellas. Correr un periodo exacto —180px— deja el
   dibujo igual que al empezar y el bucle no da el salto. */
.ap-marca-agua::after {
  content: ""; position: absolute; inset: -40%;
  background:
    /* el filo de cada linea */
    repeating-linear-gradient(to right,
      transparent 0 96px,
      rgba(255, 230, 160, .60) 96px 98px,
      transparent 98px 112px,
      rgba(255, 238, 185, .80) 112px 115px,
      transparent 115px 131px,
      rgba(255, 248, 222, 1) 131px 136px,
      transparent 136px 180px),
    /* el halo, mas ancho y flojo: es lo que lo hace ver neon */
    repeating-linear-gradient(to right,
      transparent 0 89px,
      rgba(255, 220, 130, .16) 89px 105px,
      transparent 105px 106px,
      rgba(255, 226, 150, .20) 106px 121px,
      transparent 121px 123px,
      rgba(255, 236, 180, .26) 123px 144px,
      transparent 144px 180px);
  transform: rotate(-14deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ap-pantalla:not([hidden]) .ap-marca-agua::after,
  .ap-candado .ap-marca-agua::after {
    animation: ap-marca-carrera 3.6s linear infinite;
  }
}
@keyframes ap-marca-carrera {
  from { transform: rotate(-14deg) translateX(0); }
  to   { transform: rotate(-14deg) translateX(180px); }
}
/* El centro de la A cae EXACTAMENTE en el borde de la pantalla, no en el
   del lienzo: por eso sale del relleno. Asi las dos mitades cierran. */
.ap-marca-agua.a-la-derecha {
  right: calc(var(--relleno-lienzo) * -1); transform: translate(50%, -50%);
}
.ap-marca-agua.a-la-izquierda {
  left: calc(var(--relleno-lienzo) * -1); transform: translate(-50%, -50%);
}

/* El contenido va por encima. Sin esto la A queda delante de la letra. */
.ap-pantalla > *:not(.ap-marca-agua),
.ap-candado > *:not(.ap-marca-agua) { position: relative; z-index: 1; }

/* Las dos pantallas que la llevan necesitan ser el marco de referencia. */
#ap-cedula, #ap-pin, #mi-candado { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .ap-pantalla:not([hidden]) .ap-marca-agua {
    animation: ap-marca-entra 520ms cubic-bezier(.16, 1, .3, 1) both;
  }
}
@keyframes ap-marca-entra { from { opacity: 0; } to { opacity: .38; } }

/* La tarjeta de la huella: callada, como la de los avisos. Es una comodidad
   que se ofrece, no una tarea que haya que hacer. */
.mi-huella h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; margin: 0 0 8px;
}
.mi-huella h2 .ic { color: var(--dorado); }
.mi-huella p { margin: 0 0 12px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
/* La razón técnica, para cuando el cliente nos la tenga que leer: va más
   floja que el resto, que no es para él sino para nosotros. */
.mi-huella-dice {
  margin-bottom: 0 !important; font-size: 12px; color: var(--texto-3);
}
.mi-huella-lista { border-color: var(--verde); background: var(--verde-tenue); }
.mi-huella-lista h2 .ic { color: var(--verde); }
.mi-huella-lista p { margin-bottom: 0; }

/* El boton de entrar con huella, debajo del de siempre. */
.ap-btn-huella { margin-top: 10px; }