/* ===============================================
   PROCESSING.CSS - Estilos para el procesamiento de archivos
   =============================================== */

/* ===== SECCIÓN DE PROCESAMIENTO ===== */
.processing-section {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin: 2rem 0;
    overflow: hidden;
    position: relative;
}

.processing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% 100%;
    animation: processingGlow 3s ease-in-out infinite;
}

@keyframes processingGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stat-item {
    background: white;
    border: 2px solid #f1f3f4;
    border-radius: var(--border-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    transition: all 0.4s ease;
}

.stat-item:hover::before {
    left: 100%;
}

.stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-label {
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.processing-section .card-body {
    padding: 2.5rem;
}

.processing-section .card-header-custom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: headerGradient 4s ease-in-out infinite;
    padding: 2rem 2.5rem;
}

.processing-section .card-header-custom h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.processing-section .card-title-icon {
    font-size: 1.75rem;
    margin-right: 0.75rem;
    /* Sin rotación: hacía girar también el icono de la cabecera de la tabla y
       despistaba. El engranaje del procesamiento gira por su propia clase fa-spin. */
}

@keyframes headerGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes processingRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== BARRA DE PROGRESO ===== */
.progress-modern {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
    margin: 1rem 0;
    position: relative;
}

/* Sin patrón animado: distrae. */
.progress-modern::before {
    display: none;
}

.progress-bar-modern {
    background: #667eea;
    height: 100%;
    transition: width 0.5s ease;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Sin shimmer: era el efecto que seguía corriendo tras acabar y robaba la atención. */
.progress-bar-modern::after {
    display: none;
}

.progress-modern .text-center {
    margin-top: 1rem;
    position: relative;
}

#progressPercent {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1rem;
}

#progressText {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== TABLA DE RESULTADOS ===== */
.table-responsive-custom {
    max-height: 600px;
    overflow-y: auto;
    border-radius: var(--border-radius);
    border: 2px solid var(--border-color);
}

.table-modern {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.table-modern thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    padding: 1rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-modern tbody tr {
    transition: var(--transition);
}

.table-modern tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
    transform: scale(1.01);
}

.table-modern tbody td {
    padding: 0.75rem;
    border-top: 1px solid #f1f3f4;
    vertical-align: middle;
}

.distance-badge {
    background: var(--success-gradient);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

/* ===== SECCIÓN DE DESCARGA ===== */
.download-section {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin: 2rem 0;
    border: 2px solid var(--success-color);
    display: none;
}



/* ===== NOTAS DE LIMITACIÓN ===== */
.limitation-note {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.limitation-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ffc107, #ffb300, #ffc107);
    background-size: 200% 100%;
    animation: limitationGlow 2s ease-in-out infinite;
}

@keyframes limitationGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.limitation-note i {
    color: #856404;
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.limitation-note strong {
    color: #856404;
}

/* ===== ESTILOS ESPECÍFICOS DE INDEX ===== */
.processing-info-compact {
    text-align: center;
    margin-top: 1rem;
}

.limitation-note-compact {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--focus-color);
    margin: 0.75rem 0;
}

.credit-info-compact {
    margin-top: 0.75rem;
}

/* ===== PROGRESO HORIZONTAL ===== */
.progress-container-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0;
    width: 100%;
    gap: 1rem;
}

.progress-container-horizontal .progress-modern {
    width: calc(60% - 0.5rem);
    margin: 0;
    flex-shrink: 0;
}

.progress-info-right {
    width: calc(40% - 0.5rem);
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

.progress-info-right #progressPercent {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--focus-color);
    margin-right: 0.5rem;
}

.progress-info-right #progressText {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: inline;
    margin-left: 0 !important;
}

/* ===== SECCIÓN DE DESCARGA DEMO ===== */
/* La caja de descarga ya no anida otra card: el acento verde va en la propia
   sección (que ahora es card-modern, hermana de la tabla). */
.card-modern.demo-download-section {
    border: 2px solid #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

/* Animación hover removida para evitar distracción */

.demo-download-section h5 {
    font-weight: 700;
    font-size: 1.2rem;
}

.demo-download-section p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.demo-download-section .btn-success {
    background: var(--success-gradient);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-download-section .btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4);
}

/* ===== RESPONSIVE PARA DEMO DOWNLOAD ===== */
@media (max-width: 768px) {
    .demo-download-section h5 {
        font-size: 1.1rem;
    }
    
    .demo-download-section p {
        font-size: 0.9rem;
    }
    
    .demo-download-section .btn-success {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* ===== RESPONSIVE PARA PROCESAMIENTO ===== */
@media (max-width: 768px) {
    .stat-item {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .processing-section .card-body {
        padding: 1.5rem;
    }

    .processing-section .card-header-custom {
        padding: 1.5rem 1.5rem;
    }

    .processing-section .card-header-custom h2 {
        font-size: 1.25rem;
    }

    .processing-section .card-title-icon {
        font-size: 1.5rem;
    }

    .progress-modern {
        height: 8px;
        margin: 1rem 0;
    }

    #progressPercent {
        font-size: 1.25rem;
    }

    .limitation-note {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .table-responsive-custom {
        max-height: 400px;
        font-size: 0.8rem;
    }
    
    .table-modern thead th,
    .table-modern tbody td {
        padding: 0.5rem 0.25rem;
    }
    
    /* CTA responsive movido a layout.css */

    .progress-container-horizontal {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    /* En móvil, barra y texto a ancho completo, apilados (no 60%/40%). */
    .progress-container-horizontal .progress-modern {
        width: 100%;
    }

    .progress-info-right {
        width: 100%;
        text-align: center;
        white-space: normal;       /* el texto largo de progreso puede partirse */
        padding-left: 0;
        min-width: auto;
    }

    .progress-info-right #progressText {
        display: inline;
        margin-top: 0;
        margin-left: 0.5rem !important;
    }
}

/* ===== DOWNLOAD OPTIONS SIMPLE ===== */
.download-options .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 12px !important;
}

.download-options .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.download-options .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
}

.download-options .btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: white;
}

.download-options .btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    color: white;
}

/* ===== RESPONSIVE PARA DOWNLOAD OPTIONS ===== */
@media (max-width: 768px) {
    .download-options {
        flex-direction: column !important;
        align-items: center;
    }
    
    .download-options .btn {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.5rem;
    }
    
    .download-options .btn:last-child {
        margin-bottom: 0;
    }
}

/* Enlace "Cargar el excel oficial del [año]" bajo el input de archivo. Solo se
   muestra si el admin ha subido un Excel oficial (oficial-hint.js quita .hidden). */
.oficial-hint {
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.3;
}
.oficial-hint a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.oficial-hint a:hover { text-decoration: underline; }
/* En DESKTOP la fila usa align-items-end y el selector de localidad reserva una
   2ª línea; para que el enlace quede pegado a la zona de subida (y no descuadre
   la fila) lo anclamos justo bajo ella con position:absolute. En MÓVIL va en
   flujo normal, bajo el input. */
@media (min-width: 768px) {
    #fileColumn { position: relative; }
    #fileColumn .oficial-hint {
        position: absolute;
        top: 100%;
        left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        margin-top: .2rem;
    }
}

/* Selector de localidad (process-centers): en DESKTOP cae a una 2ª línea bajo el CP
   (order-md-4) en su propia columna, así no desplaza el upload ni el botón al
   aparecer. Reservamos algo de altura para que esa 2ª línea no "salte". En MÓVIL
   apila justo tras el CP, sin reservar hueco si está oculto. */
@media (min-width: 768px) {
    .municipio-slot {
        min-height: 2.4rem;
    }
}