/* ===================================================================
 * CENSO REFUGIADOS — Estilos públicos (basados en sistema RUMPA)
 * ================================================================ */

.cd-app {
    max-width: 100%;
    margin: 2rem 0;
}
.cd-app-titulo { font-weight: 700; color: #2c2c2c; }

.cd-form-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    padding: 18px 25px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}
.cd-form-body {
    background-color: #f4f6f9;
    border: 1px solid #dce0e5;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 25px;
}

/* Progress steps */
.cd-progress-steps {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.cd-progress-step {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    border: 3px solid #dee2e6;
    color: #adb5bd;
    background: #fff;
    transition: all 0.3s ease;
}
.cd-progress-step.active {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #e8f4f9;
}
.cd-progress-step.done {
    border-color: #28B62C;
    color: #fff;
    background: #28B62C;
}

/* Pasos (secciones del wizard) */
.cd-paso { display: none; }
.cd-paso.active-step { display: block; }

/* Section cards */
.cd-section-card {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.cd-section-card:hover { box-shadow: 0 4px 16px rgba(13,110,253,0.08); }

.cd-section-card-header {
    background: #f8fafb;
    border-bottom: 2px solid #e8ecf0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cd-section-step {
    width: 32px; height: 32px;
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700;
    flex-shrink: 0;
}
.cd-section-card-title {
    color: #0d6efd;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cd-section-card-title i { font-size: 1.1rem; opacity: 0.8; }
.cd-section-card-body { padding: 22px 20px; }

/* Form controls dentro de form-body */
.cd-form-body .form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: #495057;
    margin-bottom: 6px;
}
.cd-form-body .input-group { flex-wrap: nowrap; }
.cd-form-body .input-group-text {
    background-color: #f8f9fa;
    border-right: none;
    color: #0d6efd;
}
.cd-form-body .form-control,
.cd-form-body .form-select {
    border-left: none;
}
.cd-form-body .form-control:focus,
.cd-form-body .form-select:focus {
    box-shadow: none;
    border-color: #ced4da;
}
.cd-form-body .input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2);
    border-radius: 0.375rem;
}
.cd-form-body .input-group:focus-within .input-group-text,
.cd-form-body .input-group:focus-within .form-control,
.cd-form-body .input-group:focus-within .form-select {
    border-color: #0d6efd;
}

/* Helper text */
.cd-form-body .helper-text,
#cd-ubicacion-estado {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}
.cd-form-body .form-label + .helper-text {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Condicional (mostrar/ocultar) */
.cd-condicional { display: none; }

/* Captcha box */
.cd-captcha-box {
    background-color: #f8fafb;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
}

/* Navegación inferior */
.cd-navegacion .cd-btn { min-width: 130px; }

/* Success screen */
#cd-pantalla-exito i { color: #28B62C; }

/* Mapa Leaflet dentro del formulario */
.cd-form-body .leaflet-container { z-index: 0; }
.cd-form-body .leaflet-pane { z-index: 1; }
.cd-form-body .leaflet-top,
.cd-form-body .leaflet-bottom { z-index: 2; }

/* Tabla de familiares */
#cd-familiares-table td input,
#cd-familiares-table td select {
    min-width: 90px;
}
#cd-familiares-table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6c757d;
    border-bottom: 2px solid #dee2e6;
}

/* Mensaje del formulario */
#cd-form-message .alert {
    margin-top: 1rem;
    border-radius: 8px;
}

/* Stats públicas */
.cd-stats-wrapper .card {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.08);
}
.cd-stats-wrapper .card-title { font-weight: 700; }

/* Cards de enlaces - hover effect */
.cd-stats-wrapper a.text-decoration-none .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cd-stats-wrapper a.text-decoration-none .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Mapa público */
.cd-mapa-wrapper {
    max-width: 100%;
    margin: 2rem 0;
}
#cd-mapa-albergues { border-radius: 8px; }

/* Cluster */
.cd-cluster-wrapper { background: transparent !important; }
.cd-cluster {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cd-cluster-small { width: 36px; height: 36px; background: #0d6efd; }
.cd-cluster-medium { width: 44px; height: 44px; background: #0a58ca; }
.cd-cluster-large { width: 52px; height: 52px; background: #084298; }

/* Marker */
.cd-marker-icon { background: transparent !important; border: none !important; }
.cd-marker-pin {
    width: 32px; height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.cd-marker-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 0.9rem;
}
.cd-popup { min-width: 200px; font-size: 0.85rem; }
.cd-popup table td { padding: 1px 4px; }
.cd-popup .table-borderless td { border: none; }
.cd-leyenda { font-size: 0.8rem; color: #666; }

/* Responsive - Tablets */
@media (max-width: 768px) {
    .cd-app { padding: 0; }
    .cd-form-header { padding: 14px 20px; font-size: 1rem; }
    .cd-form-body { padding: 18px; }
    .cd-section-card-body { padding: 18px; }
    .cd-mapa-wrapper { padding: 0 12px; }
    #cd-mapa-albergues { height: 400px; }
    .cd-mapa-wrapper .row.g-2 { flex-direction: column; }
    .cd-mapa-wrapper .col-auto { width: 100%; }
    .cd-mapa-wrapper .col-auto select { width: 100%; }
    .cd-stats-wrapper .card-body { padding: 1rem; }
}

/* Responsive - Móviles pequeños */
@media (max-width: 575px) {
    .cd-app { padding: 0; }
    .cd-app-titulo { font-size: 1.25rem; }

    .cd-form-header {
        padding: 12px 14px;
        font-size: 0.9rem;
        flex-wrap: wrap;
        gap: 6px;
    }
    .cd-form-header .fs-5 { font-size: 0.95rem !important; }

    .cd-form-body { padding: 12px; }

    /* Input groups: permitir wrapping en móvil */
    .cd-form-body .input-group { flex-wrap: wrap; }
    .cd-form-body .input-group-text {
        border-radius: 0.375rem 0.375rem 0 0;
        width: 100%;
        border-right: 1px solid #ced4da;
        border-bottom: none;
        justify-content: center;
    }
    .cd-form-body .form-control,
    .cd-form-body .form-select {
        border-left: 1px solid #ced4da;
        border-radius: 0 0 0.375rem 0.375rem;
    }

    .cd-section-card-header {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .cd-section-card-header small.ms-auto {
        margin-left: 0 !important;
        width: 100%;
    }
    .cd-section-card-body { padding: 12px; }

    /* Labels más grandes para touch */
    .cd-form-body .form-label { font-size: 0.82rem; }

    /* Botones de navegación a full-width */
    .cd-navegacion {
        flex-direction: column;
        gap: 0.5rem;
    }
    .cd-navegacion .cd-btn {
        width: 100%;
        min-width: 0;
    }

    /* Progress steps más pequeños */
    .cd-progress-steps { gap: 0.15rem; }
    .cd-progress-step {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    /* Tabla de familiares */
    #cd-familiares-table td input,
    #cd-familiares-table td select {
        min-width: 70px;
        font-size: 0.8rem;
    }
    #cd-familiares-table thead th {
        font-size: 0.65rem;
        white-space: nowrap;
    }

    /* Checkboxes inline */
    .cd-form-body .form-check-inline {
        margin-right: 0.3rem;
        margin-bottom: 0.25rem;
    }
    .cd-form-body .form-check-inline label { font-size: 0.8rem; }

    /* Mapa del formulario */
    #cd-map { height: 220px !important; }

    /* Captcha */
    .cd-captcha-box .input-group.mx-auto { max-width: 100% !important; }

    /* Stats - KPIs */
    .cd-stats-wrapper .card-body { padding: 0.75rem; }
    .cd-stats-wrapper .card-title { font-size: 1.25rem; }
    .cd-stats-wrapper .card-text { font-size: 0.7rem; }

    /* Mapa público */
    #cd-mapa-albergues { height: 320px; }
    .cd-mapa-wrapper { padding: 0 8px; }
    .cd-mapa-wrapper .card-body { padding: 12px; }
    .cd-mapa-wrapper .row.g-2 { flex-direction: column; }
    .cd-mapa-wrapper .col-auto {
        width: 100%;
        padding: 0;
    }
    .cd-mapa-wrapper .col-auto select { width: 100%; }
    .cd-mapa-wrapper .col-auto.ms-auto {
        margin-left: 0 !important;
        text-align: center;
        margin-top: 6px;
    }

    /* Chips */
    .cd-chip { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
}