/* Modern & Professional Design CSS */

:root {
    --primary-color: #FF6600; /* Vibrant Orange */
    --primary-hover-color: #E55B00;
    --secondary-color: #f2f2f2; /* Light Gray */
    --accent-color: #FF8533; /* Lighter Orange */
    --text-color: #333333; /* Dark Gray */
    --text-secondary-color: #777;
    --border-color: #d0d9e2; /* A slightly darker border */
    --card-bg-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;

    --font-family-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --border-radius: 1.5rem;
}

body {
    font-family: var(--font-family-sans-serif);
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.card {
    background: linear-gradient(135deg, #ffffff, #f2f2f2);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--shadow-color);
    margin-bottom: 2.5rem; /* Increased spacing */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition */
}

.card:hover {
    transform: translateY(-5px); /* Elevation effect */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

.btn {
    border-radius: var(--border-radius);
    padding: 0.75rem 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
}

.form-control {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
    outline: none;
}

.form-select {
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
}

/* Login Page Specific Styles */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--primary-color), #ffffff);
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 15px 20px rgba(74, 144, 226, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

.login-logo {
    height: 100px;
    width: 100px;
    margin-bottom: 1rem;
    border-radius: 50%; /* Ensure the container is round for the shadow effect */
    animation: pulse-animation 2s infinite;
}

.login-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.input-group-text {
    background-color: var(--secondary-color);
    border-right: none;
}

/* Dashboard Specific Styles */

/* Navbar */
.navbar {
    background: linear-gradient(to right, #1e88e5, #ffffff);
    box-shadow: 0 2px 4px var(--shadow-color);
    padding: 0.5rem 1rem;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.5rem;
    color: white !important;
}

.navbar .nav-link,
.navbar .navbar-text {
    color: black !important;
}

.app-logo {
    height: 50px;
    width: 50px;
    animation: pulse-animation 2s infinite;
    border-radius: 50%;
}

/* Sidebar */
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1050;
    top: 0;
    right: 0;
    background-color: var(--card-bg-color); /* Light theme */
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 60px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.15);
    border-left: 1px solid var(--border-color);
}

.sidebar a, .sidebar form > button {
    padding: 1rem 1.5rem; /* Increased padding */
    text-decoration: none;
    font-size: 1.2rem; /* Slightly larger font */
    color: black;
    display: block;
    transition: background-color 0.3s, color 0.3s;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-weight: 500;
}

.sidebar a:hover, .sidebar form > button:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.btn-outline-warning {
    color: black !important;
}

.sidebar .closebtn {
    position: absolute;
    top: 10px;
    right: 25px; /* Adjusted position */
    font-size: 2.5rem; /* Slightly smaller */
    color: var(--text-secondary-color);
}

.sidebar .px-3.mt-auto.pb-3 > .mb-2 {
    color: var(--text-color); /* Ensure text is visible on light background */
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    overflow-x: hidden;
    transition: 0.3s;
}

/* Dashboard content */
.main-content {
    padding-top: 2rem;
    padding-bottom: 50vh; /* Add significant padding to the bottom */
    min-height: 100vh;      /* Ensure the content area is at least the height of the viewport */
}

.stat-card {
    text-align: center;
}

.stat-card .display-6 {
    font-weight: 600;
}

.list-group-item {
    background-color: transparent;
    border-color: #000000; /* Black color for a more marked separator */
}

/* Dashboard Fixes */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.task-list-scroll {
    height: 350px; /* Fixed height */
    overflow-y: auto;
    padding-right: 10px;
}

.task-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 130px;
}
.task-actions > * {
    margin-left: 0.5rem;
}

/* Task Status Badges */
.task-estado-PENDIENTE {
    background-color: var(--warning-color);
    color: #1f2d3d;
    font-weight: bold;
}

.task-estado-EN_PROGRESO {
    background-color: #007bff; /* Blue */
    color: #fff;
    font-weight: bold;
}

.task-estado-TERMINADA {
    background-color: var(--success-color);
    color: #fff;
    font-weight: bold;
}

.due-date-imminent {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 100px;
    color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    line-height: 1;
}

/* Ensure form labels are visible on dark card backgrounds */
.card-admin-form .form-label,
.card-editar-tarea .form-label,
.card-editar-equipo .form-label,
.card-crear-admin .form-label,
.card-calculadora-extintor .form-label {
    color: white;
}

/* Ensure list items are visible on dark card backgrounds */
.card-mi-equipo .list-group-item,
.card-miembros-equipo .list-group-item {
    background-color: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Unique Card Styles */

/* Dashboard User */
.card-extintor-gestion {
    background: linear-gradient(135deg, #e53935, #ffffff); /* Red Tones */
    color: #333;
}
.card-extintor-gestion::before { content: "\f134"; } /* fa-fire-extinguisher */

.card-estadisticas {
    background: linear-gradient(135deg, #4682B4, #ffffff); /* SteelBlue to White */
    color: #333;
}
.card-estadisticas::before { content: "\f200"; } /* fa-chart-pie */

.card-riesgos-ubicacion {
    background: linear-gradient(135deg, #ffb300, #ffffff); /* Amber/Orange Tones */
    color: #333;
}
.card-riesgos-ubicacion::before { content: "\f5a0"; } /* fa-map-marked-alt */

.card-registrar-evento {
    background: linear-gradient(135deg, #00897b, #ffffff); /* Teal Tones */
    color: #333;
}
.card-registrar-evento::before { content: "\f0fe"; } /* fa-plus-square */

.card-mis-eventos {
    background: linear-gradient(135deg, #5e35b1, #ffffff); /* Deep Purple Tones */
    color: #333;
}
.card-mis-eventos::before { content: "\f1da"; } /* fa-history */

.card-mi-equipo {
    background: linear-gradient(135deg, #3949ab, #ffffff); /* Indigo Tones */
    color: #333;
}
.card-mi-equipo::before { content: "\f0c0"; } /* fa-users */

.card-matriz-riesgos {
    background: linear-gradient(135deg, #d81b60, #ffffff); /* Pink Tones */
    color: #333;
}
.card-matriz-riesgos::before { content: "\f0e7"; } /* fa-bolt */

.card-clima-uv {
    background: linear-gradient(135deg, #039be5, #ffffff); /* Light Blue Tones */
    color: #333;
}
.card-clima-uv::before { content: "\f2dc"; } /* fa-thermometer-half */

.card-gestion-tareas {
    background: linear-gradient(135deg, #66bb6a, #ffffff); /* Lighter Green Tones */
    color: #333;
}
.card-gestion-tareas::before { content: "\f0ae"; } /* fa-tasks */

.card-analisis-imagen {
    background: linear-gradient(135deg, #f4511e, #ffffff); /* Deep Orange Tones */
    color: #333;
}
.card-analisis-imagen::before { content: "\f030"; } /* fa-camera */

.card-charla-5-minutos {
    background: linear-gradient(135deg, #8f94fb, #ffffff); /* A light purple gradient */
    color: #333;
}
.card-charla-5-minutos::before { content: "\f086"; } /* fa-comments */

.card-charla-5-minutos .card-header {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
    color: #fff;
    border: none;
}

.card-charla-5-minutos .btn-primary {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
    color: #fff;
    border: none;
}

.card-charla-5-minutos .btn-primary:hover {
    background: linear-gradient(135deg, #3c42a7, #7d83f9);
}

.card-charla-5-minutos .accordion-button {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}

.card-charla-5-minutos .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 1);
    color: #333;
}

.card-charla-5-minutos .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(78, 84, 200, 0.25);
}

.card-charla-5-minutos .accordion-button::after {
    filter: none;
}

.card-charla-5-minutos .accordion-body {
    color: #212529;
}

/* Dashboard Admin */
.card-configuracion-periodo {
    background: linear-gradient(135deg, #6d4c41, #ffffff); /* Brown Tones */
    color: #333;
}
.card-configuracion-periodo::before { content: "\f013"; } /* fa-cog */

.card-gestionar-trabajadores {
    background: linear-gradient(135deg, #546e7a, #ffffff); /* Blue Grey Tones */
    color: #333;
}
.card-gestionar-trabajadores::before { content: "\f508"; } /* fa-user-cog */

.card-avance-equipos {
    background: linear-gradient(135deg, #8e24aa, #ffffff); /* Purple Tones */
    color: #333;
}
.card-avance-equipos::before { content: "\f200"; } /* fa-chart-bar */

.card-estado-trabajadores {
    background: linear-gradient(135deg, #c0ca33, #ffffff); /* Lime Tones */
    color: #333;
}
.card-estado-trabajadores::before { content: "\f0c8"; } /* fa-check-square */

/* Superadmin */
.card-crear-admin {
    background: linear-gradient(135deg, #1e88e5, #ffffff); /* Blue Tones */
    color: #333;
}
.card-crear-admin::before { content: "\f234"; } /* fa-user-plus */

.card-lista-admins {
    background: linear-gradient(135deg, #7cb342, #ffffff); /* Light Green Tones */
    color: #333;
}
.card-lista-admins::before { content: "\f0ca"; } /* fa-list-ul */

.card-estadisticas-visitas {
    background: linear-gradient(135deg, #fb8c00, #ffffff); /* Orange Tones */
    color: #333;
}
.card-estadisticas-visitas::before { content: "\f185"; } /* fa-sun */

.card-destinatarios-contacto {
    background: linear-gradient(135deg, #26a69a, #ffffff); /* Teal Tones */
    color: #333;
}
.card-destinatarios-contacto::before { content: "\f2b6"; } /* fa-address-book */

/* Extintor Page */
.card-calculadora-extintor {
    background: linear-gradient(135deg, #e53935, #ffffff); /* Red Tones */
    color: #333;
}
.card-calculadora-extintor::before { content: "\f134"; } /* fa-fire-extinguisher */

.card-resultados-calculos {
    background: linear-gradient(135deg, #1e88e5, #ffffff); /* Blue Tones */
    color: #333;
}
.card-resultados-calculos::before { content: "\f0ca"; } /* fa-list-ul */

.card-resultados-calculos .accordion-body {
    color: #212529; /* Dark color for text */
}

.extintor-vencimiento-item,
.extintor-vencimiento-item strong {
    color: white !important;
    text-shadow: 1px 1px 2px black;
}

/* Landing Page */
.card-landing-feature {
    background: linear-gradient(135deg, #ece9e6, #ffffff);
    color: #333;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-contact-form {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    color: #333;
}

/* Various Admin/User Pages */
.card-admin-form {
    background: linear-gradient(135deg, #e0c3fc, #ffffff);
    color: #333;
}
.card-admin-form::before { content: "\f044"; } /* fa-edit */

.card-admin-list {
    background: linear-gradient(135deg, #f9d423, #ffffff);
    color: #333;
}
.card-admin-list::before { content: "\f03a"; } /* fa-list-alt */

.card-editar-tarea {
    background: linear-gradient(135deg, #6a11cb, #ffffff); /* Purple to Blue */
    color: #333;
}
.card-editar-tarea::before { content: "\f044"; } /* fa-edit */

.card-usuario-info {
    background: linear-gradient(135deg, #ff9a8b, #ffffff); /* Pink/Red to Orange */
    color: #333;
}
.card-usuario-info::before { content: "\f007"; } /* fa-user */

.card-usuario-tareas {
    background: linear-gradient(135deg, #a8e063, #ffffff); /* Green */
    color: #333;
}
.card-usuario-tareas::before { content: "\f0ae"; } /* fa-tasks */

.card-miembros-equipo {
    background: linear-gradient(135deg, #6a11cb, #ffffff); /* Purple to Blue */
    color: #333;
}
.card-miembros-equipo::before { content: "\f0c0"; } /* fa-users */

.card-usuarios-disponibles {
    background: linear-gradient(135deg, #00c6ff, #ffffff); /* Bright Blue */
    color: #333;
}
.card-usuarios-disponibles::before { content: "\f234"; } /* fa-user-plus */

.card-editar-equipo {
    background: linear-gradient(135deg, #00c6ff, #ffffff); /* Bright Blue */
    color: #333;
}
.card-editar-equipo::before { content: "\f044"; } /* fa-edit */

/* Accordion Styles */
.accordion-item {
    margin-bottom: 1rem;
    border: none;
    overflow: hidden;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

footer {
    background: linear-gradient(to right, #1e88e5, #ffffff);
}

.trabajadores-list-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.card-evaluacion-riesgos {
    background: linear-gradient(135deg, var(--primary-color), #ffffff);
    color: #333;
}

.gravedad-select-wrapper {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gravedad-select-wrapper .form-select {
    padding-right: 2.5rem !important; /* Aumenta el espacio para la flecha */
}

/* Worker Detail Page Styles */
.card-detalle-trabajador {
    background: linear-gradient(135deg, #42a5f5, #ffffff); /* Blue Tones */
    color: #333;
}
.card-detalle-trabajador::before { content: "\f2bb"; } /* fa-address-card */

.card-pasos-accidente {
    background: linear-gradient(135deg, #ffa726, #ffffff); /* Orange Tones */
    color: #333;
}
.card-pasos-accidente::before { content: "\f0f9"; } /* fa-ambulance */

/* Estilos para modales con gradiente */
.card-crear-auditor {
    background: linear-gradient(135deg, #1e88e5, #ffffff); /* Blue Tones */
    color: #333;
}
.card-crear-auditor::before {
    content: "\f21b"; /* fa-user-secret */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 100px;
    color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    line-height: 1;
    position: absolute;
    top: -20px;
    right: -20px;
}
.modal-gradient .modal-content {
    background: linear-gradient(135deg, #ffc107, #ffffff); /* Gradiente de amarillo a blanco */
    color: var(--text-color);
}

.modal-gradient .modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-gradient .modal-footer {
    border-top: 1px solid var(--border-color);
}

.modal-gradient .form-label {
    color: var(--text-color);
}

.modal-gradient .btn-close {
    /* No filter needed for light background */
}

.modal-auditor-gradient .modal-content {
    background: linear-gradient(135deg, #546e7a, #ffffff); /* Blue Grey Tones */
    color: white;
}

.modal-auditor-gradient .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-auditor-gradient .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-auditor-gradient .form-label {
    color: white;
}

.modal-auditor-gradient .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.sticky-return-button {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 80px; /* Adjust based on navbar height */
    z-index: 1010; /* Lower than navbar, higher than content */
}

/* Login page password toggle button */
#togglePassword.btn-outline-secondary {
    background-color: #e9ecef;
    border-color: #ced4da;
}
#togglePassword.btn-outline-secondary:hover {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Chart styles have been reverted as per user request */