/*
 * EL CONTENEDOR DEL APP: UNA SOLA REGLA PARA TODAS LAS PANTALLAS (6-oct-2026).
 * ============================================================================
 * POR QUÉ. Miguel, desde su teléfono: «se desborda abajo con rojo y queda como preso allí, y
 * hay un scroll de más en las páginas, como un rebote, también en iPhone». Medidas las 63
 * pantallas del app, el defecto era de lo compartido y llevaba meses también en producción:
 *   · el <body> reservaba 100 px fijos abajo, hubiera o no barra o botón, y encima cada
 *     plantilla repetía `pb-[100px]`: toda pantalla que cabía se desplazaba igual (37 a 120 px);
 *   · el motor medía el botón UNA vez, antes de que existieran sus estilos, y le sumaba 32:
 *     reservaba 88 para un botón de 85 y 136 para una botonera de 194 (58 px tapados que los
 *     100 de arriba disimulaban);
 *   · las plantillas sin #contenido no recibían nada: el final del registro quedaba 109 px
 *     detrás de los botones;
 *   · la «contención del rebote» estaba en el <body> y con `contain`: quien se desplaza es el
 *     documento, y `contain` no quita el efecto elástico.
 *
 * LA REGLA
 *   1. Las dos zonas seguras del teléfono (barra de estado y barra de gestos o navegación) son
 *      SIEMPRE del cascarón, nunca de la página. Dentro de cualquier cascarón, nuevo o viejo,
 *      la página reserva 0 para ellas (`html.rk-en-app`); `env()` solo rige en el navegador.
 *   2. El único que se desplaza es el documento. No hay contenedores internos que se
 *      desplacen en vertical, salvo una hoja o un modal abierto, que bloquea el documento
 *      mientras está (`html.rk-fondo-bloqueado`).
 *   3. La página mide como mínimo el marco y reserva al final EXACTAMENTE lo que tapan sus
 *      piezas fijas, medido en vivo por el motor (utils.js → rkMedirPie), no con números a
 *      mano: la barra de abajo (`--rk-nav-alto`), la botonera (`--rk-boton-alto`), las barras
 *      propias de la pantalla (`--rk-barra-alto`, clase `.rk-barra-pie`) y 16 px de respiro
 *      solo si no hay botonera (`--rk-respiro`; la botonera ya trae su aire). Por eso una
 *      pantalla NO lleva relleno propio al final: lo pone la regla. Si el contenido cabe, el
 *      documento mide lo mismo que el marco: no hay nada que desplazar ni que rebotar.
 *   4. El botón principal va fijo al pie del marco, sobre el fondo de la página; con barra de
 *      abajo se apoya pegado encima de ella. Las barras propias se apilan encima del botón.
 *   5. Con el teclado abierto se esconde la barra de abajo y el botón se apoya en el teclado.
 *      El marco lo encoge el cascarón; `--rk-teclado` es solo la parte del teclado que el marco
 *      NO absorbió (0 en el cascarón nuevo).
 *   6. Sin rebote: `overscroll-behavior: none` en el documento.
 *
 * ⚠️ Una pieza fija nueva pegada abajo se registra con `.rk-barra-pie`; si se le pone
 *   `fixed bottom-[…]` a mano, la reserva no la cuenta y tapa contenido.
 */
:root {
  --rk-safe-top: env(safe-area-inset-top, 0px);
  --rk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rk-safe-left: env(safe-area-inset-left, 0px);
  --rk-safe-right: env(safe-area-inset-right, 0px);
  --rk-teclado: 0px;
  --rk-footer-alto: 76px;
}

/*
 * Dentro de un cascarón las barras del sistema ya están reservadas FUERA de la página. El
 * cascarón nuevo lo dice con `margenes` (que pisa esto en línea); a los anteriores nadie se
 * lo decía y en iPhone `env()` le entrega a la página los márgenes de la ventana que el
 * cascarón ya reservó: la barra de abajo medía 110 pt en vez de 76 y el encabezado 64 en vez
 * de 56 (medido sobre el 1.52 publicado). La clase la pone rk-puente.js en el <head>.
 */
html.rk-en-app {
  --rk-safe-top: 0px;
  --rk-safe-bottom: 0px;
  --rk-safe-left: 0px;
  --rk-safe-right: 0px;
}

html {
  overscroll-behavior: none;     /* sin rebote ni estiramiento en los bordes; el desplazamiento sigue */
}
/*
 * Una hoja o un modal abierto bloquea el documento (utils.js → rkFondo). Se bloquea el VISOR
 * (html) y el <body> deja de recortar mientras tanto. Si el <body> también llevara
 * `overflow: hidden` pasaría a ser él la caja de desplazamiento de sus hijos, y el encabezado
 * (que va `sticky`) dejaría de estar pegado arriba: con la página desplazada, al abrir la hoja
 * de «Elige tu plan» el encabezado se iba con el contenido y desaparecía detrás del velo.
 */
html.rk-fondo-bloqueado {
  overflow: hidden !important;
}
html.rk-fondo-bloqueado body {
  overflow: visible !important;
}

/*
 * Las capas a pantalla completa nacen ocultas con la clase `hidden`, que Tailwind genera en el
 * navegador: hasta que llega, la capa estaba «a la vista» y el vigilante de velos (utils.js →
 * repasarCapas) podía tomarla por abierta y bloquear el fondo. Con esta regla están ocultas
 * desde el primer cuadro. Un `.show()` de jQuery (estilo en línea) sigue ganando, igual que
 * con la regla de Tailwind.
 */
#overlay-cargando.hidden,
#modal-legal.hidden,
#calendar-modal.hidden,
#modal-factura.hidden,
#modal-cropper.hidden,
#camera-overlay.hidden,
#overlay-reconocimiento.hidden {
  display: none;
}

/*
 * Dentro del app, dejar el dedo sobre un enlace o una imagen no saca la «sombra de arrastre»
 * del WebView (Android la mostraba con la dirección del enlace) ni la vista previa de iPhone:
 * es una pantalla del app, no una página para arrastrar. Solo dentro del cascarón: en el
 * navegador el enlace se sigue pudiendo copiar con el menú de siempre.
 */
html.rk-en-app a,
html.rk-en-app img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* La barra de abajo crece con el margen inferior en vez de quedar tapada por él. */
#footer {
  height: calc(var(--rk-footer-alto) + var(--rk-safe-bottom));
  padding-bottom: var(--rk-safe-bottom);
  box-sizing: border-box;
}
/* El teclado la tapa: se esconde, y el botón baja a apoyarse en el teclado. */
html.rk-teclado-abierto #footer {
  display: none !important;
}

/* El encabezado de pagar-tienda, con el mismo margen seguro que el de los pasos. */
#header-tienda {
  box-sizing: content-box;       /* sus 56 px son de contenido: el margen seguro se suma arriba */
  padding-top: var(--rk-safe-top);
}

/*
 * El botón del paso (lo arma el motor: config-pasos.js → utils.js). Fijo al pie del marco;
 * si el paso muestra la barra de abajo (.rk-con-footer) se apoya encima de ella, sin rendija
 * (antes flotaba 16 px más arriba y por el hueco se veía pasar el contenido). `--rk-nav-alto`
 * es el alto REAL de la barra, medido; mientras no llega, vale el alto de diseño.
 */
#contenedor-boton.rk-boton-flotante {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 40;
  box-sizing: border-box;
  padding: 16px;
  padding-left: calc(16px + var(--rk-safe-left));
  padding-right: calc(16px + var(--rk-safe-right));
  padding-bottom: calc(16px + var(--rk-safe-bottom));
  bottom: var(--rk-teclado);
  background-color: #F9F9F9;
}
#contenedor-boton.rk-boton-flotante.rk-con-footer {
  padding-bottom: 16px;
  bottom: calc(var(--rk-nav-alto, calc(var(--rk-footer-alto) + var(--rk-safe-bottom))) + var(--rk-teclado));
}
/* Con el teclado abierto la barra de abajo no está: el botón se apoya en el teclado. */
html.rk-teclado-abierto #contenedor-boton.rk-boton-flotante.rk-con-footer {
  padding-bottom: calc(16px + var(--rk-safe-bottom));
  bottom: var(--rk-teclado);
}

/*
 * Una barra propia de la pantalla pegada abajo («Total a pagar», «Eliminar cuenta»): fija,
 * de lado a lado, apilada encima del botón y de la barra de abajo. El motor suma su alto a la
 * reserva. El color, el relleno y la sombra los pone cada pantalla.
 */
.rk-barra-pie {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  bottom: calc(var(--rk-nav-alto, 0px) + var(--rk-boton-alto, 0px) + var(--rk-teclado));
}

/*
 * LA BOTONERA Y LAS BARRAS PROPIAS SE PINTAN EN SU PROPIA CAPA (6-oct-2026).
 * Mientras toda página se desplazaba (sobraban de 37 a 120 px) el navegador ya pintaba aparte
 * las piezas fijas. Una página que cabe ya no se desplaza y Chromium lo junta todo en una
 * sola capa; ahí un botón deshabilitado (`opacity: .6`, que se pinta como grupo) dejaba
 * encima de sí una franja con el color del encabezado: en Avisos, 5 px de naranja pegados
 * sobre «Marcar todo como leído». Se vio en el emulador de Android con gráficos por software
 * (con el mismo WebView y los gráficos del equipo no sale), pero la capa propia lo quita
 * también ahí y deja la composición como estuvo siempre. `will-change: opacity` y no
 * `transform`: no le cambia el bloque contenedor a nada de lo que lleva dentro.
 */
#contenedor-boton.rk-boton-flotante,
.rk-barra-pie {
  will-change: opacity;
}

/*
 * Blanco de toque de 44 px para un control chico («Copiar», «Pegar», «Editar», un enlace de
 * texto) SIN cambiarle el dibujo: la zona que recibe el dedo crece alrededor, centrada.
 */
.rk-toque {
  position: relative;
}
.rk-toque::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* El que ya va centrado con translate (botón «Pegar» dentro del campo) conserva su posición. */
.rk-toque.absolute {
  position: absolute;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;              /* el que se desplaza es el documento (se propaga al visor) */
  overscroll-behavior: none;     /* por los WebView que lo leen del body y no del html */
  background-color: #F9F9F9;
  min-height: 100vh;
  min-height: 100dvh;            /* en el navegador del teléfono, lo visible de verdad */
  /* La reserva exacta de lo que tapan las piezas fijas (ver la regla 3 de arriba). */
  padding-bottom: calc(var(--rk-nav-alto, 0px) + var(--rk-boton-alto, 0px) + var(--rk-barra-alto, 0px) + var(--rk-respiro, 0px) + var(--rk-teclado));
}

#cuotas-fechas {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}



.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}


/* Efecto de escritura automatica */
.blinking-cursor {
  font-weight: 400;
  font-size: 1.25rem;
  color: #222C33;
  display: inline;
  padding: 0;
  margin: 0;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


.disabled-btn {
    /* Mantenemos pointer-events habilitados para que el handler global
       del boton Siguiente pueda detectar el click y marcar en rojo los
       campos invalidos en vez de quedarse mudo. */
    opacity: 0.6;
    cursor: not-allowed;
  }

/* Campos invalidos marcados por la validacion dinamica (inicializarValidacionDinamica). */
.rk-invalid,
input.rk-invalid,
select.rk-invalid,
textarea.rk-invalid {
    border-color: var(--rk-marca-fuerte) !important;
    background-color: #FFF5F3 !important;
}
.rk-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 60, 32, 0.25);
}

#mensaje-copiado {
    transform: translateY(16px);
}

.translate-y-0 {
    transform: translateY(0) translateX(-50%) !important;
}

.translate-y-4 {
    transform: translateY(16px) translateX(-50%) !important;
}

@keyframes fade-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.5s ease-in forwards;
}

/* Ocultar scrollbar en navegadores modernos */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.animate-scale-in {
  animation: scale-in 0.4s ease-out forwards;
}

/* Contenedor principal del select2 */

.select2-selection--single {
  height: 44px !important;
  border: 1px solid black !important;
  background-color: #020f16 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 12px !important;
}
.select2-selection__rendered {
  font-size: 14px;
  font-weight: 500;
  color: #053742 !important;
}
.select2-selection__arrow {
  top: 18px !important;
}

.select2-container--default .select2-selection--single {
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  background-color: #F7FBFD !important;
  border: 1px solid black !important;
  box-sizing: border-box;
}

.select2-selection__rendered > div {
  width: 70px !important; /* o el mismo width que uses en el select original */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* --- Carrusel General --- */
.carrusel {
  position: relative;
  width: 100%;
  height: 100%;
}
.carrusel-slide {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.4s ease;
}

/*
 * Carrusel EN EL FLUJO (`.carrusel-flujo` en el contenedor) — 6-oct-2026.
 * Las láminas de arriba van en posición absoluta dentro de una caja que no crece con ellas:
 * sirve para tarjetas de alto fijo (Inicio, Club Prime), pero en las pantallas de texto
 * («¿Cómo obtener el Plus?», «Líneas de compra», «FlexiPlan») el final de la lámina quedaba
 * detrás de la barra de abajo y el documento no bajaba lo suficiente. Con este modificador
 * las láminas comparten UNA celda de rejilla: se siguen superponiendo al cambiar (el fundido
 * es el mismo) pero la caja mide lo que mide la lámina a la vista, y la reserva del pie hace
 * el resto. No lleva relleno lateral en el contenedor: la lámina ocupa todo el ancho.
 */
.carrusel-flujo {
  display: grid;
}
.carrusel-flujo > .carrusel-slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  min-width: 0;
}


#carrusel-niveles {
  position: relative;
}

.carrusel-vertical-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carrusel-vertical-slide {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Tarjeta activa */
.carrusel-vertical-slide.activo {
  top: 40px;
  transform: scale(1);
  opacity: 1;
  z-index: 30;
  pointer-events: auto;
}

/* 1ra tarjeta detrás */
.carrusel-vertical-slide.proximo {
  top: 20px;
  transform: scale(0.93);
  opacity: 0.5;
  z-index: 20;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 2da tarjeta detrás */
.carrusel-vertical-slide.proximo2 {
  top: 0px;
  transform: scale(0.87);
  opacity: 0.3;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}



.carrusel-slide-text {
  inset: 0;
  display: none;
  opacity: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.4s ease;
  min-height: 90px; 
}

.carrusel-slide.activo,
.carrusel-slide-text.activo {
  display: flex;
  opacity: 1;
}

/* --- Indicadores del Carrusel --- */
.carrusel-indicadores {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}

/* === INDICADORES TIPO BARRA GRUESA === */
.carrusel-indicador.tipo-barra-gruesa {
  width: 70px;
  height: 8px; 
  border-radius: 20px; 
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
  background-color: #d1d5db;
}

.carrusel-indicador.tipo-barra-gruesa.activo {
  background-color: var(--rk-marca); 
  width: 80px; 
  height: 10px; 
}


/* === INDICADORES TIPO BARRA === */
.carrusel-indicador.tipo-barra {
  width: 76px;
  height: 5px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #d1d5db; /* Tailwind: bg-gray-300 */
}

.carrusel-indicador.tipo-barra.activo {
  background-color: #000000 !important; /* negro cuando activo */
}

/* === INDICADORES TIPO PUNTO === */
.carrusel-indicador.tipo-puntos {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #D9D9D9;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carrusel-indicador.tipo-puntos.activo {
  background-color: var(--rk-marca) !important; /* naranja activo */
}


/* === CONTENEDOR DE TIPO PÍLDORA === */
.carrusel-indicadores.tipo-pildora {
  background-color: #FFFFFF;
  border: 1px solid #D1D5DB; /* gris claro */
  padding: 6px 12px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* === PUNTOS DENTRO DEL CONTENEDOR === */
.carrusel-indicadores.tipo-pildora .carrusel-indicador {
  width: 10px;
  height: 10px;
  background-color: #D1D5DB; /* gris claro */
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
}

/* === INDICADOR ACTIVO EN FORMA DE PÍLDORA NEGRA === */
.carrusel-indicadores.tipo-pildora .carrusel-indicador.activo {
  width: 28px;
  background-color: #1F1F1F;
}

/* Estilo inicial del mensaje */
#mensaje-copiado {
  z-index: -50000; /* Cuando está oculto */
}

#mensaje-copiado.visible {
  z-index: 50000; /* Cuando el mensaje está visible */
}


/* Contenedor del select */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  border: 1px solid #2C2C2C !important;
  border-radius: 0.75rem !important;
  background-color: #F7FBFD !important;
  padding: 0.5rem !important;
  line-height: 1.5 !important;
}

/* Texto renderizado dentro del select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  color: #053742 !important;
  padding-left: 0 !important;
  font-size: 0.875rem !important;
}

/* Placeholder del select */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #88879C !important;
}

/* Flecha del select */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

/* Dropdown que se abre */
.select2-dropdown {
  border: 1px solid #2C2C2C !important;
  border-radius: 0.75rem !important;
  margin-top: 4px !important;
}

/* Opción seleccionada/hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rk-marca) !important;
}

/* Campo de búsqueda dentro del dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #2C2C2C !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Z-index para que Select2 se muestre correctamente */
.select2-container {
  z-index: 999 !important;
}

.select2-dropdown {
  z-index: 9999 !important;
}








  
/* ── rk-cargando: el hueco mientras se firma un documento ────────────────────
 * Firmar una URL de S3 es un viaje al servidor. Con la firma en cache es
 * instantáneo, pero la primera vez (o si el pre-firmado no llegó) hay una
 * espera corta en la que el <img> no tiene src.
 * Sin esto el usuario ve un rectángulo vacío y lo lee como "no cargó" — que es
 * exactamente lo que se reportó del comprobante en pagos-rcash. Con el pulso
 * queda claro que está trabajando.
 * Se saca solo: el JS quita la clase en el 'load' o el 'error' de la imagen.
 */
.rk-cargando {
  min-height: 180px;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: rk-pulso 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes rk-pulso {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
/* Quien prefiera no ver animaciones no las ve; el fondo gris alcanza. */
@media (prefers-reduced-motion: reduce) {
  .rk-cargando { animation: none; }
}

/*
 * EL COLOR DEL STATUS PLUS: UNA SOLA VARIABLE PARA TODO EL APP (6-oct-2026).
 * Regla de marca de Miguel: «el Status Plus SIEMPRE es amarillo y letras blancas», y el
 * amarillo es el de la pantalla «¿Cómo obtener el Plus?» del propio app. En el Perfil salía
 * en amarillo limón con letras negras y en el encabezado del Inicio en otro naranja; al pedir
 * que la compra dijera «Prime | Plus» quedó a la vista que cada pantalla tenía el suyo.
 * No es un color de temporada (no va en los tokens del tema, app/config/tema_tokens.php): un
 * tema puede cambiar el naranja de la marca, nunca lo que significa «Plus».
 * Un Plus nuevo usa `bg-[var(--rk-plus,#F5A623)] text-white`. El respaldo dentro del `var()` no
 * es adorno: el Perfil llega por XHR dentro de un Inicio que puede llevar abierto desde antes
 * del despliegue, con la hoja de estilos anterior y sin esta variable; sin respaldo la
 * etiqueta quedaba con letras blancas sobre la tarjeta blanca hasta recargar.
 */
:root {
  --rk-plus: #F5A623;
}