/* ===========================================================================
   Validacion y estados de envio
   Libro de Reclamaciones Virtual - CMP

   El CSS heredado del PHP (main.css, util.css) no trae NINGUNA regla para los
   mensajes de validacion: el original resolvia los errores en el servidor y
   repintaba la pagina entera con un texto suelto. Blazor, en cambio, emite
   <div class="validation-message"> y marca los campos con la clase "invalid",
   pero sin estilos quedan en negro y pasan desapercibidos.

   Este archivo es ADITIVO: no modifica ninguna regla heredada, solo cubre las
   clases que el original no conocia.
   =========================================================================== */

:root {
    --lrv-error: #c0392b;
    --lrv-error-fondo: #fdecea;
    --lrv-error-borde: #e74c3c;
}

/* ---------------------------------------------------------------------------
   1. Mensaje de error bajo cada campo  (<ValidationMessage For="..." />)
   --------------------------------------------------------------------------- */

.validation-message {
    display: block;
    margin: 6px 0 2px;
    padding: 4px 10px;
    background-color: var(--lrv-error-fondo);
    border-left: 3px solid var(--lrv-error-borde);
    color: var(--lrv-error);
    font-family: Montserrat-Regular, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 2px;
}

/* El icono de aviso antepuesto hace que el error se reconozca de un vistazo,
   sin depender solo del color (accesibilidad: daltonismo). */
.validation-message::before {
    content: "\26A0";   /* triangulo de advertencia */
    margin-right: 6px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   2. Resumen de errores  (<ValidationSummary />)
   --------------------------------------------------------------------------- */

.validation-errors {
    margin: 0 0 18px;
    padding: 12px 16px 12px 34px;
    background-color: var(--lrv-error-fondo);
    border: 1px solid var(--lrv-error-borde);
    border-left-width: 4px;
    border-radius: 3px;
    color: var(--lrv-error);
    font-family: Montserrat-Regular, sans-serif;
    font-size: 13.5px;
    list-style: disc;
}

.validation-errors li {
    margin-bottom: 4px;
}

.validation-errors li:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   3. Campos invalidos

   Blazor anade la clase "invalid" al input cuando su campo tiene mensajes de
   validacion, y "modified" cuando el usuario lo toco. Se marcan los dos casos
   del formulario: los input100 heredados y los form-control de Bootstrap.
   --------------------------------------------------------------------------- */

.input100.invalid,
.form-control.invalid,
input.invalid,
select.invalid,
textarea.invalid {
    border: 1px solid var(--lrv-error-borde) !important;
    background-color: #fffafa;
}

.input100.invalid:focus,
.form-control.invalid:focus,
input.invalid:focus,
select.invalid:focus,
textarea.invalid:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, .25);
}

/* El contenedor heredado que envuelve cada campo, para que el bloque entero
   se lea como un campo con problema. */
.wrap-input100:has(.invalid) .label-input100 {
    color: var(--lrv-error);
}

/* ---------------------------------------------------------------------------
   4. Bloque de errores del propio formulario

   Son los mensajes que produce el servidor y no una DataAnnotation: correos que
   no coinciden, adjunto rechazado, limite de intentos. Antes se mostraban con
   label-input200, que es gris y no se distingue del texto de ayuda.
   --------------------------------------------------------------------------- */

.alerta-error {
    margin: 0 0 20px;
    padding: 14px 16px;
    background-color: var(--lrv-error-fondo);
    border: 1px solid var(--lrv-error-borde);
    border-left-width: 4px;
    border-radius: 3px;
}

.alerta-error-titulo {
    display: block;
    margin-bottom: 6px;
    color: var(--lrv-error);
    font-family: Montserrat-Bold, sans-serif;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.alerta-error-item {
    display: block;
    margin-bottom: 4px;
    color: var(--lrv-error);
    font-family: Montserrat-Regular, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.alerta-error-item:last-child {
    margin-bottom: 0;
}

.alerta-error-item::before {
    content: "\26A0";
    margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   5. Boton deshabilitado durante el envio

   El boton YA llevaba disabled="@_enviando", pero el CSS heredado no define
   ningun estado :disabled: conservaba el color y el efecto hover, de modo que
   seguia PARECIENDO pulsable aunque el navegador ya ignorara los clics. El
   usuario volvia a pulsar creyendo que no habia pasado nada.

   pointer-events: none ademas elimina cualquier clic sobre el elemento, incluso
   si algo anulara el atributo disabled.
   --------------------------------------------------------------------------- */

.contact100-form-btn:disabled,
.contact100-form-btn[disabled] {
    background-color: #9aa5ad !important;
    cursor: not-allowed;
    opacity: .75;
    pointer-events: none;
}

.contact100-form-btn:disabled:hover,
.contact100-form-btn[disabled]:hover {
    background-color: #9aa5ad !important;
}

/* ---------------------------------------------------------------------------
   6. Aviso de operacion en curso

   Para las acciones que tardan de verdad: Atender cierra el expediente y envia
   el correo al reclamante, y el envio contra Office 365 ronda los 6 segundos.
   Sin ningun aviso la pantalla parece colgada y el operador vuelve a pulsar.
   --------------------------------------------------------------------------- */

.aviso-proceso {
    margin: 0 0 16px;
    padding: 12px 16px;
    background-color: #eaf3fb;
    border: 1px solid #5b9bd5;
    border-left-width: 4px;
    border-radius: 3px;
    color: #1f4e79;
    font-family: Montserrat-Regular, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
}

.aviso-proceso::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 9px;
    border: 2px solid rgba(31, 78, 121, .25);
    border-top-color: #1f4e79;
    border-radius: 50%;
    vertical-align: -1px;
    animation: lrv-giro .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-proceso::before { animation: none; }
}

/* Indicador de actividad: deja claro que el envio esta en curso y que la espera
   es normal. Sin esto, un envio con adjunto de 25 MB parece colgado. */
.contact100-form-btn:disabled span::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 10px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -1px;
    animation: lrv-giro .7s linear infinite;
}

@keyframes lrv-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .contact100-form-btn:disabled span::after {
        animation: none;
    }
}