/* ============================================================
   DPM — Fase 2 · Plataforma privada
   ------------------------------------------------------------
   Continúa la línea gráfica de la Fase 1: los mismos colores,
   las mismas píldoras, las mismas sombras con tinte azul. Acá
   solo viven las piezas nuevas —carrusel, catálogo, reproductor
   y compra—; todo lo que ya existía se reutiliza de style.css.

   Mobile-first: la mayoría de las usuarias entra desde el celular,
   así que la base es la vista angosta y las consultas de medios
   agregan columnas hacia arriba.
   ============================================================ */

/* Cualquier regla propia de `display` le gana al atributo `hidden` del HTML.
   Como buena parte de la Fase 2 se muestra y se esconde con `hidden` —los pasos
   de la compra, el aviso de espera de SINPE, las diapositivas del carrusel—,
   se deja dicho de una vez que `hidden` manda. */
[hidden] { display: none !important; }

:root {
  /* Halo rosa del foco en los campos. En la Fase 1 estaba escrito
     a mano en cada regla; acá se le pone nombre para no repetirlo. */
  --halo-foco: rgba(165,55,90,.14);

  /* Verdes de confirmación de la línea gráfica. El landing de la Fase 1
     no los necesitaba —no confirma nada—, así que nunca se declararon en
     style.css. Acá se usan en el ✓ de tema completado, en el sello de
     "listo" y en los chips de disponible. */
  --exito:       #1f7a44;
  /* Verde apagado, tirando a salvia: dice "escuchado" sin el verde de semáforo
     del color de sistema, que al lado del rosa y la arena de la marca gritaba.
     Con blanco encima da 5,4:1 de contraste, de sobra para el número. */
  --verde-suave: #4F7259;
  --exito-bg:    #e9f7ef;
  --exito-borde: #b6e2c6;
}

/* ============================================================
   1. AÑADIDOS A PIEZAS DE LA FASE 1
   ============================================================ */

/* Texto manuscrito (Caveat) para los momentos emocionales: el cierre del
   registro, el de la compra y el del primer tema terminado. Nunca en
   botones, etiquetas ni párrafos. */
.manuscrita {
  font-family: var(--fuente-display);
  color: var(--rosa);
  line-height: 1.2;
}

/* Texto solo para lectores de pantalla. Es la clase estándar de WordPress;
   el landing de la Fase 1 no la necesitaba, pero acá hay leyendas de grupo
   (como "Método de pago") que se anuncian sin ocupar lugar en la pantalla. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
}

/* --- Botones: tamaños y variante de bloque --- */
.btn--chico  { padding: 9px 18px; font-size: 13.5px; gap: 7px; }
.btn--grande { padding: 16px 34px; font-size: 16.5px; }
.btn--bloque { display: flex; width: 100%; justify-content: center; }

/* Un botón deshabilitado deja de invitar: sin sombra, sin salto. */
.btn[disabled],
.btn.esta-ocupado {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Ojillo: variantes de la parte privada --- */
.ojillo--centrado { justify-content: center; }
.ojillo--arena    { color: var(--arena); }

/* --- Acceso en la cabecera --- */
.cabecera__cuenta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* --- La puerta de entrada ---

   Era un botón de línea del tamaño chico y se perdía contra la cabecera
   color crema: borde azul fino sobre fondo claro, al lado de un logotipo de
   33 px. Siendo la única acción de la barra, no tenía por qué ser la pieza
   más callada de la pantalla.

   Ahora lleva el trato de los botones de acción de la marca —relleno rosa,
   su sombra, el mismo perfil de píldora—, así que no estrena vocabulario:
   dice "esto se toca" con las palabras que el sitio ya usa. Y se queda un
   punto y medio por debajo de los del landing (14,5 px contra 16, y menos
   relleno) para invitar sin discutirle el protagonismo al "Quiero el
   programa" del hero.

   Va sin iconillo a propósito. Se probó con el del libro, el mismo de "Mi
   espacio" en el menú, y a 15 px son dos rectángulos sin relleno: al lado del
   texto se leen como un carácter que no cargó. Además los botones de acción
   del landing tampoco llevan, así que sin él se parece más a ellos, no menos. */
.f2-acceso {
  display: inline-flex;
  align-items: center;
  background: var(--rosa);
  color: var(--blanco);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 11px 24px;
  font-family: var(--fuente-texto);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  box-shadow: 0 8px 20px rgba(165,55,90,.28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.f2-acceso:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(165,55,90,.38);
}
.f2-acceso:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(165,55,90,.30);
}
.f2-usuaria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 6px 14px 6px 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  transition: box-shadow .25s ease, transform .25s ease;
}
.f2-usuaria:hover { box-shadow: var(--sombra-sm); transform: translateY(-1px); }
.f2-usuaria__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--crema-200);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--azul);
  overflow: hidden;
}

/* La foto llena el círculo, venga con la forma que venga. Recortar por el
   centro es lo que más veces acierta con una foto de cara. */
.f2-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.f2-usuaria__avatar.tiene-foto,
.f2-menu__avatar.tiene-foto,
.f2-foto-caja.tiene-foto { background: none; }

/* Con foto, el monigote sigue ahí pero no se ve. */
.tiene-foto .f2-monigote { display: none; }
/* --- Menú de la cuenta ---
   Es un <details>: el navegador se encarga de abrirlo y cerrarlo, también con
   el teclado. Acá solo se le quita el triangulito y se le da forma de panel. */
.f2-menu { position: relative; }
.f2-menu > summary { list-style: none; cursor: pointer; }
.f2-menu > summary::-webkit-details-marker { display: none; }
.f2-menu > summary::marker { content: ""; }
.f2-menu > summary:focus-visible { outline: none; box-shadow: var(--foco); }

.f2-usuaria__flecha { transition: transform .2s ease; opacity: .6; }
.f2-menu[open] .f2-usuaria__flecha { transform: rotate(180deg); }

.f2-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 232px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f2-menu__quien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 4px;
}
.f2-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--crema-200);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--azul);
  overflow: hidden;
}
.f2-menu__datos { min-width: 0; }
.f2-menu__nombre {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--azul);
}
.f2-menu__correo {
  display: block;
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
}

.f2-menu__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
  transition: background .2s ease;
}
.f2-menu__opcion .f2-ico { color: var(--rosa); flex: none; }
.f2-menu__opcion:hover { background: var(--crema-200); }

/* Salir se separa del resto: es la única que no lleva a ninguna pantalla. */
.f2-menu__opcion--salir {
  border-top: 1px solid var(--linea);
  border-radius: 0 0 8px 8px;
  margin-top: 4px;
  padding-top: 12px;
  color: var(--tinta-suave);
}
.f2-menu__opcion--salir .f2-ico { color: var(--tinta-suave); }
.f2-menu__opcion--salir:hover { color: var(--vino); }
.f2-menu__opcion--salir:hover .f2-ico { color: var(--vino); }

/* Acceso al panel, solo para el perfil de administración. Va en azul —no en
   rosa— para que no compita con las llamadas a la acción del sitio. */
.f2-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--azul);
  color: var(--blanco);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  flex: none;
  transition: background .25s ease, transform .25s ease;
}
.f2-admin-btn:hover { background: var(--azul-900); transform: translateY(-1px); }
.f2-admin-btn .f2-ico { color: var(--arena); }

/* En pantallas angostas el logo no cede ancho: el espacio se libera de la
   derecha. Primero se va el texto del botón, después el nombre y el subtítulo. */
@media (max-width: 860px) {
  .f2-admin-btn__txt { display: none; }
  .f2-admin-btn { padding: 8px; }
}
@media (max-width: 520px) {
  .f2-usuaria__nombre { display: none; }
  .f2-usuaria { padding: 6px; }
  .logo__sub { display: none; }
  .logo__nombre { font-size: 24px; }
  /* Sigue rosa y sigue viéndose; solo deja de empujar al logotipo. */
  .f2-acceso { padding: 10px 18px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  .f2-acceso { padding: 9px 16px; font-size: 13px; }
}

/* ============================================================
   2. PIEZAS COMPARTIDAS DE LA PARTE PRIVADA
   ============================================================ */

.f2-pantalla {
  background: var(--crema);
  padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 76px);
  position: relative;
  overflow: hidden;
}
.f2-pantalla--crema2 { background: var(--crema-200); }
.f2-pantalla--azul {
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(205,184,132,.24), transparent 60%),
    linear-gradient(150deg, var(--azul), var(--azul-900));
  display: flex;
  align-items: center;
  min-height: 70vh;
}

/* Anchos de contenido. El landing usa .contenedor (1140px); las
   pantallas privadas son formularios y piden menos ancho. */
.f2-angosto { width: 100%; max-width: 600px; margin-inline: auto; padding-inline: var(--pad); }
.f2-medio   { width: 100%; max-width: 900px; margin-inline: auto; padding-inline: var(--pad); }
.f2-centro  { text-align: center; }

.f2-flor { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 10px; }

.f2-titulo {
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--azul);
  margin: 0 auto 10px;
  max-width: 24ch;
  line-height: 1.15;
}
.f2-titulo--izq { margin-inline: 0; max-width: none; }

.f2-bajada {
  color: var(--tinta-suave);
  font-size: 15.5px;
  margin: 0 auto 24px;
  max-width: 48ch;
}
.f2-bajada--izq { margin-inline: 0; }

.f2-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  padding: clamp(20px, 4vw, 26px);
}
.f2-tarjeta--elevada { box-shadow: var(--sombra-md); text-align: left; }
.f2-tarjeta--crema   { background: var(--crema-200); }

.f2-separador { border: none; border-top: 1px solid var(--linea); margin: 20px 0 16px; }

/* --- Sello de "listo" (registro y compra confirmados) --- */
.f2-sello {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--exito-bg);
  border: 2px solid var(--exito-borde);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--exito);
}

/* Va después de `.f2-sello` y no antes, que es donde estaba: las dos reglas
   pesan lo mismo, así que la de abajo gana. Escrita arriba, la base la pisaba
   y el sello salía verde igual —se veía en la portada del panel, donde el
   candado de "zona privada" apareció siempre con el verde de "listo"—.

   El verde dice "hecho". Para un candado, o para un "muy pronto", el que
   corresponde es este: la arena de la marca, que no afirma nada. */
.f2-sello--arena {
  background: var(--crema-200);
  border-color: var(--arena);
  color: var(--cafe);
}

/* --- Chips de estado --- */
.f2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 20px;
  padding: 4px 10px;
  border: 1px solid transparent;
  flex: none;
  line-height: 1.4;
}
.f2-chip--rosa  { background: var(--rosa); color: var(--blanco); }
.f2-chip--arena { background: var(--crema-200); color: var(--tinta-suave); border-color: var(--arena); }
.f2-chip--exito { background: var(--exito-bg); color: var(--exito); border-color: var(--exito-borde); }
.f2-chip--azul  { background: rgba(31,60,108,.08); color: var(--azul); }

/* --- Barra de progreso --- */
.f2-barra {
  display: block;
  height: 5px;
  background: var(--crema-200);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 7px;
}
.f2-barra--gruesa { height: 7px; }
.f2-barra__relleno {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rosa);
  border-radius: 3px;
  transition: width .3s linear;
}

/* ============================================================
   3. FORMULARIOS
   ============================================================ */

.f2-form { color: var(--tinta); }
.f2-campo { margin-bottom: 14px; }
.f2-campo label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--azul);
  margin-bottom: 6px;
}
.f2-obligatorio { color: var(--rosa); }

.f2-form input[type="text"],
.f2-form input[type="email"],
.f2-form input[type="tel"],
.f2-form input[type="password"],
.f2-form input[type="number"],
.f2-form select,
.f2-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  background: var(--crema);
  color: var(--tinta);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.f2-form input:focus,
.f2-form select:focus,
.f2-form textarea:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--halo-foco);
  background: var(--blanco);
}
.f2-form input[readonly] { color: var(--tinta-suave); }

/* Campo con error: el borde vino y el mensaje debajo. */
.f2-campo.tiene-error input { border-color: var(--vino); }

/* --- Ver la contraseña ---

   El botón se apoya sobre el borde derecho del campo, a la altura del texto.
   El campo le deja sitio con relleno de más a la derecha, así que lo escrito
   nunca pasa por debajo del ojo.

   La caja se posiciona en relativo pero el botón se ubica contra el campo y no
   contra la caja: la etiqueta va arriba y el aviso de error abajo, y ambos
   cambian de alto. Por eso la distancia se mide desde arriba, con la altura de
   la etiqueta ya contada. */
.f2-clave { position: relative; display: block; }

/* Gana por especificidad a la regla general de los campos del formulario, sin
   necesidad de `!important`. */
.f2-form .f2-clave input[type="password"],
.f2-form .f2-clave input[type="text"] { padding-right: 46px; }

.f2-ojo-clave {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--tinta-suave);
  border-radius: 0 9px 9px 0;
  transition: color .2s ease;
}
.f2-ojo-clave:hover { color: var(--azul); }
.f2-ojo-clave[aria-pressed="true"] { color: var(--rosa); }

/* El foco del teclado se dibuja pegado al campo, no flotando. */
.f2-ojo-clave:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: -3px;
  border-radius: 9px;
}

.f2-ayuda { font-size: 12px; color: var(--tinta-suave); margin: 5px 0 0; }

/* Los enlaces dentro de un texto de ayuda tienen que verse. Sin esto heredaban
   el color del párrafo y no llevaban subrayado: quedaban idénticos al texto que
   los rodea, y "Escríbenos y lo cambiamos" se leía como una promesa vaga en vez
   de como el enlace al formulario de contacto que siempre fue. */
.f2-ayuda a {
  color: var(--rosa);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.f2-ayuda a:hover,
.f2-ayuda a:focus-visible { color: var(--azul); }
.f2-error {
  font-size: 12px;
  color: var(--vino);
  margin: 5px 0 0;
  display: none;
}
.f2-error.se-ve { display: block; }
.f2-error--general {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(120,35,48,.06);
  border: 1px solid rgba(120,35,48,.2);
  font-size: 13.5px;
}

.f2-aviso-datos {
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: center;
  margin: 12px 0 0;
}

.f2-pie-enlace {
  font-size: 13.5px;
  color: var(--tinta-suave);
  text-align: center;
  margin-top: 18px;
}
.f2-pie-enlace a { color: var(--rosa); font-weight: 600; text-decoration: underline; }
.f2-pie-enlace--interno { margin-top: 0; }

/* El enlace baja a su propia linea: en el ancho de la tarjeta de ingreso la
   frase entera no entra y "Registrate gratis" se partia en dos. */
.f2-pie-enlace__aparte { display: block; margin-top: 4px; }

.f2-fila { display: flex; gap: 12px; }
.f2-fila > .f2-campo { flex: 1; }

/* ============================================================
   4. REGISTRO E INGRESO
   ============================================================ */

.f2-registro { min-height: 70vh; }
.f2-registro__deco {
  width: 150px;
  top: -30px;
  right: 4%;
  opacity: .45;
  transform: rotate(-12deg);
}

.f2-ingresar__caja { width: 100%; max-width: 440px; margin-inline: auto; padding-inline: var(--pad); }
.f2-ingresar__intro { margin-bottom: 22px; }
.f2-ingresar__titulo { color: var(--blanco); font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; }
.f2-ingresar__bajada { color: rgba(255,255,255,.82); font-size: 14.5px; margin: 0; }

.f2-olvide { text-align: right; margin: -6px 0 14px; }

/* --- Recuperar la contraseña: el aviso que reemplaza al formulario --- */
.f2-enviado { text-align: center; }
.f2-enviado__texto {
  font-size: 14.5px;
  color: var(--tinta-suave);
  margin: 0 0 8px;
}
.f2-enviado__nota {
  font-size: 12.5px;
  color: var(--tinta-suave);
  font-style: italic;
  margin: 0 0 18px;
}
.f2-olvide a { color: var(--rosa); font-size: 12.5px; font-weight: 600; text-decoration: underline; }

/* ============================================================
   5. CARRUSEL DE OFERTAS (landing)
   ============================================================ */

.f2-carrusel {
  background: var(--crema-200);
  padding-block: clamp(28px, 5vw, 52px);
  position: relative;
  overflow: hidden;
}
.f2-carrusel__deco {
  width: 130px;
  top: -24px;
  right: 18px;
  opacity: .45;
  transform: rotate(-12deg);
}

.f2-oferta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  padding: clamp(16px, 3vw, 22px);
  display: flex;
  gap: clamp(16px, 3vw, 26px);
  align-items: center;
  flex-wrap: wrap;
}

.f2-oferta__media {
  position: relative;
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 320px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.f2-oferta__media img { width: 100%; height: 100%; object-fit: cover; }
.f2-oferta__tipo {
  position: absolute;
  left: 12px;
  top: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.f2-oferta__cuerpo { flex: 1 1 300px; }
.f2-oferta__titulo {
  font-size: clamp(19px, 2.6vw, 25px);
  color: var(--azul);
  margin: 0 0 8px;
  line-height: 1.18;
}
.f2-oferta__texto {
  color: var(--tinta-suave);
  font-size: 14.5px;
  margin: 0 0 16px;
  max-width: 46ch;
}

.f2-carrusel__controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.f2-carrusel__flecha {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  color: var(--azul);
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}
.f2-carrusel__flecha:hover { background: var(--azul); color: var(--blanco); }

.f2-carrusel__puntos { display: flex; gap: 7px; }
.f2-carrusel__punto {
  width: 8px;
  height: 8px;
  border: none;
  padding: 0;
  border-radius: 5px;
  background: var(--arena);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.f2-carrusel__punto.es-activo { width: 22px; background: var(--rosa); }

/* ============================================================
   6. CATÁLOGO
   ============================================================ */

.f2-catalogo__cabecera {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.f2-catalogo__saludo { flex: 1 1 300px; }

.f2-avance { flex: 0 1 230px; min-width: 200px; padding: 16px; }
.f2-avance__rotulo { font-size: 12px; color: var(--tinta-suave); font-weight: 600; margin-bottom: 7px; }
.f2-avance__cifra { display: flex; align-items: baseline; gap: 6px; margin-bottom: 9px; }
.f2-avance__n { font-size: 26px; font-weight: 700; color: var(--rosa); line-height: 1; }
.f2-avance__de { font-size: 13px; color: var(--tinta-suave); }

/* --- Aviso de cuenta gratuita --- */
.f2-aviso {
  background: var(--crema-200);
  border: 1px solid var(--arena);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--cafe);
}
.f2-aviso__texto { flex: 1; font-size: 14px; color: var(--tinta); min-width: 200px; }
.f2-aviso__texto b { color: var(--azul); }

.f2-catalogo__titulo-lista {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.f2-catalogo__titulo-lista h2 { font-size: 18px; color: var(--azul); margin: 0; }
.f2-catalogo__conteo { font-size: 12.5px; color: var(--tinta-suave); }

.f2-vacio { color: var(--tinta-suave); font-size: 15px; }

/* --- Lista de temas --- */
.f2-temas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}
@media (min-width: 720px) {
  .f2-temas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.f2-tema {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 13px 15px;
  cursor: pointer;
  font: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.f2-tema--abierto {
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-sm);
}
.f2-tema--abierto:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }

/* Muestra: el mismo tema con candado, pero sin nada que tocar. Se usa en
   el registro para enseñar qué hay detrás del formulario. */
.f2-tema--muestra {
  cursor: default;
  margin-bottom: 20px;
}

/* En el celular los cuatro elementos de la fila se pelean por 300 px y el
   título se parte en tres líneas. Se saca el chip: la página ya dice "gratis"
   en el ojillo, en el título y en el botón, así que no se pierde nada. */
@media (max-width: 520px) {
  .f2-tema--muestra .f2-chip { display: none; }
}

/* Bloqueado: fondo crema alterno y borde punteado color arena, como
   se aprobó. El punteado dice "todavía no" sin necesidad de leer. */
.f2-tema--bloqueado {
  background: var(--crema-200);
  border: 1px dashed var(--arena);
  box-shadow: none;
}

.f2-tema__numero {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--blanco);
  color: var(--arena);
  border: 1.5px solid var(--arena);
}
.f2-tema--abierto .f2-tema__numero {
  background: var(--rosa);
  color: var(--blanco);
  border: none;
}
/* Escuchado. Verde, que es lo que se entiende sin explicación, pero uno
   apagado: el de sistema desentonaba al lado del rosa y la arena. */
.f2-tema__numero.es-completado {
  background: var(--verde-suave);
  color: var(--blanco);
  border: none;
}

.f2-tema__cuerpo { flex: 1; min-width: 0; }
.f2-tema__titulo {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--tinta-suave);
}
.f2-tema--abierto .f2-tema__titulo { color: var(--azul); }
.f2-tema__meta { display: block; font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }

.f2-tema__accion {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
}
/* El candado va en el dorado de la marca, el mismo del borde punteado y del
   número: la fila entera dice "todavía no" con un solo color. El fondo lleva
   un tinte muy suave para que el ícono no quede lavado sobre el blanco. */
.f2-tema--bloqueado .f2-tema__accion {
  background: rgba(205, 184, 132, .16);
  border-color: var(--arena);
  color: var(--cafe);
}
.f2-tema--abierto .f2-tema__accion {
  background: var(--rosa);
  border: none;
  color: var(--blanco);
}

/* --- Cuaderno de aprendizaje --- */
.f2-cuaderno {
  margin-top: 20px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.f2-cuaderno--bloqueado {
  background: var(--crema-200);
  border: 1px dashed var(--arena);
  box-shadow: none;
}
.f2-cuaderno__portada {
  width: 58px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  background: var(--crema-200);
}
.f2-cuaderno__portada img { width: 100%; height: 100%; object-fit: cover; }
.f2-cuaderno__cuerpo { flex: 1 1 240px; }
.f2-cuaderno__encabezado {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  color: var(--azul);
}
.f2-cuaderno__nombre { font-weight: 600; color: var(--azul); font-size: 15.5px; }
.f2-cuaderno__texto { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }
.f2-cuaderno__pendiente { font-size: 13px; color: var(--tinta-suave); font-style: italic; }

/* --- Cierre azul para cuentas gratuitas --- */
.f2-cierre {
  margin-top: 26px;
  text-align: center;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 88% -20%, rgba(205,184,132,.26), transparent 60%),
    linear-gradient(150deg, var(--azul), var(--azul-900));
}
.f2-cierre__titulo {
  color: var(--blanco);
  font-size: clamp(20px, 2.8vw, 28px);
  margin: 0 auto 10px;
  max-width: 26ch;
  line-height: 1.2;
}
.f2-cierre__texto {
  color: rgba(255,255,255,.82);
  font-size: 14.5px;
  margin: 0 auto 18px;
  max-width: 44ch;
}
.f2-cierre__acciones {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.f2-cierre__usd { color: rgba(255,255,255,.7); font-size: 13px; }

/* ============================================================
   7. REPRODUCTOR
   ============================================================ */

.f2-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
}
.f2-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(20,42,77,.55);
  backdrop-filter: blur(4px);
}
.f2-modal__caja {
  position: relative;
  background: var(--blanco);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 30px);
}
.f2-modal__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--crema-200);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
}
.f2-modal__cerrar:hover { background: var(--crema); color: var(--rosa); }

.f2-modal__titulo {
  font-size: 21px;
  color: var(--azul);
  margin: 12px 0 6px;
  line-height: 1.2;
  padding-right: 30px;
}
.f2-modal__desc { color: var(--tinta-suave); font-size: 14px; margin: 0 0 20px; }

.f2-repro { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.f2-repro__boton {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  flex: none;
  background: var(--rosa);
  color: var(--blanco);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(165,55,90,.32);
  transition: background .2s, transform .2s;
}
.f2-repro__boton:hover { background: var(--rosa-700); transform: scale(1.04); }
.f2-repro__boton[disabled] { background: var(--crema-200); color: var(--tinta-suave); box-shadow: none; cursor: default; }

.f2-repro__pista { flex: 1; min-width: 0; }

/* La barra es un input range disfrazado: se ve como la barra de
   progreso del resto del sitio, pero se puede mover con el teclado. */
.f2-repro__barra {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: var(--crema-200);
  cursor: pointer;
  margin: 0;
}
.f2-repro__barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rosa);
  border: 2px solid var(--blanco);
  box-shadow: 0 1px 5px rgba(31,60,108,.3);
}
.f2-repro__barra::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rosa);
  border: 2px solid var(--blanco);
  box-shadow: 0 1px 5px rgba(31,60,108,.3);
}
.f2-repro__barra:focus-visible { outline: none; box-shadow: var(--foco); }

.f2-repro__tiempos {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--tinta-suave);
  margin-top: 6px;
}

.f2-repro__nota {
  font-size: 11.5px;
  color: var(--tinta-suave);
  margin: 0 0 4px;
  font-style: italic;
}

.f2-repro__final {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.f2-repro__final-titulo {
  font-size: 14.5px;
  color: var(--azul);
  font-weight: 600;
  margin: 0 0 12px;
}
.f2-repro__invitacion {
  background: var(--crema-200);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 18px;
}
.f2-repro__frase { font-size: 22px; margin: 0 0 6px; }
.f2-repro__invitacion-texto { font-size: 14px; color: var(--tinta-suave); margin: 0 0 14px; }

/* El audio real nunca se ve: los controles son los de arriba. */
.f2-modal audio { display: none; }

/* ============================================================
   8. COMPRA
   ============================================================ */

.f2-pago__encabezado { margin-bottom: 20px; }

/* La salida de la compra. Va arriba del título y no al pie: quien busca cómo
   salirse mira la esquina de arriba, no el final de un formulario largo. */
.f2-salir-compra {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--tinta-suave);
  text-decoration: none;
}
.f2-salir-compra:hover { color: var(--rosa); text-decoration: underline; }

/* --- Indicador de pasos --- */
.f2-pasos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.f2-paso { display: inline-flex; align-items: center; gap: 8px; }
.f2-paso + .f2-paso::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--linea);
  margin-right: 6px;
}
.f2-paso__n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--crema-200);
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
}
.f2-paso__t { font-size: 13px; font-weight: 500; color: var(--tinta-suave); }

.f2-paso.es-actual .f2-paso__n { background: var(--rosa); color: var(--blanco); border: none; }
.f2-paso.es-actual .f2-paso__t { font-weight: 700; color: var(--azul); }
.f2-paso.es-hecho .f2-paso__n { background: var(--exito); color: var(--blanco); border: none; }

.f2-pago__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 760px) {
  .f2-pago__grid { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .9fr); }
}
/* En la confirmación el resumen del costado sobra: ya se pagó. */
.f2-pago__grid.es-confirmacion { grid-template-columns: 1fr; }
.f2-pago__grid.es-confirmacion .f2-pago__lado { display: none; }

.f2-pago__subtitulo { font-size: 18px; color: var(--azul); margin: 0 0 4px; }
.f2-pago__nota { font-size: 13.5px; color: var(--tinta-suave); margin: 0 0 18px; }
.f2-pago__nota b { color: var(--azul); }
.f2-pago__gracias { font-size: 23px; color: var(--azul); margin: 0 0 8px; }

.f2-volver {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.f2-volver:hover { color: var(--rosa); }

/* --- Métodos de pago --- */
.f2-metodos { display: grid; gap: 11px; margin: 0 0 20px; padding: 0; border: none; }
.f2-metodo {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  background: var(--blanco);
  cursor: pointer;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  color: var(--tinta-suave);
}
.f2-metodo.es-elegido {
  background: rgba(165,55,90,.05);
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--halo-foco);
  color: var(--rosa);
}
/* El radio de verdad queda oculto pero sigue siendo el que recibe el
   foco y el que leen los lectores de pantalla. */
.f2-metodo input { position: absolute; opacity: 0; width: 0; height: 0; }
.f2-metodo__marca {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid var(--arena);
  background: var(--blanco);
  transition: border .2s;
}
.f2-metodo.es-elegido .f2-metodo__marca { border: 6px solid var(--rosa); }
.f2-metodo:focus-within { box-shadow: var(--foco); }

.f2-metodo__texto { flex: 1; }
.f2-metodo__t { display: block; font-weight: 600; color: var(--azul); font-size: 14.5px; }
.f2-metodo__d { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 2px; }

.f2-recuadro {
  background: var(--crema-200);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--tinta-suave);
}
.f2-recuadro .f2-ico { flex: none; color: var(--azul); }

/* --- Espera de la confirmación de SINPE --- */
.f2-esperando {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--crema-200);
  border: 1px solid var(--arena);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--cafe);
}
.f2-esperando__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rosa);
  flex: none;
  animation: f2-latido 1.4s ease-in-out infinite;
}
@keyframes f2-latido {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* --- Resumen de la compra --- */
.f2-pago__lado { display: grid; gap: 14px; }

.f2-resumen__rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 12px;
}
.f2-resumen__producto { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.f2-resumen__portada { width: 44px; height: 56px; border-radius: 8px; overflow: hidden; flex: none; }
.f2-resumen__portada img { width: 100%; height: 100%; object-fit: cover; }
.f2-resumen__nombre { font-weight: 600; color: var(--azul); font-size: 14.5px; line-height: 1.3; }
.f2-resumen__detalle { font-size: 12.5px; color: var(--tinta-suave); margin-top: 4px; }

.f2-resumen__lista { list-style: none; padding: 0; margin: 0; }
.f2-resumen__lista li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.f2-resumen__lista .f2-ico { flex: none; margin-top: 3px; color: var(--exito); }

.f2-resumen__total { display: flex; justify-content: space-between; align-items: baseline; }
.f2-resumen__total > span:first-child { font-weight: 600; color: var(--azul); }
.f2-resumen__cifra { text-align: right; }
.f2-resumen__cifra b { font-size: 22px; color: var(--rosa); }
.f2-resumen__cifra small { display: block; font-size: 12px; color: var(--tinta-suave); }

.f2-garantias { font-size: 12px; color: var(--tinta-suave); line-height: 1.6; padding: 0 4px; }
.f2-garantias p { display: flex; gap: 7px; margin: 0 0 6px; }
.f2-garantias .f2-ico { flex: none; margin-top: 3px; color: var(--exito); }

/* --- Resumen de la confirmación --- */
.f2-resumen-final { text-align: left; margin: 0 0 22px; }
.f2-resumen-final__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 5px 0;
}
.f2-resumen-final__fila span { color: var(--tinta-suave); }
.f2-resumen-final__fila b { color: var(--azul); text-align: right; }

.f2-pago__acciones {
  display: flex;
  gap: 11px;
  justify-content: center;
  flex-wrap: wrap;
}

.f2-nota-correo {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 22px;
}
.f2-nota-correo .f2-ico { flex: none; margin-top: 3px; color: var(--azul); }
.f2-nota-correo p { margin: 0; font-size: 14px; color: var(--tinta-suave); }
.f2-nota-correo b { color: var(--azul); }

/* ============================================================
   9. MOVIMIENTO
   Quien pidió menos movimiento en su sistema no ve animaciones:
   ni la rotación del carrusel, ni el latido de la espera, ni los
   saltos al pasar el mouse.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .f2-ojo-clave,
  .f2-acceso,
  .f2-tema,
  .f2-usuaria,
  .f2-repro__boton,
  .f2-barra__relleno,
  .f2-carrusel__punto {
    transition: none !important;
  }
  .f2-acceso:hover { transform: none; }
  .f2-tema--abierto:hover,
  .f2-usuaria:hover,
  .f2-repro__boton:hover { transform: none; }
  .f2-esperando__punto { animation: none; opacity: 1; }
}

/* ============================================================
   10. EL BOTÓN FLOTANTE DE WHATSAPP, SOLO EN LO PÚBLICO

   En el landing invita a conversar y está bien. Dentro del espacio
   personal es ruido —ella ya entró— y en el celular se le monta
   encima del botón de reproducir del último tema de la lista.
   El diseño aprobado tampoco lo lleva en estas pantallas.
   ============================================================ */
.dpm-f2 .wa-flotante { display: none; }

/* ============================================================
   11. PANEL DE ADMINISTRACIÓN

   Vive en el sitio, no en el escritorio de WordPress, así que usa
   la misma línea gráfica que todo lo demás: crema de fondo, azul
   para los títulos, rosa solo para lo que se toca.
   ============================================================ */

.f2-panel__encabezado { margin-bottom: 20px; }

/* --- Aviso después de una acción --- */
.f2-panel__aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
.f2-panel__aviso--exito {
  background: var(--exito-bg);
  border: 1px solid var(--exito-borde);
  color: var(--exito);
}
.f2-panel__aviso--error {
  background: rgba(120,35,48,.06);
  border: 1px solid rgba(120,35,48,.22);
  color: var(--vino);
}
.f2-panel__aviso .f2-ico { flex: none; }

/* --- Rejilla: barra lateral + contenido --- */
.f2-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 900px) {
  .f2-panel__grid { grid-template-columns: 210px 1fr; gap: 26px; }
  .f2-panel__nav { position: sticky; top: 90px; }
}

.f2-panel__nav { padding: 12px; }
.f2-panel__nav nav { display: flex; flex-direction: column; gap: 4px; }

.f2-panel__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
  transition: background .2s ease, color .2s ease;
}
.f2-panel__enlace .f2-ico { color: var(--rosa); flex: none; }
.f2-panel__enlace:hover { background: var(--crema-200); }
.f2-panel__enlace.es-activo { background: var(--rosa); color: var(--blanco); }
.f2-panel__enlace.es-activo .f2-ico { color: var(--blanco); }

.f2-panel__volver {
  margin-top: 10px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tinta-suave);
}
.f2-panel__volver:hover { color: var(--rosa); border-color: var(--rosa-300); }

.f2-panel__cuerpo { min-width: 0; }

.f2-panel__subtitulo {
  font-size: 17px;
  color: var(--azul);
  margin: 0 0 14px;
}
.f2-panel__pie {
  font-size: 13px;
  color: var(--tinta-suave);
  margin: 14px 0 0;
}
.f2-panel__pie a { color: var(--rosa); font-weight: 600; text-decoration: underline; }

.f2-panel__nota {
  background: var(--crema-200);
  border: 1px solid var(--arena);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--cafe);
}

/* --- Métricas --- */
.f2-metricas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.f2-metrica { flex: 1; min-width: 140px; padding: 18px; }
.f2-metrica__n { font-size: 28px; font-weight: 700; color: var(--rosa); line-height: 1; }
.f2-metrica__n--azul { color: var(--azul); }
.f2-metrica__n--terracota { color: var(--terracota); }
.f2-metrica__t { font-size: 12.5px; color: var(--tinta-suave); margin-top: 5px; }

/* --- Buscador, filtros y acciones --- */
.f2-panel__barra {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.f2-panel__buscar {
  flex: 1;
  min-width: 190px;
  padding: 11px 15px;
  font: inherit;
  font-size: 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
}
.f2-panel__buscar:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--halo-foco);
}

.f2-panel__filtros { display: flex; gap: 5px; flex-wrap: wrap; }
.f2-panel__filtro {
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--crema-200);
  color: var(--tinta-suave);
  transition: background .2s ease, color .2s ease;
}
.f2-panel__filtro:hover { background: var(--arena-200); }
.f2-panel__filtro.es-activo { background: var(--azul); color: var(--blanco); }

/* --- Alta manual --- */
.f2-alta {
  border-left: 4px solid var(--rosa);
  margin-bottom: 18px;
}
.f2-alta__titulo { margin: 0 0 4px; font-size: 17px; color: var(--azul); }
.f2-alta__bajada { margin: 0 0 16px; font-size: 13px; color: var(--tinta-suave); max-width: 62ch; }

/* Los dos campos van uno debajo del otro en el celular. */
.f2-fila--alta { flex-direction: column; gap: 0; }
@media (min-width: 640px) {
  .f2-fila--alta { flex-direction: row; gap: 14px; }
}

.f2-alta__acceso { border: none; padding: 0; margin: 0 0 16px; }
.f2-alta__acceso legend {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--azul);
  margin-bottom: 8px;
  padding: 0;
}

/* Opción elegible: el radio queda oculto pero sigue recibiendo el foco. */
.f2-opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta-suave);
  border-radius: 12px;
  padding: 10px 15px;
  margin: 0 8px 8px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.f2-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.f2-opcion:has(input:checked) {
  border-color: var(--rosa);
  background: rgba(165,55,90,.06);
  color: var(--rosa);
}
.f2-opcion:focus-within { box-shadow: var(--foco); }

.f2-alta__acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.f2-alta__acciones--sueltas { margin-top: 16px; }

/* --- Tabla de usuarias --- */
.f2-tabla { padding: 0; overflow: hidden; }

.f2-tabla__cabeza,
.f2-tabla__fila {
  display: grid;
  grid-template-columns: 1.6fr .9fr .5fr .7fr .8fr;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}
.f2-tabla__cabeza {
  background: var(--crema-200);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.f2-tabla__fila {
  border-top: 1px solid var(--linea);
  transition: background .2s ease;
}
.f2-tabla__fila:nth-child(even) { background: var(--crema); }
.f2-tabla__fila:hover { background: var(--crema-200); }

.f2-tabla__usuaria { min-width: 0; }
.f2-tabla__nombre { display: block; font-weight: 600; font-size: 14px; color: var(--azul); }
.f2-tabla__correo {
  display: block;
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
}
.f2-tabla__dato { font-size: 12.5px; color: var(--tinta-suave); }
/* Quien nunca entró se lee más apagado: es la ausencia de un dato, no un dato. */
.f2-tabla__dato.es-nunca { color: var(--arena); font-style: italic; }
.f2-tabla__vacia {
  padding: 26px 18px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 14px;
  margin: 0;
}

/* En el celular la tabla deja de ser tabla: cada fila es una tarjeta con el
   nombre y el estado, que es lo que se busca de un vistazo. */
@media (max-width: 700px) {
  .f2-tabla__cabeza { display: none; }
  .f2-tabla__fila { grid-template-columns: 1fr auto; row-gap: 8px; }
  .f2-tabla__dato { font-size: 12px; }
}

/* --- Paginación --- */
.f2-paginas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.f2-paginas__n {
  min-width: 34px;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  background: var(--blanco);
}
.f2-paginas__n:hover { border-color: var(--rosa-300); }
.f2-paginas__n.es-activo { background: var(--azul); color: var(--blanco); border-color: var(--azul); }

/* --- Ficha de la usuaria --- */
.f2-ficha__caja { padding: 0; max-width: 480px; overflow: hidden; }

.f2-ficha__cabeza {
  background: var(--azul);
  color: var(--blanco);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.f2-ficha__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  flex: none;
}
.f2-ficha__quien { flex: 1; min-width: 0; }
.f2-ficha__nombre { display: block; font-weight: 600; font-size: 17px; }
.f2-ficha__correo {
  display: block;
  font-size: 12.5px;
  color: rgba(255,255,255,.8);
  overflow: hidden;
  text-overflow: ellipsis;
}
.f2-ficha__cerrar { color: rgba(255,255,255,.8); padding: 4px; flex: none; }
.f2-ficha__cerrar:hover { color: var(--blanco); }

.f2-ficha__cuerpo { padding: 22px 24px; }
.f2-ficha__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.f2-ficha__avance { margin-bottom: 18px; }
.f2-ficha__avance-fila {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.f2-ficha__avance-rotulo { font-weight: 600; color: var(--azul); }
.f2-ficha__avance-dato { color: var(--tinta-suave); }

.f2-ficha__acciones { display: flex; flex-direction: column; gap: 9px; }
.f2-ficha__acciones form { margin: 0; }
.f2-ficha__secundaria {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--rosa);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0 0;
}
.f2-ficha__secundaria:hover { color: var(--rosa-700); }

.f2-ficha__bitacora {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.f2-ficha__bitacora h4 {
  font-family: var(--fuente-texto);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 10px;
}
.f2-ficha__bitacora ul { list-style: none; padding: 0; margin: 0; }
.f2-ficha__bitacora li { margin-bottom: 9px; }
.f2-ficha__bit-accion { display: block; font-size: 13px; color: var(--azul); font-weight: 600; }
.f2-ficha__bit-meta { display: block; font-size: 11.5px; color: var(--tinta-suave); }

/* --- Listas de temas y ofertas --- */
.f2-lista { padding: 0; overflow: hidden; }
.f2-lista__fila {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  flex-wrap: wrap;
}
.f2-lista__fila + .f2-lista__fila { border-top: 1px solid var(--linea); }
.f2-lista__fila:nth-child(even) { background: var(--crema); }

.f2-lista__n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--crema-200);
  color: var(--tinta-suave);
  font-size: 12.5px;
  font-weight: 700;
}
.f2-lista__n.es-gratuito { background: var(--rosa); color: var(--blanco); }

.f2-lista__miniatura {
  width: 58px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  background: var(--crema-200);
}
.f2-lista__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.f2-lista__cuerpo { flex: 1 1 200px; min-width: 0; }
.f2-lista__titulo { display: block; font-weight: 600; font-size: 14px; color: var(--azul); }
.f2-lista__meta { display: block; font-size: 12px; color: var(--tinta-suave); }
.f2-lista__ok { color: var(--exito); }
.f2-lista__falta { color: var(--vino); }

.f2-lista__boton {
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul);
  flex: none;
}
.f2-lista__boton:hover { border-color: var(--rosa-300); color: var(--rosa); }

/* --- Precio y ajustes --- */
.f2-campo--angosto { max-width: 200px; }

.f2-panel__vista-previa b { font-size: 20px; color: var(--rosa); }

.f2-panel__conmutador {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
  margin-bottom: 14px;
}
.f2-panel__conmutador-texto { flex: 1; }
.f2-panel__conmutador-t { display: block; font-weight: 600; font-size: 14px; color: var(--azul); }
.f2-panel__conmutador-d { display: block; font-size: 12.5px; color: var(--tinta-suave); }

/* Interruptor: la casilla real queda oculta y sigue siendo la que recibe el
   foco y la que leen los lectores de pantalla. */
.f2-interruptor { flex: none; cursor: pointer; display: inline-block; }
.f2-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.f2-interruptor__pista {
  display: block;
  width: 48px;
  height: 27px;
  border-radius: 999px;
  background: var(--linea);
  position: relative;
  transition: background .2s ease;
}
.f2-interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  transition: left .2s ease;
}
.f2-interruptor input:checked + .f2-interruptor__pista { background: var(--rosa); }
.f2-interruptor input:checked + .f2-interruptor__pista::after { left: 24px; }
.f2-interruptor input:focus-visible + .f2-interruptor__pista { box-shadow: var(--foco); }

@media (prefers-reduced-motion: reduce) {
  .f2-interruptor__pista,
  .f2-interruptor__pista::after,
  .f2-panel__enlace,
  .f2-tabla__fila { transition: none !important; }
}

/* ============================================================
   12. MI PERFIL
   ============================================================ */

.f2-perfil__encabezado { margin-bottom: 20px; }

.f2-perfil__bloque { margin-bottom: 18px; }

/* --- La foto del perfil --- */

.f2-foto-fila {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.f2-foto-caja {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--crema-200);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--azul);
  overflow: hidden;
  border: 1.5px solid var(--linea);
}
.f2-foto-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}

/* El campo de archivo del navegador no se puede peinar, así que se esconde
   adentro de la etiqueta y lo que se ve es un botón nuestro. Sigue siendo el
   mismo control: se abre con el teclado y el lector de pantalla lo nombra. */
.f2-foto-elegir {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}
.f2-foto-elegir input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.f2-foto-elegir:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px var(--halo-foco);
}

.f2-foto-quitar {
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 13.5px;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.f2-foto-quitar:hover { color: var(--rosa); }

/* Mientras sube, la foto se apaga un poco: es la única señal de que algo está
   pasando, porque no hay botón de guardar que se pueda poner en "Guardando…". */
.esta-subiendo .f2-foto-caja { opacity: .5; }
.esta-subiendo .f2-foto-elegir { pointer-events: none; opacity: .6; }
.f2-perfil__titulo {
  font-size: 17px;
  color: var(--azul);
  margin: 0 0 16px;
}
.f2-perfil__nota {
  background: var(--crema-200);
  border: 1px solid var(--arena);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--cafe);
}

/* Aviso de "quedó guardado". Verde, como todo lo que confirma en el sitio. */
.f2-guardado {
  background: var(--exito-bg);
  border: 1px solid var(--exito-borde);
  color: var(--exito);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.f2-perfil__volver { margin: 4px 0 0; font-size: 13.5px; }
.f2-perfil__volver a { color: var(--tinta-suave); }
.f2-perfil__volver a:hover { color: var(--rosa); }

/* Caja del botón de PayPal. PayPal dibuja adentro el suyo, con su marca;
   acá solo se le reserva el espacio y se le da aire. */
.f2-paypal { margin: 0 0 16px; min-height: 46px; }


/* =========================================================
   PANEL · TEMAS Y AUDIOS
   ========================================================= */

.f2-form textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}

/* El campo de archivo del navegador no se puede peinar por dentro, pero sí
   darle el mismo marco que a los demás para que no parezca de otra pantalla. */
.f2-form input[type="file"] {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px dashed var(--arena);
  border-radius: var(--r-sm);
  background: var(--crema);
  font: inherit;
  font-size: 14px;
  color: var(--tinta-suave);
  cursor: pointer;
}
.f2-form input[type="file"]:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--halo-foco);
}

/* El archivo que ya tiene cargado, arriba del campo para elegir otro. */
.f2-panel__archivo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: var(--exito-bg);
  border: 1px solid var(--exito-borde);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--exito);
  word-break: break-all;
}

/* El botón de encender o apagar va dentro de un formulario propio: es una
   acción con nonce, no un enlace. El formulario no debe alterar la fila. */
.f2-lista__forma { margin: 0; flex: none; }

/* El play de la lista del panel. Más chico y sin relleno que el del catálogo:
   acá es una herramienta de trabajo, no la acción principal de la fila. */
.f2-lista__play {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--rosa);
  background: var(--blanco);
  color: var(--rosa);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
.f2-lista__play:hover,
.f2-lista__play.esta-sonando {
  background: var(--rosa);
  color: var(--blanco);
}
.f2-lista__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--halo-foco);
}

.f2-panel__archivo--falta {
  background: var(--crema-200);
  border-color: var(--arena);
  color: var(--cafe);
}

.f2-panel__bloque { margin-top: 22px; }

.f2-panel__intro {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--tinta-suave);
  line-height: 1.55;
}

/* Borrar no es una acción más: no va como botón junto a "Guardar", va aparte
   y en otro tono, para que no se toque por inercia. */
.f2-panel__peligro {
  color: var(--terracota);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.f2-panel__peligro:hover { color: var(--rosa); }

.f2-panel__confirmar-que {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--azul);
}

.btn--peligro {
  background: var(--terracota);
  color: var(--blanco);
  border: 1.5px solid var(--terracota);
}
.btn--peligro:hover {
  background: #8f4321;
  border-color: #8f4321;
  color: var(--blanco);
}

/* --- Reordenar --- */

.f2-orden {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.f2-orden__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}
.f2-orden__n { flex: none; margin: 0; }
.f2-orden__n input[type="number"] {
  width: 64px;
  text-align: center;
}
.f2-orden__titulo {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--azul);
}


/* =========================================================
   PANEL · CARRUSEL
   ========================================================= */

.f2-panel__titulo-lista {
  font-size: 17px;
  color: var(--azul);
  margin: 26px 0 12px;
}

/* Una fila y, debajo, su vista previa desplegada. */
.f2-lista__grupo + .f2-lista__grupo { border-top: 1px solid var(--linea); }

/* --- El interruptor de encendido ---
   Es un botón, no una casilla: manda la acción al servidor con su nonce y
   funciona aunque el guion no cargue. Lo de interruptor es la apariencia. */

.f2-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 5px 12px 5px 6px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: var(--crema);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.f2-switch__pista {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--arena);
  position: relative;
  flex: none;
  transition: background .2s;
}
.f2-switch__pista::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s;
}

.f2-switch.esta-activo {
  background: var(--exito-bg);
  border-color: var(--exito-borde);
  color: var(--verde-suave);
}
.f2-switch.esta-activo .f2-switch__pista { background: var(--verde-suave); }
.f2-switch.esta-activo .f2-switch__pista::after { transform: translateX(14px); }

.f2-switch:hover { border-color: var(--arena); }
.f2-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--halo-foco);
}

/* --- El ojo de la vista previa --- */

.f2-lista__ojo {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--azul);
  cursor: pointer;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.f2-lista__ojo:hover,
.f2-lista__ojo[aria-expanded="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}
.f2-lista__ojo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--halo-foco);
}

/* --- La vista previa ---
   Adentro va la misma diapositiva del landing. El lienzo le pone el fondo del
   sitio para que se vea sobre lo que se va a ver, y no sobre el blanco del
   panel, que la haría parecer otra cosa. */

.f2-vista {
  padding: 0 4px 18px;
}
.f2-vista__rotulo {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-suave);
}
.f2-vista__lienzo {
  background: var(--crema-200);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 18px;
  overflow-x: auto;
}
.f2-vista__lienzo .f2-oferta { margin: 0; }

/* El enlace para abrir el PDF que esta publicado, dentro de la linea del
   archivo. Va al final y en su tono, para que se lea como una accion y no como
   parte del nombre del archivo. */
.f2-panel__ver {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-weight: 700;
  color: var(--verde-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.f2-panel__ver:hover { color: var(--azul); }

/* =========================================================
   PANEL · CORREOS
   ========================================================= */

.f2-lista__fila--enlace { text-decoration: none; }
.f2-lista__fila--enlace:hover { background: var(--crema); }
.f2-lista__fila--enlace.es-actual {
  background: var(--crema-200);
  box-shadow: inset 3px 0 0 var(--rosa);
}

.f2-panel__asunto {
  display: flex;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}
.f2-panel__asunto span { flex: none; min-width: 52px; }
.f2-panel__asunto b { color: var(--azul); word-break: break-word; }

/* El correo va en su propio marco: es un documento entero, con su fondo y sus
   estilos, y suelto en el panel se mezclaria con los de aca. */
.f2-correo-vista {
  width: 100%;
  height: 620px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  margin: 14px 0 10px;
  display: block;
}


/* =========================================================
   PANEL · USUARIAS
   ========================================================= */

.f2-panel__acciones {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* Las fechas de la ficha: rótulo y valor, uno debajo del otro. Como fichitas en
   fila había que buscarlas entre lo demás para poder compararlas. */
.f2-ficha__datos {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}
.f2-ficha__dato {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
}
.f2-ficha__dato + .f2-ficha__dato { border-top: 1px solid var(--linea); }
.f2-ficha__dato dt {
  flex: none;
  min-width: 108px;
  font-size: 12.5px;
  color: var(--tinta-suave);
}
.f2-ficha__dato dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
}