/* ==========================================================================
   COMPONENTE: FORMULARIO DE INSCRIPCIÓN (DATOS EVENTO)
   Archivo: /css/shortcode-form-inscripcion.css
   ========================================================================== */

/* --- BLOQUEO TOTAL DE ETIQUETAS INVISIBLES DE WORDPRESS (wpautop) --- */
.inscripcion-evento-tarjeta form br {
    display: none !important;
}

.inscripcion-evento-tarjeta form p {
    margin: 0 !important;
    padding: 0 !important;
}

.inscripcion-evento-tarjeta form p:empty {
    display: none !important;
}

/* --- 1. CONTENEDOR PRINCIPAL --- */
/* Marco (fondo, borde, radio, padding) ya NO se define aquí — lo pone el
   Grupo de la plantilla que envuelve este formulario. */
.inscripcion-evento-tarjeta {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* --- 2. TIPOGRAFÍA Y CABECERAS --- */
/* Compactado (19/08/2026, a petición expresa: "haz lo mismo en el form
   de inscripción" — mismo criterio que ".log-etiqueta"/".log-dato" de
   shortcode-datos-evento.css: se deja el lateral donde exista, se
   recorta el vertical). */
.inscripcion-evento-tarjeta h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--scout-global-oscuro);
    font-size: 1.6rem;
    font-weight: 800;
}

.inscripcion-evento-tarjeta .inscripcion-intro {
    color: var(--scout-global-texto);
    margin-bottom: 0.85rem;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- 3. ETIQUETAS (LABELS) --- */
.inscripcion-evento-tarjeta label {
    display: block;
    font-weight: 600;
    color: var(--scout-global-oscuro);
    margin-bottom: 3px !important;
    font-size: 0.9rem;
}

/* --- 3b. FILA "ETIQUETA + VALOR EN LA MISMA LÍNEA" (19/08/2026, a
   petición expresa: "que el título y valor estén en la misma línea, como
   el form de datos del evento"). Mismo criterio de rejilla que ".log-fila"
   (shortcode-datos-evento.css: 240px de etiqueta + resto para el valor),
   pero SIN reutilizar ".log-fila"/".log-etiqueta"/".log-dato" tal cual —
   esas clases están pensadas para texto de solo lectura (".log-dato"
   pinta su propia caja blanca con borde), y aquí el propio <input>/<select>
   YA tiene su caja (regla de más abajo) — envolverlo en otra caja se
   vería como una caja dentro de otra caja. */
.inscripcion-campo-fila {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    column-gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.inscripcion-campo-fila label {
    margin-bottom: 0 !important;
}

/* Selector reforzado para anular el margen inferior propio del
   input/select — aquí la separación entre filas la pone
   ".inscripcion-campo-fila" (arriba), no cada campo por su cuenta, o el
   input quedaría descentrado respecto a su etiqueta dentro de la fila.
   ⚠️ Reincidencia real (19/08/2026): con solo ".inscripcion-campo-fila
   input" (sin "[type=...]"), la especificidad quedaba EMPATADA con la
   regla de "4. CAMPOS DE ENTRADA" de más abajo (misma sección de puntos:
   2 clases + etiqueta vs. 1 clase + atributo + etiqueta) — en un empate
   gana la última regla del archivo en orden de aparición, así que
   "Nombre"/"Apellidos"/"Email de contacto" (inputs de texto/email)
   seguían con su margen de 0.75rem de siempre, mientras que "Sección"
   (select, que SÍ tenía una clase de ventaja) se veía bien — de ahí la
   separación desigual detectada a simple vista. Repetir aquí el mismo
   "[type=...]" añade un punto de especificidad y gana pase lo que pase,
   sin depender del orden en el archivo. */
.inscripcion-evento-tarjeta .inscripcion-campo-fila input[type="text"],
.inscripcion-evento-tarjeta .inscripcion-campo-fila input[type="date"],
.inscripcion-evento-tarjeta .inscripcion-campo-fila input[type="email"],
.inscripcion-evento-tarjeta .inscripcion-campo-fila select {
    margin-bottom: 0 !important;
}

/* --- 4. CAMPOS DE ENTRADA (INPUTS & SELECTS) --- */
.inscripcion-evento-tarjeta input[type="text"],
.inscripcion-evento-tarjeta input[type="date"],
.inscripcion-evento-tarjeta input[type="email"],
.inscripcion-evento-tarjeta select {
    font-size: 16px; /* antes 0.95rem — evita el zoom automático de iOS al tocar el campo (NO se toca al compactar) */
    width: 100%;
    padding: 7px 12px !important;
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    background-color: #ffffff !important;
    color: var(--scout-global-oscuro);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado Focus interactivo */
.inscripcion-evento-tarjeta input[type="text"]:focus,
.inscripcion-evento-tarjeta input[type="date"]:focus,
.inscripcion-evento-tarjeta input[type="email"]:focus,
.inscripcion-evento-tarjeta select:focus {
    outline: none;
    border-color: var(--scout-global-base);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scout-global-base), transparent 85%);
    background-color: #ffffff !important;
}

/* --- 5. CHECKBOX Y RADIOS --- */
.inscripcion-evento-tarjeta input[type="checkbox"],
.inscripcion-evento-tarjeta input[type="radio"] {
    cursor: pointer;
    margin-right: 0.5rem;
    accent-color: var(--scout-global-base); 
}

/* Contenedor específico para la pregunta de asistencia */
.inscripcion-evento-tarjeta form > div[style*="background"] {
    background-color: #ffffff !important;
    border: 1px solid var(--scout-global-borde) !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.85rem !important;
    border-radius: var(--radio-aviso) !important;
}

/* ==========================================================================
   MEDIA QUERIES - DISEÑO RESPONSIVO (MÓVILES)
   Mismo criterio que ".log-fila" en shortcode-datos-evento.css: en pantallas
   estrechas la fila de 2 columnas no cabe cómodamente, así que vuelve a
   apilarse (etiqueta arriba, campo debajo).
   ========================================================================== */
@media (max-width: 781px) {
    .inscripcion-campo-fila {
        grid-template-columns: 1fr;
        row-gap: 3px;
    }
}

/* --- 6. BOTÓN DE ENVÍO --- */
.inscripcion-evento-tarjeta input[type="submit"][value="Enviar Inscripción"] {
    background-color: var(--scout-global-base) !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: var(--radio-boton) !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 1rem !important;
    transition: transform 0.1s ease, background-color 0.2s ease !important;
    
    /* Anulación de estilos nativos de navegadores y móviles (iOS/Safari) */
    appearance: none !important; 
    -webkit-appearance: none !important;
}

/* Efecto al pasar el ratón */
.inscripcion-evento-tarjeta input[type="submit"][value="Enviar Inscripción"]:hover {
    background-color: var(--scout-global-oscuro) !important;
}

/* Efecto al hacer clic (se encoge ligeramente) */
.inscripcion-evento-tarjeta input[type="submit"][value="Enviar Inscripción"]:active {
    transform: scale(0.98) !important; 
}