:root{
  --usal-green:#315f46;
  --usal-green-2:#4f7f3a;
  --usal-green-soft:#edf5ee;
  --usal-text:#24352e;
  --usal-muted:#697970;
  --usal-border:#d9e2dc;
  --usal-bg:#f5f7f5;
  --usal-card:#ffffff;
  --usal-warning:#d97706;
}
html,body{min-height:100%}
body{margin:0;background:var(--usal-bg);color:var(--usal-text);font-family:Arial,Helvetica,sans-serif}
.usal-topbar{background:var(--usal-green);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.usal-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;padding:10px 24px}
.usal-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.usal-brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff;color:var(--usal-green);font-weight:900}
.usal-brand strong,.usal-brand small{display:block}.usal-brand small{opacity:.75;font-size:.72rem;margin-top:2px}
.usal-user{display:flex;align-items:center;gap:12px}.usal-user strong,.usal-user small{display:block}.usal-user small{font-size:.7rem;opacity:.75}
.usal-page{padding:28px 34px 50px}.usal-messages{margin-bottom:18px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-head h1{margin:0;color:var(--usal-green);font-size:1.75rem;font-weight:900}
.page-head p,.activity-subtitle{margin:6px 0 0;color:var(--usal-muted)}
.eyebrow{color:var(--usal-muted);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.panel{background:var(--usal-card);border:1px solid var(--usal-border);border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.025)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border-bottom:1px solid var(--usal-border);background:#fbfcfb}
.panel-body{padding:18px}
.activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.activity-card{padding:18px;background:#fff;border:1px solid var(--usal-border);border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.035)}
.activity-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:14px;border-bottom:1px solid var(--usal-border)}
.activity-date{font-size:.68rem;font-weight:900;color:var(--usal-muted);text-transform:uppercase}
.activity-card h2{margin:4px 0 0;font-size:1.12rem;color:var(--usal-text);font-weight:900}
.activity-meta{margin-top:6px;color:var(--usal-muted);font-size:.78rem}
.activity-stats,.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
.stats-grid{margin-top:0}.stats-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.activity-stats>div,.stats-grid>div{padding:12px 10px;border:1px solid var(--usal-border);border-radius:10px;background:#f8faf8;text-align:center}
.activity-stats span,.stats-grid span{display:block;color:var(--usal-muted);font-size:.58rem;font-weight:900;text-transform:uppercase}
.activity-stats strong,.stats-grid strong{display:block;margin-top:5px;font-size:1.15rem;font-weight:900}
.pending-stat{background:#fff8e8!important;border-color:#f0cf8a!important}.pending-stat strong,.stat-warning{color:var(--usal-warning)!important}
.activity-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.usal-table th{padding:.7rem .8rem;color:var(--usal-muted);font-size:.64rem;font-weight:900;text-transform:uppercase;white-space:nowrap}
.usal-table td{padding:.7rem .8rem;font-size:.75rem}
.empty-state{padding:45px;text-align:center;background:#fff;border:1px dashed var(--usal-border);border-radius:14px;color:var(--usal-muted)}
.empty-state.compact{padding:28px;border:0}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:25px;background:linear-gradient(135deg,#eaf2ec,#f7f8f6)}
.login-card{width:min(520px,100%);padding:38px;background:#fff;border:1px solid var(--usal-border);border-radius:18px;box-shadow:0 18px 50px rgba(37,76,55,.12);text-align:center}
.login-brand{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:18px;background:var(--usal-green);color:#fff;font-weight:900;font-size:1.15rem}
.login-eyebrow{color:var(--usal-green);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.login-card h1{margin:7px 0 10px;font-size:1.65rem;color:var(--usal-text);font-weight:900}
.login-card p{color:var(--usal-muted);margin-bottom:25px}
.login-note{margin-top:22px;color:var(--usal-muted);font-size:.72rem}
.hand-scanner,.manual-box{padding:16px;border:1px solid var(--usal-border);border-radius:12px;background:#f8faf8}
.hand-scanner{display:flex;align-items:center;gap:15px}.hand-icon{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border-radius:12px;background:#e4f1eb;color:var(--usal-green);font-size:1.5rem;font-weight:900}
.scanner-title{font-weight:900}.scanner-help{font-size:.75rem;color:var(--usal-muted);margin:3px 0 9px}
.camera-wrapper{padding:12px;background:#11211b;border-radius:16px;overflow:hidden}
#reader{background:#fff;border:0!important;border-radius:12px;overflow:hidden}#reader video{width:100%!important;border-radius:10px}
.scan-status{margin-top:16px;padding:17px;border:1px solid var(--usal-border);border-radius:11px;background:#f3f6f4;font-weight:900;text-align:center}
.scan-status.success{background:#e5f5eb;border-color:#a9d6ba;color:#17663d}.scan-status.warning{background:#fff4d6;border-color:#ead38c;color:#7c5d00}.scan-status.error{background:#fbe8ea;border-color:#e9b8bd;color:#962936}
.present-list{max-height:680px;overflow:auto}.present-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e4e9e6}
.present-check{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e5f5eb;color:#198754;font-weight:900}
.present-time{padding:4px 7px;border-radius:6px;background:#e8f2ee;color:var(--usal-green);font-size:.67rem;font-weight:900}.registered-by{margin-top:3px;color:#78847e;font-size:.62rem}
.public-qr-card{max-width:650px;margin:50px auto;padding:34px;border:1px solid var(--usal-border);border-radius:18px;background:#fff;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.public-qr-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:16px;background:var(--usal-green-soft);font-size:1.6rem}
.public-qr-card h1{margin:5px 0;color:var(--usal-text);font-weight:900}.public-email{color:var(--usal-muted)}
.public-activity{margin-top:22px;padding:17px;border-radius:12px;background:var(--usal-green-soft)}.public-activity strong{display:block;color:var(--usal-green)}
@media(max-width:1050px){.activity-grid{grid-template-columns:1fr}}
@media(max-width:800px){.page-head,.panel-head{flex-direction:column}.usal-page{padding:20px 16px}.stats-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.activity-stats,.stats-grid{grid-template-columns:repeat(2,1fr)}.activity-actions{grid-template-columns:1fr}.usal-topbar-inner{padding:10px 15px}}
/* =========================================================
   HEADER AQREDITACIONES / USAL
   ========================================================= */

.usal-main-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: #ffffff;

    border-top: 4px solid #9dbb8e;
    border-bottom: 1px solid #d9dfda;

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, .05);
}


.usal-main-header__inner {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 8px 28px;
}


.usal-logo-link {
    display: flex;
    align-items: center;

    text-decoration: none;
}


.usal-header-logo {
    display: block;

    width: auto;
    height: 58px;

    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   USUARIO
   ========================================================= */

.usal-main-user {
    display: flex;
    align-items: center;

    gap: 14px;
}


.usal-user-info {
    text-align: right;
}


.usal-user-info strong {
    display: block;

    color: #24352e;

    font-size: .82rem;
    font-weight: 800;
}


.usal-user-info span {
    display: block;

    margin-top: 2px;

    color: #738079;

    font-size: .7rem;
}


.usal-logout-btn {
    padding: 7px 14px;

    border: 1px solid #315f46;

    background: #ffffff;

    color: #315f46;

    font-size: .72rem;
    font-weight: 800;
}


.usal-logout-btn:hover {
    background: #315f46;

    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .usal-main-header__inner {
        min-height: 68px;

        padding: 7px 14px;
    }

    .usal-header-logo {
        height: 44px;
    }

}


@media (max-width: 480px) {

    .usal-header-logo {
        height: 38px;
    }

}
/* =========================================================
   HEADER MÁS COMPACTO
   ========================================================= */

.usal-main-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: #ffffff;
    border-top: 3px solid #9dbb8e;
    border-bottom: 1px solid #d9dfda;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.usal-main-header__inner {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 5px 26px;
}

.usal-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.usal-header-logo {
    display: block;

    width: auto;
    height: 48px;

    max-width: 100%;
    object-fit: contain;
}

.usal-main-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.usal-user-info {
    text-align: right;
}

.usal-user-info strong {
    display: block;
    color: #24352e;

    font-size: .88rem;
    font-weight: 800;
}

.usal-user-info span {
    display: block;

    margin-top: 2px;

    color: #738079;
    font-size: .76rem;
}

.usal-logout-btn {
    padding: 6px 13px;

    border: 1px solid #315f46;
    background: #ffffff;
    color: #315f46;

    font-size: .78rem;
    font-weight: 800;
}

.usal-logout-btn:hover {
    background: #315f46;
    color: #ffffff;
}
/* =========================================================
   LEGIBILIDAD GENERAL
   ========================================================= */

/* Encabezados de cards */

.card-header h2,
.card-header h3,
.card-header h4,
.bb-card-header h2,
.bb-card-header h3,
.bb-card-header h4 {
    font-size: 1.12rem;
    font-weight: 800;
}


/* Subtítulos/descripciones */

.card-header p,
.bb-card-header p,
.card-subtitle {
    font-size: .88rem;
    line-height: 1.45;
}


/* =========================================================
   TARJETAS DE ESTADÍSTICAS
   ========================================================= */

.stat-card,
.bb-stat {
    padding: 17px 18px;
}

.stat-card .label,
.stat-card .stat-label,
.bb-stat-label {
    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .3px;
}

.stat-card .value,
.stat-card .stat-value,
.bb-stat-value {
    font-size: 1.35rem;
    font-weight: 900;
}


/* =========================================================
   TABLAS
   ========================================================= */

.table {
    font-size: .88rem;
}

.table thead th {
    font-size: .72rem;
    font-weight: 900;

    letter-spacing: .25px;
}

.table tbody td {
    font-size: .86rem;
    line-height: 1.4;

    vertical-align: middle;
}


/* Nombre participante */

.table tbody td:first-child {
    font-size: .9rem;
    font-weight: 700;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    font-size: .7rem;
    padding: .4em .65em;
}


/* =========================================================
   BOTONES DE TABLAS
   ========================================================= */

.table .btn {
    font-size: .8rem;
    padding: 6px 10px;
}


/* =========================================================
   CONTENIDO DE CARDS
   ========================================================= */

.card-body {
    font-size: .9rem;
}
.bb-page-head .bb-subtitle,
.bb-page-me
/* =========================================================
   LOGIN
   ========================================================= */

.login-shell {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        linear-gradient(
            135deg,
            #edf4ee 0%,
            #f8faf8 100%
        );
}


.login-card {
    width: 100%;
    max-width: 560px;

    padding: 38px 38px 34px;

    background: #ffffff;

    border: 1px solid #d8e1dd;
    border-radius: 18px;

    box-shadow:
        0 18px 45px
        rgba(36, 53, 46, .10);

    text-align: center;
}


/* =========================================================
   LOGO LOGIN
   ========================================================= */

.login-brand {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 28px;
}


.login-brand-logo {
    display: block;

    width: 100%;
    max-width: 430px;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   TEXTO
   ========================================================= */

.login-title {
    margin: 0;

    color: #24352e;

    font-size: 1.75rem;
    line-height: 1.15;

    font-weight: 900;
}


.login-subtitle {
    margin: 14px 0 26px;

    color: #68766f;

    font-size: .98rem;
    line-height: 1.5;
}


.login-subtitle strong {
    color: #315f46;
}


/* =========================================================
   GOOGLE LOGIN
   ========================================================= */

.google-login-wrapper {
    display: flex;
    justify-content: center;

    width: 100%;

    margin-top: 6px;
}


.google-login-wrapper > div {
    width: 100%;
}


.google-login-wrapper iframe {
    width: 100% !important;
    max-width: 420px !important;
}


/* =========================================================
   NOTA
   ========================================================= */

.login-note {
    margin-top: 24px;

    color: #78847e;

    font-size: .75rem;
    line-height: 1.5;
}


.login-note strong {
    color: #53675d;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .login-shell {
        padding: 18px;
    }

    .login-card {
        padding:
            30px
            22px
            28px;
    }

    .login-brand-logo {
        max-width: 330px;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-subtitle {
        font-size: .9rem;
    }

}/* =========================================================
   LOGIN
   ========================================================= */

.login-shell {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        linear-gradient(
            135deg,
            #edf4ee 0%,
            #f8faf8 100%
        );
}


.login-card {
    width: 100%;
    max-width: 560px;

    padding: 38px 38px 34px;

    background: #ffffff;

    border: 1px solid #d8e1dd;
    border-radius: 18px;

    box-shadow:
        0 18px 45px
        rgba(36, 53, 46, .10);

    text-align: center;
}


/* =========================================================
   LOGO COMPLETO
   ========================================================= */

.login-logo-full {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: auto;

    margin: 0 auto 30px;
    padding: 0;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


.login-logo-full__img {
    display: block;

    width: 470px;
    max-width: 100%;
    height: auto;

    margin: 0 auto;
    padding: 0;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    object-fit: contain;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.login-title {
    margin: 0;

    color: #24352e;

    font-size: 1.8rem;
    line-height: 1.15;

    font-weight: 900;
}


/* =========================================================
   SUBTÍTULO
   ========================================================= */

.login-subtitle {
    margin: 14px 0 27px;

    color: #68766f;

    font-size: 1rem;
    line-height: 1.5;
}


.login-subtitle strong {
    color: #315f46;
    font-weight: 800;
}


/* =========================================================
   GOOGLE
   ========================================================= */

.google-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 4px auto 0;
}


.google-login-wrapper > div {
    width: 100%;
}


.google-login-wrapper iframe {
    width: 100% !important;
    max-width: 420px !important;
}


/* =========================================================
   NOTA INFERIOR
   ========================================================= */

.login-note {
    margin-top: 25px;

    color: #78847e;

    font-size: .78rem;
    line-height: 1.5;
}


.login-note strong {
    color: #53675d;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .login-shell {
        padding: 18px;
    }


    .login-card {
        padding:
            30px
            22px
            28px;
    }


    .login-logo-full {
        margin-bottom: 24px;
    }


    .login-logo-full__img {
        width: 100%;
        max-width: 390px;
    }


    .login-title {
        font-size: 1.5rem;
    }


    .login-subtitle {
        font-size: .92rem;
    }

}
.google-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0 auto;
}

.google-login-wrapper > div {
    display: flex !important;
    justify-content: center !important;

    width: 100% !important;
}

.google-login-wrapper iframe {
    display: block !important;

    margin: 0 auto !important;

    width: 420px !important;
    max-width: 100% !important;
}
/* =========================================================
   BOTÓN PRINCIPAL - ESTILO USAL
   ========================================================= */

.btn-primary {
    background-color: #315f46 !important;
    border-color: #315f46 !important;
    color: #ffffff !important;

    font-weight: 700;

    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #244b37 !important;
    border-color: #244b37 !important;
    color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #193b2a !important;
    border-color: #193b2a !important;
}
.btn-outline-primary {
    background: #ffffff !important;
    border-color: #315f46 !important;
    color: #315f46 !important;

    font-weight: 700;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #315f46 !important;
    border-color: #315f46 !important;
    color: #ffffff !important;
}.activity-actions-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.activity-actions-4 .btn {
    width: 100%;
}

@media (max-width: 900px) {
    .activity-actions-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .activity-actions-4 {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   MODAL: ASISTENCIA YA REGISTRADA
   ========================================================= */

.aqr-modal-warning {
    overflow: hidden;

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, .18);
}


.aqr-modal-warning .modal-header {
    background: #fff4d6;

    border-bottom: 1px solid #ead38c;
}


.aqr-modal-warning .modal-title {
    color: #7c5d00;

    font-size: 1.05rem;
    font-weight: 900;
}


.aqr-modal-warning .modal-body {
    padding: 28px 30px;
}


.aqr-modal-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #fff4d6;

    color: #b27b00;

    font-size: 1.7rem;
    font-weight: 900;
}


.aqr-modal-name {
    color: #24352e;

    font-size: 1.25rem;
    font-weight: 900;
}


.aqr-modal-text {
    margin-top: 8px;

    color: #6c756f;

    font-size: .9rem;
    line-height: 1.5;
}


.aqr-modal-warning .modal-footer {
    background: #fafbf9;

    border-top: 1px solid #e3e7e4;
}
/* =========================================================
   BOTONERA ACTIVIDADES
   ========================================================= */

.activity-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.activity-actions-grid .btn-action {
    min-height: 44px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 100%;

    padding: 9px 10px;

    border-radius: 9px;

    font-size: .82rem;
    font-weight: 100;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

    box-shadow: none !important;
}


/* PARTICIPANTES */

.btn-action-primary {
    background: #315f46 !important;
    border: 1px solid #315f46 !important;
    color: #ffffff !important;
}

.btn-action-primary:hover {
    background: #244b37 !important;
    border-color: #244b37 !important;
    color: #ffffff !important;
}


/* ASISTENCIAS */

.btn-action-outline {
    background: #ffffff !important;
    border: 1px solid #4f7f3a !important;
    color: #315f46 !important;
}

.btn-action-outline:hover {
    background: #edf5ee !important;
    border-color: #315f46 !important;
    color: #244b37 !important;
}


/* EDITAR */

.btn-action-neutral {
    background: #f4f6f4 !important;
    border: 1px solid #d6dfd9 !important;
    color: #42544a !important;
}

.btn-action-neutral:hover {
    background: #e8eeea !important;
    border-color: #bfcac3 !important;
    color: #24352e !important;
}


/* ESCÁNER */

.btn-action-success {
    background: #198754 !important;
    border: 1px solid #198754 !important;
    color: #ffffff !important;
}

.btn-action-success:hover {
    background: #146c43 !important;
    border-color: #146c43 !important;
    color: #ffffff !important;
}


/* ELIMINAR */

.btn-action-danger-soft {
    background: #fff6f6 !important;
    border: 1px solid #e5b8bc !important;
    color: #a52d38 !important;
}

.btn-action-danger-soft:hover {
    background: #fbe8ea !important;
    border-color: #d58e95 !important;
    color: #8d202c !important;
}


/* =========================================================
   MODAL ELIMINAR
   ========================================================= */

.activity-delete-modal {
    overflow: hidden;

    border: 0 !important;
    border-radius: 16px !important;

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .18) !important;
}

.activity-delete-modal .modal-header {
    background: #fff5f5;
    border-bottom: 1px solid #ebc2c6;
}

.activity-delete-modal .modal-title {
    color: #9f2632;
    font-size: 1.05rem;
    font-weight: 900;
}

.activity-delete-modal .modal-body {
    padding: 30px;
    text-align: center;
}

.delete-modal-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #fbe8ea;

    font-size: 1.6rem;
}

.delete-modal-title {
    margin: 0;

    color: #24352e;

    font-size: 1.2rem;
    font-weight: 900;
}

.delete-modal-text {
    margin: 10px 0 0;

    color: #68766f;

    font-size: .9rem;
}

.delete-modal-warning {
    margin-top: 18px;
    padding: 14px 16px;

    background: #fff8e8;

    border: 1px solid #f0cf8a;
    border-radius: 9px;

    color: #7c5d00;

    font-size: .8rem;
    line-height: 1.5;
}

.activity-delete-modal .modal-footer {
    justify-content: center;

    padding: 16px 20px;

    background: #fafbf9;

    border-top: 1px solid #e3e7e4;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .activity-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 700px) {

    .activity-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 480px) {

    .activity-actions-grid {
        grid-template-columns: 1fr !important;
    }

}
/* =========================================================
   ESTRUCTURA GENERAL
   ========================================================= */

:root {
    --sidebar-width: 230px;
    --header-height: 64px;

    --usal-green: #315f46;
    --usal-green-dark: #244b37;
    --usal-green-soft: #edf5ee;

    --sidebar-text: #42544a;
    --sidebar-muted: #7b8881;
    --sidebar-border: #dce4df;
}


/* =========================================================
   HEADER
   ========================================================= */

.usal-main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1040;

    height: var(--header-height);

    background: #ffffff;

    border-top: 3px solid #9dbb8e;
    border-bottom: 1px solid #dce4df;

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, .04);
}


.usal-main-header__inner {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 24px;
}


.usal-header-logo {
    display: block;

    width: auto;
    height: 45px;

    object-fit: contain;
}


.sidebar-mobile-toggle {
    display: none;

    width: 38px;
    height: 38px;

    align-items: center;
    justify-content: center;

    border: 1px solid #d6dfd9;
    border-radius: 8px;

    background: #ffffff;

    color: var(--usal-green);

    font-size: 1.4rem;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.app-sidebar {
    position: fixed;

    top: var(--header-height);
    bottom: 0;
    left: 0;

    z-index: 1030;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-right: 1px solid var(--sidebar-border);

    box-shadow:
        2px 0 10px
        rgba(0, 0, 0, .025);
}


.sidebar-nav {
    flex: 1;

    padding: 20px 12px;

    overflow-y: auto;
}


.sidebar-section-title {
    margin:
        0
        10px
        8px;

    color: var(--sidebar-muted);

    font-size: .66rem;
    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.sidebar-link {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 4px;

    padding:
        9px
        11px;

    border-radius: 9px;

    color: var(--sidebar-text);

    font-size: .85rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease;
}


.sidebar-link:hover {
    background: var(--usal-green-soft);

    color: var(--usal-green-dark);
}


.sidebar-link.active {
    background: var(--usal-green);

    color: #ffffff;
}


.sidebar-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex: 0 0 28px;

    border-radius: 7px;

    background: #edf3ef;

    color: var(--usal-green);

    font-size: 1rem;
}


.sidebar-link:hover .sidebar-icon {
    background: #dfece3;
}


.sidebar-link.active .sidebar-icon {
    background:
        rgba(255, 255, 255, .16);

    color: #ffffff;
}


.sidebar-divider {
    height: 1px;

    margin: 18px 8px;

    background: var(--sidebar-border);
}


.sidebar-footer {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 15px 18px;

    border-top: 1px solid var(--sidebar-border);

    color: #78847e;

    font-size: .68rem;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.app-main {
    min-height: 100vh;

    margin-left: var(--sidebar-width);

    padding:
        calc(var(--header-height) + 28px)
        32px
        50px;

    background: #f5f7f5;
}


.usal-messages {
    margin-bottom: 18px;
}


/* =========================================================
   USER
   ========================================================= */

.usal-main-user {
    display: flex;
    align-items: center;

    gap: 12px;
}


.usal-user-info {
    text-align: right;
}


.usal-user-info strong {
    display: block;

    color: #24352e;

    font-size: .82rem;
    font-weight: 800;
}


.usal-user-info span {
    display: block;

    color: #78847e;

    font-size: .69rem;
}


.usal-logout-btn {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 6px 11px;

    border: 1px solid var(--usal-green);

    color: var(--usal-green);

    font-size: .75rem;
    font-weight: 800;
}


.usal-logout-btn:hover {
    background: var(--usal-green);

    color: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

.sidebar-overlay {
    display: none;
}


@media (max-width: 900px) {

    .sidebar-mobile-toggle {
        display: flex;
    }


    .app-sidebar {
        transform: translateX(-100%);

        transition:
            transform .2s ease;
    }


    .app-sidebar.is-open {
        transform: translateX(0);
    }


    .sidebar-overlay {
        position: fixed;

        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;

        z-index: 1020;

        background:
            rgba(0, 0, 0, .30);
    }


    .sidebar-overlay.is-visible {
        display: block;
    }


    .app-main {
        margin-left: 0;

        padding:
            calc(var(--header-height) + 20px)
            16px
            40px;
    }

}
/* =========================================================
   FILTROS ASISTENCIA
   ========================================================= */

.attendance-tools {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    align-items: stretch;
}


.attendance-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.attendance-filter {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 8px 14px;

    background: #ffffff;

    border: 1px solid #ccd8d1;

    color: #315f46;

    font-size: .82rem;
    font-weight: 800;
}


.attendance-filter:hover {
    background: #edf5f1;

    border-color: #008357;

    color: #006b47;
}


.attendance-filter.active {
    background: #008357;

    border-color: #008357;

    color: #ffffff;
}


.attendance-filter.active .text-success,
.attendance-filter.active .text-danger {
    color: #ffffff !important;
}


.attendance-filter-count {
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 999px;

    background: rgba(0, 0, 0, .06);

    font-size: .72rem;
    font-weight: 900;
}


.attendance-filter.active .attendance-filter-count {
    background: rgba(255, 255, 255, .18);
}


/* =========================================================
   GRAFICO SIMPLE
   ========================================================= */

.attendance-chart-card {
    padding: 15px 18px;

    background: #ffffff;

    border: 1px solid #d8e2dc;
    border-radius: 12px;
}


.attendance-chart-title {
    margin-bottom: 12px;

    color: #24352e;

    font-size: .78rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .04em;
}


.attendance-chart-bars {
    display: grid;
    gap: 10px;
}


.attendance-chart-row {
    display: grid;
    grid-template-columns: 85px 1fr 28px;

    gap: 10px;

    align-items: center;
}


.attendance-chart-label {
    color: #5e6e65;

    font-size: .78rem;
    font-weight: 700;
}


.attendance-chart-track {
    height: 10px;

    overflow: hidden;

    background: #edf1ee;

    border-radius: 999px;
}


.attendance-chart-fill {
    height: 100%;

    border-radius: 999px;
}


.attendance-chart-present {
    background: #008357;
}


.attendance-chart-absent {
    background: #dc3545;
}


.attendance-chart-row strong {
    color: #24352e;

    font-size: .82rem;
    text-align: right;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .attendance-tools {
        grid-template-columns: 1fr;
    }

}
.attendance-filter {
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 8px;

    font-size: .8rem;
    font-weight: 800;
}

.attendance-filter-count {
    min-width: 22px;
    height: 22px;

    font-size: .68rem;
}

.attendance-filter.active {
    background: #008357;
    border-color: #008357;
    color: #ffffff;
}

.attendance-chart-card {
    padding: 13px 16px;
}

.attendance-chart-title {
    margin-bottom: 10px;

    font-size: .74rem;
}

.attendance-chart-row {
    grid-template-columns: 80px 1fr 70px;
}

.attendance-chart-value {
    font-size: .78rem;
    font-weight: 800;
    text-align: right;
}
/* =========================================================
   PARTICIPANTES / QR
   ========================================================= */

.qr-participant-tools {
    display: grid;
    grid-template-columns: minmax(520px, auto) minmax(400px, 1fr);
    align-items: center;
    gap: 28px;

    padding: 14px 16px;

    background: #fff;
    border-bottom: 1px solid #dbe3de;
}


/* IZQUIERDA */

.qr-participant-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.qr-participant-controls .attendance-filters {
    flex: 0 0 auto;
}


.qr-search {
    width: 310px;
    max-width: 310px;
    margin: 0 !important;
}


.qr-search .input-group {
    height: 40px;
}


.qr-search .input-group-text {
    background: #fff;
    border-color: #ccd8d1;
    color: #008357;
}


.qr-search .form-control {
    height: 40px;

    border-color: #ccd8d1;

    font-size: .78rem;
}


.qr-search .form-control:focus {
    border-color: #008357;

    box-shadow:
        0 0 0 .15rem
        rgba(0, 131, 87, .10);
}


/* GRÁFICO */

.qr-participant-tools .attendance-mini-chart {
    min-width: 0;

    padding-left: 24px;

    border-left: 1px solid #e1e7e3;
}


/* PENDIENTES */

.qr-mini-pending {
    background: #e6a019;
}


/* =========================================================
   TABLA PARTICIPANTES
   ========================================================= */

.qr-participant-table tbody td {
    vertical-align: middle;
}


.qr-participant-table .attendance-person-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;
}


.qr-avatar-pending {
    background: #fff4dc !important;
    color: #946200 !important;
}


.qr-state-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 7px;

    background: #fff4dc;

    color: #946200;

    font-size: .67rem;
    font-weight: 800;
}


.qr-last-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #53665b;

    font-size: .74rem;
}


.qr-last-send i {
    color: #008357;
}


.qr-send-count {
    min-width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 999px;

    background: #edf3ef;

    color: #315f46;

    font-size: .7rem;
    font-weight: 900;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .qr-participant-tools {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .qr-participant-tools .attendance-mini-chart {
        padding-top: 13px;
        padding-left: 0;

        border-top: 1px solid #e1e7e3;
        border-left: 0;
    }

}


@media (max-width: 800px) {

    .qr-participant-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .qr-search {
        width: 100%;
        max-width: none;
    }

}


@media (max-width: 600px) {

    .qr-participant-tools {
        padding: 12px;
    }

}
/* =========================================================
   PARTICIPANTES / QR
   ========================================================= */

.qr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;
}


/* =========================================================
   BLOQUE FILTROS + GRÁFICO
   ========================================================= */

.qr-participant-tools {
    display: grid;

    grid-template-columns:
        minmax(520px, auto)
        minmax(400px, 1fr);

    align-items: center;

    gap: 28px;

    padding: 14px 16px;

    background: #ffffff;

    border-bottom: 1px solid #dbe3de;
}


.qr-participant-controls {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   FILTROS
   ========================================================= */

.attendance-filters {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


.attendance-filter {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 7px 12px;

    border: 1px solid #ccd8d1;
    border-radius: 8px;

    background: #ffffff;

    color: #315f46;

    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.attendance-filter:hover {
    background: #f0f7f4;

    border-color: #008357;

    color: #006b47;
}


.attendance-filter.active {
    background: #008357;

    border-color: #008357;

    color: #ffffff;
}


.attendance-filter i {
    font-size: .95rem;
}


.attendance-filter-number {
    min-width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 999px;

    background: #edf2ef;

    color: #42544a;

    font-size: .68rem;
    font-weight: 900;
}


.attendance-filter.active
.attendance-filter-number {
    background:
        rgba(255, 255, 255, .20);

    color: #ffffff;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.qr-search {
    width: 310px;
    max-width: 310px;

    margin: 0 !important;
}


.qr-search .input-group {
    height: 40px;
}


.qr-search .input-group-text {
    background: #ffffff;

    border-color: #ccd8d1;

    color: #008357;
}


.qr-search .form-control {
    height: 40px;

    border-color: #ccd8d1;

    font-size: .78rem;
}


.qr-search .form-control:focus {
    border-color: #008357;

    box-shadow:
        0 0 0 .15rem
        rgba(0, 131, 87, .10);
}


/* =========================================================
   MINI GRÁFICO
   ========================================================= */

.attendance-mini-chart {
    min-width: 0;

    padding-left: 24px;

    border-left: 1px solid #e1e7e3;
}


.attendance-mini-title {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 9px;

    color: #24352e;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.attendance-mini-title i {
    color: #008357;
}


.attendance-mini-row {
    display: grid;

    grid-template-columns:
        74px
        minmax(120px, 1fr)
        70px;

    align-items: center;

    gap: 10px;

    margin-top: 7px;
}


.attendance-mini-label {
    color: #5f7066;

    font-size: .71rem;
    font-weight: 700;
}


.attendance-mini-track {
    height: 8px;

    overflow: hidden;

    background: #edf1ee;

    border-radius: 999px;
}


.attendance-mini-fill {
    height: 100%;

    border-radius: 999px;
}


.attendance-mini-present {
    background: #008357;
}


.qr-mini-pending {
    background: #e6a019;
}


.attendance-mini-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
 font-size: 11px;
    gap: 4px;

    white-space: nowrap;
}


.attendance-mini-value strong {
    color: #24352e;

    font-size: .76rem;
    font-weight: 900;
}


.attendance-mini-value span {
    color: #6a786f;

    font-size: .66rem;
    font-weight: 700;
}


/* =========================================================
   INFO DEL FILTRO
   ========================================================= */

.attendance-table-info {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 8px 14px;

    background: #fafcfb;

    border-bottom: 1px solid #e1e7e3;

    color: #6b7971;

    font-size: .72rem;
}


.attendance-table-info strong {
    color: #008357;

    font-size: .78rem;
}


/* =========================================================
   TABLA
   ========================================================= */

.attendance-table {
    margin: 0;
}


.attendance-table thead th {
    padding: 12px 14px;

    background: #ffffff;

    color: #597066;

    border-bottom: 1px solid #d8e1dc;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .025em;

    text-transform: uppercase;

    white-space: nowrap;
}


.attendance-table tbody td {
    padding: 11px 14px;

    color: #26352f;

    border-bottom: 1px solid #e1e7e3;

    font-size: .8rem;

    vertical-align: middle;
}


.attendance-table tbody tr:last-child td {
    border-bottom: 0;
}


.attendance-table tbody tr:hover {
    background: #fafcfb;
}


/* =========================================================
   PERSONA
   ========================================================= */

.attendance-person {
    display: flex;
    align-items: center;

    gap: 10px;
}


.attendance-person-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 50%;

    background: #e5f5eb;

    color: #008357;

    font-size: .72rem;
    font-weight: 900;
}


.qr-avatar-pending {
    background: #fff4dc !important;

    color: #946200 !important;
}


.attendance-person strong {
    display: block;

    color: #202e28;

    font-size: .82rem;
    font-weight: 800;
}


.attendance-person-doc {
    margin-top: 2px;

    color: #7a8780;

    font-size: .65rem;
}


/* =========================================================
   EMAIL
   ========================================================= */

.attendance-email {
    color: #26352f;

    text-decoration: none;
}


.attendance-email:hover {
    color: #008357;

    text-decoration: underline;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.attendance-state {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 7px;

    font-size: .67rem;
    font-weight: 800;
}


.attendance-state.is-present {
    background: #e3f4e9;

    color: #087442;
}


.qr-state-pending {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    background: #fff4dc;

    border-radius: 7px;

    color: #946200;

    font-size: .67rem;
    font-weight: 800;
}


/* =========================================================
   ENVÍO
   ========================================================= */

.qr-last-send {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #53665b;

    font-size: .74rem;
}


.qr-last-send i {
    color: #008357;
}


.qr-send-count {
    min-width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 999px;

    background: #edf3ef;

    color: #315f46;

    font-size: .7rem;
    font-weight: 900;
}


/* =========================================================
   MODAL ENVÍO
   ========================================================= */

.qr-send-modal {
    overflow: hidden;

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .18);
}


.qr-send-modal .modal-header {
    background: #eef7f3;

    border-bottom: 1px solid #d6e8df;
}


.qr-send-modal .modal-title {
    color: #006d49;

    font-size: 1.05rem;
    font-weight: 900;
}


.qr-send-modal .modal-body {
    padding: 30px;
}


.qr-send-modal .modal-body h4 {
    margin: 12px 0 8px;

    color: #24352e;

    font-size: 1.15rem;
    font-weight: 900;
}


.qr-send-modal .modal-body p {
    color: #6d7972;

    font-size: .85rem;
}


.qr-send-modal-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto;

    border-radius: 50%;

    background: #e0f1e9;

    color: #008357;

    font-size: 1.5rem;
}


.qr-send-email {
    display: inline-block;

    margin-top: 5px;
    padding: 8px 12px;

    background: #f4f7f5;

    border: 1px solid #dce5df;
    border-radius: 8px;

    color: #315f46;

    font-size: .8rem;
    font-weight: 800;
}


.qr-send-modal .modal-footer {
    justify-content: center;

    background: #fafcfb;

    border-top: 1px solid #e1e7e3;
}


/* =========================================================
   SIN RESULTADOS
   ========================================================= */

.attendance-no-results {
    padding: 35px 20px;

    text-align: center;

    color: #718078;
}


.attendance-no-results i {
    display: block;

    margin-bottom: 8px;

    color: #008357;

    font-size: 1.5rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .qr-participant-tools {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .attendance-mini-chart {
        padding-top: 13px;
        padding-left: 0;

        border-top: 1px solid #e1e7e3;
        border-left: 0;
    }

}


@media (max-width: 800px) {

    .qr-participant-controls {
        flex-direction: column;

        align-items: stretch;
    }


    .qr-search {
        width: 100%;

        max-width: none;
    }

}


@media (max-width: 600px) {

    .attendance-filters {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        width: 100%;
    }


    .attendance-filter {
        padding:
            7px
            5px;

        font-size: .7rem;
    }


    .attendance-filter i {
        display: none;
    }


    .qr-toolbar {
        align-items: stretch;
    }


    .qr-toolbar > div,
    .qr-toolbar form,
    .qr-toolbar .btn {
        width: 100%;
    }

}
.attendance-filters-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.attendance-search {
    width: 310px;
    max-width: 310px;
}

.attendance-search .input-group {
    height: 40px;
}

.attendance-search .input-group-text {
    background: #ffffff;
    border-color: #ccd8d1;
    color: #008357;
}

.attendance-search .form-control {
    height: 40px;
    border-color: #ccd8d1;
    font-size: .78rem;
}

.attendance-search .form-control:focus {
    border-color: #008357;

    box-shadow:
        0 0 0 .15rem
        rgba(0, 131, 87, .10);
}

@media (max-width: 800px) {

    .attendance-filters-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-search {
        width: 100%;
        max-width: none;
    }

}
/* =========================================================
   COLORES PARTICIPANTES
   ========================================================= */

.participant-avatar.avatar-0 {
    background: #e4f3eb;
    color: #08744c;
}

.participant-avatar.avatar-1 {
    background: #fff0d9;
    color: #9b6200;
}

.participant-avatar.avatar-2 {
    background: #e7eefc;
    color: #345ca8;
}

.participant-avatar.avatar-3 {
    background: #f4e8f8;
    color: #7a4390;
}

.participant-avatar.avatar-4 {
    background: #fde9eb;
    color: #a23c49;
}

.participant-avatar.avatar-5 {
    background: #e5f4f4;
    color: #217273;
}

.participant-avatar.avatar-6 {
    background: #f0eee5;
    color: #766836;
}

.participant-avatar.avatar-7 {
    background: #ece9fb;
    color: #5c4ba3;
}

.attendance-person-doc {
    margin-top: 2px;
    color: #78857e;
    font-size: .66rem;
    font-weight: 600;
}
/* =========================================================
   MENSAJES
   ========================================================= */

.usal-messages {
    position: fixed;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 40px);
    max-width: 720px;

    z-index: 9999;

    pointer-events: none;
}


.usal-messages .usal-alert {
    position: relative;

    width: 100%;
    margin: 0;

    padding: 14px 48px 14px 18px;

    border-radius: 10px;

    font-size: .9rem;
    font-weight: 600;

    text-align: center;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, .12);

    pointer-events: auto;
}


.usal-alert-content {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;
}


/* =========================================================
   ERROR
   ========================================================= */

.usal-messages .alert-danger {
    color: #9f1d28 !important;

    background-color: #fff1f2 !important;

    border: 1px solid #efb8bd !important;
    border-left: 5px solid #c62828 !important;
}


.usal-messages .alert-danger
.usal-alert-content > i {
    color: #c62828;

    font-size: 1.05rem;
}


/* =========================================================
   ÉXITO
   ========================================================= */

.usal-messages .alert-success {
    color: #075f42 !important;

    background-color: #edf8f3 !important;

    border: 1px solid #b7dfcf !important;
    border-left: 5px solid #008357 !important;
}


.usal-messages .alert-success
.usal-alert-content > i {
    color: #008357;
}


/* =========================================================
   WARNING
   ========================================================= */

.usal-messages .alert-warning {
    color: #805500 !important;

    background-color: #fff8e8 !important;

    border: 1px solid #ead39a !important;
    border-left: 5px solid #d99800 !important;
}


/* =========================================================
   INFO
   ========================================================= */

.usal-messages .alert-info {
    color: #174c63 !important;

    background-color: #eef7fb !important;

    border: 1px solid #bddce9 !important;
    border-left: 5px solid #3282a8 !important;
}


/* =========================================================
   CERRAR
   ========================================================= */

.usal-messages .btn-close {
    position: absolute;

    top: 50%;
    right: 15px;

    transform: translateY(-50%);

    padding: 8px;

    font-size: .72rem;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .usal-messages {
        top: 10px;

        width: calc(100% - 20px);
    }


    .usal-messages .usal-alert {
        padding:
            12px
            42px
            12px
            14px;

        font-size: .8rem;
    }


    .usal-alert-content {
        align-items: flex-start;

        text-align: left;
    }

}
/* =========================================================
   CREADOR + ESTADO
   ========================================================= */

.activity-owner-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    margin-top: 2px;

    flex-wrap: nowrap;
}


/* CREADOR */

.activity-owner {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: #56665e;

    font-size: .68rem;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;
}


.activity-owner i {
    color: #008357;

    font-size: .72rem;
}


/* ESTADO */

.activity-owner-status .badge {
    padding: 3px 7px;

    border-radius: 5px;

    font-size: .82rem;
    font-weight: 700;

    line-height: 1;
}


/* MOBILE */

@media (max-width: 600px) {

    .activity-owner-status {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;

        gap: 6px;
    }


    .activity-owner {
        font-size: .64rem;
    }


    .activity-owner i {
        font-size: .68rem;
    }


    .activity-owner-status .badge {
        font-size: .58rem;
    }

}
/* Información de la actividad */

.activity-info {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 8px;

    font-size: 13px;
    line-height: 1.45;
}


/* Cada fila */

.activity-info-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    color: #008357;
}


/* Iconos */

.activity-info-row i {
    flex: 0 0 16px;

    margin-top: 1px;

    color: #008357;

    font-size: 14px;
    text-align: center;
}


/* Hora */

.activity-info-row:first-child span {
    color: #006f49;
    font-weight: 600;
}


/* Separador entre horas */

.activity-time-separator {
    margin: 0 3px;

    color: #7a9186;
}


/* Lugar */

.activity-location span {
    color: #3f6253;
    font-weight: 600;
}


/* Si luego hacemos el lugar clickeable */

.activity-location a {
    color: #3f6253;
    text-decoration: none;
}

.activity-location a:hover {
    color: #008357;
    text-decoration: underline;
}
/* ==========================================================
   SCANNER - DOS COLUMNAS
   ========================================================== */

.scanner-layout {
    display: grid;

    grid-template-columns:
        minmax(350px, 0.7fr)
        minmax(560px, 1.3fr);

    gap: 20px;

    align-items: start;
}
.scanner-main,
.scanner-recent {
    min-width: 0;
}

.scanner-card {
    background: #fff;
    border: 1px solid #d9e2dc;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .035);
}

.scanner-card-header {
    padding: 20px 22px;
    border-bottom: 1px solid #e2e8e4;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.section-eyebrow {
    color: #61756b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.scanner-card-header h2 {
    margin: 0;
    color: #17261f;
    font-size: 23px;
    font-weight: 700;
}


/* ==========================================================
   ESTADO
   ========================================================== */

.scanner-status {
    margin: 20px;
    padding: 18px;

    display: flex;
    align-items: center;
    gap: 15px;

    border-radius: 12px;
}

.scanner-status-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 19px;
}

.scanner-status strong {
    display: block;
    margin-bottom: 3px;
}

.scanner-status-success {
    background: #edf8f2;
    border: 1px solid #b9dfca;
    color: #146b47;
}

.scanner-status-success .scanner-status-icon {
    background: #d9f1e4;
}

.scanner-status-warning {
    background: #fff7e8;
    border: 1px solid #efc875;
    color: #785000;
}

.scanner-status-warning .scanner-status-icon {
    background: #ffe9bc;
}

.scanner-time-info {
    margin-top: 7px;
}


/* ==========================================================
   LECTOR
   ========================================================== */

.scanner-reader {
    padding: 0 20px 20px;
}

#reader {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.scanner-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 20px;
    color: #76827c;
    font-size: 12px;
}

.scanner-divider::before,
.scanner-divider::after {
    content: "";
    height: 1px;
    background: #e0e6e2;
    flex: 1;
}

.scanner-manual-form {
    padding: 18px 20px 22px;
}


/* ==========================================================
   ÚLTIMAS ACREDITACIONES
   ========================================================== */

.recent-card {
    position: sticky;
    top: 85px;
}

.recent-count {
    min-width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #e5f3ec;
    color: #008357;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;
}

.recent-list {
    max-height: 610px;
    overflow-y: auto;
}

.recent-item {
    display: grid;

    grid-template-columns:
        42px
        minmax(220px, 1fr)
        minmax(120px, auto);

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #edf1ee;
}

.recent-item:last-child {
    border-bottom: 0;
}

.recent-avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e5f3ec;
    color: #008357;

    font-size: 14px;
    font-weight: 800;
}

.recent-person {
    min-width: 0;
}

.recent-person strong {
    display: block;

    color: #17261f;
    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-person span {
    display: block;

    margin-top: 2px;

    color: #6c7872;
    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-meta {
    text-align: right;
}

.recent-meta > strong {
    display: block;

    color: #008357;
    font-size: 13px;
}

.recent-meta > span {
    display: block;

    max-width: 130px;
    margin-top: 3px;

    color: #748079;
    font-size: 10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   SIN REGISTROS
   ========================================================== */

.recent-empty {
    min-height: 230px;

    padding: 35px 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.recent-empty-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf5f1;
    color: #008357;

    font-size: 23px;
}

.recent-empty strong {
    color: #26372f;
    font-size: 14px;
}

.recent-empty span {
    max-width: 260px;
    margin-top: 5px;

    color: #748079;
    font-size: 12px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .scanner-layout {
        grid-template-columns: 1fr;
    }

    .recent-card {
        position: static;
    }

    .recent-list {
        max-height: none;
    }
}

@media (max-width: 600px) {

    .scanner-card-header {
        padding: 16px;
    }

    .scanner-card-header h2 {
        font-size: 19px;
    }

    .scanner-status {
        margin: 15px;
    }

    .recent-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .recent-meta {
        grid-column: 2;
        text-align: left;
    }
}
.recent-user {
    display: block;

    overflow: hidden;

    max-width: 180px;

    margin-top: 3px;

    color: #748079;

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}
/* =========================================================
   ACTIVIDADES - MOBILE
   Propietario arriba y contenido debajo a todo el ancho
   ========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       CABECERA DE LA TARJETA
       ===================================================== */

    .activity-card-head {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 10px !important;
    }


    /*
     * Primer DIV:
     * fecha + título + horario + lugar
     *
     * Lo mandamos debajo del propietario.
     */

    .activity-card-head > div:first-child {
        order: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;
    }


    /* =====================================================
       PROPIETARIO + ESTADO
       ===================================================== */

    .activity-owner-status {
        order: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 8px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 0 2px !important;
    }


    .activity-owner {
        display: inline-flex !important;
        align-items: center !important;

        gap: 4px !important;

        min-width: 0 !important;

        overflow: hidden !important;

        font-size: .68rem !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }


    .activity-owner i {
        flex: 0 0 auto !important;
    }


    .activity-owner-status .badge {
        flex: 0 0 auto !important;

        margin-left: auto !important;
    }


    /* =====================================================
       FECHA
       ===================================================== */

    .activity-date {
        display: block !important;

        width: 100% !important;

        margin: 0 0 4px !important;

        font-size: .7rem !important;
    }


    /* =====================================================
       TÍTULO
       AHORA USA TODO EL ANCHO
       ===================================================== */

    .activity-card-head h2 {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 2px 0 10px !important;
        padding: 0 !important;

        font-size: 1.28rem !important;
        line-height: 1.12 !important;

        font-weight: 850 !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;

        hyphens: none !important;
    }


    /* =====================================================
       INFO: HORARIO + LUGAR
       ===================================================== */

    .activity-info {
        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }


    .activity-info-row {
        display: grid !important;

        grid-template-columns:
            16px
            minmax(0, 1fr) !important;

        align-items: start !important;

        gap: 6px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }


    .activity-info-row > i {
        grid-column: 1 !important;

        margin-top: 2px !important;
    }


    .activity-info-row > span {
        grid-column: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: break-word !important;

        hyphens: none !important;
    }


    /* =====================================================
       LUGAR
       ===================================================== */

    .activity-location {
        width: 100% !important;
        max-width: none !important;
    }


    .activity-location > span {
        width: 100% !important;
        max-width: none !important;

        line-height: 1.45 !important;
    }


    /* =====================================================
       TARJETA
       ===================================================== */

    .activity-card {
        width: 100% !important;
        max-width: none !important;

        padding: 16px !important;
    }


    /* =====================================================
       ESTADÍSTICAS
       ===================================================== */

    .activity-stats {
        width: 100% !important;

        margin-top: 15px !important;
    }


    /* =====================================================
       ACCIONES
       ===================================================== */

    .activity-actions-grid {
        width: 100% !important;
    }

}
/* =========================================================
   TARJETAS DE ACTIVIDADES
   Propietario arriba + contenido a todo el ancho
   ========================================================= */

.activity-card-head {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    gap: 8px !important;
}


/* Propietario + estado arriba */

.activity-owner-status {
    order: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* Contenido de la actividad debajo */

.activity-card-head > div:first-child {
    order: 2 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* =========================================================
   FECHA
   ========================================================= */

.activity-date {
    width: 100% !important;

    margin-bottom: 4px !important;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.activity-card-head h2 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin:
        2px
        0
        10px !important;

    padding: 0 !important;

    font-size: 1.15rem !important;
    line-height: 1.15 !important;

    font-weight: 850 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;

    hyphens: none !important;
}


/* =========================================================
   HORARIO + LUGAR
   ========================================================= */

.activity-info {
    display: flex !important;
    flex-direction: column !important;

    gap: 6px !important;

    width: 100% !important;
    max-width: none !important;
}


.activity-info-row {
    display: grid !important;

    grid-template-columns:
        16px
        minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 6px !important;

    width: 100% !important;
}


.activity-info-row > i {
    margin-top: 2px;
}


.activity-info-row > span {
    min-width: 0 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* =========================================================
   PROPIETARIO
   ========================================================= */

.activity-owner {
    display: inline-flex !important;
    align-items: center !important;

    gap: 4px !important;

    min-width: 0 !important;
    max-width: 70% !important;

    overflow: hidden !important;

    color: #53665c;

    font-size: .65rem !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


.activity-owner-status .badge {
    flex: 0 0 auto !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .activity-owner-status {
        justify-content: space-between !important;
    }


    .activity-owner {
        max-width: 75% !important;
    }


    .activity-card-head h2 {
        font-size: 1.25rem !important;
        line-height: 1.12 !important;
    }

}
/* =========================================================
   ACTIVIDADES
   Si hay una sola actividad ocupa todo el ancho
   ========================================================= */

.activity-grid > .activity-card:only-child {
    grid-column: 1 / -1;

    width: 100%;
    max-width: none;
}
.activity-grid > .activity-card:only-child .activity-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.activity-grid > .activity-card:only-child .activity-actions-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 700px) {

    .activity-grid > .activity-card:only-child .activity-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-grid > .activity-card:only-child .activity-actions-grid {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================
   OPCIÓN AUXILIAR EN ASUNTO DEL MAIL
   ========================================================== */



.mail-subject-option {
    width: 100%;
    padding: 0;
    margin-top: 8px;
    border: 0;
    background: transparent;
}

.mail-subject-option .form-check {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 24px;

    margin: 0;
    padding: 0;
}

.mail-subject-option .form-check-input {
    position: static;
    float: none;

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 0;

    cursor: pointer;
}

.mail-subject-option .form-check-label {
    margin: 0;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;

    color: #26352f;

    cursor: pointer;
}

.mail-subject-option__help {
    margin-top: 5px;
    margin-left: 26px;

    font-size: 12px;
    line-height: 1.4;

    color: #6c757d;
}
/* ==========================================================
   BOTONERA ACTIVIDAD - MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .activity-detail-actions {
        width: 100%;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        gap: 8px;

        margin-left: auto;
        margin-right: auto;
    }

    .activity-detail-actions .btn {
        margin: 0;
    }

}
/* ==========================================================
   TABLA NORMAL - DESKTOP
   ========================================================== */

.mobile-card-table {
    width: 100%;
}

/*
 * En desktop NO transformamos nada.
 * La tabla conserva sus estilos normales:
 * thead, columnas, separadores, alineaciones, etc.
 */
.mobile-card-table thead th {
    padding: 12px 14px;
    background: #ffffff;
    color: #597066;
    border-bottom: 1px solid #d8e1dc;

    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .025em;
    text-transform: uppercase;

    white-space: nowrap;
}

/* ==========================================================
   TABLA COMO TARJETAS - MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .mobile-card-table {
        width: 100%;
        margin: 0;

        border: 0;
    }


    /* ----------------------------------------------
       OCULTAR CABECERA
       ---------------------------------------------- */

    .mobile-card-table thead {
        display: none;
    }


    /* ----------------------------------------------
       BODY
       ---------------------------------------------- */

    .mobile-card-table tbody {
        display: block;
        width: 100%;
    }


    /* ----------------------------------------------
       CADA FILA ES UNA TARJETA
       ---------------------------------------------- */

    .mobile-card-table tbody tr {
        display: block;

        width: 100%;

        margin-bottom: 12px;

        background: #ffffff;

        border: 1px solid #dce5e0;
        border-radius: 4px;

        overflow: hidden;
    }


    /* ----------------------------------------------
       CELDAS
       ---------------------------------------------- */

    .mobile-card-table tbody td {
        display: flex;

        width: 100%;
        min-height: 46px;

        align-items: center;
        justify-content: center;

        gap: 8px;

        padding: 9px 12px;

        border: 0;
        border-bottom: 1px solid #edf1ef;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    .mobile-card-table tbody td:last-child {
        border-bottom: 0;
    }


    /* ----------------------------------------------
       NO MOSTRAR data-label
       ---------------------------------------------- */

    .mobile-card-table tbody td::before {
        display: none;
        content: none;
    }


    /* ----------------------------------------------
       CONTENIDO CENTRADO
       ---------------------------------------------- */

    .mobile-card-table tbody td > * {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }


    /* ----------------------------------------------
       PARTICIPANTE
       ---------------------------------------------- */

    .mobile-card-table tbody td:first-child {
        min-height: 58px;

        padding-top: 10px;
        padding-bottom: 10px;
    }


    .mobile-card-table .attendance-person {
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 10px;

        text-align: left;
    }


    .mobile-card-table .attendance-person > div:last-child {
        flex: 0 1 auto;
    }


    /* ----------------------------------------------
       EMAIL
       ---------------------------------------------- */

    .mobile-card-table .attendance-email {
        display: block;

        max-width: 100%;

        text-align: center;

        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* ----------------------------------------------
       ESTADOS / BADGES
       ---------------------------------------------- */

    .mobile-card-table .attendance-state,
    .mobile-card-table .qr-state-pending,
    .mobile-card-table .badge {
        margin-left: auto;
        margin-right: auto;
    }


    /* ----------------------------------------------
       BOTONES
       ---------------------------------------------- */

    .mobile-card-table .btn {
        margin-left: auto;
        margin-right: auto;
    }


    /* ----------------------------------------------
       ACCIONES
       ---------------------------------------------- */

    .mobile-card-table td.actions-column {
        justify-content: center;
    }


    .mobile-card-table .participant-actions {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        align-items: center;
        justify-content: center;

        gap: 7px;
    }


    /* ----------------------------------------------
       QUITAR ANCHOS FORZADOS DE DESKTOP
       ---------------------------------------------- */

    .mobile-card-table .actions-column {
        min-width: 0 !important;
    }

}

/* ==========================================================
   SIDEBAR - ITEM ACTIVO
   ========================================================== */

.sidebar-link {
    position: relative;

    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}


/* Hover */

.sidebar-link:hover {
    background: #f0f6f3;
    color: #007b52;
}


/* ==========================================================
   SECCIÓN SELECCIONADA
   ========================================================== */

.sidebar-link.active {
    background: #e5f3ed;

    color: #006f4a;

    font-weight: 800;
}


/* Icono seleccionado */

.sidebar-link.active .sidebar-icon {
    color: #008357;
}


/* Barra verde izquierda */

.sidebar-link.active::before {
    content: "";

    position: absolute;

    left: 0;
    top: 6px;
    bottom: 6px;

    width: 4px;

    background: #008357;

    border-radius: 0 4px 4px 0;
}


/* Evitar cambio extraño al pasar el mouse */

.sidebar-link.active:hover {
    background: #dcefe7;
    color: #006f4a;
}