/* Public report form (/report) — visual refresh.
   Scoped to .report-public-form / .report-page so it never affects other forms
   (the dashboard update form shares id #incident-form). */

.report-page {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 1rem 3rem;
}

.report-page__header {
    margin: 1.25rem 0 1.5rem;
    text-align: center;
}

.report-page__header h1 {
    color: #1f2d28;
    font-size: 2.1rem;
    margin: 0 0 0.4rem;
}

.report-page__subtitle {
    color: #6a7873;
    font-size: 1rem;
    margin: 0;
}

/* Card */
.report-public-form {
    background: #ffffff;
    border: 1px solid #e4ebe8;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(31, 74, 60, 0.07);
    padding: 1.75rem 1.75rem 2rem;
}

/* Banner de modo prueba (QA) */
.report-test-banner {
    background: #fff6e5;
    border: 1px solid #f0d28a;
    border-radius: 10px;
    color: #8a5a00;
    font-size: 0.9rem;
    margin: 0 0 1.2rem;
    padding: 0.7rem 0.9rem;
}

.report-public-form .note {
    color: #6a7873;
    font-size: 0.9rem;
    margin: 0 0 1.4rem;
}

.report-public-form .required {
    color: #c0392b;
}

/* Section titles (los h4 del formulario) */
.report-public-form h4 {
    border-top: 1px solid #eef2f0;
    color: #24312d !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    margin: 1.7rem 0 0.9rem !important;
    padding-top: 1.3rem;
    text-transform: none !important;
}

/* Etiquetas de campo */
.report-public-form label {
    color: #3a473f;
    font-size: 0.92rem;
    font-weight: 600;
}

/* Inputs */
.report-public-form input[type="text"],
.report-public-form input[type="email"],
.report-public-form input[type="tel"],
.report-public-form input[type="datetime-local"],
.report-public-form textarea,
.report-public-form select {
    border: 1px solid #d4ded9 !important;
    border-radius: 10px !important;
    padding: 0.7rem 0.85rem !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.report-public-form input:focus,
.report-public-form textarea:focus,
.report-public-form select:focus {
    border-color: #246b55 !important;
    box-shadow: 0 0 0 3px rgba(36, 107, 85, 0.12) !important;
    outline: none !important;
}

/* Boton primario */
.report-public-form .buttons {
    margin-top: 1.5rem;
    text-align: right;
}

.report-public-form .send {
    background: #246b55 !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    cursor: pointer;
    float: none !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.8rem 2.4rem !important;
    transition: background 0.15s, transform 0.05s;
}

.report-public-form .send:hover {
    background: #1d5746 !important;
}

.report-public-form .send:active {
    transform: translateY(1px);
}

.report-public-form .send:disabled {
    background: #9bbab0 !important;
    cursor: not-allowed;
}

/* Movil */
@media (max-width: 736px) {
    /* Un campo por fila: apila las columnas del grid (.6u/.12u) a ancho
       completo. Sin tocar el padding-left para no romper el gutter (asi
       quedan alineadas con los campos de ancho completo). */
    .report-public-form .row > * {
        flex: 0 0 100% !important;
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .report-public-form {
        padding: 1.1rem;
    }

    .report-page__header h1 {
        font-size: 1.7rem;
    }

    .report-public-form .send {
        display: block;
        width: 100%;
    }
}