/**
 * Recaptura opt-in (Ley de Protección de Datos 2026).
 * Fidelidad a los mockups Hito 1 (docs/proyecto/proyecto-recaptura-optin/).
 * Paleta: dark #23292F · light beige #F1EFE9 · banner #FBF1CE · azul link #1E5BC6.
 * Texto sobre el amarillo #FBF1CE: SIEMPRE #7A4D03 (banner de la pagina y franja
 * del perfil). El link de la franja es la excepcion: va azul, asi esta en el diseño.
 */

/* ====================== Shell minimalista (logo + X) ====================== */
.rc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 34px;
}
.rc-page-header .rc-logo img {
  height: 64px;
  width: auto;
  display: block;
}
/* a.rc-close (0,1,1): iguala/gana por orden a la global a:not([id^=v-]) (0,1,1)
   que le metia font-size .8rem, y a a:hover{color:#F9DC0A} que lo ponia amarillo.
   Mismo criterio para todos los <a> sueltos de esta pagina. */
/* Hallazgo 17 (QA Antonio): el boton cerrar debe verse con fondo blanco, no
   gris. Se le da EL MISMO tratamiento que la X de los modales (.rc-modal-close):
   circulo con contorno y sin relleno. Sobre el blanco de la pagina se lee como
   fondo blanco, y de paso las dos X del flujo quedan iguales — que era el
   reclamo de que "algunas siguen con fondo gris".
   Se mantiene en 40px (la del modal es de 34): es la X del encabezado y mas
   chica descuadraria el header. */
a.rc-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #B4B7BC;
  box-sizing: border-box;
  color: #4a4f55;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
a.rc-close:hover { background: rgba(35,41,47,.06); border-color: #4a4f55; color: #23292F; text-decoration: none; }

/* ====================== Contenedor central ====================== */
.container-recaptura {
  max-width: 600px;
  margin: 8px auto 90px;
  padding: 0 20px;
  font-family: inherit;
  /* ESCALA DE PESOS DE ESTE DESARROLLO: normal = 300, bold = 600. No usar 400 ni
     700. Este baseline en 300 lo heredan los parrafos de lectura (.rc-subtitle,
     .rc-help, .rc-card p, .rc-modal-content p), asi que no necesitan declararlo. */
  font-weight: 300;
  color: #1E2328;
  position: relative;
}
/* OJO: bootstrap-reboot trae `b,strong{font-weight:bolder}` y `bolder` es RELATIVO
   al padre. Con el baseline en 300, `bolder` computa 400 y los <b> dejaban de verse
   en negrita (los telefonos del call center de los modales, por ejemplo). Se fija el
   bold de la escala en valor absoluto. La fecha de la franja es la excepcion y se
   resuelve mas abajo con .rc-banner-deadline b — misma especificidad (0,1,1), gana
   por orden de aparicion. */
/* Ancho exacto del diseño en escritorio (hallazgo 11-ago-2026).
   El Figma maqueta el contenedor en 600px EXACTOS, pero con el padding lateral
   el texto se acomodaba en 560px reales y los cortes de linea no calzaban: la
   franja amarilla caia en 3 lineas donde el diseño la muestra en 2.

   Se saca el padding solo desde 641px, y NO se toca la regla base, a proposito:
     - Hasta 600px manda el bloque mobile de mas abajo (padding 0 18px), que
       esta validado y no se toca.
     - Entre 601 y 640px sigue mandando la base (0 20px). Si en esa franja se
       sacara el padding, un contenedor de 600px quedaria con el texto pegado al
       borde de la ventana.
     - Desde 641px hay al menos 20px de aire a cada lado por el margin auto, asi
       que el contenedor puede medir sus 600px exactos sin quedar al ras. */
@media (min-width: 641px) {
  .container-recaptura { padding: 0; }
}

.container-recaptura b, .container-recaptura strong,
.rc-modal-content b, .rc-modal-content strong { font-weight: 600; }

/* ====================== Indicador de pasos ====================== */
.rc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.rc-step-dot {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #E6E3DA;
  color: #8b8b8b;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rc-step-dot.active,
.rc-step-dot.done { background: #23292F; color: #fff; }
.rc-step-label {
  font-weight: 600;
  font-size: 15px;
  color: #23292F;
}
.rc-step-line {
  width: 40px;
  height: 2px;
  background: #d9d6cd;
  display: inline-block;
}

/* ====================== Banner deadline ====================== */
.rc-banner-deadline {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #FBF1CE;
  color: #7A4D03; /* texto sobre amarillo: mismo marron en toda la recaptura y en la franja del perfil */
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 26px;
}
/* Icono del banner: la imagen institucional, no la entidad &#9888;. Ese caracter
   los navegadores lo resuelven con su propia fuente de emoji y termina pintado
   a color (⚠️), que es lo que rompia el diseño.
   Se dimensiona en `em` y NO en pixeles, para que escale con el texto que
   acompaña: 1.15em sobre los 14.5px de la franja da ~16px, el mismo tamaño que
   tenia el glifo. Si mañana cambia el font-size del banner, el icono lo sigue
   solo. El margin-top lo alinea con la primera linea cuando el texto envuelve. */
/* Icono del banner: imagen PNG (__img/icon-warning-brown.png), no la entidad
   &#9888;. Ese caracter algunos navegadores —Edge entre ellos— lo resuelven con
   su fuente de emoji y lo pintan a color (⚠️), que es lo que rompia el diseño.
   Con el PNG el resultado es identico en todos los navegadores.
   El archivo ya viene en el marron #7A4D03 del texto, asi que no hace falta
   mascara ni filtro: se usa tal cual.
   Se dimensiona en `em` y NO en pixeles, para que escale con el texto que
   acompaña: 1.15em sobre los 14.5px de la banda da ~17px. El margin-top lo
   alinea con la primera linea cuando el texto envuelve. */
.rc-banner-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; margin-top: .12em; }
/* La fecha del banner va en el MISMO peso que el resto de la franja (asi esta en
   el diseño). El <b> del markup lo pisa bootstrap-reboot con `b,strong{font-weight:
   bolder}` (0,0,1); este selector (0,1,1) le gana por especificidad, sin !important.
   OJO: solo aplica dentro de la franja — los <b> de los telefonos del call center
   en los modales SI van en negrita. */
.rc-banner-deadline b { font-weight: inherit; }

/* ====================== Títulos / textos ====================== */
.rc-title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #1E2328;
  margin: 0 0 8px;
  line-height: 1.15;
}
.rc-subtitle {
  font-size: 15.5px;
  color: #3C4147;
  line-height: 1.5;
  margin: 0 0 18px;
}
.rc-help {
  font-size: 15.5px;
  color: #3C4147;
  line-height: 1.5;
  margin: 0 0 26px;
}

/* ====================== Input RUT (label flotante) ====================== */
.rc-input-wrap {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
}
.rc-input-label {
  position: absolute;
  top: -8px;
  left: 13px;
  background: #fff;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500; /* explicito: sin esto el theme lo hereda en negrita */
  color: #55595E;
  pointer-events: none;
}
.rc-input {
  width: 100%;
  border: 1px solid #B4B7BC;
  border-radius: 9px;
  padding: 17px 15px;
  font-size: 16px;
  color: #1E2328;
  background: #fff;
  box-sizing: border-box;
  line-height: 1.2;
}
.rc-input::placeholder { color: #9a9ea3; }
.rc-input:focus { outline: none; border-color: #23292F; box-shadow: 0 0 0 1px #23292F; }
.rc-input-wrap.has-error .rc-input { border-color: #DB5446; box-shadow: 0 0 0 1px #DB5446; }
.rc-input-wrap.has-error .rc-input-label { color: #DB5446; }

/* RUT bloqueado (socio logueado): pre-cargado y no editable. Cue visual sutil.
   Se define DESPUES de .rc-input para ganarle por orden (misma especificidad). */
.rc-input-locked { background: #F4F2EC; color: #55595E; cursor: default; }
.rc-input-locked:focus { border-color: #B4B7BC; box-shadow: none; }

.rc-inline-error {
  display: block;
  color: #DB5446;
  font-size: 13px;
  /* Sin margenes por defecto: en el PASO 1 el error cuelga del input, que arranca
     al borde del contenedor, asi que cualquier sangrado lo desalinea. */
  margin: 0;
  line-height: 1.4;
}
/* PASO 2 unicamente: aca el error cuelga del checkbox de TyC, no del input.
   - 36px de sangrado para alinearlo con el TEXTO del label. Medido en el navegador,
     no calculado: checkbox 17px + gap 12px + los margenes por defecto que el
     navegador le pone al <input type=checkbox> (~7px). Con 28px quedaba corrido.
   - 10px abajo y 0 arriba, para que se lea como error DEL TyC y no del CMR. */
.rc-check-group .rc-inline-error { margin: 0 36px 10px; }

/* Marca "(obligatorio)" dentro del label de TyC (Figma 11-ago-2026, punto 3).
   Reemplaza al asterisco: la instruccion fue que el socio no necesariamente
   interpreta el "*" como campo requerido.
   El color es el MISMO #DB5446 de .rc-inline-error — confirmado contra el
   Figma— asi que no entra un rojo nuevo al flujo. Va inline y hereda tamaño y
   peso del label: en el diseño no se distingue del resto de la frase salvo por
   el color. */
.rc-obligatorio { color: #DB5446; }

/* ====================== Card ¿Qué cambió? ====================== */
.rc-card {
  border: 1px solid #CBCED2;
  border-radius: 11px;
  padding: 18px 22px;
  margin: 0 0 24px;
  background: #fff;
}
.rc-card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: #1E2328; }
.rc-card p { margin: 0; font-size: 15.5px; color: #3C4147; line-height: 1.5; }

/* ====================== Checkboxes ====================== */
.rc-check-group { margin: 0 0 8px; padding: 0 4px; }
.rc-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 300; /* texto del consentimiento: peso normal de la escala */
  color: #2c3136;
  margin: 0 0 4px;
  cursor: pointer;
  line-height: 1.5;
}
/* Hermano GENERAL (~), no adyacente (+): entre los dos checkbox vive el
   <span class="rc-inline-error"> del error, asi que `.rc-check + .rc-check` no
   llegaba a matchear NUNCA y los dos consentimientos quedaban pegados a 4px en
   vez de 18px (se ve incluso con el error oculto, porque el span sigue en el DOM). */
.rc-check ~ .rc-check { margin-top: 18px; }
.rc-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin-top: 2px;
  accent-color: #23292F;
  cursor: pointer;
}
/* a.rc-link (0,1,1): gana por orden a a:not() (0.8rem) y a a:hover (amarillo).
   font-size: inherit -> el link toma el tamaño del texto que lo rodea (14px). */
a.rc-link { color: #1E5BC6; text-decoration: underline; font-size: inherit; }
a.rc-link:hover { color: #16489c; }

/* Tooltip CMR */
.rc-tooltip-anchor {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: help;
}
.rc-tooltip {
  display: none;
  position: absolute;
  bottom: 135%;
  left: 0;
  z-index: 50;
  width: 290px;
  background: #2c3136;
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.rc-tooltip a { color: #cfe0ff; text-decoration: underline; font-size: inherit; }
.rc-tooltip-anchor:hover .rc-tooltip { display: block; }

/* ====================== Botones ====================== */
.rc-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}
/* Botones. El <a> y el <button> deben verse IDENTICOS (misma tipografia, sin
   sombra). Este stylesheet carga DESPUES del theme global y los selectores
   .container-recaptura .rc-btn / .rc-modal .rc-btn (especificidad 0,2,0) ganan
   por especificidad a las reglas globales que tocan a/p/button — todas de
   especificidad menor y SIN !important: generales.css 'a:not(),p,button{font-
   size:.8rem}' y 'a{color:inherit}', bootstrap-reboot 'button{border-radius:0}'.
   Por eso NO hace falta !important. */
.container-recaptura .rc-btn,
.rc-modal .rc-btn {
  border: 1.5px solid transparent; /* borde base transparente: light (outline) y dark miden igual */
  box-sizing: border-box;
  border-radius: 999px;
  padding: 16px 34px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: normal;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .15s ease, background .15s ease;
}
.container-recaptura .rc-btn:hover,
.container-recaptura .rc-btn:focus,
.rc-modal .rc-btn:hover,
.rc-modal .rc-btn:focus { text-decoration: none; box-shadow: none; outline: none; }
/* Boton claro del FLUJO ("Hacer en otro momento"): SIN fondo (el diseno no lleva
   fondo gris ahi). Hover con un tinte apenas perceptible para dar feedback. */
.container-recaptura .rc-btn-light { background: transparent; color: #23292F; }
.container-recaptura .rc-btn-light:hover { background: rgba(35,41,47,.06); color: #23292F; }
/* Botones claros del MODAL (Cerrar / Volver al inicio): SI llevan fondo (diseno). */
.rc-modal .rc-btn-light { background: transparent; color: #23292F; border-color: #23292F; }
.rc-modal .rc-btn-light:hover { background: rgba(35,41,47,.06); color: #23292F; }
.container-recaptura .rc-btn-dark,
.rc-modal .rc-btn-dark { background: #23292F; color: #fff; }
.container-recaptura .rc-btn-dark:hover,
.rc-modal .rc-btn-dark:hover { background: #171c21; color: #fff; }
.rc-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Hallazgo 03 (QA Antonio): la flecha del CTA sale casi blanca y debe leerse
   gris. Es texto blanco sobre el boton oscuro, asi que se baja la opacidad en
   vez de fijar un color: asi sigue funcionando si el boton cambia de fondo.
   La clase solo existe en el CTA de la recaptura. */
.rc-arrow { font-size: 18px; opacity: .55; font-weight: 300; }

/* Separación grande input -> botones en el paso 1 (como el mockup). */
#paso-identificacion .rc-actions { margin-top: 70px; }

/* ====================== Modales ====================== */
.rc-modal .modal-dialog { max-width: 470px; margin: 1.75rem auto; }
.rc-modal-content {
  border: none;
  border-radius: 16px;
  padding: 28px 28px 24px;
  position: relative;
  text-align: left;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.rc-modal-content h3 { font-size: 21px; font-weight: 600; color: #1E2328; margin: 14px 0 10px; line-height: 1.2; }
.rc-modal-content p { font-size: 14.5px; color: #3C4147; margin: 0 0 10px; line-height: 1.5; }
.rc-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  /* Circulo con contorno, no relleno gris (asi esta en el Figma). */
  background: transparent;
  border: 1px solid #B4B7BC;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* El borde le come 2px a la caja de contenido: con flex la X queda centrada
     igual, sin depender del line-height. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #4a4f55;
}
.rc-modal-close:hover { background: rgba(35,41,47,.06); border-color: #4a4f55; }
.rc-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
/* Fondo del circulo de alerta: #FFEEDF (Figma). Antes estaba #FDECEA, que tira
   a rosado en vez de durazno. Aplica a los 4 modales de aviso de esta pagina. */
.rc-icon-warn { background: #FFEEDF; color: #DB5446; }

/* El aspa de advertencia dejo de ser la entidad &#9888; y pasa a ser la imagen
   institucional icono2024-warning.png, la misma que ya usan los modales del
   registro, del QR y de la academia.
   ESTAS REGLAS NO SON OPCIONALES: el PNG mide 512x512 px, asi que sin tamaño
   explicito se renderiza completo y revienta el modal.
   Se conservan las medidas exactas del <span> que reemplaza —42px de caja y el
   circulo #FFEEDF— para que el layout no se mueva ni un pixel. */
.rc-modal .modal-alerta-icono {
  display: block;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 50%;
  background: #FFEEDF;
  object-fit: contain;
}
.rc-icon-ok { background: #E8F6DD; color: #4a9d2f; }
.rc-modal-actions {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}
/* 2 botones: cada uno toma la mitad del ancho del modal (como el diseño). */
.rc-modal-actions .rc-btn { flex: 1; padding: 13px 22px; }
/* 1 botón: centrado, ancho automático. */
.rc-modal-actions-center { justify-content: center; }
.rc-modal-actions-center .rc-btn { flex: 0 1 auto; min-width: 190px; }

/* ====================== Preload ("Identificando usuario…") ====================== */
.container-recaptura .container-preload {
  position: fixed;
  inset: 0;
  background: rgba(35,41,47,.35);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-preload-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px 44px 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  text-align: center;
  min-width: 260px;
}
.rc-preload-text {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  color: #1E2328;
}
.rc-preload-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
/* Cuadraditos negros que se mueven en ola (scale + opacity, en secuencia). */
.rc-preload-dots span {
  width: 13px;
  height: 13px;
  background: #23292F;
  border-radius: 3px;
  display: inline-block;
  animation: rc-preload-wave 1.1s infinite ease-in-out both;
}
.rc-preload-dots span:nth-child(1) { animation-delay: -0.24s; }
.rc-preload-dots span:nth-child(2) { animation-delay: -0.12s; }
.rc-preload-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes rc-preload-wave {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.35; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ====================== Responsive (mobile) ====================== */
@media (max-width: 600px) {
  .rc-page-header { padding: 14px 18px; }
  .rc-page-header .rc-logo img { height: 52px; }
  .container-recaptura { margin: 4px auto 60px; padding: 0 18px; }
  .rc-title { font-size: 25px; }
  .rc-input-wrap { max-width: 100%; }
  /* Hallazgo 12 (QA Antonio): en mobile los pasos salian pegados a la izquierda.
     La causa era un `justify-content: flex-start` aca, que pisaba el `center`
     del escritorio. Se elimina: sin la regla, hereda el centrado y queda igual
     que en desktop. No se agrega nada nuevo. */

  /* Botones apilados full-width, PRIMARIO (oscuro) ARRIBA — como el mockup. */
  .rc-actions,
  #paso-identificacion .rc-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 40px; }
  .rc-btn { width: 100%; padding: 15px 24px; }
  /* QA Antonio: en mobile los modales salian pegados a los bordes de la
     pantalla (375px de ancho, 0px de margen a los costados).
     Causa: la regla de escritorio `.rc-modal .modal-dialog { margin: 1.75rem
     auto }` (L339) no tenia media query, asi que pisaba el `margin: .5rem`
     que Bootstrap 4 aplica en mobile — y un `auto` horizontal sobre un bloque
     de ancho automatico resuelve a 0.
     Se repone el margen lateral con los MISMOS 18px del padding de
     .container-recaptura, para que el modal quede alineado con el contenido
     de la pagina. Solo cambia el margen: el ancho, el alto y el centrado
     vertical (.modal-dialog-centered) siguen igual.
     Aplica a los 5 modales de la pagina: exito, no-socio, ya-recapturado,
     error y recordatorio. */
  .rc-modal .modal-dialog { margin: 1.75rem 18px; }

  .rc-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .rc-modal-actions .rc-btn { width: 100%; }
  .rc-tooltip { width: min(260px, 78vw); }
}