/*!
 * APEX — «Te escuchamos» (rincón verde) · estilos del componente con el diseño aprobado (variante A) · OBRA LOCAL 2026-10-09 · NO DESPLEGADO
 *
 * Variante A (decisión de Sergio, 2026-10-09; maqueta `mockups/A_celular.html`): papel de semilla verde pálido con motas, cinta lima
 * translúcida, girado −2° mientras está cerrado y enderezado al abrirse. Es el diseño de la app (puertas `inicio`, `cuenta`,
 * `novedades`) y también el de la portada web en pantallas angostas. La portada en escritorio (≥ 720 px) suma `rincon-portada-nota.css`
 * (hoja 3D de Codex v3), que el PHP encola solo para esa puerta.
 *
 * Se personaliza con las variables `--rincon-*` (en `.apex-rincon` o por puerta: `--portada`, `--inicio`, `--cuenta`, `--novedades`).
 * No cambiar los mínimos de 44 px ni el foco visible. Estados que pone rincon.js: `--abierta` (se eligió una opción) y `--enviado`;
 * `--sesion` = el correo es el de la cuenta.
 *
 * Contraste medido: tinta / papel 8,9:1 · tinta suave / papel 5,3:1 · papel / tinta (opción elegida) 8,9:1 · tinta / resaltador 8,6:1 ·
 * brote / papel 3,1:1 (es un gráfico; pide ≥ 3:1) · borde de campos y opciones 5,3:1 (pide ≥ 3:1).
 */
.apex-rincon {
  --rincon-fondo: #EEF2E6;            /* papel de semilla: verde muy pálido, no crema */
  --rincon-papel-2: #E1EAD5;          /* papel más verde: campo del correo bloqueado */
  --rincon-tinta: #1E4A2C;            /* tinta verde bosque */
  --rincon-tinta-suave: #4A6B52;      /* tinta secundaria */
  --rincon-acento: #1E4A2C;           /* botón Enviar y opción elegida */
  --rincon-acento-tinta: #EEF2E6;     /* texto sobre el acento */
  --rincon-brote: #3F9A4A;            /* hoja del brote */
  --rincon-resaltador: rgba(200, 255, 0, 0.82);   /* la lima de APEX convertida en marcador sobre papel */
  --rincon-cinta: rgba(200, 255, 0, 0.42);
  --rincon-borde: #4A6B52;
  --rincon-linea: rgba(30, 74, 44, 0.16);
  --rincon-campo: #F7F9F2;
  --rincon-error: #9F2A1F;
  --rincon-foco: #1E4A2C;
  --rincon-radio: 3px;
  --rincon-radio-chip: 999px;
  --rincon-espacio: 14px;
  --rincon-ancho-max: 560px;
  --rincon-fuente: 'Barlow', system-ui, sans-serif;
  --rincon-fuente-titulo: 'Barlow', system-ui, sans-serif;
  --rincon-fuente-mono: 'JetBrains Mono', ui-monospace, monospace;
  --rincon-tamano-titulo: 30px;
  --rincon-sombra: 0 1px 0 rgba(30, 74, 44, 0.25), 0 24px 34px -20px rgba(0, 0, 0, 0.85), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
  --rincon-transicion: 420ms cubic-bezier(.22, 1, .36, 1);

  position: relative;
  box-sizing: border-box;
  max-width: var(--rincon-ancho-max);
  margin: 0 auto;
  padding: 30px 24px 22px;
  color: var(--rincon-tinta);
  background-color: var(--rincon-fondo);
  background-image:
    radial-gradient(ellipse 3px 1.5px at 18% 22%, rgba(63, 154, 74, 0.28) 99%, transparent),
    radial-gradient(ellipse 2px 1px at 78% 64%, rgba(63, 154, 74, 0.24) 99%, transparent),
    radial-gradient(ellipse 2.5px 1.2px at 42% 88%, rgba(30, 74, 44, 0.14) 99%, transparent);
  border-radius: var(--rincon-radio);
  box-shadow: var(--rincon-sombra);
  font-family: var(--rincon-fuente);
  line-height: 1.5;
  transform: rotate(-2deg);
  transform-origin: 50% 0;
}
.apex-rincon *,
.apex-rincon *::before,
.apex-rincon *::after { box-sizing: inherit; }
.apex-rincon [hidden] { display: none !important; }

/* Cinta lima translúcida con los bordes dentados */
.apex-rincon::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 104px;
  height: 28px;
  margin-left: -52px;
  transform: rotate(3deg);
  background: var(--rincon-cinta);
  clip-path: polygon(0 12%, 5% 0, 10% 10%, 90% 6%, 95% 0, 100% 10%, 100% 88%, 95% 100%, 90% 92%, 10% 94%, 5% 100%, 0 90%);
  pointer-events: none;
}
/* Abierto o enviado: se endereza (los campos girados se leen peor y el cursor se ve torcido) */
.apex-rincon--abierta,
.apex-rincon--enviado { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .apex-rincon { transition: transform var(--rincon-transicion); }
}

.apex-rincon__ico { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.apex-rincon__semilla { flex: 0 0 auto; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.apex-rincon__cabecera { display: flex; align-items: center; gap: 10px; }
.apex-rincon__titulo {
  margin: 0;
  font-family: var(--rincon-fuente-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: var(--rincon-tamano-titulo);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--rincon-tinta);
}
/* Resaltador lima: un <span> sobre la palabra clave */
.apex-rincon__marca { position: relative; z-index: 0; white-space: nowrap; }
.apex-rincon__marca::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -5px;
  right: -7px;
  bottom: 0.04em;
  height: 0.5em;
  background: var(--rincon-resaltador);
  border-radius: 3px 9px 4px 10px;
  transform: rotate(-1.4deg);
}
.apex-rincon__bajada { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--rincon-tinta-suave); }

/* ── Las 4 opciones (radios nativos: las flechas del teclado cambian de opción) ── */
.apex-rincon__opciones { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.apex-rincon__legend {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;   /* solo para el lector de pantalla */
}
.apex-rincon__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apex-rincon__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* objetivo táctil */
  padding: 0 12px;
  border: 1.5px solid var(--rincon-borde);
  border-radius: var(--rincon-radio-chip);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--rincon-tinta);
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms, color 150ms;
}
/* El radio queda en el árbol de accesibilidad y en el orden del teclado; solo se oculta a la vista. */
.apex-rincon__radio { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.apex-rincon__chip:has(.apex-rincon__radio:checked) {
  border-color: var(--rincon-acento);
  background: var(--rincon-acento);
  color: var(--rincon-acento-tinta);
}
.apex-rincon__chip:has(.apex-rincon__radio:focus-visible) { outline: 3px solid var(--rincon-foco); outline-offset: 2px; }
/* Respaldo para navegadores sin :has() — el texto del chip marca el estado. */
.apex-rincon__radio:checked ~ .apex-rincon__chip-texto { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.apex-rincon__radio:focus-visible ~ .apex-rincon__chip-texto { outline: 3px solid var(--rincon-foco); outline-offset: 4px; }
@supports selector(:has(*)) {
  .apex-rincon__radio:checked ~ .apex-rincon__chip-texto { text-decoration: none; }
  .apex-rincon__radio:focus-visible ~ .apex-rincon__chip-texto { outline: none; }
}
@media (hover: hover) {
  .apex-rincon__chip:hover { background: rgba(30, 74, 44, 0.08); }
  .apex-rincon__chip:has(.apex-rincon__radio:checked):hover { background: var(--rincon-acento); }
}

/* ── Campos ───────────────────────────────────────────────────────────── */
.apex-rincon__campo { margin-top: var(--rincon-espacio); }
.apex-rincon__label { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 700; color: var(--rincon-tinta); }
.apex-rincon__mensaje,
.apex-rincon__correo,
.apex-rincon__whatsapp {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  font: inherit;
  font-size: max(16px, 15px);    /* 16 px: iOS no hace zoom al enfocar */
  color: var(--rincon-tinta);
  background: var(--rincon-campo);
  border: 1.5px solid var(--rincon-borde);
  border-radius: 10px;
}
.apex-rincon__mensaje {
  min-height: 104px;
  resize: vertical;
  line-height: 24px;
  /* renglones de cuaderno: se mueven con el texto */
  background: var(--rincon-campo) repeating-linear-gradient(to bottom, transparent 0 23px, var(--rincon-linea) 23px 24px);
  background-position: 0 10px;
  background-attachment: local;
}
.apex-rincon__mensaje::placeholder,
.apex-rincon__correo::placeholder,
.apex-rincon__whatsapp::placeholder { color: var(--rincon-tinta-suave); opacity: 1; }
.apex-rincon__mensaje:focus-visible,
.apex-rincon__correo:focus-visible,
.apex-rincon__whatsapp:focus-visible,
.apex-rincon__novedades:focus-visible,
.apex-rincon__enviar:focus-visible,
.apex-rincon__otro:focus-visible,
.apex-rincon__usar:focus-visible,
.apex-rincon__x:focus-visible,
.apex-rincon__boleto:focus-visible,
.apex-rincon__priv a:focus-visible,
.apex-rincon__estado:focus-visible { outline: 3px solid var(--rincon-foco); outline-offset: 2px; }
.apex-rincon__mensaje[aria-invalid="true"],
.apex-rincon__correo[aria-invalid="true"],
.apex-rincon__whatsapp[aria-invalid="true"] { border-color: var(--rincon-error); }

/* ── ¿Por dónde te respondemos? (Correo / WhatsApp) · permiso de novedades ───────────────────────── */
.apex-rincon__canal { margin: var(--rincon-espacio) 0 0; padding: 0; border: 0; min-width: 0; }
.apex-rincon__canal .apex-rincon__label { margin-bottom: 8px; }
.apex-rincon__chip--canal { justify-content: center; }
/* WhatsApp no se puede elegir hasta que haya un número (rincon.js lo habilita); lo deshabilitado sigue legible */
.apex-rincon__chip:has(.apex-rincon__radio:disabled) { border-style: dashed; color: var(--rincon-tinta-suave); cursor: default; }
.apex-rincon__chip:has(.apex-rincon__radio:disabled):hover { background: transparent; }
.apex-rincon__radio:disabled { cursor: default; }
.apex-rincon__check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-top: var(--rincon-espacio); padding: 6px 0; font-size: 13.5px; line-height: 1.4; color: var(--rincon-tinta); cursor: pointer; }
.apex-rincon__novedades { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rincon-acento); cursor: pointer; }
.apex-rincon__check-texto { flex: 1; }

/* Correo de la cuenta (con sesión): solo lectura, legible y sin opacidad; con candado decorativo. */
.apex-rincon__caja-correo { display: flex; align-items: center; gap: 10px; }
.apex-rincon__candado { display: none; }
.apex-rincon--sesion .apex-rincon__caja-correo {
  min-height: 46px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--rincon-papel-2);
  border: 1.5px dashed var(--rincon-borde);
}
.apex-rincon--sesion .apex-rincon__candado { display: block; }
.apex-rincon--sesion .apex-rincon__caja-correo:focus-within { outline: 3px solid var(--rincon-foco); outline-offset: 1px; }
.apex-rincon--sesion .apex-rincon__correo { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: 600; outline: none; }

.apex-rincon__ayuda { margin: 5px 0 0; font-size: 12.5px; color: var(--rincon-tinta-suave); }
.apex-rincon__ayuda:empty { display: none; }
/* Contador: lo lee el lector de pantalla al enfocar el mensaje; a la vista solo aparece cuando quedan pocos caracteres. */
.apex-rincon__contador { margin: 5px 0 0; font-size: 12.5px; color: var(--rincon-tinta-suave); }
.apex-rincon__contador:not(.apex-rincon__contador--visible) {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Trampa: fuera de la vista y del teclado (tabindex -1, aria-hidden). */
.apex-rincon__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.apex-rincon__error { margin: 12px 0 0; color: var(--rincon-error); font-weight: 600; font-size: 14px; }
.apex-rincon__error:empty { display: none; }

/* «¿Quisiste decir …?»: región viva, vacía = oculta. Nunca bloquea el envío. */
.apex-rincon__sugerencia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; font-size: 0.95rem; color: var(--rincon-tinta); }
.apex-rincon__sugerencia:empty { display: none; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.apex-rincon__acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.apex-rincon__enviar,
.apex-rincon__usar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 700;
  border-radius: var(--rincon-radio-chip);
  cursor: pointer;
  transition: opacity 160ms ease, transform 150ms cubic-bezier(.22, 1, .36, 1), filter 150ms;
}
.apex-rincon__enviar { min-height: 48px; padding: 0 24px; font-size: 16px; letter-spacing: 0.01em; color: var(--rincon-acento-tinta); background: var(--rincon-acento); border: 0; }
.apex-rincon__enviar .apex-rincon__ico { width: 17px; height: 17px; }
.apex-rincon__enviar:disabled { opacity: 0.55; cursor: default; }
@media (hover: hover) {
  .apex-rincon__enviar:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.15); }
}
.apex-rincon__usar { color: var(--rincon-acento); background: transparent; border: 1.5px solid currentColor; }
.apex-rincon__priv { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--rincon-tinta-suave); }
.apex-rincon__priv a { color: var(--rincon-tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Cerrar: 44 × 44, arriba a la derecha (solo visible abierto o enviado; lo muestra rincon.js) */
.apex-rincon__x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--rincon-tinta);
  cursor: pointer;
}

/* ── Enviado: el brote crece ──────────────────────────────────────────── */
.apex-rincon__estado { margin: 0; text-align: center; padding: 4px 4px 2px; }
.apex-rincon__estado:empty { display: none; }
.apex-rincon__estado .apex-rincon__brote { display: block; margin: 0 auto 4px; }
.apex-rincon__ok-t { display: block; font-family: var(--rincon-fuente-titulo); font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--rincon-tinta); }
.apex-rincon__ok-f { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--rincon-tinta); }
.apex-rincon__ok-m { margin: 6px 0 0; font-family: var(--rincon-fuente-mono); font-size: 12.5px; color: var(--rincon-tinta-suave); overflow-wrap: anywhere; }
.apex-rincon__listo { text-align: center; }
.apex-rincon__otro {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 6px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--rincon-tinta);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.apex-rincon--enviado .apex-rincon__cuerpo,
.apex-rincon--enviado .apex-rincon__boleto { display: none; }
.apex-rincon__brote .tallo { stroke-dasharray: 48; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .apex-rincon--enviado .apex-rincon__brote .tallo { animation: apex-rincon-tallo 0.7s cubic-bezier(.22, 1, .36, 1) 0.1s both; }
  .apex-rincon--enviado .apex-rincon__brote .hoja { transform-box: fill-box; animation: apex-rincon-hoja 0.55s cubic-bezier(.22, 1, .36, 1) both; }
  .apex-rincon--enviado .apex-rincon__brote .h1 { transform-origin: 100% 100%; animation-delay: 0.45s; }
  .apex-rincon--enviado .apex-rincon__brote .h2 { transform-origin: 0 100%; animation-delay: 0.6s; }
  .apex-rincon--enviado .apex-rincon__brote .h3 { transform-origin: 50% 100%; animation-delay: 0.78s; }
  .apex-rincon--enviado .apex-rincon__ok-t,
  .apex-rincon--enviado .apex-rincon__ok-f,
  .apex-rincon--enviado .apex-rincon__ok-m,
  .apex-rincon--enviado .apex-rincon__otro { animation: apex-rincon-sube 0.5s cubic-bezier(.22, 1, .36, 1) 0.5s both; }
}
@keyframes apex-rincon-tallo { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes apex-rincon-hoja { from { transform: scale(0) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes apex-rincon-sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Cerrado = solo las 4 opciones (con JS activo). Sin JS se ve el formulario completo. ── */
@media (scripting: enabled) {
  .apex-rincon:not(.apex-rincon--abierta):not(.apex-rincon--enviado) .apex-rincon__resto { display: none; }
}
.apex-rincon--abierta .apex-rincon__cabecera { padding-right: 36px; }   /* deja lugar al cerrar */

/* ── Puertas de la app (celular): lugar en la pantalla ─────────────────── */
.apex-rincon--inicio,
.apex-rincon--cuenta,
.apex-rincon--novedades { --rincon-tamano-titulo: 27px; padding: 26px 20px 18px; }
.apex-rincon--inicio,
.apex-rincon--cuenta { margin: 6px 6px 0 26px; max-width: none; }                       /* corrido a la derecha del eje, como en la maqueta */
.apex-rincon--inicio.apex-rincon--abierta,
.apex-rincon--inicio.apex-rincon--enviado,
.apex-rincon--cuenta.apex-rincon--abierta,
.apex-rincon--cuenta.apex-rincon--enviado { margin: 4px -4px 0; }
.apex-rincon--inicio .apex-rincon__chip,
.apex-rincon--cuenta .apex-rincon__chip,
.apex-rincon--novedades .apex-rincon__chip { font-size: 13.5px; padding: 0 10px; gap: 7px; }
.apex-rincon--inicio .apex-rincon__mensaje,
.apex-rincon--cuenta .apex-rincon__mensaje,
.apex-rincon--novedades .apex-rincon__mensaje { min-height: 80px; }

/* Novedades: cerrado es un boleto girado un poco más; abierto vuelve a ser la hoja de papel */
.apex-rincon--novedades { max-width: none; margin: 30px -4px 0; }
.apex-rincon__boleto { display: none; }
@media (scripting: enabled) {
  .apex-rincon--novedades:not(.apex-rincon--abierta):not(.apex-rincon--enviado) {
    width: 306px; max-width: 100%; margin: 18px 0 6px auto; padding: 20px 16px 16px; transform: rotate(-2.5deg);
  }
  .apex-rincon--novedades:not(.apex-rincon--abierta):not(.apex-rincon--enviado) .apex-rincon__boleto { display: flex; }
  .apex-rincon--novedades:not(.apex-rincon--abierta):not(.apex-rincon--enviado) .apex-rincon__cuerpo { display: none; }
}
.apex-rincon__boleto {
  align-items: center; gap: 12px; width: 100%; padding: 0; text-align: left;
  font: inherit; color: var(--rincon-tinta); background: none; border: 0; cursor: pointer;
}
.apex-rincon__boleto-textos { display: block; min-width: 0; }
.apex-rincon__boleto-titulo { display: block; font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.apex-rincon__boleto-bajada { display: block; margin-top: 2px; font-size: 13px; color: var(--rincon-tinta-suave); }
.apex-rincon__boleto-flecha {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-left: auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--rincon-acento); color: var(--rincon-acento-tinta);
}

@media (prefers-reduced-motion: reduce) {
  .apex-rincon,
  .apex-rincon *,
  .apex-rincon *::before,
  .apex-rincon *::after { animation: none !important; transition: none !important; }
}