/* =================================================================
   SIGEIM - Emergencias Page Styles — Alcaldía Libertador
   Archivo: emergencias.css
   ================================================================= */

* {
    font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

body {
    background: linear-gradient(135deg, #e8eef6 0%, #d1dce8 50%, #eef2f8 100%);
    min-height: 100vh;
}

.emergency-type {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.emergency-type:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.emergency-type.selected {
    border-color: #1B3A5C;
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.2);
}

.input-field {
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.input-field:focus {
    border-color: #1B3A5C;
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15);
    outline: none;
}

.btn-submit {
    background: linear-gradient(135deg, #e63946 0%, #D4A017 100%);
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.35);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-location {
    background: linear-gradient(135deg, #1B3A5C 0%, #2E6BA6 100%);
}

.btn-location:hover {
    opacity: 0.9;
}

.service-type {
    border: 2px solid transparent;
}

.service-type.selected {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* =================================================================
   RESPONSIVE — Mobile
   ================================================================= */
@media (max-width: 768px) {
    /* Category grid: 2 columns instead of 3 */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Form fields: stack vertically */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Container padding */
    .max-w-4xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Emergency type cards: smaller text */
    .emergency-type p {
        font-size: 0.7rem;
    }

    /* SweetAlert modals */
    .swal2-popup {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

@media (max-width: 480px) {
    /* Category grid: single column */
    .grid.grid-cols-3,
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Service type chips: 2 columns */
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Title smaller */
    .text-3xl {
        font-size: 1.5rem !important;
    }
}