/* Import a modern font for better aesthetics */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Global reset and basic styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif; /* Modern sans-serif font */
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); /* Softer, modern gradient */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Darker text for better contrast */
}

.container {
    background: #ffffff; /* Clean white background */
    padding: 2.5rem; /* Increased padding */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* Softer, larger shadow */
    width: 100%;
    max-width: 800px; /* Slightly wider container */
    margin: 20px; /* Add margin for smaller screens */
    animation: fadeIn 0.8s ease-out; /* Simple fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-form {
    display: block;
    transition: all 0.5s ease-in-out; /* Smooth transition for display changes */
}

.login-form.hidden {
    display: none;
    opacity: 0;
}

.dashboard {
    display: none;
    text-align: center;
    transition: all 0.5s ease-in-out; /* Smooth transition for display changes */
}

.dashboard.show {
    display: block;
    opacity: 1;
}

h1 {
    text-align: center;
    margin-bottom: 2.5rem; /* More space below heading */
    color: #2c3e50; /* Darker blue for headings */
    font-weight: 600; /* Slightly bolder heading */
}


h2 {
    text-align: center;
/*    margin-bottom: 2.5rem; /* More space below heading */ 
    color: #cc1818; /* Darker blue for headings */
    font-weight: 600; /* Slightly bolder heading */
}


.form-group, .col-0, .col-1, .col-2, .form-field-wrapper { /* Added .form-field-wrapper for consistent spacing */
    margin-bottom: 1.5rem; /* Consistent spacing */
}

label {
    display: block;
    margin-bottom: 0.6rem; /* Space between label and input */
    font-weight: 500; /* Medium font weight */
    color: #555;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"], /* Added input type number */
select,
textarea { /* Added textarea to input styling */
    width: 100%;
    padding: 0.9rem 1.2rem; /* Increased padding for inputs */
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 8px; /* Rounded input fields */
    font-size: 1rem;
    color: #495057;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus, /* Added input type number */
select:focus,
textarea:focus { /* Added textarea to focus styling */
    border-color: #5cb8e0; /* Blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(92, 184, 224, 0.25); /* Subtle blue shadow on focus */
    outline: none;
}

textarea {
    resize: vertical; /* Allow vertical resizing for textareas */
    min-height: 100px; /* Minimum height for textarea */
}

button {
    width: 100%;
    padding: 1rem; /* Generous padding for buttons */
    background-color: #007bff; /* Primary blue button */
    color: white;
    border: none;
    border-radius: 8px; /* Rounded buttons */
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2); /* Soft shadow */
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3); /* Enhanced shadow on hover */
}

.logout-btn {
    background-color: #dc3545; /* Red for logout */
    color: white; /* White text for contrast */
    margin-top: 2rem;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.2); /* Soft shadow for red button */
    font-size: 0.95rem; /* Slightly smaller font */
    padding: 0.8rem; /* Reduced padding */
    width: 30%; /* Set width to 30% */
    margin-left: auto; /* Center the button */
    margin-right: auto; /* Center the button */
    display: block; /* Ensure it behaves as a block element for margin auto to work */
}

.logout-btn:hover {
    background-color: #c82333; /* Darker red on hover */
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3); /* Enhanced shadow on hover */
    transform: translateY(-1px); /* Less pronounced lift */
}

.error-message {
    color: #dc3545; /* Red for error messages */
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}
/* Table styling for dashboard */
table {
    width: 100%;
    border-collapse: separate; /* Use separate for rounded corners */
    border-spacing: 0; /* Remove space between cells */
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft table shadow */
    border-radius: 10px; /* Rounded table corners */
    overflow: hidden; /* Ensures rounded corners are visible */
}

th, td {
    padding: 0.5rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0; /* Light border between rows */
}

th {
    background-color: #e9ecef; /* Slightly darker header background for better contrast */
    color: #343a40; /* Darker text for readability */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem; /* Reduced font size */
}

tr:last-child td {
    border-bottom: none; /* No border on the last row */
}

tbody tr {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
    cursor: pointer; /* Indicate clickable rows */
}

tbody tr:hover {
    background-color: #f2f7fc; /* Light blue on hover */
}

/* Styling for the paragraph listing allowed files */
#frm_afiliado p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1.5rem; /* Consistent spacing */
    line-height: 1.4;
}


/* Specific styles for file upload and progress bar */
.progressBar {
    height: 4px; /* Thicker progress bar */
    border-radius: 5px;
    background-color: #28a745; /* Green for progress */
    margin-bottom: 10px; /* More space below */
    margin-top: 8px;
    overflow: hidden; /* Ensure inner bar stays within bounds */
}

.progressBar > div {
    height: 100%;
    background-color: #28a745; /* Inner bar color */
    width: 0%; /* Initial width */
    transition: width 0.3s ease; /* Smooth width transition */
}

.status {
    font-size: 0.85rem; /* Slightly smaller font */
    color: #6c757d; /* Muted gray for status */
    margin-top: 5px;
}

.cont_btnAdjuntar,
.cont_btnAdjuntarOdoo { /* Added .cont_btnAdjuntarOdoo */
    cursor: pointer;
    position: relative;
    width: 100%;
    display: block;
    height: 50px; /* Taller button */
    overflow: hidden;
    border-radius: 8px; /* Rounded corners */
    background-color: #17a2b8; /* Info blue for attachment button */
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.2);
    margin-top: 1.5rem; /* Space above */
}

.cont_btnAdjuntar > span,
.cont_btnAdjuntarOdoo > span { /* Added .cont_btnAdjuntarOdoo */
    width: 100%;
    display: flex; /* Use flex for centering text */
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #FFF;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.cont_btnAdjuntar:hover,
.cont_btnAdjuntarOdoo:hover { /* Added .cont_btnAdjuntarOdoo */
    background-color: #138496; /* Darker blue on hover */
}

#btn_adjuntar,
#btnAdjuntarOdoo { /* Added #btnAdjuntarOdoo */
    z-index: 999;
    line-height: 0;
    font-size: 1px;
    position: absolute;
    top: 0; /* Align to top */
    left: 0; /* Align to left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.adjunto {
    position: relative;
    display: flex; /* Use flex for layout */
    align-items: center;
    padding: 0.7rem 1rem;
    background-color: #f8f9fa; /* Light background for attachments */
    border-radius: 8px;
    margin-top: 0.8rem; /* Space between attachments */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    transition: background-color 0.3s ease;
}

.adjunto:hover {
    background-color: #e9ecef; /* Slightly darker on hover */
}

.adjunto i {
    margin-right: 0.8rem; /* Space between icon and text */
    color: #007bff; /* Icon color */
}

.adjunto span {
    flex-grow: 1; /* Allow text to take available space */
    font-size: 0.95rem;
    color: #333;
}

.adjunto .eliminar-adjunto {
    color: #dc3545; /* Red for delete icon */
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 1rem; /* Space from text */
    transition: color 0.2s ease;
}

.adjunto .eliminar-adjunto:hover {
    color: #c82333; /* Darker red on hover */
}

/* Styling for the #agregar_atencion form */
#agregar_atencion,
#frm_afiliado { /* Added #frm_afiliado */
    background: #ffffff; /* Clean white background */
    padding: 1.5rem; /* Reduced padding */
    border-radius: 12px; /* Slightly rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin-top: 1.5rem; /* Reduced margin */
    margin-bottom: 1.5rem; /* Reduced margin */
    max-width: 600px; /* Added max-width to control overall size */
    margin-left: auto; /* Center the form if max-width is applied */
    margin-right: auto; /* Center the form if max-width is applied */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 1.5rem;
        margin: 15px;
    }

    h1 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    button {
        font-size: 1rem;
        padding: 0.8rem;
    }

    th, td {
        padding: 0.8rem;
        font-size: 0.9rem;
    }

    .cont_btnAdjuntar,
    .cont_btnAdjuntarOdoo { /* Added .cont_btnAdjuntarOdoo */
        height: 45px;
    }

    .cont_btnAdjuntar > span,
    .cont_btnAdjuntarOdoo > span { /* Added .cont_btnAdjuntarOdoo */
        font-size: 1rem;
    }

    #agregar_atencion,
    #frm_afiliado { /* Added #frm_afiliado */
        padding: 1rem; /* Further reduced padding for smaller screens */
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .logout-btn {
        width: 50%; /* Adjust width for smaller screens */
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1rem;
        margin: 10px;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    label {
        font-size: 0.9rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"], /* Added input type number */
    select,
    textarea { /* Added textarea */
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    button {
        font-size: 0.9rem;
        padding: 0.7rem;
    }

    th, td {
        padding: 0.6rem;
        font-size: 0.8rem;
    }

    .adjunto {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    #agregar_atencion,
    #frm_afiliado { /* Added #frm_afiliado */
        padding: 0.8rem; /* Even more reduced padding for very small screens */
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .logout-btn {
        width: 70%; /* Further adjust width for very small screens */
    }
}

/* Styles for three-column layout on larger screens */
.form-row-cols {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    gap: 10px; /* Space between columns */
    margin-bottom: 10px; /* Space below the row */
}

.form-row-cols .col-1 {
    flex: 1; /* Distribute available space equally among columns */
    min-width: 200px; /* Minimum width for columns before wrapping */
}

/* Ensure labels and inputs within these columns stack correctly */
.form-row-cols .col-1 label,
.form-row-cols .col-1 input,
.form-row-cols .col-1 select {
    display: block; /* Make them block-level to stack vertically */
    width: 100%; /* Take full width of their parent column */
}

.form-row-cols .col-center {
    flex: 0.4; /* Reducir el tamaño de la columna central */
    min-width: 100px; /* Un poco más pequeña que las otras */
}


/* Media query for mobile view: stack elements in a single column */
@media (max-width: 768px) { /* You can adjust this breakpoint as needed */
    .form-row-cols {
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Adjust gap for mobile */
    }

    .form-row-cols .col-1 {
        min-width: unset; /* Remove minimum width constraint on mobile */
    }
}