*{box-sizing:border-box}
:root{--ink:#17202a;--muted:#667085;--line:#e6eaf0;--bg:#f5f7fa;--green:#087a4b;--green2:#ecfdf3;--red:#b42318;--red2:#fff1f0;--navy:#111827}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}
a{color:inherit}.shell{max-width:1080px;margin:0 auto;padding:34px 20px 60px}.shell.narrow{max-width:760px}.home{max-width:920px}
.brand{font-size:16px;font-weight:800;color:#697386}.brand span{font-weight:500}.company{font-size:23px;font-weight:900;margin-top:5px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px}.settings,.ghost,.back{text-decoration:none}
.settings{width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:14px;display:grid;place-items:center;font-size:20px}
.ghost,.back{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:800}
.step,.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:#667085;font-size:12px;font-weight:900;margin-top:14px}
h1{font-size:34px;line-height:1.08;margin:10px 0 10px}.lead,.welcome p{color:var(--muted);font-size:17px;line-height:1.55;margin:0 0 24px}
.welcome{margin:24px 0}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.form-card{margin-top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{font-size:13px;font-weight:800;color:#344054}.field.full{grid-column:1/-1}
input{width:100%;margin-top:7px;border:1px solid #cfd5df;border-radius:12px;padding:13px 14px;font-size:16px;color:var(--ink);background:#fff;outline:none}
input:focus{border-color:#667085;box-shadow:0 0 0 3px rgba(102,112,133,.12)}
.primary{width:100%;border:0;border-radius:13px;padding:15px 18px;background:var(--navy);color:#fff;font-size:16px;font-weight:900;cursor:pointer;margin-top:20px}
.primary:disabled{opacity:.45;cursor:not-allowed}.linkbtn{display:block;text-align:center;text-decoration:none}
.alert{padding:13px 15px;border-radius:12px;margin:15px 0;font-weight:700}.alert.error{background:var(--red2);color:var(--red)}.alert.success{background:var(--green2);color:var(--green)}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}.card h2{margin-top:0;font-size:20px}.empty,.muted,.helper{color:var(--muted)}
.people-list{display:grid;gap:8px}.person-row,.person-check,.select-all{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px}
.avatar{width:42px;height:42px;border-radius:12px;background:#eef2f6;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.action-card{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;align-items:center;gap:18px;min-height:150px}
.action-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:36px;font-weight:900}.entrada .action-icon{background:var(--green2);color:var(--green)}.salida .action-icon{background:var(--red2);color:var(--red)}
.action-card strong{display:block;font-size:25px}.action-card span{display:block;color:var(--muted);margin-top:5px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.quick>a,.quick>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;min-width:0}.quick strong,.quick small{display:block}.quick small{color:var(--muted);margin-top:4px}.quick-icon{font-size:22px}.quick .disabled{opacity:.55}
.notice{margin-top:18px;padding:16px 18px;background:#fff7ed;color:#9a3412;border-radius:14px;line-height:1.45}
.select-all{margin-bottom:12px;background:#f8fafc}.select-all input,.person-check input{width:20px;height:20px;margin:0}.select-all span small,.person-check span small{display:block;color:var(--muted);margin-top:3px}.people-checks{display:grid;gap:9px}.helper{font-size:13px;line-height:1.45;margin-top:10px}
@media(max-width:760px){.shell{padding:24px 16px 42px}h1{font-size:29px}.grid2,.two-col,.action-grid{grid-template-columns:1fr}.quick{grid-template-columns:1fr 1fr}.action-card{min-height:118px;padding:20px}.action-card strong{font-size:22px}.field.full{grid-column:auto}}

/* Personal */
select{width:100%;margin-top:7px;border:1px solid #cfd5df;border-radius:12px;padding:13px 14px;font-size:16px;color:var(--ink);background:#fff;outline:none}
select:focus{border-color:#667085;box-shadow:0 0 0 3px rgba(102,112,133,.12)}
.personal-actions{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:start}
.import-card{margin-top:20px;display:flex;gap:16px;align-items:flex-start}
.personal-action-icon{width:52px;height:52px;border-radius:15px;background:#eef2f6;display:grid;place-items:center;font-size:28px;font-weight:900;flex:0 0 auto}
.personal-action-content{min-width:0;flex:1}.personal-action-content h2{margin:1px 0 8px}.personal-action-content p{color:var(--muted);line-height:1.45;margin:0 0 16px}
.secondary{width:100%;border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:#f8fafc;color:#344054;font-size:15px;font-weight:900;cursor:pointer}
.secondary:disabled{opacity:.58;cursor:not-allowed}
.personal-list-card{margin-top:20px}.card-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.card-title-row h2{margin-bottom:4px}
.personal-row{min-width:0}.person-main{min-width:0;flex:1}.person-main strong,.person-main .muted{overflow-wrap:anywhere}
.person-badges{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.type-badge,.source-badge{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}
.type-badge{background:#f2f4f7;color:#344054}.source-badge{background:#ecfdf3;color:#087a4b}
@media(max-width:760px){.personal-actions{grid-template-columns:1fr}.import-card{margin-top:10px}.personal-row{align-items:flex-start}.person-badges{max-width:120px}.type-badge,.source-badge{white-space:normal;text-align:center}}

/* Importación ViadCont */
.secondary.linkbtn{display:block;text-align:center;text-decoration:none}
.imported-person{background:#f8fafc;opacity:.78}
.imported-person input{cursor:not-allowed}
@media(max-width:560px){.person-check{align-items:flex-start;flex-wrap:wrap}.person-check .source-badge,.person-check .type-badge{margin-left:auto}}

/* Eliminar personal */
.delete-person-form{margin:0}
.delete-person-btn{width:32px;height:32px;border:1px solid #f1b7b2;border-radius:10px;background:#fff1f0;color:#b42318;font-size:23px;line-height:1;font-weight:800;cursor:pointer;display:grid;place-items:center;padding:0}
.delete-person-btn:hover{background:#fee4e2;border-color:#e98b82}

/* Personal: eliminar fuera de la card y perfectamente alineado */
.person-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    gap:10px;
    align-items:center;
}
.person-line + .person-line{
    margin-top:8px;
}
.person-line .personal-row{
    margin:0;
    width:100%;
}
.person-line .delete-person-form{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.person-line .delete-person-btn{
    width:34px;
    height:34px;
    border-radius:50%;
    flex:0 0 34px;
}
@media(max-width:560px){
    .person-line{
        grid-template-columns:minmax(0,1fr) 38px;
        gap:8px;
    }
    .person-line .delete-person-btn{
        width:32px;
        height:32px;
        flex-basis:32px;
    }
}


/* =========================================================
   QR DE ASISTENCIA
   ========================================================= */

.qr-page{
    min-height:100vh;
    margin:0;
    background:
        radial-gradient(circle at top,#ffffff 0,#f8fafc 38%,#f3f6fa 100%);
}

.qr-screen{
    width:100%;
    max-width:620px;
    min-height:100vh;
    margin:0 auto;
    padding:18px 16px 34px;
}

.qr-screen-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.qr-screen-top .back{
    flex:0 0 auto;
}

.qr-org{
    min-width:0;
    max-width:55%;
    color:#667085;
    font-size:14px;
    font-weight:800;
    text-align:right;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.qr-hero{
    text-align:center;
    margin-bottom:16px;
}

.qr-clock{
    display:block;
    width:100%;
    margin:0;
    color:#101828;
    font-size:clamp(68px,18vw,104px);
    line-height:.95;
    font-weight:900;
    letter-spacing:-.065em;
    font-variant-numeric:tabular-nums;
}

.qr-type{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    margin-top:13px;
    padding:9px 19px;
    border-radius:999px;
    font-size:18px;
    font-weight:900;
    letter-spacing:.08em;
}

.qr-type.entrada{
    background:#ecfdf3;
    color:#087a4b;
    border:1px solid #c7f0d8;
}

.qr-type.salida{
    background:#fff1f0;
    color:#b42318;
    border:1px solid #f4c7c3;
}

.qr-main-card{
    width:100%;
    margin:0 auto;
    padding:20px 18px 18px;
    background:#fff;
    border:1px solid #e4e9f0;
    border-radius:26px;
    box-shadow:0 14px 38px rgba(16,24,40,.08);
    overflow:hidden;
}

.portal-qr-box{
    width:100%;
    min-height:290px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.portal-qr-box canvas,
.portal-qr-box img{
    display:block!important;
    width:min(310px,84vw)!important;
    height:auto!important;
    max-width:100%!important;
    margin:0 auto!important;
}

.qr-live-count{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:14px;
    color:#667085;
    font-size:17px;
    font-weight:700;
}

.qr-live-count strong{
    color:#101828;
    font-size:30px;
    font-weight:900;
}

.qr-progress{
    height:9px;
    margin:14px 0 12px;
    overflow:hidden;
    background:#edf1f5;
    border-radius:999px;
}

.qr-progress-bar{
    width:0;
    height:100%;
    background:#087a4b;
    border-radius:999px;
    transition:width .25s ease;
}

.qr-live-message{
    padding:10px 12px;
    background:#f8fafc;
    border-radius:12px;
    color:#475467;
    font-size:14px;
    font-weight:800;
    text-align:center;
    line-height:1.35;
}

.qr-live-message.complete{
    background:#ecfdf3;
    color:#087a4b;
}

.qr-live-message.ended{
    background:#fff1f0;
    color:#b42318;
}

.qr-share-actions{
    width:100%;
    margin:18px auto 0;
}

.qr-share-primary{
    width:100%;
    min-height:58px;
    margin:0;
    border-radius:17px;
    font-size:18px;
    box-shadow:0 8px 22px rgba(17,24,39,.12);
}

.qr-share-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.qr-share-link{
    width:100%;
    min-height:48px;
    margin:0;
    padding:11px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d8dee8;
    border-radius:14px;
    background:#fff;
    color:#344054;
    font-size:14px;
    font-weight:900;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}

.qr-share-link:hover{
    background:#f8fafc;
}

.qr-share-status{
    min-height:20px;
    margin-top:9px;
    color:#667085;
    font-size:13px;
    font-weight:700;
    text-align:center;
}

.qr-foot{
    margin:16px auto 0;
    padding:0 12px;
    color:#667085;
    font-size:13px;
    line-height:1.45;
    text-align:center;
}

@media(max-width:560px){
    .qr-screen{
        padding:14px 14px 28px;
    }

    .qr-screen-top{
        margin-bottom:16px;
    }

    .qr-org{
        font-size:12px;
        max-width:48%;
    }

    .qr-clock{
        font-size:clamp(70px,21vw,92px);
    }

    .qr-type{
        margin-top:11px;
        font-size:16px;
    }

    .qr-main-card{
        padding:17px 14px 16px;
        border-radius:22px;
    }

    .portal-qr-box{
        min-height:0;
    }

    .portal-qr-box canvas,
    .portal-qr-box img{
        width:min(292px,82vw)!important;
    }

    .qr-share-grid{
        grid-template-columns:1fr 1fr 1fr;
        gap:8px;
        margin-top:18px;
    }

    .qr-share-link{
        min-height:46px;
        padding:10px 6px;
        font-size:13px;
    }
}

@media(max-width:380px){
    .qr-share-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   QR Rvisar v4 - QR único + marca R con huella
   ========================================================= */

.portal-qr-box{
    position:relative;
    isolation:isolate;
}

/*
 * QRCode.js puede insertar una IMG auxiliar además del CANVAS.
 * La ocultamos por CSS también, como segunda protección.
 */
.portal-qr-box > img{
    display:none !important;
}

.portal-qr-box > canvas{
    display:block !important;
    position:relative;
    z-index:1;
    margin:0 auto !important;
}

/*
 * Marca central.
 * No lleva círculo ni marco visible: el blanco se funde con el fondo
 * del propio QR y deja una zona limpia para mantener la lectura.
 */
.qr-brand-mark{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:8px;
    box-sizing:border-box;
}

.qr-brand-mark img{
    display:block !important;
    width:100%;
    height:100%;
    object-fit:contain;
    margin:0 !important;
}

/* Detalle tecnológico muy sutil alrededor del QR */
.qr-main-card{
    position:relative;
}

.qr-main-card::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(19,126,255,.08);
    border-radius:18px;
    pointer-events:none;
}

@media(max-width:560px){
    .qr-brand-mark{
        width:64px;
        height:64px;
        padding:7px;
    }
}


/* =========================================================
   PERSONAL · DISPOSITIVO DE FICHADA
   ========================================================= */

.device-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 10px;
    margin-top:8px;
}

.device-status{
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    line-height:1;
}

.device-status.linked{
    background:#ecfdf3;
    color:#087a4b;
}

.device-status.pending{
    background:#fffaeb;
    color:#b54708;
}

.device-status.unlinked{
    background:#f2f4f7;
    color:#667085;
}

.device-link{
    color:#1769e0;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.device-link:hover{
    text-decoration:underline;
}

.device-card{
    margin-top:18px;
}

.device-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.device-card-label{
    margin-bottom:7px;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.device-big-status{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:20px;
    font-weight:900;
}

.device-big-status.linked{
    color:#087a4b;
}

.device-big-status.unlinked{
    color:#475467;
}

.device-dot{
    width:11px;
    height:11px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 5px rgba(102,112,133,.10);
}

.device-big-status.linked .device-dot{
    box-shadow:0 0 0 5px rgba(8,122,75,.10);
}

.device-person-avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#eef4ff;
    color:#175cd3;
    font-weight:900;
}

.device-explanation{
    margin:20px 0;
    color:#475467;
    line-height:1.55;
}

.device-share-box{
    margin-top:22px;
    padding:16px;
    border:1px solid #dbe5f2;
    border-radius:18px;
    background:#f8fbff;
}

.device-share-title{
    margin-bottom:10px;
    font-size:15px;
    font-weight:900;
}

.device-link-input{
    width:100%;
    margin-bottom:12px;
    padding:12px 13px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    color:#475467;
    font-size:13px;
}

.device-share-main{
    width:100%;
}

.device-share-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-top:10px;
}

.device-share-grid .secondary,
.device-share-grid .linkbtn{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    text-align:center;
}

.device-list{
    display:grid;
    gap:10px;
}

.device-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:15px;
}

.device-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#ecfdf3;
    color:#087a4b;
    font-weight:900;
}

.device-item-main{
    min-width:0;
    flex:1;
}

.device-ua{
    margin-top:3px;
    font-size:12px;
    overflow-wrap:anywhere;
}

.device-meta{
    margin-top:5px;
    color:#98a2b3;
    font-size:11px;
    line-height:1.4;
}

.device-unlink-btn{
    border:0;
    background:transparent;
    color:#b42318;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.invitation-pending-card{
    margin-top:14px;
}

.device-pending-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.device-pending-actions form{
    margin:0;
}

@media(max-width:560px){
    .device-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .device-share-grid{
        grid-template-columns:1fr;
    }

    .device-item{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .device-item form{
        width:100%;
    }

    .device-unlink-btn{
        width:100%;
        padding:10px;
        border:1px solid #f1b7b2;
        border-radius:10px;
        background:#fff1f0;
    }

    .device-pending-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .device-pending-actions form,
    .device-pending-actions button{
        width:100%;
    }
}


/* =========================================================
   PERSONAL · AGREGAR PERSONAL DESPLEGABLE
   ========================================================= */

.personal-add-collapse{
    padding:0 !important;
    overflow:hidden;
}

.personal-add-summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px;
    user-select:none;
}

.personal-add-summary::-webkit-details-marker{
    display:none;
}

.personal-add-summary::marker{
    display:none;
    content:"";
}

.personal-add-summary-text{
    min-width:0;
}

.personal-add-summary-text strong{
    display:block;
    color:var(--ink);
    font-size:22px;
    line-height:1.15;
}

.personal-add-summary-text small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.personal-add-chevron{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#f2f4f7;
    color:#475467;
    font-size:24px;
    font-weight:900;
    line-height:1;
    transition:transform .2s ease, background .2s ease;
}

.personal-add-collapse[open] .personal-add-chevron{
    transform:rotate(180deg);
    background:#e8eef8;
}

.personal-add-form{
    padding:20px 22px 22px;
    border-top:1px solid var(--line);
}

.personal-add-form .primary{
    margin-top:4px;
}

@media(max-width:560px){
    .personal-add-summary{
        padding:18px;
    }

    .personal-add-summary-text strong{
        font-size:20px;
    }

    .personal-add-form{
        padding:18px;
    }
}


/* =========================================================
   FICHADAS · PORTAL CLIENTE
   ========================================================= */

.fichadas-page{
    max-width:780px;
}

.fichadas-top{
    margin-bottom:18px;
}

.fichadas-filter-card{
    padding:0 !important;
    overflow:hidden;
}

.fichadas-filter-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:19px 20px;
    cursor:pointer;
    user-select:none;
}

.fichadas-filter-summary::-webkit-details-marker{
    display:none;
}

.fichadas-filter-summary::marker{
    content:"";
}

.fichadas-filter-summary strong{
    display:block;
    font-size:18px;
}

.fichadas-filter-summary small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.fichadas-filter-chevron,
.fichadas-day-chevron{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:11px;
    background:#f2f4f7;
    color:#667085;
    font-size:21px;
    font-weight:900;
    transition:transform .2s ease;
}

.fichadas-filter-card[open] .fichadas-filter-chevron,
.fichadas-day[open] .fichadas-day-chevron{
    transform:rotate(180deg);
}

.fichadas-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:18px 20px 20px;
    border-top:1px solid var(--line);
}

.fichadas-search-field{
    grid-column:1 / -1;
}

.fichadas-filter-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.fichadas-filter-actions .primary,
.fichadas-filter-actions .secondary{
    width:100%;
    margin:0;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fichadas-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:14px 0;
}

.fichadas-summary-card{
    padding:13px 16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
}

.fichadas-summary-card span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.fichadas-summary-card strong{
    display:block;
    margin-top:3px;
    font-size:24px;
}

.fichadas-days{
    display:grid;
    gap:12px;
}

.fichadas-day{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 5px 18px rgba(16,24,40,.035);
}

.fichadas-day-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:17px 18px;
    cursor:pointer;
    user-select:none;
}

.fichadas-day-summary::-webkit-details-marker{
    display:none;
}

.fichadas-day-summary::marker{
    content:"";
}

.fichadas-day-title{
    min-width:0;
}

.fichadas-day-title strong{
    display:block;
    color:var(--ink);
    font-size:17px;
    line-height:1.2;
}

.fichadas-day-title small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.fichadas-day-meta{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    color:#667085;
    font-size:12px;
    font-weight:800;
}

.fichadas-day-working{
    padding:5px 8px;
    border-radius:999px;
    background:#fff7ed;
    color:#b54708;
    white-space:nowrap;
}

.fichadas-day-body{
    display:grid;
    gap:10px;
    padding:0 12px 12px;
    border-top:1px solid var(--line);
}

.fichada-person{
    padding:14px;
    border:1px solid #e8ecf2;
    border-radius:16px;
    background:#fff;
}

.fichada-person:first-child{
    margin-top:12px;
}

.fichada-person-head{
    display:flex;
    align-items:center;
    gap:11px;
}

.fichada-avatar{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef4ff;
    color:#175cd3;
    font-weight:900;
}

.fichada-person-name{
    min-width:0;
    flex:1;
}

.fichada-person-name strong{
    display:block;
    overflow-wrap:anywhere;
    font-size:14px;
}

.fichada-person-name small{
    display:block;
    margin-top:2px;
    color:#98a2b3;
    font-size:11px;
}

.fichada-status{
    flex:0 0 auto;
    padding:6px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.fichada-status.complete{
    background:#ecfdf3;
    color:#087a4b;
}

.fichada-status.working{
    background:#fff7ed;
    color:#b54708;
}

.fichada-status.incomplete{
    background:#fff1f0;
    color:#b42318;
}

.fichada-times{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:13px;
}

.fichada-times > div{
    padding:10px 8px;
    border-radius:12px;
    background:#f8fafc;
    text-align:center;
}

.fichada-times span{
    display:block;
    color:#667085;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.fichada-times strong{
    display:block;
    margin-top:3px;
    color:#101828;
    font-size:17px;
    font-variant-numeric:tabular-nums;
}

.fichada-mov-toggle{
    width:100%;
    margin-top:10px;
    padding:7px 0 0;
    border:0;
    background:transparent;
    color:#1769e0;
    font:inherit;
    font-size:12px;
    font-weight:900;
    text-align:left;
    cursor:pointer;
}

.fichada-mov-toggle span{
    display:inline-block;
    margin-left:3px;
}

.fichada-movements{
    margin-top:10px;
    padding:5px 11px;
    border-radius:12px;
    background:#f8fafc;
}

.fichada-movement{
    display:grid;
    grid-template-columns:82px 70px 1fr;
    align-items:center;
    gap:9px;
    padding:9px 0;
    border-bottom:1px solid #e9edf2;
    font-size:12px;
}

.fichada-movement:last-child{
    border-bottom:0;
}

.fichada-movement strong{
    font-variant-numeric:tabular-nums;
}

.fichada-movement small{
    min-width:0;
    color:#98a2b3;
    overflow-wrap:anywhere;
}

.fichada-movement-type{
    font-size:10px;
    font-weight:900;
}

.fichada-movement-type.entrada{
    color:#087a4b;
}

.fichada-movement-type.salida{
    color:#b42318;
}

.fichadas-empty{
    text-align:center;
    padding:34px 20px;
}

.fichadas-empty-icon{
    font-size:38px;
}

.fichadas-empty h2{
    margin:8px 0 4px;
}

.fichadas-empty p{
    margin:0;
    color:var(--muted);
}

@media(max-width:560px){
    .fichadas-page{
        padding-left:14px;
        padding-right:14px;
    }

    .fichadas-filters{
        grid-template-columns:1fr;
        padding:16px;
    }

    .fichadas-search-field,
    .fichadas-filter-actions{
        grid-column:auto;
    }

    .fichadas-filter-actions{
        grid-template-columns:1fr;
    }

    .fichadas-day-summary{
        align-items:flex-start;
        padding:15px;
    }

    .fichadas-day-meta{
        flex-wrap:wrap;
    }

    .fichadas-day-meta > span:first-child{
        display:none;
    }

    .fichadas-day-body{
        padding:0 9px 9px;
    }

    .fichada-person{
        padding:12px;
    }

    .fichada-status{
        font-size:10px;
    }

    .fichada-times strong{
        font-size:16px;
    }

    .fichada-movement{
        grid-template-columns:72px 60px 1fr;
        gap:6px;
    }
}


/* =========================================================
   MATRICES · PORTAL CLIENTE
   ========================================================= */

.matrices-page{
    max-width:780px;
}

.matrices-create{
    padding:0 !important;
    overflow:hidden;
}

.matrices-create-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:19px 20px;
    cursor:pointer;
    user-select:none;
}

.matrices-create-summary::-webkit-details-marker{
    display:none;
}

.matrices-create-summary::marker{
    content:"";
}

.matrices-create-summary strong{
    display:block;
    font-size:18px;
}

.matrices-create-summary small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.matrices-chevron{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:11px;
    background:#f2f4f7;
    color:#667085;
    font-size:21px;
    font-weight:900;
    transition:transform .2s ease;
}

.matrices-create[open] .matrices-chevron{
    transform:rotate(180deg);
}

.matrices-create-body{
    padding:18px 20px 20px;
    border-top:1px solid var(--line);
}

.matrices-help{
    margin:0 0 17px;
    color:#667085;
    line-height:1.5;
    font-size:13px;
}

.matrices-form-grid{
    display:grid;
    gap:14px;
}

.matrices-form-grid textarea{
    min-height:92px;
    resize:vertical;
}

.matrices-form-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}

.matrices-form-actions .primary,
.matrices-form-actions .secondary{
    margin:0;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.matrices-list-section{
    margin-top:22px;
}

.matrices-list-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:10px;
}

.matrices-list-head h2{
    margin:0;
    font-size:20px;
}

.matrices-list-head p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.matrices-list{
    display:grid;
    gap:12px;
}

.matrix-card{
    margin:0 !important;
}

.matrix-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.matrix-card-title{
    min-width:0;
}

.matrix-card-title > strong{
    display:block;
    color:var(--ink);
    font-size:18px;
    overflow-wrap:anywhere;
}

.matrix-status{
    display:inline-flex;
    margin-top:7px;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.matrix-status.active{
    background:#ecfdf3;
    color:#087a4b;
}

.matrix-status.paused{
    background:#f2f4f7;
    color:#667085;
}

.matrix-rule-count{
    min-width:64px;
    padding:9px 10px;
    border-radius:13px;
    background:#f8fafc;
    text-align:center;
}

.matrix-rule-count strong{
    display:block;
    font-size:20px;
}

.matrix-rule-count span{
    display:block;
    margin-top:1px;
    color:#667085;
    font-size:10px;
    font-weight:800;
}

.matrix-description{
    margin:14px 0 0;
    color:#475467;
    line-height:1.5;
    font-size:13px;
}

.matrix-actions{
    display:grid;
    grid-template-columns:1.5fr .8fr auto;
    gap:8px;
    align-items:stretch;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #edf0f3;
}

.matrix-actions .linkbtn{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    text-align:center;
}

.matrix-actions form{
    display:flex;
}

.matrix-state-btn{
    min-height:44px;
    padding:0 12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    color:#475467;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.matrix-state-btn:hover{
    background:#f8fafc;
}

.matrix-state-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.matrices-empty{
    text-align:center;
    padding:34px 20px;
}

.matrices-empty-icon{
    font-size:38px;
    color:#1769e0;
}

.matrices-empty h3{
    margin:8px 0 4px;
}

.matrices-empty p{
    margin:0;
    color:var(--muted);
}

@media(max-width:560px){
    .matrices-page{
        padding-left:14px;
        padding-right:14px;
    }

    .matrices-create-body{
        padding:16px;
    }

    .matrix-actions{
        grid-template-columns:1fr 1fr;
    }

    .matrix-rules-btn{
        grid-column:1 / -1;
    }

    .matrix-actions form,
    .matrix-state-btn{
        width:100%;
    }
}


/* =========================================================
   REGLAS DE MATRIZ · PORTAL CLIENTE
   ========================================================= */

.reglas-page{
    max-width:780px;
}

.regla-create{
    padding:0 !important;
    overflow:hidden;
}

.regla-create-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:19px 20px;
    cursor:pointer;
    user-select:none;
}

.regla-create-summary::-webkit-details-marker{
    display:none;
}

.regla-create-summary::marker{
    content:"";
}

.regla-create-summary strong{
    display:block;
    font-size:18px;
}

.regla-create-summary small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.regla-chevron{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:11px;
    background:#f2f4f7;
    color:#667085;
    font-size:21px;
    font-weight:900;
    transition:transform .2s ease;
}

.regla-create[open] .regla-chevron{
    transform:rotate(180deg);
}

.regla-create-body{
    padding:18px 20px 20px;
    border-top:1px solid var(--line);
}

.regla-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.regla-nombre,
.regla-tipo,
.regla-tipo-description{
    grid-column:1 / -1;
}

.regla-tipo-description{
    margin-top:-5px;
    padding:11px 13px;
    border-radius:12px;
    background:#f8fafc;
    color:#667085;
    font-size:12px;
    line-height:1.45;
}

.regla-grid .field small{
    display:block;
    margin-top:4px;
    color:#98a2b3;
    font-size:10px;
}

.regla-input-suffix{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
}

.regla-input-suffix input{
    border:0 !important;
    border-radius:0 !important;
}

.regla-input-suffix span{
    padding:0 12px;
    color:#667085;
    font-size:12px;
    font-weight:800;
}

.regla-dias-box{
    margin-top:17px;
    padding-top:16px;
    border-top:1px solid #edf0f3;
}

.regla-section-title{
    margin-bottom:10px;
    color:#344054;
    font-size:12px;
    font-weight:900;
}

.regla-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
}

.regla-day{
    position:relative;
    cursor:pointer;
}

.regla-day input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.regla-day span{
    display:grid;
    place-items:center;
    min-height:39px;
    border:1px solid #d0d5dd;
    border-radius:11px;
    background:#fff;
    color:#475467;
    font-size:11px;
    font-weight:900;
    transition:.15s ease;
}

.regla-day input:checked + span{
    border-color:#1769e0;
    background:#eef4ff;
    color:#175cd3;
}

.regla-help{
    margin-top:10px;
    color:#667085;
    font-size:11px;
    line-height:1.5;
}

.regla-form-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:17px;
}

.regla-form-actions .primary,
.regla-form-actions .secondary{
    min-height:46px;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.reglas-list-section{
    margin-top:22px;
}

.reglas-list-head{
    margin-bottom:10px;
}

.reglas-list-head h2{
    margin:0;
    font-size:20px;
}

.reglas-list-head p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.reglas-list{
    display:grid;
    gap:12px;
}

.regla-card{
    margin:0 !important;
}

.regla-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.regla-card-title{
    min-width:0;
}

.regla-card-title > strong{
    display:block;
    font-size:16px;
    overflow-wrap:anywhere;
}

.regla-status{
    display:inline-flex;
    margin-top:6px;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}

.regla-status.active{
    background:#ecfdf3;
    color:#087a4b;
}

.regla-status.paused{
    background:#f2f4f7;
    color:#667085;
}

.regla-type-pill{
    flex:0 0 auto;
    padding:6px 8px;
    border-radius:10px;
    background:#eef4ff;
    color:#175cd3;
    font-size:10px;
    font-weight:900;
    text-align:center;
}

.regla-card-data{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:14px;
}

.regla-card-data > div{
    min-width:0;
    padding:10px;
    border-radius:12px;
    background:#f8fafc;
}

.regla-card-data span{
    display:block;
    color:#98a2b3;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.regla-card-data strong{
    display:block;
    margin-top:4px;
    color:#344054;
    font-size:11px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.regla-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid #edf0f3;
}

.regla-actions .linkbtn{
    min-height:43px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.regla-actions form{
    display:flex;
}

.regla-state-btn{
    width:100%;
    min-height:43px;
    padding:0 12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    color:#475467;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.regla-state-btn:hover{
    background:#f8fafc;
}

.regla-state-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.reglas-empty{
    text-align:center;
    padding:34px 20px;
}

.reglas-empty-icon{
    font-size:36px;
    color:#1769e0;
}

.reglas-empty h3{
    margin:8px 0 4px;
}

.reglas-empty p{
    margin:0;
    color:var(--muted);
}

@media(max-width:560px){
    .reglas-page{
        padding-left:14px;
        padding-right:14px;
    }

    .regla-create-body{
        padding:16px;
    }

    .regla-grid{
        grid-template-columns:1fr;
    }

    .regla-nombre,
    .regla-tipo,
    .regla-tipo-description{
        grid-column:auto;
    }

    .regla-days{
        grid-template-columns:repeat(4,1fr);
    }

    .regla-card-top{
        flex-direction:column;
    }

    .regla-card-data{
        grid-template-columns:1fr;
    }

    .regla-type-pill{
        align-self:flex-start;
    }
}


/* =========================================================
   PROGRAMACIONES · PORTAL CLIENTE
   ========================================================= */

.programaciones-page{
    max-width:780px;
}

.programacion-create{
    padding:0 !important;
    overflow:hidden;
}

.programacion-create-summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:19px 20px;
    cursor:pointer;
    user-select:none;
}

.programacion-create-summary::-webkit-details-marker{
    display:none;
}

.programacion-create-summary::marker{
    content:"";
}

.programacion-create-summary strong{
    display:block;
    font-size:18px;
}

.programacion-create-summary small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.programacion-chevron{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:11px;
    background:#f2f4f7;
    color:#667085;
    font-size:21px;
    font-weight:900;
    transition:transform .2s ease;
}

.programacion-create[open] .programacion-chevron{
    transform:rotate(180deg);
}

.programacion-create-body{
    padding:18px 20px 20px;
    border-top:1px solid var(--line);
}

.programacion-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.programacion-full{
    grid-column:1 / -1;
}

.programacion-input-suffix{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
}

.programacion-input-suffix input{
    border:0 !important;
    border-radius:0 !important;
}

.programacion-input-suffix span{
    padding:0 12px;
    color:#667085;
    font-size:12px;
    font-weight:800;
}

.programacion-section{
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid #edf0f3;
}

.programacion-section-title{
    margin-bottom:10px;
    color:#344054;
    font-size:12px;
    font-weight:900;
}

.programacion-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
}

.programacion-day{
    position:relative;
    cursor:pointer;
}

.programacion-day input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.programacion-day span{
    display:grid;
    place-items:center;
    min-height:39px;
    border:1px solid #d0d5dd;
    border-radius:11px;
    background:#fff;
    color:#475467;
    font-size:11px;
    font-weight:900;
}

.programacion-day input:checked + span{
    border-color:#1769e0;
    background:#eef4ff;
    color:#175cd3;
}

.programacion-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.programacion-option{
    display:flex;
    align-items:flex-start;
    gap:8px;
    min-height:74px;
    padding:11px;
    border:1px solid #e4e7ec;
    border-radius:13px;
    background:#fff;
    cursor:pointer;
}

.programacion-option input{
    margin-top:3px;
}

.programacion-option span{
    min-width:0;
}

.programacion-option strong{
    display:block;
    color:#344054;
    font-size:12px;
}

.programacion-option small{
    display:block;
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
    line-height:1.35;
}

.programacion-people-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.programacion-people-head .programacion-section-title{
    margin:0;
}

.programacion-people-head small{
    display:block;
    margin-top:3px;
    color:#98a2b3;
    font-size:10px;
}

.programacion-select-all{
    flex:0 0 auto;
    border:0;
    background:transparent;
    color:#1769e0;
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.programacion-people{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.programacion-person{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px;
    border:1px solid #e4e7ec;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
}

.programacion-person input{
    margin-top:2px;
}

.programacion-person span{
    min-width:0;
}

.programacion-person strong{
    display:block;
    color:#344054;
    font-size:12px;
    overflow-wrap:anywhere;
}

.programacion-person small{
    display:block;
    margin-top:2px;
    color:#98a2b3;
    font-size:10px;
}

.programacion-no-people{
    padding:15px;
    border-radius:12px;
    background:#f8fafc;
    color:#667085;
    font-size:12px;
}

.programacion-form-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.programacion-form-actions .primary,
.programacion-form-actions .secondary{
    min-height:46px;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.programaciones-list-section{
    margin-top:22px;
}

.programaciones-list-head{
    margin-bottom:10px;
}

.programaciones-list-head h2{
    margin:0;
    font-size:20px;
}

.programaciones-list-head p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.programaciones-list{
    display:grid;
    gap:12px;
}

.programacion-card{
    margin:0 !important;
}

.programacion-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.programacion-card-title{
    min-width:0;
}

.programacion-title-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.programacion-title-line > strong{
    color:var(--ink);
    font-size:16px;
    overflow-wrap:anywhere;
}

.programacion-type{
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}

.programacion-type.entrada{
    background:#ecfdf3;
    color:#087a4b;
}

.programacion-type.salida{
    background:#fff1f0;
    color:#b42318;
}

.programacion-status{
    display:inline-flex;
    margin-top:6px;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}

.programacion-status.active{
    background:#eef4ff;
    color:#175cd3;
}

.programacion-status.paused{
    background:#f2f4f7;
    color:#667085;
}

.programacion-time{
    flex:0 0 auto;
    color:#101828;
    font-size:25px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.programacion-card-data{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-top:14px;
}

.programacion-card-data > div{
    min-width:0;
    padding:10px;
    border-radius:12px;
    background:#f8fafc;
}

.programacion-card-data span{
    display:block;
    color:#98a2b3;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.programacion-card-data strong{
    display:block;
    margin-top:4px;
    color:#344054;
    font-size:11px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.programacion-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid #edf0f3;
}

.programacion-actions .linkbtn{
    min-height:43px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.programacion-actions form{
    display:flex;
}

.programacion-state-btn{
    width:100%;
    min-height:43px;
    padding:0 12px;
    border:1px solid #d0d5dd;
    border-radius:12px;
    background:#fff;
    color:#475467;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.programacion-state-btn:hover{
    background:#f8fafc;
}

.programacion-state-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.programaciones-empty{
    text-align:center;
    padding:34px 20px;
}

.programaciones-empty-icon{
    font-size:36px;
}

.programaciones-empty h3{
    margin:8px 0 4px;
}

.programaciones-empty p{
    margin:0;
    color:var(--muted);
}

@media(max-width:560px){
    .programaciones-page{
        padding-left:14px;
        padding-right:14px;
    }

    .programacion-create-body{
        padding:16px;
    }

    .programacion-grid{
        grid-template-columns:1fr;
    }

    .programacion-full{
        grid-column:auto;
    }

    .programacion-days{
        grid-template-columns:repeat(4,1fr);
    }

    .programacion-options{
        grid-template-columns:1fr;
    }

    .programacion-people{
        grid-template-columns:1fr;
    }

    .programacion-card-data{
        grid-template-columns:1fr 1fr;
    }
}


/* =========================================================
   EVENTO ACTIVO EN INICIO
   ========================================================= */

.active-event-card{
    margin:18px 0;
    padding:18px;
    border:1px solid #d9e2ef;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 28px rgba(16,24,40,.07);
}

.active-event-card.entrada{
    border-left:5px solid #16a36a;
}

.active-event-card.salida{
    border-left:5px solid #dc4a4a;
}

.active-event-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
}

.active-event-live{
    display:inline-block;
    margin-bottom:7px;
    color:#d92d20;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
}

.active-event-card h2{
    margin:0;
    font-size:21px;
}

.active-event-card p{
    margin:5px 0 0;
    color:#667085;
    font-size:12px;
}

.active-event-count{
    flex:0 0 auto;
    min-width:64px;
    padding:9px 11px;
    border-radius:13px;
    background:#f8fafc;
    text-align:center;
}

.active-event-count strong{
    display:block;
    font-size:21px;
    line-height:1;
}

.active-event-count span{
    display:block;
    margin-top:3px;
    color:#667085;
    font-size:9px;
    font-weight:800;
}

.active-event-main{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:18px;
    align-items:center;
    margin-top:16px;
}

.active-event-qr-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:220px;
    border-radius:16px;
    background:#fff;
    border:1px solid #eaecf0;
}

.active-event-qr{
    width:190px;
    height:190px;
}

.active-event-qr img{
    display:none !important;
}

.active-event-actions{
    display:grid;
    gap:9px;
}

.active-event-open,
.active-event-copy{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 !important;
}

.active-event-actions small{
    min-height:16px;
    color:#067647;
    font-size:11px;
    font-weight:800;
}

.programacion-actions-three{
    grid-template-columns:1fr 1fr 1fr;
}

.programacion-delete-btn{
    width:100%;
    min-height:43px;
    padding:0 12px;
    border:1px solid #fda29b;
    border-radius:12px;
    background:#fff;
    color:#b42318;
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.programacion-delete-btn:hover{
    background:#fef3f2;
}

.programacion-delete-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

@media(max-width:620px){
    .active-event-main{
        grid-template-columns:1fr;
    }

    .active-event-qr-wrap{
        min-height:214px;
    }

    .programacion-actions-three{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   MODO RELOJ - acceso restringido
   ========================================================= */
.reloj-body{background:#f5f7fa;min-height:100vh}
.reloj-shell{width:min(1100px,calc(100% - 28px));margin:0 auto;padding:22px 0 40px}
.reloj-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.reloj-brand{font-weight:900;letter-spacing:.08em;color:#53657f;text-transform:uppercase;font-size:12px}
.reloj-company{margin-top:4px;font-size:22px;font-weight:900;color:#0b172a}
.reloj-session{display:flex;align-items:center;gap:10px;color:#667085;font-size:12px}
.reloj-logout{color:#667085;text-decoration:none;font-weight:800;border:1px solid #dbe2ea;background:#fff;border-radius:10px;padding:8px 10px}
.reloj-clock{font-size:clamp(34px,6vw,58px);font-weight:900;letter-spacing:-.04em;color:#0b172a;margin:8px 0 20px}
.reloj-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.reloj-action{min-height:168px;border-radius:22px;background:#fff;border:1px solid #dde5ee;display:flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;color:#0b172a;box-shadow:0 8px 28px rgba(16,24,40,.06);transition:.15s ease}
.reloj-action:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,24,40,.09)}
.reloj-action-icon{width:68px;height:68px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:42px;line-height:1}
.reloj-action.entrada .reloj-action-icon{background:#e8fbf2;color:#087a4b}
.reloj-action.salida .reloj-action-icon{background:#fff0ef;color:#d92d20}
.reloj-action strong{font-size:30px;letter-spacing:.01em}
.reloj-no-event{padding:18px 20px;border:1px dashed #cfd8e6;border-radius:16px;background:rgba(255,255,255,.58);color:#667085;text-align:center;font-size:13px}
.reloj-active-event{margin-top:8px}
.reloj-active-event .active-event-main{grid-template-columns:220px 1fr}
.reloj-active-event .active-event-qr{position:relative}
.reloj-active-event .active-event-qr > img{display:none!important}
.reloj-qr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;background:#fff;padding:5px;box-sizing:border-box;z-index:4}
.reloj-qr-logo img{display:block!important;width:100%;height:100%;object-fit:contain}
.reloj-select-header{margin:0 0 18px}
.reloj-select-header h1{margin:4px 0 4px;font-size:34px}
.reloj-select-header p{margin:0;color:#667085}
.reloj-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.reloj-login-card{width:min(430px,100%);background:#fff;border:1px solid #dde5ee;border-radius:24px;padding:28px;box-shadow:0 18px 50px rgba(16,24,40,.10)}
.reloj-login-card h1{margin:6px 0 6px;font-size:32px}
.reloj-login-card p{color:#667085;margin:0 0 22px}
.reloj-login-card label{display:block;font-weight:800;font-size:13px;margin:14px 0 6px}
.reloj-login-card input{width:100%;min-height:48px;border:1px solid #cfd8e6;border-radius:12px;padding:0 13px;font:inherit;box-sizing:border-box}
.reloj-login-card .primary{width:100%;margin-top:18px}
.reloj-mini-brand{font-weight:900;letter-spacing:.08em;color:#53657f;text-transform:uppercase;font-size:11px}

@media(max-width:700px){
  .reloj-shell{width:min(100% - 20px,1100px);padding-top:14px}
  .reloj-top{align-items:center}
  .reloj-company{font-size:18px}
  .reloj-session span{display:none}
  .reloj-actions{grid-template-columns:1fr;gap:14px}
  .reloj-action{min-height:122px;justify-content:flex-start;padding:0 28px}
  .reloj-action strong{font-size:26px}
  .reloj-action-icon{width:58px;height:58px;font-size:36px}
  .reloj-active-event .active-event-main{grid-template-columns:1fr}
  .reloj-login-card{padding:22px;border-radius:20px}
}

/* =========================================================
   MODO RELOJ · SELECTOR DE PERSONAL · FIX DEFINITIVO MÓVIL
   Checkbox | avatar | datos siempre en la misma fila base.
   ========================================================= */
.person-check{
    display:grid !important;
    grid-template-columns:20px 48px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
    width:100% !important;
}

.person-check > input[type="checkbox"]{
    grid-column:1 !important;
    grid-row:1 !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
    align-self:center !important;
    justify-self:center !important;
}

.person-check > .avatar{
    grid-column:2 !important;
    grid-row:1 !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    align-self:center !important;
}

.person-check > .person-select-main{
    grid-column:3 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
    display:block !important;
    align-self:center !important;
}

.person-check > .person-select-main strong{
    display:block !important;
    line-height:1.25 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
}

.person-check > .person-select-main small{
    display:block !important;
    margin-top:3px !important;
    line-height:1.25 !important;
}

@media(max-width:560px){
    .person-check{
        grid-template-columns:20px 48px minmax(0,1fr) !important;
        align-items:center !important;
    }
}