/* =========================================
   1. VARIABLES & TEMAS
   ========================================= */
:root {
    /* Colores principales */
    --blue-primary: #0D6EFD;
    /* --green-primary: #6FCC27; */
    --green-primary: #57c304;
    --orange-primary: #FC932B;

    /* Colores pastel */
    --blue-pastel: #AFC4F5;
    --green-pastel: #CFEFB8;
    --orange-pastel: #FFD6A8;

    /* Grises */
    --gris-medio: #8b8b8b;
    --gris-claro: #d4d4d4;
    --gris-oscuro: #3a3a3a;
    --gris-muy-oscuro: #2a2a2a;
    --gris-casi-blanco: #e8e8e8;

    --white: #ffffff;
    --bg-page: whitesmoke;
    --bg-card: #ffffff;
}

[data-theme="dark"] {
    --blue-primary: #4C8DFF;
    --green-primary: #7FE34D;
    --orange-primary: #FFAA4C;

    --blue-pastel: #1F2A44;
    --green-pastel: #1F3A1B;
    --orange-pastel: #3A2A14;

    --gris-medio: #B0B0B0;
    --gris-claro: #6E6E6E;
    --gris-oscuro: #E0E0E0;
    --gris-muy-oscuro: #F5F5F5;
    --gris-casi-blanco: #1E1E1E;

    --white: #121212;
    --bg-page: #030617;
    --bg-card: #303C6E;
}

/* =========================================
   2. ESTILOS BASE & UTILIDADES
   ========================================= */
body {
    background: var(--white);
    font-family: Arial, sans-serif;
}

.bg-color {
    background-color: var(--bg-page);
}

.primary-color {
    color: var(--blue-primary);
}

.orange-color {
    color: var(--orange-primary);
}

.green-color {
    color: var(--green-primary);
}

th.green-color {
    color: var(--green-primary);
}

#togglePassword {
    background-color: transparent;
    border: 1px solid var(--gris-muy-oscuro);
    border-radius: 0 0.25rem 0.25rem 0;
}

.custom-input,
#togglePassword {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--gris-claro);
    color: var(--gris-muy-oscuro) !important;
}

.custom-input::placeholder {
    color: var(--gris-medio) !important;
    font-weight: 300;
}

.custom-input:focus {
    background-color: var(--bg-card) !important;
    color: var(--gris-oscuro);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--gris-oscuro) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.hr-div {
    width: 95%;
    color: #AFC4F5;
    border-top: 2px solid;
}

/* =========================================
   3. LOGIN & AUTH
   ========================================= */
.login-col {
    min-width: 450px;
}

.login-logo {
    width: 180px;
}

.login-subtitle,
.login-btn {
    font-size: 18px;
}

.login-subtitle,
.form-label {
    color: var(--gris-muy-oscuro);
}

.text-icon {
    color: var(--gris-medio);
}

.login-side-panel {
    background-color: var(--blue-primary);
    width: 70vh;
    height: 70vh;
    border-radius: 0.5rem;
}

.login-side-panel {
    background-color: var(--blue-primary);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   4. ADMIN & EMPRESAS
   ========================================= */
.header-icon {
    font-size: 40px;
}

.subtitle {
    color: #848484;
}

.action-btn {
    min-width: 150px;
}

.filter-box {
    border: 2px solid var(--blue-primary);
}

.company-name {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gris-oscuro);
    border-left: 2px solid var(--blue-pastel);
    padding-left: 15px;
    margin: 10px 0;
}

/* Tarjeta de Compañía (Fusionado duplicados) */
.company-card {
    max-width: 430px;
    height: 130px;
    border: 0.5px solid var(--blue-primary);
}

.pointer {
    cursor: pointer;
}

.company-card img {
    width: 150px;
}

.company-card-header {
    background: color-mix(in srgb, var(--gris-casi-blanco), transparent 50%);
    padding: 0.5rem 1rem;
    height: 40px;
}

.company-card-header .dropdown-menu {
    background-color: var(--blue-primary);
}

.company-card-header .dropdown-item {
    color: white;
}

.company-card-header .dropdown-item:hover {
    background-color: color-mix(in srgb, var(--gris-casi-blanco), transparent 80%);
}

.card-body .info {
    padding-right: 15px;
    width: auto;
    font-size: small;
    color: var(--gris-medio);
}

.company-logo-wrapper {
    width: 100%;
    height: 80px;
}

.company-logo {
    max-width: 100%;
    max-height: 70px;
    /* Fusionado con la regla de max-height: 60px del header-top, priorizando contención */
    object-fit: contain;
}

.card-logo {
    max-width: 150px;
    max-height: 70px;
    /* Fusionado con la regla de max-height: 60px del header-top, priorizando contención */
    object-fit: contain;
}

.company-icon {
    width: 50px;
}

.modal-icon {
    background-color: var(--blue-primary);
    max-width: 60px;
    max-height: 60px;
}

.user-avatar {
    color: var(--blue-primary);
}

.logo_gkh {
    width: 150px;
}

/* Super Admin */
.header-super {
    color: var(--blue-primary);
}

.header-super p {
    color: var(--gris-medio);
}


.alert-info-custom {
    background-color: color-mix(in srgb, var(--blue-pastel), transparent 80%);
    border-left: 4px solid var(--blue-primary);
    color: var(--blue-primary);
}

/* =========================================
   5. BOTONES (Agrupados)
   ========================================= */
/* Botones Básicos de Color */
.btn-blue,
.btn-orange,
.btn-green {
    background-color: var(--white);
    transition: all 0.3s ease;
}

.btn-blue {
    border: 1px solid var(--blue-primary);
    color: var(--blue-primary);
}

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

.btn-orange {
    border: 1px solid var(--orange-primary);
    color: var(--orange-primary);
}

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

.btn-green {
    border: 1px solid var(--green-primary);
    color: var(--green-primary);
}

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

/* Botones Outline Dashboard */
.btn-outline-blue,
.btn-outline-orange,
.btn-outline-green {
    background-color: var(--white);
    font-size: 16px;
    font-weight: bold;
    padding: 2px 12px;
}

.btn-outline-blue {
    border: 2px solid var(--blue-primary);
    color: var(--blue-primary);
}

.btn-outline-blue:hover {
    background-color: var(--blue-primary);
    color: var(--white);
}

.btn-outline-orange {
    border: 2px solid var(--orange-primary);
    color: var(--orange-primary);
}

.btn-outline-orange:hover {
    background-color: var(--orange-primary);
    color: var(--white);
}

.btn-outline-green {
    border: 2px solid var(--green-primary);
    color: var(--green-primary);
}

.btn-outline-green:hover {
    background-color: var(--green-primary);
    color: var(--white);
}

/* Botones de Acción Dashboard (Capacitación, Inspección, Simulacro) */
.btn-capacitacion,
.btn-inspection,
.btn-simulacro {
    border-radius: 10px;
    font-weight: bold;
    padding: 4px 12px;
}

.btn-capacitacion {
    background-color: color-mix(in srgb, var(--green-pastel), transparent 50%);
    color: var(--green-primary);
}

.btn-capacitacion:hover {
    background-color: var(--green-primary);
    color: var(--white);
}

.btn-inspection {
    background-color: color-mix(in srgb, var(--blue-pastel), transparent 50%);
    color: var(--blue-primary);
}

.btn-inspection:hover {
    background-color: var(--blue-primary);
    color: var(--white);
}

.btn-simulacro {
    background-color: color-mix(in srgb, var(--orange-pastel), transparent 50%);
    color: var(--orange-primary);
}

.btn-simulacro:hover {
    background-color: var(--orange-primary);
    color: var(--white);
}

/* Otros Botones */
.btn-add-modal {
    width: 180px;
    border-radius: 0.25rem;
    border: 2px solid var(--blue-primary);
    background-color: var(--blue-primary);
    color: var(--white);
}

.btn-add-modal:hover {
    background-color: color-mix(in srgb, var(--blue-primary), transparent 10%);
    color: var(--white);
}

.btn-add {
    border: 2px solid var(--blue-primary);
    color: var(--blue-primary);
}

.btn-add:hover {
    background-color: var(--blue-primary);
    border: 2px solid var(--blue-primary);
    color: var(--white);
}

.btn-sst {
    color: var(--blue-primary);
    text-decoration: none;
    border: 1px solid var(--blue-primary);
}

.btn-sst:hover {
    background-color: var(--blue-primary);
    color: white;
}

.btn-unde {
    border: 1px solid var(--orange-primary);
    color: var(--orange-primary);
    font-size: 16px;
    font-weight: bold;
    background-color: var(--white);
    width: 100px;
    padding: 4px 12px;
}

.btn-unde:hover {
    color: var(--white);
    background-color: var(--orange-primary);
}

.btn-dashboard-main {
    background: var(--color-secondary);
    /* Nota: --color-secondary no estaba definido en :root */
    border-color: var(--color-secondary);
}

.btn-accent {
    background: var(--blue-primary);
    border-color: var(--blue-primary);
    color: var(--white);
}

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

.btn-view {
    text-decoration: none;
}

.search-container .form-floating>.form-control {
    height: 45px;
    min-height: 45px;
    line-height: 1.25;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.search-container .form-floating>label {
    padding-top: 0.75rem;
    padding-left: 1rem;
}

.search-container .form-floating>.form-control:focus~label,
.search-container .form-floating>.form-control:not(:placeholder-shown)~label {
    transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
}

/* =========================================
   6. SIDEBAR & HEADER
   ========================================= */
.sidebar-container {
    position: fixed;
    top: 0px;
    left: 0;
    width: 260px;
    height: calc(100vh - 94px);
    background: #5686a2;
    overflow-y: auto;
    z-index: 900;
}

.sidebar-nav {
    width: 260px;
    z-index: 1000;
    border-right: 2px solid var(--gris-casi-blanco);
}

.sidebar-logo-container {
    height: 95px;
}

.sidebar-logo {
    width: 150px;
}

.logo {
    height: 50px;
}

.sidebar-user-icon {
    width: 40px;
    height: 40px;
    color: var(--blue-primary);
}

.sidebar-collapse-btn {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent !important;
    color: #2E2E2E;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    align-items: center;
    transition: background 0.25s ease;
}

.sidebar-collapse-btn:hover {
    background: #afc4f578 !important;
}

.sidebar-collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-left: 12px;
}

.sidebar-collapse-link {
    display: block;
    padding: 8px 24px;
    margin: 4px 0;
    border-radius: 6px;
    text-decoration: none;
    color: #3A3A3A;
    font-size: 1rem;
    transition: all 0.25s ease;
    white-space: normal;
    /* Permite que el texto se vaya a la siguiente línea */
    word-break: break-word;
    /* Rompe palabras largas si es necesario */
}

.sidebar-collapse-link:hover {
    transform: translateX(4px);
    background: #afc4f578;
    opacity: 1;
}

.arrow-icon {
    transition: transform 0.35s ease;
}

.sidebar-collapse-btn.active .arrow-icon {
    transform: rotate(180deg);
}

/* Headers */
.header-bar {
    background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-primary) 100%);
    color: var(--white);
    padding: 1rem 2rem;
}

.header-top {
    z-index: 999;
    left: 260px;
    height: 97px;
}

.header-border {
    border-bottom: 3px solid #4D7891;
}

.main-content {
    margin-left: 260px;
    padding: 115px 30px 10px 30px;
    min-height: 100vh;
    background: var(--white);
}

.user-avatar-bg {
    background: var(--blue-primary);
}

/* =========================================
   7. DASHBOARD COMPONENTS
   ========================================= */

/* Cards Coloreadas (Header Dashboard) */
.card-blue,
.card-orange,
.card-green {
    height: 30px;
}

.card-blue {
    background: linear-gradient(to bottom, var(--blue-pastel) 0%, var(--white) 100%);
    border: 1px solid var(--blue-primary);
    color: var(--blue-primary);
}

.card-orange {
    background: linear-gradient(to bottom, var(--orange-pastel) 0%, var(--white) 100%);
    border: 1px solid var(--orange-primary);
    color: var(--orange-primary);
}

.card-green {
    background: linear-gradient(to bottom, var(--green-pastel) 0%, var(--white) 100%);
    border: 1px solid var(--green-primary);
    color: var(--green-primary);
}

/* User Cards */
.card-user-orange,
.card-user-blue {
    max-width: 430px;
    height: 130px;
}

.card-user-orange {
    border: 1px solid var(--orange-primary);
}

.card-user-blue {
    border: 1px solid var(--blue-primary);
}

/* Puntos indicadores */
.point-blue,
.point-orange,
.point-green {
    width: 15px;
    height: 15px;
    filter: blur(1px);
    opacity: 0.8;
}

.point-blue {
    background: radial-gradient(circle, var(--blue-primary) 20%, var(--white) 100%);
}

.point-orange {
    background: radial-gradient(circle, var(--orange-primary) 20%, var(--white) 100%);
}

.point-green {
    background: radial-gradient(circle, var(--green-primary) 20%, var(--white) 100%);
}

/* Tablas con borde coloreado */
.border-table-blue,
.border-table-orange,
.border-table-green {
    padding: 24px;
    margin-bottom: 18px;
    border-radius: 15px;
}

.border-table-blue {
    border-left: 2px solid var(--blue-primary);
}

.border-table-orange {
    border-left: 2px solid var(--orange-primary);
}

.border-table-green {
    border-left: 2px solid var(--green-primary);
}

/* Otros componentes Dashboard */
.card-undesafe {
    background-color: color-mix(in srgb, var(--orange-pastel), transparent 60%);
    height: 120px;
    border: none;
    display: flex;
    justify-content: center;
}

.card-undesafe h6 {
    width: 120px;
}

.metric-big {
    font-size: 1.5rem;
    font-weight: bold;
}

.metric-label {
    font-size: 1rem;
    font-weight: bold;
    color: var(--gris-oscuro);
}

.icon-box {
    color: var(--orange-primary);
    font-size: 4rem;
}

.icon-box img {
    height: 90px;
}

.border-orange {
    border: 1px solid var(--orange-pastel);
    border-radius: 15px;
    padding: 12px 0;
    background-color: var(--white);
}

/* Gráficos y Status */
.chart-container {
    background: var(--white);
    border-radius: 15px;
    padding: 0 24px;
    margin: 0;
    position: relative;
    /* Fusionado */
}

.status-box {
    border-radius: 15px;
    background: linear-gradient(90deg, #fff3e0, #f1ffe0);
    border: 3px solid #8bc34a;
}

.status-box img {
    width: 50px;
}

.passt-ej {
    color: var(--orange-primary);
    width: 130px;
}

.passt-pr {
    color: var(--blue-primary);
    width: 142px;
}

.percentage {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.border-right {
    border: 1px solid var(--blue-pastel);
}

.border-right .card {
    border: none;
}

/* Textos de estado */
.card-inspection {
    color: var(--blue-primary);
}

.card-drills {
    color: var(--orange-primary);
}

.card-training {
    color: var(--green-primary);
}

.index-frecuency {
    background-color: color-mix(in srgb, var(--blue-pastel), transparent 50%);
    color: var(--blue-primary);
}

.index-severity {
    background-color: color-mix(in srgb, var(--orange-pastel), transparent 50%);
    color: var(--orange-primary);
}

.index-accident {
    background-color: color-mix(in srgb, var(--green-pastel), transparent 50%);
    color: var(--green-primary);
}

.icon {
    font-size: 2rem;
}

/* =========================================
   8. FORMS & INPUTS
   ========================================= */
.select-wrapper-1 {
    position: relative;
    display: inline-block;
}

.select-modern {
    appearance: none;
    background-color: var(--white);
    border: 2px solid var(--gris-claro);
    border-radius: 12px;
    padding: 12px 45px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 220px;
}

.select-modern:hover {
    border-color: var(--blue-primary);
    background-color: var(--white);
}

.select-modern:focus {
    outline: none;
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 4px rgba(139, 195, 74, 0.1);
    background-color: var(--white);
}

.select-icon-left,
.select-icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select-icon-left {
    left: 15px;
    color: var(--blue-primary);
    font-size: 18px;
}

.select-icon-right {
    right: 15px;
    color: var(--gris-medio);
    transition: transform 0.3s ease;
}

.select-wrapper-1:hover .select-icon-right {
    transform: translateY(-50%) rotate(180deg);
}

/* =========================================
   9. TABLAS & PAGINACIÓN
   ========================================= */


#modalThead tr,
#modalThead th {
    background-color: var(--gris-casi-blanco);
    /* Nota: border-radius en TR no siempre funciona bien si border-collapse no está configurado, pero se mantiene */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 8px 15px;
}

#modalThead th {
    background-color: transparent;
}

#modalTbody td {
    text-transform: uppercase;
    text-align: center;
    padding: 8px 15px;
    color: #4b5563;
    font-size: 0.9rem;
    border-bottom: 1px solid #f3f4f6;
}

.table-hover tbody tr:hover {
    background-color: #f8fafc !important;
    transition: background-color 0.2s ease;
}

.page-item.active .page-link {
    background-color: var(--blue-primary) !important;
    border-color: var(--blue-primary) !important;
    border-radius: 8px;
}

.table-options {
    width: 120px;
}

.page-link {
    color: var(--blue-primary);
    border: none;
    margin: 0 3px;
    border-radius: 8px;
}

/* =========================================
   10. ICONOS (Masking)
   ========================================= */
/* Estilos base compartidos para iconos con máscara */
.icon-report,
.icon-avatar,
.icon-users,
.icon-logout,
.icon-company2,
.logo-gkh {
    display: inline-block;
    background-color: currentColor;
    color: inherit;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.3s ease;
}

.icon-report {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("/img/icons/document-report.svg");
    mask-image: url("/img/icons/document-report.svg");
}

.icon-users {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("/img/icons/users.svg");
    mask-image: url("/img/icons/users.svg");
}

.icon-logout {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("/img/icons/log-out.svg");
    mask-image: url("/img/icons/log-out.svg");
}

.logo-gkh {
    width: 180px;
    height: 77px;
    -webkit-mask-image: url("/img/icons/logo.svg");
    mask-image: url("/img/icons/logo.svg");
}

.icon-avatar {
    width: 50px;
    height: 50px;
    -webkit-mask-image: url("/img/icons/user-avatar.svg");
    mask-image: url("/img/icons/user-avatar.svg");
}

.icon-company2 {
    width: 50px;
    height: 50px;
    -webkit-mask-image: url("/img/icons/company.svg");
    mask-image: url("/img/icons/company.svg");
}

.icon-content-admin {
    background-color: var(--blue-primary);
    max-width: 60px;
    min-height: 60px;
}

.info-icon-popover {
    cursor: pointer;
}

.text-primary-custom {
    color: var(--color-primary) !important;
}

.notification-wrapper {
    position: relative;
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: 40px;
    width: 320px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    max-height: 600px;
    overflow-y: auto;
    z-index: 999;
}

.notif-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notif-dropdown li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.notif-dropdown li.unread {
    background: #f5f8ff;
    font-weight: 600;
}

.notification-wrapper {
    position: relative;
}

#notifBell {
    /* background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); */
    border: 2px solid var(--blue-primary);
    transition: all 0.3s ease;
}

#notifBell:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#notifBell i {
    color: var(--blue-primary) !important;
}

#notifCount.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 420px;
    max-width: 95vw;
    z-index: 1050;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notif-header {
    /* background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); */
    color: var(--blue-primary);
}

#notifList {
    max-height: 500px;
    overflow-y: auto;
}


#notifList::-webkit-scrollbar {
    width: 6px;
}

#notifList::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 10px;
}

#notifList::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 10px;
}

.notif-item:hover {
    transform: scale(1.02);
}

.unread-dot {
    animation: pulse 2s infinite;
}

.bg-drill-subtle {
    height: 50px;
}

.notify-text-drill {
    color: var(--orange-primary);
}

.notify-training,
.notify-inspection,
.notify-drill,
.bg-notify-subtle {
    border-radius: 10px;
    font-size: 15px;
}

.notify-training {
    background-color: color-mix(in srgb, var(--green-pastel), transparent 95%);
    color: var(--green-primary);
}

.notify-inspection {
    background-color: color-mix(in srgb, var(--blue-pastel), transparent 95%);
    color: var(--blue-primary);
}

.notify-drill {
    background-color: color-mix(in srgb, var(--orange-pastel), transparent 95%);
    color: var(--orange-primary);
}

.notify-border {
    border: 1px solid var(--blue-primary);
}

@media (max-width: 576px) {
    .notif-dropdown {
        width: calc(100vw - 24px);
    }
}

.container-linear {
    border: 1px solid var(--blue-pastel);
    border-radius: 15px;
}

.card-linear {
    margin: 15px;
    border-radius: 15px;
    border-left: 2px solid var(--blue-primary);
}

.actions-col {
    position: sticky;
    right: 0;
    background: var(--bs-body-bg);
    /* o white */
    z-index: 1;
    box-shadow: -2px 0 6px rgba(0, 0, 0, .05);
}

/* Contenedor principal */
.select-wrapper-1-year {
    /* Altura total reducida (ajusta a tu gusto) */
    display: flex;
    align-items: center;
    position: relative;
}

/* El select */
.select-wrapper-1-year .select-modern {
    height: 100%;
    /* Que ocupe el alto del contenedor */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 35px;
    /* Espacio para el icono izquierdo */
    padding-right: 30px;
    /* Espacio para el icono derecho */
    font-size: 1rem;
    /* Fuente un poco más pequeña ayuda a la estética */
    line-height: normal;
}


/* Calendario */
:root {
    --bs-purple: #6f42c1;
    --bs-orange: #fd7e14;
    --bs-indigo: #6610f2;
    --bs-pink: #d63384;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.bg-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.bg-purple {
    background-color: var(--bs-purple);
}

.bg-orange {
    background-color: var(--bs-orange);
}

.bg-indigo {
    background-color: var(--bs-indigo);
}

.bg-pink {
    background-color: var(--bs-pink);
}

.calendar-grid {
    display: grid;
    /* 1fr divide el espacio en 7 partes iguales exactas */
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    /* Usamos un margen responsivo para los extremos */
    margin: 0 1rem;
}

.calendar-day {
    /* IMPORTANTE: Eliminamos width: 100px */
    aspect-ratio: 2 / 1;
    /* Esto mantiene la proporción parecida a 100x50px de forma fluida */
    border: 1px solid #dee2e6;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    background-color: #ffffff;
}

.calendary-header {
    background-color: color-mix(in srgb, var(--blue-primary), transparent 0%);
    color: var(--white);
}

.calendar-day:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
}

.calendar-day.completed {
    border-color: #198754;
    background-color: #d1e7dd;
}

.calendar-day-number {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.calendar-indicators {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 20px;
}

.badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
}

.legend-container {
    padding: 1rem;
    background-color: #f8f9fa;
}

.list-group-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.hora-btn {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hora-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.inspeccion-card {
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.inspeccion-card.completed {
    border-color: #198754;
    background-color: #d1e7dd;
}

.inspeccion-card .inspeccion-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #212529;
}

.inspeccion-card.completed .inspeccion-title {
    text-decoration: line-through;
    color: #6c757d;
}

.inspeccion-badge {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.rounded-4 {
    border-radius: 1rem !important;
}

#prevMonth,
#nextMonth {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: var(--white);
}

.card-calendar {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-calendar .modal-content {
    border: none;
    border-radius: 1rem;
}

.card-calendar .modal-header {
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
}

@media (max-width: 768px) {
    .calendar-day {
        min-height: 60px;
        padding: 0.5rem;
    }

    .calendar-day-number {
        font-size: 0.875rem;
    }
}

.calendar-day-disabled {
    opacity: 0.35;
    background-color: #f1f3f5;
    color: #6c757d;
    pointer-events: none;
}

.calendar-day-disabled .calendar-day-number {
    font-weight: 400;
}

.calendar-day {
    transition: background-color 0.2s ease;
}

/* ===============================
   CALENDAR GRID (REAL)
=============================== */
/* ===== STATUS COLORS ===== */
/* ===== EVENT COLORS (no status colors) ===== */
/* === HIGH CONTRAST EVENT COLORS === */
.evt-blue {
    color: #1E88E5;
}

/* EPP */
.evt-orange {
    color: #FB8C00;
}

/* Extintores */
.evt-yellow {
    color: #FDD835;
}

/* Luz emergencia */
.evt-teal {
    color: #00897B;
}

/* Botiquín */
.evt-purple {
    color: #8E24AA;
}

/* Equipos emergencia */

.evt-navy {
    color: #0D47A1;
}

/* Simulacro */
.evt-slate {
    color: #455A64;
}

/* Inspección */
.evt-cyan {
    color: #039BE5;
}

/* Capacitación */
.evt-brown {
    color: #6D4C41;
}

/* Mantenimiento */
.evt-violet {
    color: #5E35B1;
}

/* Pruebas */

.evt-gray {
    color: #757575;
}

/* Inventario */
.evt-pink {
    color: #D81B60;
}

/* Señalización */
.evt-gold {
    color: #F9A825;
}

/* Eléctricos */
.evt-sky {
    color: #29B6F6;
}

/* Recarga extintor */
.evt-black {
    color: #212121;
}

/* Auditoría */

.evt-indigo {
    color: #3949AB;
}

.evt-amber {
    color: #FFB300;
}

.evt-lilac {
    color: #9575CD;
}

.evt-steel {
    color: #546E7A;
}

.evt-olive {
    color: #827717;
}

/* oliva ≠ verde */

.status-done {
    color: #198754;
    /* verde */
}

.status-expired {
    color: #DC3545;
    /* rojo */
}

.btn-outline-primary.active {
    background-color: #0d6efd;
    color: #fff;
}

/* ===== Día COMPLETO realizado ===== */
.calendar-day.day-done {
    border: 2px solid #198754;
    /* bootstrap success */
    background-color: rgba(25, 135, 84, 0.12);
}

/* ===== Card realizada ===== */
.card.event-done {
    border-left: 4px solid #198754;
    background-color: rgba(25, 135, 84, 0.05);
}

.card.event-done strong {
    text-decoration: line-through;
    color: #6c757d;
}

/* Badge punto realizado */
.badge-dot.done {
    background-color: #198754;
}

/* CARD */
.sst-card {
    border: 2px solid #e7f0ff;
    border-radius: 14px;
    background: #fff;
    transition: all .2s ease;
}

.sst-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 10px 30px rgba(13, 110, 253, .15);
}

/* IMAGES */
.sst-card-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
}

.sst-image-box {
    position: relative;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f3f5;
}

.sst-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PLACEHOLDER */
.sst-image-placeholder {
    width: 100%;
    height: 100%;
    border: none;
    background: #dee2e6;
    color: #6c757d;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.sst-image-placeholder:hover {
    background: #ced4da;
    color: #0d6efd;
}

/* BODY */
.sst-card-body {
    padding: 14px 16px 16px;
}

.sst-date {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 6px;
}

.sst-description {
    font-size: 14px;
    margin-bottom: 10px;
}

/* STATUS */
.sst-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
    font-weight: 500;
}

.sst-status-warning {
    background: #fff3cd;
    color: #856404;
}

/* FOOTER */
.sst-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.sst-detail {
    font-size: 13px;
    color: #0d6efd;
    text-decoration: none;
}

.sst-detail:hover {
    text-decoration: underline;
}

.sst-card-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
}

.sst-img-slot {
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f3f5;
}

.sst-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sst-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #e9ecef;
    border: 2px dashed #ced4da;
}

.sst-img-empty span {
    font-size: 32px;
    color: #6c757d;
}

.sst-img-filled {
    position: relative;
    cursor: pointer;
}

.sst-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity .2s;
}

.sst-img-filled:hover .sst-img-overlay {
    opacity: 1;
}

.card-doc-blue {
    border-left: 4px solid var(--blue-primary);
    max-width: 430px;
    height: 150px;
}

.status-progress {
    background-color: color-mix(in srgb, var(--orange-pastel), transparent 60%);
    color: var(--oreange-primary);
}

.status-resolved {
    background-color: color-mix(in srgb, var(--blue-pastel), transparent 60%);
    color: var(--blue-primary);
}

.verse {
    font-size: 12px;
    color: var(--gris-oscuro);
}