@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-serif;

}



:root {

    --primary-color: #003077;

    --secondary-color: #457b9d;

    --accent-color: #265BFF;

    --light-color: #ffffff;

    --dark-color: #111423;

    --shadow-color: rgba(0, 0, 0, 0.2);

    --transition-speed: 0.3s;

}



body {

    width: 100%;

    min-height: 100vh;

    display: grid;

    grid-template: "header header header" 70px

                 "aside section side" 1fr

                 "footer footer footer" 40px / 10% 1fr 10%;

    gap: 5px;

    background-color: #f5f7fa;

}



header {

    grid-area: header;

    background-color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    box-shadow: 0 2px 10px var(--shadow-color);

    z-index: 10;

}



.logo {

    padding: 0px 15px;

    width: auto;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: white;

    letter-spacing: 1px;

}



.logo img {

    height: 90%;

    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.301));

}



.buscador {

    position: relative;

}



.buscador svg {

    position: absolute;

    top: 6px;

    left: 15px;

    z-index: 20;

    color: var(--primary-color);

    transition: var(--transition-speed) ease all;

}



.buscador-input {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-right: 20px;

    background-color: white;

    padding: 7px 15px;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: .5px;

    border: none;

    outline: none;

    padding-left: 45px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

    transition: var(--transition-speed) ease all;

}



.buscador-input:hover {

    transform: translateY(-3px);

    box-shadow: 0px 4px 15px rgba(37, 90, 168, 0.4);

}



.buscador-input:hover ~ svg {

    transform: translateY(-3px);

}



section {

    grid-area: section;

    padding: 20px;

}



footer {

    grid-area: footer;

    background-color: var(--primary-color);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

}



/* Estilos del formulario */

.form-container {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    width: 100%;

    padding: 20px 0;

}



.form-card {

    background-color: white;

    border-radius: 15px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

    width: 100%;

    max-width: 800px;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.form-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.form-header {

    background-color: var(--primary-color);

    color: white;

    padding: 20px 30px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.form-header p {

    margin-top: 5px;

    opacity: 0.8;

}



.report-form {

    padding: 30px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.form-group {

    position: relative;

    transition: transform 0.3s ease;

}



.form-group.full-width {

    grid-column: span 2;

}



.form-group label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--dark-color);

}



.form-group label svg {

    transition: transform 0.3s ease;

}



.form-group.focused label svg {

    transform: scale(1.1);

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid #e1e5ee;

    border-radius: 8px;

    font-size: 15px;

    transition: all 0.3s ease;

    background-color: #f8fafc;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--accent-color);

    box-shadow: 0 0 0 3px rgba(38, 91, 255, 0.15);

    outline: none;

    background-color: white;

}



.form-group:hover {

    transform: translateY(-2px);

}



/* Estilos para el input de archivo */

.file-upload .file-input-container {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

}



.file-upload input[type="file"] {

    position: absolute;

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    z-index: -1;

}



.file-input-button {

    background-color: var(--primary-color);

    color: white;

    padding: 10px 15px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.file-input-button:hover {

    background-color: #00245a;

    transform: translateY(-2px);

}



.file-name {

    margin-left: 10px;

    font-size: 14px;

    color: #64748b;

}



/* Botones de acción */

.form-actions {

    grid-column: span 2;

    display: flex;

    justify-content: flex-end;

    gap: 15px;

    margin-top: 10px;

}



.btn-cancel,

.btn-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 25px;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

}



.btn-cancel {

    background-color: #f1f5f9;

    color: #64748b;

}



.btn-submit {

    background-color: var(--primary-color);

    color: white;

}



.btn-cancel:hover {

    background-color: #e2e8f0;

    transform: translateY(-2px);

}



.btn-submit:hover {

    background-color: #00245a;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 48, 119, 0.3);

}



/* Animaciones para los SVG */

.user-circle {

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.05);

        opacity: 0.8;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}



/* Responsive */

@media (max-width: 768px) {

    body {

        grid-template: "header" 70px

                     "section" 1fr

                     "footer" 40px / 1fr;

    }

    

    .report-form {

        grid-template-columns: 1fr;

    }

    

    .form-group.full-width {

        grid-column: span 1;

    }

    

    .form-actions {

        grid-column: span 1;

        flex-direction: column-reverse;

    }

    

    .form-card {

        margin: 0 10px;

    }

}



@media (max-width: 480px) {

    header {

        flex-direction: column;

        height: auto;

        padding: 10px;

    }

    

    .logo {

        margin-bottom: 10px;

    }

    

    .buscador {

        width: 100%;

        margin-bottom: 10px;

    }

    

    .buscador-input {

        width: 100%;

        margin-right: 0;

    }

    

    .form-header {

        padding: 15px 20px;

    }

    

    .report-form {

        padding: 20px;

    }

}