/* ==========================================================================
   Biblioteca CSS Personalizada para Formularios - SEPI Theme
   Versión: 1.0
   Prefijo de clases: sepif-
   ========================================================================== */

/* --- Contenedor General del Formulario --- */
.sepif-form-container {
    background-color: var(--bs-white, #fff); /* Fondo blanco por defecto */
    padding: 2rem;
    border-radius: var(--bs-border-radius-lg, 0.5rem); /* Bordes más redondeados */
    box-shadow: 0 0.5rem 1.5rem rgba(var(--bs-black-rgb), 0.1); /* Sombra sutil */
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.175));
}

/* --- Grupo de Campo (Label + Control + Feedback) --- */
.sepif-form-group {
    margin-bottom: 1.5rem; /* Espacio entre grupos de campos */
}

/* --- Etiquetas (Labels) --- */
.sepif-label {
    display: block; /* Asegurar que ocupe su propia línea */
    font-weight: 600; /* Ligeramente más bold */
    color: var(--bs-gray-700, #495057); /* Un gris oscuro para buena legibilidad */
    margin-bottom: 0.5rem; /* Espacio debajo del label */
    font-size: 0.9rem;
}
.sepif-label .text-danger { /* Para el asterisco de requerido */
    font-weight: bold;
}

/* --- Controles de Formulario (Inputs, Selects, Textareas) --- */
/* Esta clase se añadiría ADEMÁS de .form-control o .form-select de Bootstrap */
.sepif-control {
    border-width: 1px; /* Grosor del borde */
    border-color: var(--bs-border-color, #ced4da); /* Color de borde por defecto */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.95rem; /* Ajustar tamaño de fuente si es necesario */
    padding: 0.5rem 0.85rem; /* Padding interno */
}
.sepif-control:focus {
    border-color: var(--bs-primary); /* Color primario SEPI al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Anillo de foco primario SEPI */
}

/* --- Estilos de Validación para .sepif-control (Complementan a Bootstrap) --- */
.sepif-control.is-valid {
    border-color: var(--bs-form-valid-border-color, var(--bs-success));
    /* Bootstrap ya añade el icono de fondo y el box-shadow en foco */
}
.sepif-control.is-invalid {
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
    /* Bootstrap ya añade el icono de fondo y el box-shadow en foco */
}

/* --- Input Groups Personalizados (si se necesita un wrapper extra) --- */
/* Si usas .input-group de Bootstrap, los estilos de .sepif-control aplicados al .form-control dentro deberían funcionar.
   Esta clase .sepif-input-group sería para un div que envuelva al .input-group si necesitas estilos adicionales en ese contenedor.
   Por ahora, nos enfocaremos en estilizar los componentes internos. */

/* Ajustes para input-group-text cuando se usa con .sepif-control */
.input-group > .sepif-control + .input-group-text,
.input-group > .input-group-text + .sepif-control {
    /* Asegurar que la altura coincida */
    height: calc(1.5em + 1rem + 2px); /* (font-size * line-height) + (padding-y * 2) + (border-width * 2) */
}

/* Colores de los iconos en input-group-text según validación del .sepif-control hermano */
.input-group:has(.sepif-control.is-valid) .input-group-text {
    color: var(--bs-form-valid-color, var(--bs-success));
    border-color: var(--bs-form-valid-border-color, var(--bs-success));
}
.input-group:has(.sepif-control.is-invalid) .input-group-text {
    color: var(--bs-form-invalid-color, var(--bs-danger));
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
}

/* --- Mensajes de Feedback (Error/Éxito/Ayuda) --- */
/* Bootstrap ya tiene .valid-feedback, .invalid-feedback, .form-text */
/* Esta clase .sepif-feedback podría usarse si necesitas un estilo uniforme para todos
   o si creas un div de mensaje personalizado. */
.sepif-feedback {
    display: block; /* Para que ocupe su línea */
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.8rem; /* Un poco más pequeño */
}
.sepif-feedback.text-danger { /* Para errores */
    color: var(--bs-danger) !important;
}
.sepif-feedback.text-success { /* Para mensajes de éxito */
    color: var(--bs-success) !important;
}
.sepif-feedback.text-muted { /* Para texto de ayuda */
    color: var(--bs-gray-600, #6c757d) !important;
}

/* --- Botones de Formulario Personalizados --- */
/* Botón de Envío Principal */
.sepif-btn-submit {
    /* Hereda de .btn y .btn-outline-success (o el color que elijas) */
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    /* Puedes añadir más estilos específicos si es necesario */
}
/* Ejemplo de cómo se usaría en HTML:
   <button type="submit" class="btn btn-outline-success sepif-btn-submit">Guardar</button>
*/

/* Botón Secundario (Cancelar, Volver) */
.sepif-btn-secondary {
    /* Hereda de .btn y .btn-outline-secondary */
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
}
/* Ejemplo de cómo se usaría en HTML:
   <a href="#" class="btn btn-outline-secondary sepif-btn-secondary">Cancelar</a>
*/

/* --- Estilos para el Ojo de Contraseña (Integración con la nueva estructura) --- */
/* Asumiendo que el botón del ojo tiene la clase 'password-toggle' y está dentro de un .input-group */
.input-group > button.password-toggle.sepif-control-addon { /* Nueva clase para el addon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-left: none;
    padding: 0.5rem 0.85rem; /* Coincidir con .sepif-control padding */
    height: calc(0.95rem * 1.5 + 1rem + 2px); /* (font-size * line-height) + (padding-y * 2) + (border-width * 2) */
    line-height: 1.5;
    color: white !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-form-control-border-radius, var(--bs-border-radius));
    border-bottom-right-radius: var(--bs-form-control-border-radius, var(--bs-border-radius));
    cursor: pointer;
    outline: 0;
}
.input-group > button.password-toggle.sepif-control-addon:focus {
    z-index: 5;
}
.input-group > button.password-toggle.sepif-control-addon.eye-hidden {
    background-color: rgb(19, 54, 2); /* Verde oscuro SEPI */
}
.input-group > button.password-toggle.sepif-control-addon.eye-hidden:hover {
    background-color: rgb(32, 87, 5);
}
.input-group > button.password-toggle.sepif-control-addon.eye-hidden:focus {
    border-color: rgb(32, 87, 5);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35); /* Foco verde sutil */
}
.input-group > button.password-toggle.sepif-control-addon.eye-visible {
    background-color: rgb(194, 23, 23); /* Rojo SEPI */
}
.input-group > button.password-toggle.sepif-control-addon.eye-visible:hover {
    background-color: rgb(214, 7, 7);
}
.input-group > button.password-toggle.sepif-control-addon.eye-visible:focus {
    border-color: rgb(214, 7, 7);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.35); /* Foco rojo sutil */
}
.input-group > button.password-toggle.sepif-control-addon i {
   color: white;
   font-size: 0.9em;
}

/* Validación para el addon del ojo */ 
.input-group:has(.sepif-control.is-invalid) > button.password-toggle.sepif-control-addon {
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
}
.input-group:has(.sepif-control.is-valid) > button.password-toggle.sepif-control-addon {
    border-color: var(--bs-form-valid-border-color, var(--bs-success));
}

/* Cuando el validador añade .is-valid/.is-invalid al contenedor .choices */
.choices.is-valid > .choices__inner {
    border-color: var(--bs-form-valid-border-color, var(--bs-success)) !important; /* Forzar con !important si es necesario */
}
.choices.is-valid > .choices__inner:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25) !important;
}

.choices.is-invalid > .choices__inner {
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger)) !important;
}
.choices.is-invalid > .choices__inner:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25) !important;
}