/* EL CONTENEDOR PRINCIPAL (La Tarjeta Blanca) */
    .form-section {
        background-color: #ffffff; /* Fondo blanco */
        border-radius: 15px; /* Bordes redondeados */
        padding: 35px 30px; /* Espacio interno para que nada choque con los bordes */
        margin: 20px auto; /* Centrado en la pantalla */
        max-width: 850px; /* Ancho máximo en PC */
        width: 92%; /* En celulares ocupará el 92% dejando un pequeño margen a los lados */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    }

    /* TÍTULOS OSCUROS (Para que resalten en el fondo blanco) */
    .form-title {
        color: #1e3c72 !important; /* Azul oscuro */
        font-size: 1.8rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 5px;
    }

    .form-subtitle {
        color: #475569 !important; /* Gris oscuro */
        text-align: center;
        margin-bottom: 25px;
        font-size: 0.95rem;
    }

    /* LA ALERTA (Para que no desborde) */
    .alert-info {
        background-color: #f0f9ff;
        color: #0369a1;
        padding: 15px;
        border-radius: 8px;
        border-left: 5px solid #0284c7;
        margin-bottom: 25px;
        width: 100%;
        box-sizing: border-box; /* Evita que el padding rompa el ancho */
    }

    /* FILAS RESPONSIVAS */
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    /* INPUTS */
    .form-control, .form-select {
        width: 100%;
        padding: 12px 15px;
        border: 1.5px solid #cbd5e1;
        border-radius: 8px;
        background-color: #f8fafc;
        color: #334155;
        box-sizing: border-box;
    }

    .form-control:focus {
        border-color: #1e3c72;
        box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
        outline: none;
    }

    /* ETIQUETAS OSCURAS */
    .form-label, .form-label-hijo {
        color: #1e3c72;
        font-weight: 700;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 8px;
    }

    /* BOTONES (Evitar que ocupen todo el ancho) */
    .btn-add-dynamic {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px auto; /* Lo centra horizontalmente */
        width: fit-content; /* El botón medirá lo mismo que su texto */
        padding: 10px 25px;
        background-color: #f8fafc;
        border: 2px dashed #1e3c72;
        color: #1e3c72;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-add-dynamic:hover {
        background-color: #e2e8f0;
    }

    .button-group {
        display: flex;
        justify-content: center; /* Centra los botones al final */
        gap: 20px;
        margin-top: 35px;
        flex-wrap: wrap;
    }

    .btn-submit, .btn-reset {
        width: fit-content;
        min-width: 180px;
        padding: 12px 30px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .btn-submit {
        background-color: #1e3c72;
        color: white;
        border: none;
    }

    .btn-reset {
        background-color: white;
        color: #dc2626;
        border: 2px solid #dc2626;
    }

    /* =========================================
       AJUSTES ESPECÍFICOS PARA MÓVILES
       ========================================= */
    @media (max-width: 600px) {
        .form-section {
            padding: 25px 20px;
            width: 95%; /* Da un pequeño aire con los bordes del celular */
            margin: 15px auto;
        }

        .form-title {
            font-size: 1.4rem; /* Título un poco más pequeño en celular */
        }

        .form-row {
            grid-template-columns: 1fr; /* Vuelve todo a 1 sola columna */
            gap: 15px;
        }

        .button-group {
            flex-direction: column; /* Apila los botones de enviar y limpiar */
            align-items: center;
        }

        /* En celular, a veces los botones se ven mejor con un límite de tamaño */
        .btn-submit, .btn-reset, .btn-add-dynamic {
            width: 100%;
            max-width: 280px; /* Para que no se vean excesivamente anchos */
        }
    }

    .form-section {
        padding-left: 25px !important;  /* Empuja todo hacia adentro desde la izquierda */
        padding-right: 25px !important; /* Empuja todo hacia adentro desde la derecha */
        padding-top: 30px !important;
        padding-bottom: 40px !important;
        box-sizing: border-box !important; /* Evita que el contenedor se desborde */
        width: 100% !important;
        overflow-x: hidden;
    }

    /* 2. EVITAR QUE LOS INPUTS SE SALGAN */
    .form-control, .form-select, .alert-info {
        width: 100% !important;
        box-sizing: border-box !important; 
    }

    /* 3. ARREGLAR COLORES DE TEXTO (Para que resalten en tu fondo azul) */
    .form-title, .form-subtitle, .form-label, .form-label-hijo {
        color: #000000 !important; /* Letras BLANCAS para contrastar con el azul */
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Pequeña sombra para que se lea perfecto */
    }
    
    .form-label i {
        color: #000000 !important; /* Iconos un poco más celestes claros */
    }

    /* 4. BOTONES CENTRADOS Y NO TAN ANCHOS */
  .button-group {
        display: flex !important;
        flex-direction: row !important; /* Obliga a que estén uno al lado del otro */
        justify-content: center !important; /* Los centra en la pantalla */
        align-items: center;
        gap: 20px; /* Separación entre ambos botones */
        margin-top: 30px;
        width: 100% !important;
        flex-wrap: wrap; /* Si la pantalla se achica, permite que se reacomoden */
    }

    .btn-submit, .btn-reset, .btn-add-dynamic {
        width: 100% !important;
        max-width: 300px !important; /* Límite de ancho para que no se vean gigantes */
        margin: 0 auto !important;   /* Los centra forzosamente */
        box-sizing: border-box;
    }

    /* ALERTA (Para que tampoco choque) */
    .alert-info {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 25px;
    }