/**
 * ARCHIVO     : registro_ux_fixes.css
 * UBICACIÓN   : assets/css/registro_ux_fixes.css
 * CARGAR      : En head_html.php después de registro_styles.css
 *               (solo cuando $archivo_actual === 'registro.php')
 *
 * CORRIGE:
 *   1. Botón "Enviar" no visible en móvil (position:sticky roto por overflow:hidden)
 *   2. Errores que se muestran vacíos (listar uno por línea con ícono)
 *   3. Zona de upload — feedback visual cuando el archivo está seleccionado
 *
 * AUTOR : ERenovar SAS ® — 2026-05-19
 */


/* Eliminar overflow:hidden del form-col — causa del bug sticky */
@media (min-width: 992px) {
    .rg-form-col {
        overflow: visible !important;
        /* Mantener border-radius con clip-path — no necesita overflow:hidden */
        border-radius: 14px;
        /* La sombra y el borde siguen funcionando */
        box-shadow: 0 4px 28px rgba(0,0,0,.09);
    }
}

/* Botón fijo en la parte inferior en móvil/tablet */
@media (max-width: 991.98px) {
    .rg-submit-wrap {
        position: static !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 2px solid #ff6600 !important;
        padding: 1rem !important;
        box-shadow: none !important;
    }

    /* Sin padding extra — el botón ya no es fijo */
    #formulario-registro form {
        padding-bottom: 0 !important;
    }

    #btnEnviar {
        width: 100% !important;
        font-size: 1rem !important;
        min-height: 52px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 2 — Bloque de errores vacíos
   ══════════════════════════════════════════════════════════════════
   CAUSA: t() devuelve strings con <strong> dentro.
          h($err) los escapa → &lt;strong&gt; → texto invisible
          en algunos browsers porque el contenido parece HTML mal formado.
   CORRECCIÓN CSS: Hacer cada error legible aunque el HTML esté escapado.
   CORRECCIÓN PHP: ver registro_errores_patch.php — cambiar h($err) por $err
   ══════════════════════════════════════════════════════════════════ */

#bloqueErrores {
    border-left: 4px solid #dc3545;
    border-radius: 0 8px 8px 0 !important;
    background: #fff5f5 !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.25rem;
    /* Asegurar que se ve sobre el sticky button */
    position: relative;
    z-index: 10;
}

#bloqueErrores strong {
    color: #842029;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

#bloqueErrores ul {
    margin-top: .75rem !important;
    padding-left: 0 !important;
    list-style: none !important;
}

#bloqueErrores ul li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(220,53,69,.1);
    color: #6b1e24;
    font-size: .9rem;
    line-height: 1.5;
}

#bloqueErrores ul li:last-child {
    border-bottom: none;
}

/* Ícono rojo automático antes de cada error */
#bloqueErrores ul li::before {
    content: '●';
    color: #dc3545;
    font-size: .6rem;
    margin-top: .35rem;
    flex-shrink: 0;
}

/* Scroll automático al bloque de errores en móvil */
@media (max-width: 991.98px) {
    #bloqueErrores {
        scroll-margin-top: 80px; /* altura del navbar sticky */
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 3 — Zonas de upload: feedback visual mejorado
   ══════════════════════════════════════════════════════════════════
   Cuando el usuario seleccionó un archivo y hay un error de otro
   campo, la zona debe mostrar claramente que el archivo YA fue
   seleccionado (aunque no se conserve entre POST, el JS puede
   mostrar el nombre del último archivo seleccionado).
   ══════════════════════════════════════════════════════════════════ */

/* Zona con archivo seleccionado — feedback verde */
.upload-zona.has-file {
    border-color: #28a745 !important;
    background: #f0fdf4 !important;
}

.upload-zona.has-file .upload-icon {
    color: #28a745 !important;
}

/* Zona requerida sin archivo tras intento de submit — feedback rojo */
.upload-zona.required-error {
    border-color: #dc3545 !important;
    background: #fff5f5 !important;
    animation: shakeZona .4s ease;
}

@keyframes shakeZona {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-6px); }
    75%       { transform: translateX(6px); }
}

.upload-zona.required-error .upload-icon {
    color: #dc3545 !important;
}

/* Badge de "archivo seleccionado previamente" */
.upload-zona .upload-prev-badge {
    display: none;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 6px;
    padding: .25rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    margin-top: .3rem;
    align-items: center;
    gap: .3rem;
}

.upload-zona.has-file .upload-prev-badge {
    display: inline-flex;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 4 — Indicador de progreso del formulario más visible
   ══════════════════════════════════════════════════════════════════ */

/* Paso con error (JS lo agrega después de validación) */
.rg-step.con-error .rg-step-num {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.rg-step.con-error .rg-step-lbl {
    color: #dc3545 !important;
}

/* Paso actual más prominente */
.rg-step.activo .rg-step-num {
    box-shadow: 0 0 0 3px rgba(255,102,0,.25);
}

/* ══════════════════════════════════════════════════════════════════
   FIN — registro_ux_fixes.css v1.0
   ══════════════════════════════════════════════════════════════════ */