/**
 * Estilos del front del sistema de certificados.
 *
 * Autocontenidos a propósito: el markup venía con clases de Bootstrap 3/4
 * (`col-sm-3`, `panel panel-default`, `table-hover`) y componentes de
 * BootstrapVue heredados del theme viejo, que en el sitio destino —Divi— no
 * existen. El resultado era una pila de elementos sin estilo.
 *
 * Todo cuelga de `.cert-*`, así que convive con cualquier theme sin pisarlo.
 * Las variables de abajo son el único punto a tocar para adaptarlo a la marca:
 * se pueden redefinir desde el CSS adicional de Divi sin editar este archivo.
 */

.cert-comprar,
.cert-precios,
.cert-precios-abrir,
.cert-modal,
.cert-panel,
.cert-listado,
.cert-form {
  --cert-texto: #2f2a3a;
  --cert-texto-suave: #6b6478;
  --cert-borde: #e3dfea;
  --cert-fondo: #ffffff;
  --cert-fondo-suave: #f7f5fa;
  --cert-acento: #f66604;
  --cert-acento-hover: #d85802;
  --cert-acento-texto: #ffffff;
  --cert-total-fondo: #5c5766;
  --cert-campo-fondo: #ebebeb;
  --cert-radio: 10px;
  --cert-sombra:
    0 1px 2px rgba(47, 42, 58, 0.06), 0 8px 24px rgba(47, 42, 58, 0.06);

  box-sizing: border-box;
  color: var(--cert-texto);
  font-size: 16px;
  line-height: 1.5;
}

.cert-comprar *,
.cert-precios *,
.cert-modal *,
.cert-panel *,
.cert-listado *,
.cert-form * {
  box-sizing: inherit;
}

/* Vue tarda un instante en montar; sin esto se ven las llaves {{ }} en crudo. */
[v-cloak] {
  display: none !important;
}

.cert-comprar .screen-reader-text,
.cert-precios .screen-reader-text,
.cert-panel .screen-reader-text,
.cert-listado .screen-reader-text,
.cert-form .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ Comprar ============================ */

/* --- selector: nivel + cantidad + agregar --- */

/*
 * Columna angosta y centrada, sin caja: el diseño que pasó el cliente cuelga
 * del título que pone Divi, así que el shortcode no dibuja borde ni sombra
 * para no partir ese bloque en dos.
 */
.cert-selector {
  max-width: 26rem;
  margin: 0 auto 2rem;
  text-align: center;
}

/*
 * "Ver precios vigentes", arriba de todo (2026-09-08, diseño del cliente).
 *
 * El envoltorio es el mismo para las dos variantes del atributo `precios`: adentro
 * hay un <a> si apunta a una página, o el <p class="cert-precios-abrir"> del popup.
 */
.cert-selector__precios {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}

/*
 * El gris y el punteado son los que pasó el cliente (2026-09-08), literales y no por
 * variable: es un gris propio de este link, no el `--cert-texto-suave` del resto del
 * texto secundario. El punteado va como `border-bottom` —y no como `text-decoration:
 * underline dotted`— para poder despegarlo del texto con el padding, como en la maqueta.
 */
.cert-selector__precios a {
  display: inline-block;
  padding-bottom: 0.25rem;
  color: #8d8d8d;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: unset;
  border-bottom: 1px dotted #8d8d8d;
}

.cert-selector__precios a:hover,
.cert-selector__precios a:focus {
  color: var(--cert-acento);
  border-bottom-color: var(--cert-acento);
}

/*
 * El aviso de "elegí un nivel", debajo del botón bloqueado. Es una ayuda, no un error:
 * el usuario todavía no hizo nada mal, así que va en el gris del texto secundario y no
 * en rojo.
 */
.cert-selector__ayuda {
  margin: 0.75rem 0 0;
  color: var(--cert-texto-suave);
  font-size: 0.9rem;
}

/* Radios como pastillas: el input nativo queda accesible pero oculto. */
.cert-niveles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Las dos pastillas reparten el ancho en partes iguales, como en el diseño. */
.cert-nivel {
  position: relative;
  flex: 1 1 8.5rem;
  margin: 0;
}

.cert-nivel input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.cert-nivel span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--cert-acento);
  border-radius: 999px;
  background: var(--cert-fondo);
  color: var(--cert-acento);
  font-size: 0.9rem;
  line-height: 1.3;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  cursor: pointer;
  user-select: none;
}

.cert-nivel span svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.cert-nivel input:checked + span {
  background: var(--cert-acento);
  border-color: var(--cert-acento);
  color: var(--cert-acento-texto);
}

.cert-nivel input:focus-visible + span {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

.cert-cantidad {
  display: block;
  width: 100%;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--cert-fondo-suave);
  color: inherit;
  font: inherit;
  margin-bottom: 1.5rem;
}

/*
 * Las flechitas del number sólo aparecen al pasar el mouse en Chrome; el diseño
 * las muestra siempre, que además es la única pista de que el campo es un
 * contador.
 */
.cert-cantidad::-webkit-inner-spin-button,
.cert-cantidad::-webkit-outer-spin-button {
  opacity: 1;
}

/* --- botones --- */

.cert-acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cert-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--cert-acento);
  border-radius: 8px;
  background: var(--cert-acento);
  color: var(--cert-acento-texto);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.cert-btn:hover,
.cert-btn:focus {
  background: var(--cert-acento-hover);
  border-color: var(--cert-acento-hover);
  color: var(--cert-acento-texto);
  text-decoration: none;
}

.cert-btn[aria-disabled="true"],
.cert-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cert-btn--pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
}

.cert-btn--pastilla svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/*
 * Contorno: el relleno invertido del botón principal —fondo transparente, borde y texto en
 * el naranja de la marca—. Es para la acción secundaria que igual tiene que verse (hoy,
 * "Regístrate" al lado de "Ingresar"): con el mismo relleno naranja las dos competirían, y
 * en gris se leería como deshabilitada.
 *
 * El hover NO rellena de naranja: eso lo volvería idéntico al botón principal justo en el
 * momento en que el usuario está mirando. Oscurece borde y texto, y apoya un fondo suave.
 */
.cert-btn--contorno {
  background: transparent;
  border-color: var(--cert-acento);
  color: var(--cert-acento);
}

.cert-btn--contorno:hover,
.cert-btn--contorno:focus {
  background: var(--cert-fondo-suave);
  border-color: var(--cert-acento-hover);
  color: var(--cert-acento-hover);
}

.cert-acciones--centrada {
  justify-content: center;
}

/* --- estado de carga --- */

.cert-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cert-texto-suave);
}

.cert-spinner {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--cert-borde);
  border-top-color: var(--cert-acento);
  border-radius: 50%;
  animation: cert-girar 0.7s linear infinite;
  flex: none;
}

@keyframes cert-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-spinner {
    animation-duration: 2.4s;
  }
}

/* --- el pedido --- */

/*
 * Sin caja: igual que el selector, el diseño lo pide plano sobre el fondo de la
 * página. La única separación es la línea bajo el título.
 */
.cert-pedido {
  max-width: 34rem;
  margin: 0 auto;
}

.cert-pedido__titulo {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cert-borde);
  color: var(--cert-acento);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.cert-pedido__acciones {
  margin-top: 1.75rem;
}

.cert-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.cert-tabla th,
.cert-tabla td {
  padding: 0.7rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--cert-borde);
  vertical-align: middle;
}

.cert-tabla thead th {
  font-weight: 700;
  font-size: 0.9rem;
}

/*
 * Alineados a la izquierda, como en el diseño: son pocas filas y pocos dígitos,
 * así que la columna alineada a la derecha no compraba legibilidad. `tabular-nums`
 * igual mantiene los importes en grilla.
 */
.cert-tabla__num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* La × no necesita ancho propio: que la columna colapse al mínimo. */
.cert-tabla__quitar {
  width: 1px;
  text-align: right;
}

/* Banda oscura de cierre: "Total" a la izquierda, importe pegado a la derecha. */
.cert-tabla__total th,
.cert-tabla__total td {
  background: var(--cert-total-fondo);
  border-bottom: 0;
  color: var(--cert-acento-texto);
  font-weight: 700;
}

.cert-tabla__total td {
  text-align: right;
}

/* La tabla es lo único que puede desbordar en móvil. */
.cert-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cert-quitar {
  border: 0;
  background: transparent;
  color: var(--cert-texto-suave);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  border-radius: 6px;
}

.cert-quitar:hover,
.cert-quitar:focus {
  color: #b3261e;
  background: var(--cert-fondo-suave);
}

/* ================= Panel del usuario y listado de certificados ================= */

.cert-panel__titulo {
  margin: 0 0 1.5rem;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.2;
}

/* Pie del panel: el link al historial de certificados, debajo de todo. */
.cert-panel__pie {
  margin: 1.75rem 0 0;
  text-align: center;
}

/* Avisos: reemplazan a los `alert alert-*` de Bootstrap, que en Divi no existen. */
.cert-aviso {
  margin: 0 0 1.25rem;
  border-radius: 4px;
  background: var(--cert-fondo-suave);
}

/*
 * El padding lleva el contenedor adelante a propósito, no por costumbre: Divi
 * trae `p:last-of-type { padding-bottom: 0 }`, que con (0,1,1) le gana al
 * shorthand `padding` de una clase suelta (0,1,0) y dejaba el texto pegado al
 * borde de abajo del aviso. Calificando con el contenedor llegamos a (0,2,0) y
 * el padding vuelve a aplicarse entero.
 */
.cert-panel .cert-aviso,
.cert-listado .cert-aviso {
  padding: 0.85rem 1.1rem !important;
}

/* La barra lateral queda sólo para lo que interrumpe: la membresía por vencer. */
.cert-aviso--alerta {
  border-left: 4px solid #b3261e;
}

/*
 * Éxito: fondo verde completo y sin barra lateral. Es el único aviso que
 * anuncia algo bueno (tenés saldo para generar), así que se lee como bloque y
 * no como advertencia.
 */
.cert-aviso--exito {
  background: #d8efdc;
  color: #1b5e20;
}

.cert-aviso--neutro {
  color: var(--cert-texto-suave);
}

/* Banda oscura que abre cada sección de tabla. */
.cert-tabla__seccion th {
  background: var(--cert-total-fondo);
  border-bottom: 0;
  color: var(--cert-acento-texto);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Ícono opcional a la izquierda del título: blanco, porque toma el color del texto. */
.cert-tabla__seccion th svg {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.5em;
  vertical-align: -0.28em;
}

/*
 * La columna de acción colapsa al ancho de su contenido y se pega a la derecha,
 * como en el diseño.
 */
.cert-tabla__accion {
  width: 1px;
  text-align: right;
  white-space: nowrap;
}

.cert-accion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cert-acento);
  font-weight: 600;
  text-decoration: none;
}

.cert-accion:hover,
.cert-accion:focus {
  color: var(--cert-acento-hover);
  text-decoration: underline;
}

.cert-accion svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/*
 * Variante botón: para las acciones que son el paso siguiente del flujo
 * (generar certificados / manuales desde el dashboard). El link suelto en
 * naranja se perdía dentro de la tabla; con fondo pleno queda claro dónde
 * hay que hacer clic.
 */
.cert-accion--boton {
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: var(--cert-acento);
  color: var(--cert-acento-texto);
}

.cert-accion--boton:hover,
.cert-accion--boton:focus {
  background: var(--cert-acento-hover);
  color: var(--cert-acento-texto);
  text-decoration: none;
}

/* Encabezado ordenable: el botón —y no el th— es lo que recibe el foco. */
.cert-orden {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cert-orden svg {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--cert-texto-suave);
}

.cert-orden:hover,
.cert-orden:focus {
  color: var(--cert-acento);
}

.cert-buscar {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.6rem 1.1rem;
  background-color: white;
  border-radius: 4px;
  border: 2px solid var(--cert-fondo-suave);
  color: inherit;
  font: inherit;
}

/* Estado vacío del panel: sin créditos que mostrar. */
.cert-vacio {
  text-align: center;
  padding: 2rem 0;
}

.cert-vacio p {
  margin: 0 0 1.25rem;
  color: var(--cert-texto-suave);
}

/* ===================== Formulario de generación ===================== */

.cert-form__titulo {
  margin: 0 0 0.25rem;
  color: var(--cert-acento);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.cert-form__subtitulo {
  margin: 0 0 2rem;
  color: var(--cert-texto-suave);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.cert-form__campos {
  max-width: 30rem;
  margin: 0 auto;
}

.cert-form__acciones {
  margin-top: 1.75rem;
}

/*
 * Campos como pastillas grises, con el texto centrado igual que el diseño.
 *
 * Van scopeados bajo `.cert-form` a propósito, y no como `.cert-campo` suelto:
 * los themes de formularios —Divi entre ellos— estilan los inputs con selectores
 * de atributo del tipo `input[type="text"], input[type="email"], textarea`, que
 * tienen más especificidad (0,1,1) que una clase sola (0,1,0) y le ganaban. El
 * resultado era que Nombre/Apellido/Email perdían padding, fondo y radio y
 * quedaban como rayitas finas, mientras que el campo de fecha —`type="date"`, que
 * no figura en esas listas— sí conservaba el diseño. Con el descendiente somos
 * (0,2,0) y ganamos sin necesidad de `!important`.
 *
 * `min-height` iguala la altura de los cuatro: el `type="date"` trae contenido
 * propio del navegador (el "dd/mm/aaaa" y el ícono de calendario) y con solo
 * padding queda unos píxeles más alto que los de texto.
 */
.cert-form .cert-campo {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--cert-campo-fondo);
  color: inherit;
  font: inherit;
  text-align: center;
}

.cert-form .cert-campo::placeholder {
  color: var(--cert-texto);
  opacity: 0.75;
}

.cert-form .cert-campo:focus-visible,
.cert-form .cert-select:focus-visible {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

/*
 * `type="date"` no admite placeholder: el navegador dibuja su propio "dd/mm/aaaa"
 * y el ícono de calendario. Se centra el contenido para que acompañe al resto de
 * la columna; el ícono nativo se deja, es la única pista de que abre un calendario.
 */
.cert-form .cert-campo[type="date"] {
  text-align: center;
}

/*
 * El select va en blanco y menos redondeado que los campos, como en el diseño.
 * La flecha es un SVG embebido: `appearance: none` mata la nativa, y depender de
 * una webfont acá tendría el mismo problema de 403 que el resto de Font Awesome.
 */
.cert-form .cert-select {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 1.25rem;
  padding: 1rem 2.75rem 1rem 1.25rem;
  border: 1px solid var(--cert-borde);
  border-radius: 10px;
  background-color: var(--cert-fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6478' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15em;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* "Modificar" no compite con la acción principal. */
.cert-btn--secundario {
  background: transparent;
  border-color: var(--cert-borde);
  color: var(--cert-texto);
}

.cert-btn--secundario:hover,
.cert-btn--secundario:focus {
  background: var(--cert-fondo-suave);
  border-color: var(--cert-texto-suave);
  color: var(--cert-texto);
}

/* ========================= Listado de precios ========================= */

.cert-precios__ambito + .cert-precios__ambito {
  margin-top: 2rem;
}

.cert-precios__titulo {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

/*
 * El emoji del ámbito (bandera / globo). `em` y no `rem` para que siga al título si
 * cambia de tamaño, y un pelo más chico que el texto: a igual medida el emoji se ve
 * más grande que las letras, porque ocupa todo su cuadratín.
 */
.cert-precios__emoji {
  font-size: 0.95em;
  line-height: 1;
}

.cert-precios__moneda {
  color: var(--cert-texto-suave);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.cert-precios__grupo {
  margin: 0 0 1.25rem;
}

.cert-precios__grupo h4 {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cert-texto-suave);
  margin: 0 0 0.5rem;
}

.cert-precios__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cert-borde);
  border-radius: var(--cert-radio);
  overflow: hidden;
}

.cert-precios__lista li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 1rem;
  margin: 0;
}

.cert-precios__lista li + li {
  border-top: 1px solid var(--cert-borde);
}

.cert-precios__precio {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cert-precios__vacio {
  color: var(--cert-texto-suave);
  font-style: italic;
  margin: 0;
}

/* Aclaración al pie del listado ("Cada Maestra/o lo realiza desde el sistema"). */
/*
 * La aclaración al pie. Pasó de `<p>` a `<div>` porque el contenido lo escribe un administrador
 * en el editor de Ajustes y puede traer varios párrafos: un `<p>` con `<p>` adentro es markup
 * inválido y el navegador lo desarma solo, rompiendo el estilo.
 */
.cert-precios__nota {
  margin: 1.25rem 0 0;
  color: var(--cert-texto-suave);
  font-size: 0.9rem;
  text-align: center;
}

.cert-precios__nota p {
  margin: 0 0 0.4rem;
}

.cert-precios__nota p:last-child {
  margin-bottom: 0;
}

/* El importe dentro de la nota, para que se lea como los de la lista. */
.cert-precios__nota strong {
  color: var(--cert-texto);
}

/* --- el listado como popup --- */

/* Sin margen propio: quien lo maqueta es el contenedor. En la pantalla de compra es
   `.cert-selector__precios`, que lo separa de las pastillas por abajo. */
.cert-precios-abrir {
  margin: 0;
}

/*
 * Disparador de texto: el mismo gris subrayado que tenía el link "Ver precios
 * vigentes". Es un <button> —no navega a ningún lado—, así que hay que desarmarle
 * el aspecto de botón, que en Divi además viene con fondo y borde propios.
 */
.cert-precios-abrir--enlace {
  font-size: 0.9rem;
}

.cert-precios-abrir--enlace button {
  padding: 0 0 0.25rem;
  border: 0;
  border-radius: 0;
  background: none;
  /* `font: inherit` primero: es shorthand y pisaría el tamaño y el peso de abajo. */
  font: inherit;
  color: #8d8d8d;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: unset;
  border-bottom: 1px dotted #8d8d8d;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.cert-precios-abrir--enlace button:hover,
.cert-precios-abrir--enlace button:focus {
  background: none;
  color: var(--cert-acento);
  border-bottom-color: var(--cert-acento);
}

/*
 * `<dialog>` nativo: trae el foco atrapado, el cierre con Escape y el backdrop sin
 * una línea de JS. El original era un modal de Bootstrap 4 y en Divi no había quién
 * lo abriera.
 *
 * Los estilos van sobre `[open]` y no sobre `.cert-modal` a secas porque la regla
 * del navegador que esconde el dialog cerrado (`dialog:not([open]) { display: none }`)
 * es de la hoja del user agent: cualquier `display` de autor la pisa y el modal
 * quedaría visible en la página.
 */
.cert-modal {
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  color: var(--cert-texto);
}

.cert-modal[open] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: auto;
  /* El fondo oscuro va acá y no sólo en ::backdrop para que también se vea en el
     fallback sin showModal(), donde el navegador no dibuja backdrop. */
  background: rgba(47, 42, 58, 0.55);
  /* Por encima del header fijo de Divi. */
  z-index: 100000;
}

.cert-modal::backdrop {
  background: transparent;
}

.cert-modal__caja {
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-height: calc(100vh - 3rem);
  margin: auto;
  background: var(--cert-fondo);
  border-radius: var(--cert-radio);
  box-shadow: var(--cert-sombra);
  /* El popup se embebe dentro de `.cert-selector`, que centra todo su texto. */
  text-align: left;
}

.cert-modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--cert-borde);
}

/*
 * Sin `text-transform: uppercase` ni `letter-spacing` (2026-09-09, pedido del cliente):
 * el título va como se escribe, "Precios vigentes", y el peso lo da la negrita. El
 * `letter-spacing` se fue con las mayúsculas —era para separarlas, que es donde hace
 * falta; sobre minúsculas sólo desarma la palabra—. `font-weight` explícito porque el
 * h2 lo hereda del theme, y Divi lo baja a 500 en varias plantillas.
 */
.cert-modal__titulo {
  margin: 0;
  color: var(--cert-acento);
  font-size: 1.05rem;
  font-weight: 700;
}

.cert-modal__cerrar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cert-texto-suave);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.cert-modal__cerrar:hover,
.cert-modal__cerrar:focus {
  color: var(--cert-texto);
}

/* El cuerpo es lo único que scrollea: cabecera y pie quedan fijos. */
.cert-modal__cuerpo {
  padding: 1.5rem;
  overflow-y: auto;
}

.cert-modal__pie {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--cert-borde);
  text-align: right;
}

/* ========================= "Mi cuenta" del maestro ========================= */

/*
 * La barra de membresía corona la pantalla: texto a la izquierda, "Renovar" a la
 * derecha. Reusa `.cert-aviso` (de ahí saca el padding que pelea con Divi) y solo
 * le cambia el color y el reparto horizontal.
 */
.cert-cuenta__membresia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fdefd9;
  border-radius: 10px;
}

.cert-cuenta__membresia .cert-btn {
  flex: none;
}

.cert-cuenta__grilla {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Una sola columna cuando no entran las dos: el menú queda arriba del formulario. */
@media (max-width: 46rem) {
  .cert-cuenta__grilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.cert-cuenta__avatar {
  margin-bottom: 1.5rem;
  text-align: center;
}

/*
 * `get_avatar()` emite su propio <img class="avatar">, así que el redondeo va acá y
 * no en el markup. `height: auto` evita que un theme con `img { height: 100% }` lo
 * deforme.
 */
.cert-cuenta__avatar img {
  width: 10rem;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}

.cert-cuenta__menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/*
 * Cada ítem es una pastilla con el ícono a la izquierda y el chevron pegado al
 * borde derecho. `text-decoration: none !important` porque Divi subraya los links
 * dentro del contenido con una regla más específica que una clase suelta.
 */
.cert-cuenta__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  background: var(--cert-campo-fondo);
  color: var(--cert-texto);
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.cert-cuenta__item:hover,
.cert-cuenta__item:focus {
  background: #e0dee4;
  color: var(--cert-texto);
}

.cert-cuenta__item:focus-visible {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

/* El panel que se está viendo. */
.cert-cuenta__item.is-activo {
  font-weight: 700;
}

/* Los dos accesos directos (certificado y Código de Ética). */
.cert-cuenta__item--destacado {
  background: var(--cert-acento);
  color: var(--cert-acento-texto);
  font-weight: 700;
}

.cert-cuenta__item--destacado:hover,
.cert-cuenta__item--destacado:focus {
  background: var(--cert-acento-hover);
  color: var(--cert-acento-texto);
}

.cert-cuenta__item-icono {
  display: flex;
  flex: none;
}

.cert-cuenta__item-icono svg {
  width: 1.25em;
  height: 1.25em;
}

.cert-cuenta__item-texto {
  flex: 1 1 auto;
  min-width: 0;
}

/* El chevron empuja contra el borde derecho y se apaga un poco. */
.cert-cuenta__item-chevron {
  display: flex;
  flex: none;
  opacity: 0.55;
}

.cert-cuenta__item-chevron svg {
  width: 1.15em;
  height: 1.15em;
}

/*
 * El aire entre un campo y la etiqueta del siguiente era casi el mismo que entre la etiqueta y
 * su propio input, así que a simple vista no se leía a qué campo pertenecía cada etiqueta.
 * Ahora el bloque respira menos por fuera (0.7) que por dentro (0.4 + su input), y el
 * agrupamiento se ve solo.
 */
.cert-cuenta__campo {
  margin: 0 0 0.7rem;
}

.cert-cuenta__campo label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--cert-texto);
  font-size: 0.95rem;
  font-weight: 400;
}

/*
 * Campos alineados a la izquierda y menos redondeados que los del formulario de
 * generación: acá hay etiqueta arriba y el texto se lee como un dato, no como un
 * campo suelto centrado.
 *
 * Van scopeados bajo `.cert-cuenta` por el mismo motivo documentado en
 * `.cert-form .cert-campo`: los selectores de atributo del theme
 * (`input[type="text"]`, (0,1,1)) le ganan a una clase sola (0,1,0).
 */
.cert-cuenta .cert-campo,
.cert-cuenta .cert-select {
  display: block;
  width: 100%;
  padding: 0.9rem 1.15rem;
  border: 0;
  border-radius: 10px;
  background: var(--cert-campo-fondo);
  color: inherit;
  font: inherit;
  text-align: left;
}

.cert-cuenta textarea.cert-campo {
  min-height: 8rem;
  border-radius: 10px;
  resize: vertical;
}

.cert-cuenta .cert-campo:focus-visible,
.cert-cuenta .cert-select:focus-visible {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

/* El nombre de usuario se muestra pero no se edita. */
.cert-cuenta .cert-campo:disabled {
  color: var(--cert-texto-suave);
  cursor: not-allowed;
  opacity: 0.75;
}

/* Misma flecha embebida que el select del formulario de generación. */
.cert-cuenta .cert-select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6478' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15em;
  -webkit-appearance: none;
  appearance: none;
}

.cert-cuenta__ayuda {
  display: block;
  margin-top: 0.35rem;
  color: var(--cert-texto-suave);
  font-size: 0.85rem;
}

/* Las etiquetas HTML que se listan en la ayuda de "Sobre ti". Se estilan acá porque el
   `code` del tema las pinta con su propio fondo y su propio cuerpo, y en una línea de
   ayuda de 0.85rem eso queda desproporcionado. */
.cert-cuenta__ayuda code {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  border: 1px solid var(--cert-borde);
  background: var(--cert-fondo-suave);
  color: var(--cert-texto);
  font-size: 0.95em;
  white-space: nowrap;
}

.cert-cuenta__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.cert-cuenta__link {
  color: var(--cert-texto-suave);
  font-size: 0.95rem;
  text-decoration: underline;
}

.cert-cuenta__link:hover,
.cert-cuenta__link:focus {
  color: var(--cert-texto);
}

/* ========================= Pantalla de ingreso ========================= */

/*
 * El markup de acá NO es nuestro: es el template `myaccount/form-login.php` de WooCommerce,
 * embebido por el shortcode (ver includes/login.php). Estos estilos lo llevan al diseño del
 * cliente sin tocar el template ni la pantalla de /mi-cuenta.
 *
 * ¿Por qué estilarlo si el sitio ya lo pinta? Porque lo que lo pinta en /mi-cuenta es
 * `css/dynamic-assets/woocommerce.css` de Divi, que es un "dynamic asset": Divi lo encola solo
 * en las páginas donde detecta contenido de WooCommerce, y esta página es una página común con
 * un shortcode. Sin este bloque, el formulario se vería con o sin estilo según lo que Divi
 * decida detectar. Los selectores están calificados para ganarle igual a los de Divi cuando la
 * hoja sí carga (los suyos son del tipo `.woocommerce form .form-row input.input-text`), así
 * que la pantalla se ve igual en los dos casos.
 *
 * Lo único que se deja como viene son los avisos de error de WooCommerce. El ojo de la
 * contraseña pasó a ser nuestro el 2026-09-08: ver el bloque `.show-password-input` más abajo.
 */

/* El título "Acceder" del template sobra: el de la página lo pone Divi. */
.cert-login h2 {
  display: none;
}

/*
 * El formulario es una grilla de dos columnas: los botones a la izquierda, siempre del mismo
 * ancho, y su leyenda al lado.
 *
 *     [ Ingresar   ]  Olvidé mi contraseña
 *     [ Regístrate ]  Si aún no tenés una cuenta
 *
 * Los campos ocupan las dos columnas. La primera es `max-content`, así que su ancho lo fija el
 * más largo de los dos botones y los dos quedan alineados sin números mágicos.
 *
 * Todos los hijos son hermanos reales dentro del `<form>` —incluido el bloque de alta, que se
 * engancha en `woocommerce_login_form_end`—, que es lo que permite la grilla única. Los campos
 * ocultos no cuentan: un `input[type=hidden]` es `display:none` y no llega a ser ítem.
 */
.cert-login form.woocommerce-form-login {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
  max-width: 34rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* Por defecto, ancho completo: los campos. Las excepciones se ubican más abajo. */
.cert-login form.woocommerce-form-login > * {
  grid-column: 1 / -1;
}

.cert-login form.woocommerce-form-login p.form-row {
  margin: 0;
  padding: 0;
}

/*
 * Las etiquetas de los campos. El `:not()` NO es decorativo: sin él esta regla también
 * agarraba la etiqueta de "Recuérdame", y con más peso que la que la esconde
 * —(0,3,3) contra (0,3,1)—, así que le devolvía el `display:block` y el checkbox reaparecía
 * arriba del botón. Es la etiqueta de un checkbox, no la de un campo: no le corresponde
 * ninguno de estos estilos.
 */
.cert-login form.woocommerce-form-login p.form-row label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--cert-texto);
  font-size: 0.95rem;
  font-weight: 600;
}

.cert-login form.woocommerce-form-login p.form-row input.input-text {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--cert-campo-fondo);
  color: var(--cert-texto);
  font: inherit;
  line-height: 1.5;
}

/* El placeholder se lo pone `login_con_placeholders()` sobre el HTML ya renderizado. */
.cert-login form.woocommerce-form-login p.form-row input.input-text::placeholder {
  color: var(--cert-texto-suave);
  opacity: 1;   /* Firefox lo baja a 0.54 por defecto y queda ilegible sobre el gris. */
}

.cert-login form.woocommerce-form-login p.form-row input.input-text:focus-visible {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

/*
 * WooCommerce envuelve el campo de contraseña en `.password-input` para poder colgarle el ojo.
 * Ancho completo o el campo queda a la mitad, y `relative` porque el ojo se posiciona contra
 * este wrapper.
 */
.cert-login form.woocommerce-form-login .password-input {
  position: relative;
  display: block;
  width: 100%;
}

/* Deja lugar al ojo para que el texto no se le meta debajo. */
.cert-login form.woocommerce-form-login .password-input input.input-text {
  padding-right: 3.75rem;
}

/*
 * ## El ojo de "ver la contraseña" (2026-09-08)
 *
 * El `<span class="show-password-input">` lo inyecta `woocommerce.js`; el ícono lo ponía el CSS
 * global del sitio: el post 35460 de `custom-css-js`, bloque LOGIN, que le cuelga dos PNG
 * subidos en 2023 y referenciados por URL absoluta. Acá lo toma el plugin: mismo trazo que el
 * resto de los íconos (`icono_cert()`), en SVG embebido, sin depender de archivos subidos.
 *
 * Va como `background-image` y no como `<svg>` porque el span lo crea el JS de Woo y no pasa
 * por PHP. Por eso el color va literal (`#6b6478` = `--cert-texto-suave`): un data URI no lee
 * las variables CSS.
 *
 * Los `!important` son para ganarle al CSS del sitio, que es global y sin acotar, y que usa
 * `!important` en `top` y en el `content` del `::after`. Todo lo nuestro va acotado a
 * `.cert-login`: en `/mi-cuenta` y en el checkout el ojo sigue siendo el del sitio.
 */
.cert-login form.woocommerce-form-login .show-password-input {
  position: absolute;
  top: 50% !important;
  right: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213Z' stroke='%23636363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M2.45801 12C3.73201 7.943 7.52301 5 12 5C16.478 5 20.268 7.943 21.542 12C20.268 16.057 16.478 19 12 19C7.52301 19 3.73201 16.057 2.45801 12Z' stroke='%23636363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4rem 1.4rem !important;
  opacity: 0.65;
  cursor: pointer;
}

/*
 * Los pseudo-elementos se apagan LOS DOS, y no solo el `::after`.
 *
 * El ícono no lo dibuja un único CSS: el del sitio (post 35460 de `custom-css-js`) lo cuelga
 * del `::after`, y WooCommerce 11 trae además el suyo propio en
 * `.woocommerce form .show-password-input::before` —su SVG embebido, `display: block`,
 * `background-size: cover`—. Los dos se pintan ENCIMA del `background-image` del span, así que
 * anular uno solo deja el otro tapando el nuestro. Sin `content` el pseudo-elemento no se
 * genera y el único ojo que queda es el del span, que es el que estiliza este bloque.
 */
.cert-login form.woocommerce-form-login .show-password-input::before,
.cert-login form.woocommerce-form-login .show-password-input::after {
  content: none !important;
}

.cert-login form.woocommerce-form-login .show-password-input:hover {
  opacity: 1;
}

/* Contraseña a la vista: el ojo se tacha. */
.cert-login form.woocommerce-form-login .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.875 18.825C13.2569 18.9419 12.6291 19.0005 12 19C7.52203 19 3.73203 16.057 2.45703 12C2.8003 10.9081 3.32902 9.88346 4.02003 8.971M17.412 17.412L14.121 14.122L9.87803 9.879C10.4407 9.31634 11.2038 9.00025 11.9995 9.00025C12.7952 9.00025 13.5584 9.31634 14.121 9.879C14.6837 10.4417 14.9998 11.2048 14.9998 12.0005C14.9998 12.7962 14.6837 13.5593 14.121 14.122M9.87803 9.879L14.12 14.12M9.88003 9.88L6.59003 6.59M6.59003 6.59L3.00003 3M6.59003 6.59C8.20239 5.54957 10.0811 4.9974 12 5C16.478 5 20.268 7.943 21.543 12C20.8391 14.2305 19.3774 16.1446 17.411 17.411M6.59003 6.59L17.411 17.411M17.411 17.411L21 21' stroke='%23636363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E") !important;
  opacity: 1;
}

/*
 * "Recuérdame" se saca (2026-09-08, decisión del diseño): no está en la maqueta.
 *
 * Se oculta por CSS y no se borra del HTML porque el markup lo imprime el template de
 * WooCommerce y el plugin no override templates de Woo. El efecto es el mismo: un checkbox sin
 * marcar no se postea, así que la sesión no se recuerda. `display:none` además lo saca del
 * árbol de accesibilidad, así que tampoco lo anuncia un lector de pantalla.
 */
.cert-login form.woocommerce-form-login p.form-row label.woocommerce-form-login__rememberme {
  display: none;
}

/* La fila del botón: primera columna. Ya no comparte celda con nada. */
.cert-login form.woocommerce-form-login p.form-row:not(.form-row-wide) {
  grid-column: 1;
  margin-top: 0.5rem;
}

.cert-login form.woocommerce-form-login button[name="login"] {
  display: block;
  width: 100%;
  min-width: 12rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--cert-acento);
  border-radius: 999px;
  background: var(--cert-acento);
  color: var(--cert-acento-texto);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.cert-login form.woocommerce-form-login button[name="login"]:hover,
.cert-login form.woocommerce-form-login button[name="login"]:focus {
  background: var(--cert-acento-hover);
  border-color: var(--cert-acento-hover);
  color: var(--cert-acento-texto);
}

/* "Olvidé mi contraseña", al lado del botón. */
.cert-login form.woocommerce-form-login p.woocommerce-LostPassword {
  grid-column: 2;
  margin: 0.5rem 0 0;
}

.cert-login form.woocommerce-form-login .woocommerce-LostPassword a,
.cert-login__link {
  color: var(--cert-texto-suave);
  font-size: 0.95rem;
  text-decoration: underline;
}

.cert-login form.woocommerce-form-login .woocommerce-LostPassword a:hover,
.cert-login form.woocommerce-form-login .woocommerce-LostPassword a:focus,
.cert-login__link:hover,
.cert-login__link:focus {
  color: var(--cert-texto);
}

/* Fila de acciones del aviso "ya iniciaste sesión". */
.cert-login__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Segunda fila de la grilla: el alta. Mismo ancho que "Ingresar" por la columna `max-content`. */
.cert-login form.woocommerce-form-login .cert-login__registro-btn {
  grid-column: 1;
  min-width: 12rem;
  justify-content: center;
}

.cert-login form.woocommerce-form-login .cert-login__registro-texto {
  grid-column: 2;
  margin: 0;
  color: var(--cert-texto-suave);
  font-size: 0.95rem;
}

/*
 * En pantalla angosta las dos columnas no entran: el texto pasa debajo de su botón.
 */
@media (max-width: 30rem) {
  .cert-login form.woocommerce-form-login {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    text-align: center;
  }

  .cert-login form.woocommerce-form-login > *,
  .cert-login form.woocommerce-form-login p.form-row:not(.form-row-wide),
  .cert-login form.woocommerce-form-login p.woocommerce-LostPassword,
  .cert-login form.woocommerce-form-login .cert-login__registro-btn,
  .cert-login form.woocommerce-form-login .cert-login__registro-texto {
    grid-column: 1;
  }

  .cert-login form.woocommerce-form-login p.woocommerce-LostPassword {
    margin-top: 0;
  }
}

/* ========================= Alta de un maestro ========================= */

/*
 * `[certificados_registro]`. A diferencia del ingreso, este markup SÍ es nuestro
 * (includes/shortcodes/registro.php), así que no hay que pelearle a ningún template.
 *
 * La forma sale de la maqueta del cliente: cada campo es una pastilla gris que contiene su
 * etiqueta arriba y el input abajo, sin borde. Es una etiqueta de verdad, no un placeholder:
 * sigue estando cuando la persona ya escribió, que es justo cuando un formulario de trece
 * campos necesita que siga estando.
 */

.cert-registro__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 42rem;
}

/*
 * Los títulos de bloque ("Datos de acceso", "Datos personales"). `font-weight` explícito por
 * lo mismo que `.cert-modal__titulo`: Divi le baja el peso a los h2. El margen de arriba separa
 * el segundo bloque del primero; en el primero lo absorbe el `gap` del formulario.
 */
.cert-registro .cert-registro__seccion {
  margin: 1.25rem 0 0;
  padding: 0 0 0.25rem;
  color: var(--cert-acento);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.cert-registro .cert-registro__seccion:first-of-type {
  margin-top: 0;
}

.cert-registro__campo {
  padding: 0.85rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--cert-campo-fondo);
}

.cert-registro__campo label {
  display: block;
  margin: 0;
  cursor: text;   /* toda la pastilla se siente parte del campo */
}

.cert-registro__label {
  color: var(--cert-texto);
  font-size: 0.95rem;
  font-weight: 600;
}

.cert-registro__req {
  color: var(--cert-acento);
}

/* La línea de contexto: para qué sirve el dato y si se publica o no. */
.cert-registro__ayuda {
  display: block;
  margin-top: 0.1rem;
  color: var(--cert-texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}

/*
 * ⚠️ El `.cert-registro` de adelante NO es decorativo, es lo que hace que esto gane.
 *
 * Divi trae `input[type=email], input[type=password], input[type=text], select, textarea { … }`
 * con borde, fondo blanco y padding. Eso es especificidad **(0,1,1)**, exactamente la misma que
 * `.cert-registro__campo input`: cuando dos reglas empatan gana la que cargue última, así que el
 * resultado dependía del orden de las hojas. Funcionó hasta que Divi regeneró su `style-static.css`
 * y se dio vuelta —de un día para el otro, sin que cambiara nuestro CSS.
 *
 * Con el ancestro son (0,2,1) y el empate deja de existir. Es el mismo recurso que ya usa el
 * bloque del ingreso, donde los selectores están calificados por este motivo.
 */
.cert-registro .cert-registro__campo input,
.cert-registro .cert-registro__campo select,
.cert-registro .cert-registro__campo textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cert-texto);
  font: inherit;
  line-height: 1.5;
  box-shadow: none;
}

.cert-registro .cert-registro__campo textarea {
  resize: vertical;
}

.cert-registro .cert-registro__campo input:focus,
.cert-registro .cert-registro__campo select:focus,
.cert-registro .cert-registro__campo textarea:focus {
  outline: none;   /* el foco se marca sobre la pastilla entera, abajo */
}

/*
 * El foco se dibuja en el contenedor y no en el input: el input no tiene borde ni fondo
 * propios, así que un outline suyo quedaría flotando en el medio de la pastilla. `:focus-within`
 * lo lleva al borde de lo que la persona percibe como "el campo".
 */
.cert-registro__campo:focus-within {
  outline: 2px solid var(--cert-acento);
  outline-offset: 2px;
}

/*
 * El honeypot. Fuera de la pantalla y no `display:none`: los bots que valen algo ignoran lo que
 * está oculto de la forma obvia. Sigue siendo inalcanzable con teclado (`tabindex="-1"` en el
 * input) y para lectores de pantalla (`aria-hidden` en el contenedor).
 */
.cert-registro__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cert-registro__etica {
  margin: 0.5rem 0 0;
  color: var(--cert-texto-suave);
  font-size: 0.9rem;
}

.cert-registro__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Va debajo del botón de pago, tanto en el alta como en "completar registración". */
.cert-pasarela {
  margin: 0.5rem 0 0;
  color: var(--cert-texto-suave);
  font-size: 0.85rem;
}

/*
 * "Sobre vos": el editor de WordPress y su red de seguridad.
 *
 * La ayuda con las etiquetas permitidas está siempre en el HTML pero oculta: solo aparece si
 * `editor_red_de_seguridad()` detectó que TinyMCE no arrancó y devolvió el textarea. Con la barra
 * andando, listar etiquetas HTML sería ruido; sin ella, es la única pista de qué se puede usar.
 */
.cert-editor__respaldo {
  display: none;
}

.cert-editor--sin-barra .cert-editor__respaldo {
  display: block;
}

.cert-editor--sin-barra .wp-editor-area {
  visibility: visible !important;
  min-height: 9rem;
}

/*
 * Los dos campos de contraseña del alta: el ojo y el aviso de coincidencia.
 *
 * El ojo va dentro de la pastilla, alineado con el input y no con la etiqueta: es un control del
 * campo, no del bloque. Se posiciona contra `.cert-registro__password`, que envuelve solo al
 * input y al botón —si se posicionara contra la pastilla entera quedaría a la altura del título.
 */
.cert-registro__password {
  position: relative;
  display: flex;
  align-items: center;
}

.cert-registro .cert-registro__campo--password input {
  padding-right: 2.25rem;
}

.cert-registro__ojo {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--cert-texto-suave);
  cursor: pointer;
}

.cert-registro__ojo:hover {
  color: var(--cert-texto);
}

.cert-registro__ojo svg {
  width: 1.25rem;
  height: 1.25rem;
}

/*
 * Se muestra el ícono del estado al que se va a pasar, no el actual: el botón dice qué hace, no
 * qué está pasando. Con la contraseña oculta se ve el ojo abierto ("mostrar").
 */
.cert-registro__ojo-ocultar,
.cert-registro__ojo[aria-pressed="true"] .cert-registro__ojo-ver {
  display: none;
}

.cert-registro__ojo[aria-pressed="true"] .cert-registro__ojo-ocultar {
  display: flex;
}

/* Arranca vacío y sin ocupar lugar: recién dice algo cuando hay algo que decir. */
.cert-registro__coincide {
  margin: -0.35rem 0 0;
  padding: 0 1.5rem;
  font-size: 0.85rem;
}

.cert-registro__coincide:empty {
  display: none;
}

.cert-registro__coincide--ok {
  color: #2e7d4f;
}

.cert-registro__coincide--mal {
  color: var(--cert-acento-hover);
}

/**
 * Utilidades de espaciado para los bloques de la página (2026-09-24).
 *
 * El editor de las páginas del sistema no deja cargar padding ni margin a los bloques, así
 * que se asignan por clase: en el bloque → Avanzado → "Clase(s) CSS adicional(es)".
 *
 *   cert-py-N   padding arriba y abajo      cert-my-N   margin arriba y abajo
 *   cert-pt-N   padding arriba              cert-mt-N   margin arriba
 *   cert-pb-N   padding abajo               cert-mb-N   margin abajo
 *
 * Escala (N): 0 = 0 · 1 = 8px · 2 = 16px · 3 = 24px · 4 = 40px · 5 = 64px · 6 = 96px.
 * En celular, 5 y 6 se achican (40 y 56px) para no dejar media pantalla en blanco.
 *
 * Con prefijo `cert-` y no `py-*` pelado: Bootstrap y otros plugins del sitio ya usan esos
 * nombres con otra escala. Con `!important` porque es lo que hace una utilidad: Divi le pone
 * padding a sus secciones con selectores de alta especificidad y sin esto no ganaría.
 * Los valores se cambian desde las variables de acá abajo.
 */

:root {
  --cert-esp-0: 0;
  --cert-esp-1: 8px;
  --cert-esp-2: 16px;
  --cert-esp-3: 24px;
  --cert-esp-4: 40px;
  --cert-esp-5: 64px;
  --cert-esp-6: 96px;
}

@media (max-width: 46rem) {
  :root {
    --cert-esp-5: 40px;
    --cert-esp-6: 56px;
  }
}

.cert-py-0 { padding-top: var(--cert-esp-0) !important; padding-bottom: var(--cert-esp-0) !important; }
.cert-py-1 { padding-top: var(--cert-esp-1) !important; padding-bottom: var(--cert-esp-1) !important; }
.cert-py-2 { padding-top: var(--cert-esp-2) !important; padding-bottom: var(--cert-esp-2) !important; }
.cert-py-3 { padding-top: var(--cert-esp-3) !important; padding-bottom: var(--cert-esp-3) !important; }
.cert-py-4 { padding-top: var(--cert-esp-4) !important; padding-bottom: var(--cert-esp-4) !important; }
.cert-py-5 { padding-top: var(--cert-esp-5) !important; padding-bottom: var(--cert-esp-5) !important; }
.cert-py-6 { padding-top: var(--cert-esp-6) !important; padding-bottom: var(--cert-esp-6) !important; }

.cert-pt-0 { padding-top: var(--cert-esp-0) !important; }
.cert-pt-1 { padding-top: var(--cert-esp-1) !important; }
.cert-pt-2 { padding-top: var(--cert-esp-2) !important; }
.cert-pt-3 { padding-top: var(--cert-esp-3) !important; }
.cert-pt-4 { padding-top: var(--cert-esp-4) !important; }
.cert-pt-5 { padding-top: var(--cert-esp-5) !important; }
.cert-pt-6 { padding-top: var(--cert-esp-6) !important; }

.cert-pb-0 { padding-bottom: var(--cert-esp-0) !important; }
.cert-pb-1 { padding-bottom: var(--cert-esp-1) !important; }
.cert-pb-2 { padding-bottom: var(--cert-esp-2) !important; }
.cert-pb-3 { padding-bottom: var(--cert-esp-3) !important; }
.cert-pb-4 { padding-bottom: var(--cert-esp-4) !important; }
.cert-pb-5 { padding-bottom: var(--cert-esp-5) !important; }
.cert-pb-6 { padding-bottom: var(--cert-esp-6) !important; }

.cert-my-0 { margin-top: var(--cert-esp-0) !important; margin-bottom: var(--cert-esp-0) !important; }
.cert-my-1 { margin-top: var(--cert-esp-1) !important; margin-bottom: var(--cert-esp-1) !important; }
.cert-my-2 { margin-top: var(--cert-esp-2) !important; margin-bottom: var(--cert-esp-2) !important; }
.cert-my-3 { margin-top: var(--cert-esp-3) !important; margin-bottom: var(--cert-esp-3) !important; }
.cert-my-4 { margin-top: var(--cert-esp-4) !important; margin-bottom: var(--cert-esp-4) !important; }
.cert-my-5 { margin-top: var(--cert-esp-5) !important; margin-bottom: var(--cert-esp-5) !important; }
.cert-my-6 { margin-top: var(--cert-esp-6) !important; margin-bottom: var(--cert-esp-6) !important; }

.cert-mt-0 { margin-top: var(--cert-esp-0) !important; }
.cert-mt-1 { margin-top: var(--cert-esp-1) !important; }
.cert-mt-2 { margin-top: var(--cert-esp-2) !important; }
.cert-mt-3 { margin-top: var(--cert-esp-3) !important; }
.cert-mt-4 { margin-top: var(--cert-esp-4) !important; }
.cert-mt-5 { margin-top: var(--cert-esp-5) !important; }
.cert-mt-6 { margin-top: var(--cert-esp-6) !important; }

.cert-mb-0 { margin-bottom: var(--cert-esp-0) !important; }
.cert-mb-1 { margin-bottom: var(--cert-esp-1) !important; }
.cert-mb-2 { margin-bottom: var(--cert-esp-2) !important; }
.cert-mb-3 { margin-bottom: var(--cert-esp-3) !important; }
.cert-mb-4 { margin-bottom: var(--cert-esp-4) !important; }
.cert-mb-5 { margin-bottom: var(--cert-esp-5) !important; }
.cert-mb-6 { margin-bottom: var(--cert-esp-6) !important; }

/*
 * El correo de Mercado Pago (includes/email-mercadopago.php): un check que, tildado, abre el
 * campo. Se abre solo con CSS (`:has`), así que no depende de ningún script.
 *
 * Los selectores llevan `.cert-panel` adelante por lo mismo que el alta: los de Divi
 * (`input[type=email]`, (0,1,1)) le ganan a una clase sola.
 */
.cert-panel .cert-mp {
  margin: 0 0 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--cert-fondo-suave);
  color: var(--cert-texto);
  font-size: 0.95rem;
}

.cert-registro .cert-mp {
  margin: 0;   /* el formulario del alta ya separa con `gap` */
}

.cert-panel .cert-mp__intro {
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--cert-texto-suave);
  line-height: 1.4;
}

.cert-panel .cert-mp__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.cert-panel .cert-mp__toggle {
  width: auto;
  margin: 0;
  accent-color: var(--cert-acento);
}

.cert-panel .cert-mp__otro {
  display: none;
  margin-top: 0.75rem;
}

.cert-panel .cert-mp:has(.cert-mp__toggle:checked) .cert-mp__otro {
  display: block;
}

.cert-panel .cert-mp__label {
  display: block;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.cert-panel .cert-mp__email {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--cert-borde);
  border-radius: var(--cert-radio);
  background: var(--cert-fondo);
  color: var(--cert-texto);
  font: inherit;
  box-shadow: none;
}

.cert-panel .cert-mp__email:focus {
  outline: 2px solid var(--cert-acento);
  outline-offset: 1px;
}

.cert-panel .cert-mp__ayuda {
  display: block;
  margin-top: 0.35rem;
  color: var(--cert-texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
}