/* ============================================================
   AEPSIS — Formulario de matrícula (form.matricula)
   Aplica a las 202 fichas de curso a la vez.
   Todo va scoped bajo .matricula para no tocar Bootstrap
   ni otros formularios del sitio (#presencial-form, etc).

   Paleta: morado marca #3d2080 / hover #4f2da8 / texto #29303b
   Cargar DESPUÉS del CSS del theme (encolado desde functions.php
   con dependencia de 'cpotheme-main').
   ============================================================ */

/* ── Contenedor del formulario ───────────────────────────── */
.matricula {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  color: #29303b;
  max-width: 520px;
}

/* ── Bloques (fieldset) como tarjetas ────────────────────── */
.matricula .fieldset {
  background: #fff;
  border: 1px solid #ece7f5;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(61,32,128,.05), 0 6px 22px rgba(61,32,128,.06);
  padding: 0 0 1.1em;
  margin: 0 0 1.4em;
  overflow: hidden;
}

/* Barra de título del bloque ("Tus datos", "Pago") */
.matricula .fieldset-title {
  background: #3d2080;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .85em 1.2em;
  margin: 0 0 1em;
}

/* Filas internas (los .col-md-12 sueltos del form) */
.matricula .col-md-12 {
  padding: 0 1.2em;
  margin: 0 0 .7em;
  box-sizing: border-box;
}

/* ── Inputs y selects ────────────────────────────────────── */
.matricula input[type="text"],
.matricula input[type="password"],
.matricula select {
  width: 100%;
  box-sizing: border-box;
  padding: .7em .9em;
  border: 1.5px solid #d6cdec;
  border-radius: 9px;
  font-size: 1em;
  font-family: inherit;
  color: #29303b;
  background: #faf9fd;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
}

.matricula input[type="text"]:focus,
.matricula input[type="password"]:focus,
.matricula select:focus {
  border-color: #3d2080;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(61,32,128,.13);
}

.matricula input::placeholder { color: #9a93ad; }

.matricula select {
  cursor: pointer;
  /* flechita propia ya que quitamos la nativa */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233d2080' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.4em;
}

/* Prefijo + teléfono en la misma fila, alineados (flex) */
.matricula .col-md-12:has(> #prefijo) {
  display: flex;
  align-items: stretch;
  gap: .6em;
}
.matricula #prefijo  { width: 40%; flex: 0 0 40%; display: block; margin: 0; }
.matricula #telefono { flex: 1 1 auto; width: auto; display: block; margin: 0; }

/* ── Bloque de pago (radios) ─────────────────────────────── */
.matricula .payment {
  background: #f7f5fc;
  border: 1px solid #e7e0f3;
  border-radius: 10px;
  padding: .9em 1.1em !important;
  margin: 0 1.2em .7em 1.2em !important;   /* mismo margen lateral que .col-md-12 */
  box-sizing: border-box;
}

.matricula .payment p { margin: 0; line-height: 2.1; }

.matricula .payment input[type="radio"] {
  width: auto;
  margin-right: .5em;
  accent-color: #3d2080;
  transform: translateY(1px);
}

.matricula .payment i {
  width: 1.3em;
  text-align: center;
  color: #3d2080;
  margin-right: .25em;
}

/* ── Política (checkbox) ─────────────────────────────────── */
.matricula #politica { width: auto; margin-right: .5em; accent-color: #3d2080; }
.matricula a { color: #3d2080; text-decoration: underline; }

/* ── Botón Continuar ─────────────────────────────────────── */
/* La regla vieja de #continuar lleva !important, así que aquí
   subimos especificidad + !important para ganarle limpio. */
.matricula #continuar {
  display: block;
  width: 100%;
  background: #3d2080 !important;
  color: #fff !important;
  border: none !important; 
  border-radius: 999px !important;
  padding: .95em 1.2em !important;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .16s, transform .16s;
  font-family: inherit;
}
.matricula #continuar:hover {
  background: #4f2da8 !important;
  transform: translateY(-1px);
}

/* ── Título "Matrícula en…" (su-spoiler dentro del bloque) ── */
.su-spoiler-icon-plus .su-spoiler-title {
  font-size: 1.15em !important;
  color: #3d2080;
  padding-left: 0;
  background: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .matricula { max-width: 100%; }
  .matricula .col-md-12:has(> #prefijo) { flex-direction: column; gap: .7em; }
  .matricula #prefijo,
  .matricula #telefono { width: 100%; flex: none; }
}




/* ============================================================
   AEPSIS — Cuerpo de la ficha de curso (capa de contenido)
   Aplica a las 202 fichas. Va DESPUÉS de aepsis-matricula.css.

   Scope: celdas de contenido = todas las .panel-grid-cell MENOS
   la que contiene el formulario (:not(:has(form.matricula))).
   Así no toca nada de la columna de matrícula.
   ============================================================ */

/* ── Ritmo de lectura ────────────────────────────────────── */
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce p {
  line-height: 1.7;
  margin: 0 0 1.05em;
  color: #3a3a4a;
}

.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce ul,
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce ol {
  margin: 0 0 1.05em 1.4em;
  line-height: 1.65;
}

/* ── Spoilers usados como cajas de contenido ─────────────── */
/* Quitamos la "caja" por defecto de Shortcodes Ultimate y
   normalizamos el espaciado. */
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-style-default {
  border: none;
  background: none;
  box-shadow: none;
  margin: 0;
}
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-content {
  padding: 0;
  border: none;
  background: none;
}
/* Spoilers vacíos → fuera (eliminan los huecos muertos entre secciones) */
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-style-default:not(:has(.su-spoiler-content)) {
  display: none;
}

/* ── Imagen del curso ────────────────────────────────────── */
/* img:not([style]) = la imagen del curso (los logos de diploma
   llevan style inline propio, así que quedan excluidos y mantienen
   su tamaño). Suave: bordes redondeados + sombra discreta. */
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce img:not([style]) {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(61,32,128,.12);
}

/* Logos de diploma: que respiren y centren bien en móvil */
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce div[style*="flex"] {
  align-items: center;
  margin-top: .6em;
}

/* ── OPCIONAL: títulos de sección terracota ──────────────────
   Las cabeceras ("Lecciones", "Precio del curso"…) van con estilo
   INLINE (color:#993300, ~29px), en dos variantes (<span> y
   <strong><span>). Esto las uniforma a un tamaño y color coherentes.

   ⚠ Es un PARCHE con !important sobre estilo inline. Lo limpio es
   convertir esos <span style> en una clase vía search-replace en BD
   (te paso el SQL cuando quieras) y estilarla sin !important.
   Si prefieres la vía limpia, borra este bloque. */
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce span[style*="993300"] {
  color: #3d2080 !important;
  font-size: 1.4rem !important;   /* rem para no compstar con el <strong> padre */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  display: inline-block;
  margin: .4em 0 .1em;
}


/* ── Títulos de sección uniformes (las dos variantes) ──────── */

/* Variante A: <h2 class="su-spoiler-title"> con <span> dentro */
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #3d2080 !important;
  line-height: 1.25 !important;
  margin: .2em 0 .4em !important;
}
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-title span {
  color: #3d2080 !important;
  font-size: inherit !important;   /* hereda el 1.4rem del h2, no su color/talla inline */
}

/* Variante B: títulos como <span style="...29px..."> sueltos en un <p> */
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce span[style*="993300"],
.panel-grid-cell:not(:has(form.matricula)) .siteorigin-widget-tinymce span[style*="800000"] {
  color: #3d2080 !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}


/* Spoilers de contenido: matar la caja de Shortcodes Ultimate del todo */
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-style-default,
.panel-grid-cell:not(:has(form.matricula)) .su-spoiler-content {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}