/* ============================================================
   FORM-CASTING.CSS - AJUSTES DE ANCHO, ADJUNTOS Y ANIMACIONES
   ============================================================ */

/* ============================================================
   NUEVO: RESET DE AISLAMIENTO TOTAL (DESBLOQUEO DE CLICS)
   ============================================================ */
#module-casting-form,
.casting-form-container,
#castingForm,
.casting-form {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

/* Contenedor interno del formulario de casting para limitar su ancho y centrarlo */
.casting-container-inner {
    display: block !important;
    position: relative !important;
    width: 100%;
    max-width: 760px; /* Un tercio menos que el escenario (1060px) y no tan angosto como contacto (700px) */
    margin: 0 auto !important;
    padding: 0 10px;
}

/* Reutiliza la estructura de filas y grupos */
.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
    width: 100%;
}

.form-group {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    position: relative;
}

.form-group label {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: #ccc;
    text-transform: uppercase;
}

/* CAMPOS DE CASTING: Borde original de 2px + Sombra interna ampliada y notoria */
.form-group input:not([type="file"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    background-color: #fff !important;
    border: 2px solid #333; /* Devuelto a tus 2px originales */
    color: #000 !important;
    font-size: 1rem;
    border-radius: 8px;
    font-family: 'Segoe UI', sans-serif;
    
    /* NUEVA SOMBRA: Más amplia, difuminada y sutilmente profunda */
    box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.22), 
                inset -1px -1px 5px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   SECCIÓN DE ARCHIVOS ADJUNTOS - SOLUCIÓN DE CASCADA MAESTRA
   ============================================================ */
.file-section-top {
    margin-top: 55px !important;
    margin-bottom: 25px !important;
}

.file-section-top .section-title {
    font-family: 'Special Elite', cursive !important;
    font-size: 1.1rem;
    color: #fff;
    text-transform: none !important; 
}

.file-upload-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
    margin-top: 5px;
}

/* El contenedor principal (La caja blanca) */
.file-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    background-color: #ffffff !important;
    border: 2px solid #333333 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    transition: all 0.25s ease !important;
}

/* El input invisible que captura los clics arriba */
.file-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    background: none !important; /* <--- Agrega esto para disolver cualquier fondo */
    z-index: 20 !important;
    cursor: pointer !important;
}
/* El contenedor visual falso que vive abajo */
.fake-file-button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
    pointer-events: none !important; /* Deja pasar los clics al input */
}

/* El botón naranja que dice Browse... */
.fake-file-button .fake-btn {
    background-color: #FF5A00 !important;
    color: #ffffff !important;
    height: 100% !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-family: 'Segoe UI', sans-serif !important;
    transition: background-color 0.2s ease !important;
}

/* El texto de "No file selected." o nombre de archivo */
.fake-file-button .fake-text {
    color: #000000 !important;
    font-size: 0.85rem !important;
    margin-left: 15px !important;
    font-family: 'Segoe UI', sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 35px !important;
}

/* ============================================================
   REGLAS MAESTRAS DE HOVER (ACCIONAMIENTO ASEGURADO)
   ============================================================ */

/* 1. Destello cian en el borde de la caja blanca al pasar el mouse por la caja o por el input */
.file-wrapper:hover,
.file-input:hover + .fake-file-button {
    border-color: #00F2FF !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3) !important;
}

/* 2. LA REGLA CLAVE: Cuando el mouse toque el input o la caja, el botón muta a coral brillante */
.file-wrapper:hover .fake-btn,
.file-input:hover + .fake-file-button .fake-btn {
    background-color: #FF7324 !important; /* Naranja coral brillante */
}

/* Estado cuando el usuario ya cargó un archivo */
.file-wrapper.has-file {
    border-color: #FF5A00 !important;
}

.file-wrapper.has-file .fake-text {
    font-weight: 600 !important;
}

/* Botón flotante para eliminar archivo seleccionado (X) */
.remove-file {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    background-color: #ff3b30 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 30 !important;   /* Más arriba que el input para poder clickear la X */
    border: 2px solid #000 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.remove-file:hover {
    background-color: #e0241b !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.file-wrapper.has-file .remove-file {
    display: flex !important;
}

/* ============================================================
   NUEVO: COMPORTAMIENTOS VISUALES EXCLUSIVOS DE CASTING
   ============================================================ */

/*/* Contenedor interno del formulario de casting */
.casting-container-inner {
    display: block !important;
    position: relative !important;
    width: 100%;
    max-width: 760px; /* Mantiene su ancho ideal para casting */
    margin: 0 auto !important;
    
    /* COPIADO DE CONTACTO: Colchón de aire idéntico */
    background: #080a0d;
    padding: 50px !important; 
    border: 1px solid #1a1a1a !important;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    
    transition: all 0.4s ease !important; /* Transición suave original */
}

/* COPIADO DE CONTACTO: El resplandor exacto e intenso al pasar el mouse */
.casting-container-inner:hover {
    border-color: rgba(0, 242, 255, 0.6) !important;
    box-shadow: 0 10px 50px rgba(0, 242, 255, 0.25),
                0 0 30px rgba(0, 242, 255, 0.1) !important;
}

/* 2. El clic (:focus) en cualquier campo le activa el borde #00f2ff */
.casting-form .form-group input:not([type="file"]):focus,
.casting-form .form-group textarea:focus,
.casting-form .form-group select:focus {
    border-color: #00f2ff !important;
    outline: none !important; /* Mata el borde azul/negro por defecto del navegador */
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.3) !important; /* Brillo sutil de enfoque */
    transition: border-color 0.2s ease !important;
}

/* ============================================================
   RESPONSIVIDAD Y AJUSTES MÓVILES
   ============================================================ */
@media (max-width: 768px) {
    .casting-container-inner {
        padding: 0 15px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 10px;
    }
    
    .file-upload-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .casting-form .submit-btn {
        font-size: 1.8rem;
        padding: 15px;
        margin-top: 30px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}