/**
 * Estilos CSS para el Plugin Ceamib Formularios
 *
 * Proporciona la apariencia visual para el formulario de registro
 * generado por el shortcode [formulario]. Incluye estilos base
 * y media queries para responsividad.
 *
 * @package CeamibFormularios\Assets\CSS
 * @since 1.0.0
 * @version 1.0.0
 */

/* ==========================================================================
   Estilos Generales del Formulario y Contenedor
   ========================================================================== */

   .ceamib-form {
    max-width: 600px; /* Ancho máximo inicial */
    margin: 30px auto; /* Centrado horizontal, margen vertical */
    padding: 40px; /* Espacio interno */
    background-color: #f0f4ff; /* Fondo azul muy claro */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra exterior */
    border: 1px solid #ccd4e6; /* Borde sutil */
    box-sizing: border-box; /* Incluir padding y border en el ancho/alto total */
}

/* ==========================================================================
   Fieldsets y Leyendas
   ========================================================================== */

.ceamib-fieldset {
    margin-bottom: 25px; /* Espacio debajo de cada grupo */
    padding: 20px; /* Espacio interno del fieldset */
    border: 1px solid #d9dee7; /* Borde del fieldset */
    border-radius: 10px; /* Redondeo del borde del fieldset */
    background-color: #f0f4ff; /* Fondo blanco para destacar sobre el form */
}

.ceamib-fieldset legend {
    font-size: 1.2em; /* Tamaño de la leyenda */
    font-weight: 600; /* Grosor de la fuente */
    color: #2c3e50; /* Color azul grisáceo oscuro */
    padding: 0 15px; /* Espaciado horizontal dentro de la leyenda */
    margin-left: 15px; /* Sangría respecto al borde izquierdo */
    border-bottom: none; /* Sin línea debajo por defecto */
    width: auto; /* Ancho automático basado en contenido */
    background-color: #f0f4ff; /* Asegura que corte el borde del fieldset limpiamente */
    box-sizing: border-box;
}

/* Indicador visual para leyendas de grupos requeridos (ej: Áreas de Interés) */
.ceamib-fieldset legend .required-indicator::after {
    content: " *";
    color: #dc3545; /* Rojo */
    font-weight: bold;
    /* font-size: inherit; /* Hereda tamaño de la leyenda */ 
    margin-left: 2px;
}

/* ==========================================================================
   Grupos de Campos, Etiquetas y Leyendas Internas
   ========================================================================== */

.ceamib-form-group {
    margin-bottom: 20px; /* Espacio debajo de cada par etiqueta-campo */
}
/* Eliminar margen inferior del último grupo dentro de un fieldset para mejor espaciado */
.ceamib-fieldset .ceamib-form-group:last-child {
    margin-bottom: 0;
}

.ceamib-form-group label {
    display: block; /* Asegura que ocupe su propia línea */
    margin-bottom: 8px; /* Espacio entre etiqueta y campo */
    font-weight: 500; /* Grosor de fuente semi-negrita */
    color: #333; /* Color oscuro para buena legibilidad */
    font-size: 1.1em; /* Tamaño de fuente relativo */
    cursor: pointer; /* Indica que se puede hacer clic (útil para checkboxes/radios) */
}

/* Indicador visual para etiquetas de campos requeridos */
.ceamib-form-group label.required::after {
    content: " *"; /* Espacio antes del asterisco */
    color: #dc3545; /* Rojo (consistente con la leyenda) */
    font-weight: bold; /* Opcional: hacerlo más destacado */
    margin-left: 2px; /* Espacio pequeño */
    /* font-size: inherit; /* Hereda tamaño de la etiqueta */ 
}

/* Estilo para las descripciones/leyendas dentro de los fieldsets */
.ceamib-form-leyenda {
    font-style: italic;
    color: #777; /* Gris para menor énfasis */
    margin-bottom: 15px;
    font-size: 0.9em;
    line-height: 1.4; /* Mejorar legibilidad de textos más largos */
}

/* Estilo para párrafos de descripción asociados a campos (ej: cupón) */
.ceamib-form-group p.description {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
}

/* ==========================================================================
   Campos de Entrada (Inputs, Textarea, Select - si hubiera)
   ========================================================================== */

.ceamib-form-control {
    width: 100%; /* Ocupar todo el ancho disponible */
    padding: 14px; /* Espacio interno generoso */
    border: 2px solid #a6b1e1; /* Borde azul lavanda */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente legible */
    color: #456990; /* Color de texto azul oscuro */
    background-color: #fff; /* Fondo blanco */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave al enfocar */
    box-sizing: border-box; /* Incluir padding y border en el ancho/alto */
}

/* Estilos al enfocar un campo */
.ceamib-form-control:focus {
    border-color: #5482f1; /* Borde azul más intenso */
    outline: none; /* Quitar el outline por defecto del navegador */
    box-shadow: 0 0 0 3px rgba(84, 130, 241, 0.3); /* Sombra exterior sutil tipo 'glow' */
}

/* Estilo específico para Textarea */
.ceamib-form-group textarea.ceamib-form-control {
    resize: vertical; /* Permitir redimensionar solo verticalmente */
    min-height: 100px; /* Altura mínima */
    /* height: 150px; /* Altura fija inicial (opcional) */
}

/* Estilo para campos con tamaños específicos */
.ceamib-form-control-small { max-width: 100px; } /* Ejemplo: Edad */
.ceamib-form-control-medium { max-width: 250px; } /* Ejemplo: Cupón */

/* Estilo para campos inválidos (detectado por JS via aria-invalid) */
.ceamib-form-control[aria-invalid="true"] {
    border-color: #dc3545; /* Borde rojo */
    background-color: #fef4f4; /* Fondo rosa muy pálido (opcional) */
}
.ceamib-form-control[aria-invalid="true"]:focus {
     box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3); /* Sombra roja al enfocar inválido */
}

/* Estilo para fieldsets inválidos (ej: grupo de checkboxes) */
.ceamib-fieldset[aria-invalid="true"] {
     border-color: #dc3545; /* Borde rojo para el fieldset */
}

/* ==========================================================================
   Valores Fijos (Información del Curso)
   ========================================================================== */

.ceamib-form-value {
    padding: 14px;
    border: 1px solid #d9dee7; /* Borde similar a fieldset */
    border-radius: 8px;
    font-size: 16px;
    background-color: #f8f9fa; /* Fondo gris muy claro para diferenciar */
    color: #333; /* Color de texto estándar */
    margin-top: 8px; /* Espacio respecto a la etiqueta */
    word-wrap: break-word; /* Para nombres largos */
}

/* ==========================================================================
   Checkboxes
   ========================================================================== */

.ceamib-checkbox-group {
    display: flex; /* Permite alinear items */
    flex-direction: column; /* Apila los checkboxes verticalmente */
    gap: 8px; /* Espacio entre checkboxes (alternativa a margin-bottom en label) */
    margin-top: 10px; /* Espacio después del mensaje de error/leyenda */
}

.ceamib-checkbox-label {
    /* display: flex; /* Para alinear checkbox y texto si se quiere más control */
    /* align-items: center; */
    margin-bottom: 0; /* Eliminado si se usa gap en el contenedor */
    font-weight: 400; /* Fuente normal */
    color: #456990; /* Azul oscuro */
    cursor: pointer;
    transition: color 0.2s ease;
    font-size: 1em; /* Ajustar tamaño si es necesario */
}

.ceamib-checkbox-label:hover {
    color: #2c3e50; /* Azul grisáceo oscuro al pasar el ratón */
}

.ceamib-checkbox-label input[type="checkbox"] {
    margin-right: 8px; /* Espacio entre el checkbox y el texto */
    vertical-align: middle; /* Alinear verticalmente con el texto */
    cursor: pointer;
    width: 1.1em; /* Tamaño del checkbox */
    height: 1.1em;
}

/* ==========================================================================
   Botones
   ========================================================================== */

/* Contenedor del botón de envío para centrarlo o alinear */
.ceamib-submit-group {
    text-align: right; /* Alinear botón a la derecha (o center, left) */
    margin-top: 30px; /* Espacio antes del botón */
}

.ceamib-button {
    display: inline-block; /* Comportamiento de bloque pero en línea */
    padding: 14px 24px; /* Relleno interno */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: 600; /* Fuente en negrita */
    text-align: center; /* Centrado de texto */
    text-decoration: none; /* Quitar subrayado */
    cursor: pointer;
    border: none; /* Sin borde por defecto */
    border-radius: 8px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Transición suave para hover */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Sombra sutil */
    line-height: 1.5; /* Altura de línea normal */
}

.ceamib-button-primary {
    background-color: #5482f1; /* Azul primario */
    color: #fff; /* Texto blanco */
}

.ceamib-button-primary:hover,
.ceamib-button-primary:focus {
    background-color: #3a63c7; /* Azul más oscuro al interactuar */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    color: #fff; /* Asegurar que el color de texto no cambie */
    outline: none; /* Quitar outline en foco */
}

/* ==========================================================================
   Mensajes de Alerta y Error
   ========================================================================== */

/* Estilo base para mensajes de alerta (éxito, error general) */
.ceamib-alert {
    padding: 15px 20px;
    margin-bottom: 25px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1em;
    text-align: left;
}

.ceamib-alert-success {
    color: #155724; /* Verde oscuro */
    background-color: #d4edda; /* Verde pálido */
    border-color: #c3e6cb; /* Borde verde */
}

.ceamib-alert-danger {
    color: #721c24; /* Rojo oscuro */
    background-color: #f8d7da; /* Rojo pálido */
    border-color: #f5c6cb; /* Borde rojo */
}

/* Estilo específico para los mensajes de error DEBAJO de los campos */
.ceamib-error-message {
    display: block; /* Ocupar su propia línea */
    margin-top: 8px; /* Espacio sobre el mensaje */
    color: #dc3545; /* Rojo estándar para errores */
    font-size: 0.9em; /* Ligeramente más pequeño que el texto del campo */
    font-weight: 500; /* Semi-negrita para destacar */
    /* background-color: #f8d7da; /* Opcional: Fondo rojo pálido */ 
    /* padding: 5px 8px; /* Opcional: Relleno si se usa fondo */ 
    /* border-radius: 4px; /* Opcional: Redondeo si se usa fondo/borde */ 
    /* text-align: left; /* Alineado a la izquierda normalmente */ 
    /* Quitar el margin-right: 20% que era extraño */
}
/* Estilo para mensajes de error de grupo (ej: checkboxes) */
.ceamib-error-group {
     /* Puede tener estilos ligeramente diferentes si es necesario */
     /* Por ejemplo, un poco más de margen inferior */
     margin-bottom: 10px;
}


/* ==========================================================================
   Estilos para Texto de Lectores de Pantalla (Accesibilidad)
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   Media Queries para Responsividad
   ========================================================================== */

/* --- Estrategia Simplificada de Breakpoints --- */
/* Móviles Pequeños y Medianos (< 768px) */
@media (max-width: 767px) {
    .ceamib-form {
        max-width: 95%; /* Casi todo el ancho */
        padding: 20px;
        margin: 15px auto;
        border-radius: 10px;
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
    }

    .ceamib-fieldset {
        padding: 15px;
    }

    .ceamib-fieldset legend {
        font-size: 1.1em;
        padding: 0 10px;
        margin-left: 10px;
    }

    .ceamib-form-group {
        margin-bottom: 15px;
    }

    .ceamib-form-group label {
        font-size: 1em; /* Ajustar según necesidad */
    }

    .ceamib-form-control,
    .ceamib-form-value {
        padding: 12px;
        font-size: 15px; /* Ligeramente más pequeño */
    }

    .ceamib-button {
        padding: 12px 20px;
        font-size: 15px;
        width: 100%; /* Botón de ancho completo en móviles */
        box-sizing: border-box;
    }
     .ceamib-submit-group {
         text-align: center; /* Centrar botón de ancho completo */
     }

    .ceamib-checkbox-label {
        font-size: 0.95em;
    }
    .ceamib-form-leyenda {
        font-size: 0.85em;
    }
    /* Reducir tamaño de campos específicos si es necesario */
    .ceamib-form-control-small,
    .ceamib-form-control-medium {
        max-width: 100%; /* Permitir que ocupen todo el ancho */
    }
}

/* Tabletas (768px a 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .ceamib-form {
        max-width: 700px; /* Ancho fijo para tabletas */
        padding: 30px;
    }
    /* Restaurar ancho de botón */
     .ceamib-button {
         width: auto;
     }
     .ceamib-submit-group {
         text-align: right; /* Alinear a la derecha de nuevo */
     }
}

/* Escritorio (> 992px) */
/* No se necesita media query específica si los estilos base ya son para escritorio. */
/* Se pueden añadir más breakpoints (ej: > 1200px) si se requieren ajustes finos para pantallas grandes. */

/* Ejemplo Opcional: Pantallas Grandes (> 1200px) */
@media (min-width: 1200px) {
     .ceamib-form {
        max-width: 800px; /* Un poco más de ancho */
     }
     /* Podrían aumentarse paddings o tamaños de fuente si se desea */
}


/* FIN DEL ARCHIVO CSS */



/* Oculta los campos con una transición suave */
#ceamib-new-user-fields {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
    opacity: 1;
    max-height: 500px; /* Un valor suficientemente grande */
}

#ceamib-new-user-fields[style*="display: none"] {
    opacity: 0;
    max-height: 0;
}

/* Estilo para el campo de solo lectura */
#nombre_participante[readonly] {
    background-color: #f0f0f0 !important; /* El !important ayuda a sobreescribir otros estilos */
    cursor: not-allowed;
}

/* Estilo para el mensaje de estado */
#ceamib-user-status-message {
    margin-top: 5px;
    font-size: 0.9em;
}


/* ==========================================================================
   Contenedor y Botón de Visibilidad de Contraseña
   ========================================================================== */

.ceamib-password-wrapper {
    position: relative; /* Crea el contexto para el posicionamiento absoluto del botón */
}

.toggle-password-visibility {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    font-size: 1.2em; /* Aumenta ligeramente el tamaño del icono */
    color: #555; /* Color gris oscuro para el icono */
}