:root{--ink:#0b0c10;--ink-2:#17191f;--paper:#f3f4f6;--white:#fff;--muted:#69707d;--line:#e2e5ea;--green:#15b86b;--green-dark:#087a45;--red:#e84545;--amber:#f1ad2b;--radius:18px;--shadow:0 18px 60px rgba(14,18,28,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;background:var(--paper);font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}code{background:#eef0f3;border-radius:6px;padding:2px 6px}.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#777f8e;margin-bottom:8px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--white);color:var(--ink);border-radius:10px;font-size:22px;font-weight:900}.brand span:last-child{display:flex;flex-direction:column}.brand small{font-size:11px;color:#89909d}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--ink);color:#fff;padding:26px 20px;display:flex;flex-direction:column;z-index:40}.sidebar .brand{padding:0 5px 28px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{padding:12px 14px;border-radius:10px;color:#c7cbd3;font-weight:650}.sidebar nav a:hover{background:#20232b;color:#fff}.sidebar nav .nav-scan{margin-top:14px;background:#fff;color:#111}.sidebar-user{margin-top:auto;border-top:1px solid #292d36;padding:18px 8px 0;display:flex;flex-direction:column}.sidebar-user small{color:#9097a5}.sidebar-user a{font-size:13px;margin-top:10px;color:#fff}.main-content{margin-left:248px;min-height:100vh}.topbar{height:70px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:20}.icon-button{border:0;background:transparent;font-size:22px;display:none}.content-wrap{padding:34px;max-width:1540px;margin:auto}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--ink);color:#fff;padding:12px 18px;font-weight:750;line-height:1.1}.button:hover{background:#232630}.button:disabled{opacity:.5;cursor:not-allowed}.button-secondary{background:#e9ebef;color:#111}.button-secondary:hover{background:#dfe2e8}.button-ghost{background:transparent;color:#111;border:1px solid var(--line)}.button-small{padding:9px 13px;font-size:13px}.button-wide{width:100%}.button-large{padding:17px 22px;font-size:16px}.link-button{padding:0;border:0;background:transparent;font-weight:700;color:#343a46}.link-button:disabled{opacity:.35}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:26px}.page-heading h1{font-size:34px;line-height:1.1;margin:0 0 7px;letter-spacing:-.035em}.page-heading p{margin:0;color:var(--muted)}.page-heading select{min-width:280px}.heading-actions,.form-actions{display:flex;gap:10px;flex-wrap:wrap}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:0 1px 0 rgba(0,0,0,.015)}.panel h2{margin:0 0 5px;font-size:20px}.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}.panel-head p{margin:0;color:var(--muted);font-size:13px}.panel-head>a{font-weight:750;font-size:13px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metric-card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:22px;min-height:150px;display:flex;flex-direction:column}.metric-card:nth-child(2){background:#fff;color:var(--ink);border:1px solid var(--line)}.metric-card span{font-weight:700;font-size:13px;color:#9ba2ae}.metric-card strong{font-size:43px;letter-spacing:-.05em;margin:auto 0 0}.metric-card small{color:#8f96a3}.two-column{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:18px}.admin-split{grid-template-columns:minmax(320px,.6fr) minmax(0,1.4fr)}.session-list,.cards-list,.scan-feed{display:flex;flex-direction:column;gap:12px}.session-row{border-top:1px solid var(--line);padding:15px 0 4px;display:grid;grid-template-columns:1fr auto;gap:10px}.session-row:first-child{border-top:0;padding-top:0}.session-row strong,.session-row small{display:block}.session-row small{color:var(--muted);font-size:12px}.session-numbers{text-align:right;font-size:12px}.session-numbers strong{color:var(--green-dark)}.progress{grid-column:1/-1;height:5px;border-radius:5px;background:#ebedf0;overflow:hidden}.progress i{display:block;height:100%;background:var(--ink)}.feed-item{display:grid;grid-template-columns:10px 1fr auto;gap:11px;align-items:center;border-bottom:1px solid var(--line);padding:9px 0}.feed-item:last-child{border-bottom:0}.feed-item strong,.feed-item small{display:block}.feed-item small{color:var(--muted);font-size:11px}.feed-item time{font-size:11px;color:var(--muted)}.status-dot{width:9px;height:9px;border-radius:50%;background:#aaa}.status-dot.ok{background:var(--green)}.status-dot.bad{background:var(--red)}.action-strip{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.alert{padding:13px 16px;border-radius:11px;margin:0 0 18px;border:1px solid transparent}.alert-success{background:#eaf8f1;border-color:#bee9d1;color:#075b36}.alert-error{background:#fff0f0;border-color:#f5c9c9;color:#9e2525}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.span-2{grid-column:1/-1}.stack-form{display:flex;flex-direction:column;gap:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;font-weight:800;color:#454b57}.field input,.field select,.field textarea,.filter-bar input,.filter-bar select,.page-heading select{width:100%;border:1px solid #d7dbe2;background:#fff;border-radius:10px;padding:11px 12px;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:#6c7380;box-shadow:0 0 0 3px rgba(20,24,32,.06)}.section-title{font-size:12px;font-weight:850;letter-spacing:.12em;color:#777f8e;text-transform:uppercase;border-top:1px solid var(--line);padding-top:20px;margin-top:5px}.check-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#454b57}.check-row input{margin-top:3px}.table-panel{padding:0;overflow:hidden}.data-table{width:100%;border-collapse:collapse}.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#737a86;text-align:left;padding:14px 17px;background:#f8f9fa}.data-table td{border-top:1px solid var(--line);padding:15px 17px;vertical-align:middle}.data-table td strong,.data-table td small{display:block}.data-table td small{color:var(--muted);font-size:12px}.row-actions{display:flex;gap:14px;align-items:center;white-space:nowrap}.row-actions a,.row-actions button{font-size:12px;font-weight:750}.badge{display:inline-flex;border-radius:999px;background:#eceef1;color:#4c5360;padding:5px 9px;font-size:11px;font-weight:800}.badge-published{background:#dff7eb;color:#087447}.badge-draft{background:#f3f0e8;color:#7c6522}.badge-closed{background:#fce8e8;color:#9b2b2b}.badge-archived{background:#e9e9ec;color:#65656c}.code-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}.mini-card{border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;justify-content:space-between;gap:15px;align-items:center}.mini-card h3{margin:5px 0 3px;font-size:15px}.mini-card p{margin:0;color:var(--muted);font-size:12px}.mini-card.is-disabled{opacity:.55;background:#f6f6f7}.filter-bar{display:grid;grid-template-columns:280px 1fr auto;gap:10px;margin-bottom:16px}.pagination{display:flex;gap:6px;margin-top:18px}.pagination a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px}.pagination a.active{background:var(--ink);color:#fff}.empty-cell,.empty-state{text-align:center;color:var(--muted)}
.public-shell{min-height:100vh;background:#f0f1f3}.public-header{height:74px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px}.public-header .brand-mark{background:var(--ink);color:#fff}.public-main{max-width:1100px;margin:auto;padding:35px 24px 70px}.auth-card{width:min(480px,100%);margin:5vh auto;background:#fff;border-radius:24px;padding:38px;box-shadow:var(--shadow)}.auth-card h1{font-size:37px;line-height:1.05;letter-spacing:-.04em;margin:12px 0}.auth-card>p{color:var(--muted);margin-bottom:28px}.registration-hero{padding:35px 0 32px;max-width:850px}.registration-hero h1{font-size:55px;line-height:1;letter-spacing:-.055em;margin:10px 0 18px}.registration-hero>p{font-size:18px;color:#565d69;max-width:720px}.event-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.event-meta span{border:1px solid #d9dce1;background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;font-size:12px}.public-panel{box-shadow:var(--shadow);padding:35px}.registration-form{display:flex;flex-direction:column;gap:25px}.form-intro{display:grid;grid-template-columns:42px 1fr;gap:15px}.form-intro>span{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900}.form-intro h2{font-size:24px}.form-intro p{margin:2px 0;color:var(--muted)}.section-space{margin-top:18px}.workshop-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}.workshop-option{position:relative;border:1px solid var(--line);border-radius:14px;padding:17px;display:grid;grid-template-columns:26px 1fr;gap:12px;cursor:pointer}.workshop-option:hover{border-color:#999fa9}.workshop-option input{position:absolute;opacity:0}.workshop-check{width:24px;height:24px;border:1px solid #c9cdd4;border-radius:7px;display:grid;place-items:center;color:transparent}.workshop-option input:checked+.workshop-check{background:var(--ink);color:#fff;border-color:var(--ink)}.workshop-option strong,.workshop-option small,.workshop-option em{display:block}.workshop-option small{color:var(--muted);font-size:12px;margin-top:3px}.workshop-option em{font-size:11px;color:var(--green-dark);font-style:normal;margin-top:8px}.workshop-option.is-full{opacity:.5;cursor:not-allowed}.consent-row{border-top:1px solid var(--line);padding-top:20px}
.ticket-page-actions{display:flex;justify-content:center;gap:10px;margin-bottom:18px}.ticket-card{background:#fff;border:1px solid #dfe2e6;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);max-width:980px;margin:0 auto}.ticket-top{background:var(--ink);color:#fff;padding:26px 32px;display:flex;justify-content:space-between;align-items:center}.ticket-top span{font-size:10px;letter-spacing:.15em;color:#9da4b0}.ticket-top h1{margin:5px 0 0;font-size:27px}.ticket-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900;border:1px solid #404550;border-radius:9px;padding:8px 12px}.ticket-body{display:grid;grid-template-columns:1fr 300px;min-height:470px}.ticket-body>section{padding:34px}.ticket-person small,.ticket-detail-grid small{font-size:10px;letter-spacing:.1em;color:#7d8490;font-weight:800}.ticket-person h2{font-size:36px;letter-spacing:-.04em;margin:7px 0}.ticket-person p{color:var(--muted)}.ticket-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-block:1px solid var(--line);padding:22px 0;margin:25px 0}.ticket-detail-grid strong,.ticket-detail-grid span{display:block}.ticket-detail-grid span{color:var(--muted);font-size:12px}.ticket-sessions h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em}.ticket-session{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:12px 0}.ticket-session strong,.ticket-session small{display:block}.ticket-session small{color:var(--muted);font-size:11px}.ticket-status{white-space:nowrap;font-size:10px;font-weight:800;border-radius:999px;background:#eceef1;padding:5px 8px;height:max-content}.ticket-status.ok{background:#dff7eb;color:#087447}.ticket-qr-wrap{background:#f5f6f7;border-left:1px dashed #c8ccd3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center}.ticket-qr-wrap #ticketQr{background:#fff;padding:12px;border-radius:14px;margin-bottom:18px}.ticket-qr-wrap canvas,.ticket-qr-wrap img{max-width:100%;height:auto}.ticket-qr-wrap small{color:var(--muted)}.ticket-footer{display:flex;justify-content:space-between;background:#f9fafb;border-top:1px solid var(--line);padding:13px 30px;color:var(--muted);font-size:11px}.ticket-help{max-width:740px;margin:25px auto;text-align:center;color:var(--muted)}
.scanner-layout{display:grid;grid-template-columns:330px minmax(420px,1fr) 330px;gap:16px;min-height:calc(100vh - 140px)}.scanner-controls{display:flex;flex-direction:column;gap:15px}.scanner-title h1{font-size:38px;margin:0;letter-spacing:-.05em}.scanner-title p{color:var(--muted)}.scan-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.usb-status{margin-top:auto;background:#f3f5f7;border-radius:12px;padding:14px;display:flex;align-items:center;gap:11px}.usb-status strong,.usb-status small{display:block}.usb-status small{font-size:10px;color:var(--muted)}.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(21,184,107,.5);animation:pulse 1.8s infinite}.scanner-hidden-input{position:fixed;left:-10000px;top:-10000px;opacity:0}.scanner-result{border-radius:24px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:45px;min-height:560px;transition:.2s}.scanner-result.is-granted{background:var(--green-dark)}.scanner-result.is-denied{background:#a92626}.result-idle{max-width:520px}.scan-icon{font-size:100px;line-height:1;color:#3a3e48}.result-idle h2,.scanner-result h2{font-size:38px;line-height:1.05;letter-spacing:-.04em;margin:14px 0}.result-idle p{color:#9da4b0}.result-status-icon{width:120px;height:120px;border:4px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;font-size:80px;line-height:1;margin:0 auto 17px}.result-label{font-size:12px;letter-spacing:.2em;font-weight:900;opacity:.75}.scanner-result h3{font-size:28px;margin:10px 0 0}.result-company{opacity:.8}.result-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}.result-meta span{background:rgba(255,255,255,.12);border-radius:999px;padding:7px 11px;font-size:11px}.camera-wrap{position:relative;background:#000;border-radius:15px;overflow:hidden;aspect-ratio:3/4}.camera-wrap video{width:100%;height:100%;object-fit:cover}.camera-frame{position:absolute;inset:25%;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 1000px rgba(0,0,0,.25)}.camera-wrap button{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2}.scan-spinner{width:46px;height:46px;border:4px solid #3d424d;border-top-color:#fff;border-radius:50%;margin:auto;animation:spin .7s linear infinite}.scanner-history{overflow:auto;max-height:calc(100vh - 140px)}
.installer-page{background:#111318;color:#111}.installer-wrap{padding:45px 20px}.installer-card{max-width:820px;margin:auto;background:#fff;border-radius:25px;padding:38px;box-shadow:0 30px 90px rgba(0,0,0,.3)}.installer-card>.brand{margin-bottom:30px}.installer-card .brand-mark{background:var(--ink);color:#fff}.installer-card h1{font-size:36px;letter-spacing:-.04em;margin:0 0 10px}.success-screen{text-align:center;padding:35px}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(21,184,107,0)}100%{box-shadow:0 0 0 0 rgba(21,184,107,0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1200px){.scanner-layout{grid-template-columns:310px 1fr}.scanner-history{grid-column:1/-1;max-height:none}.metric-grid{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:.2s;box-shadow:20px 0 50px rgba(0,0,0,.2)}.sidebar.is-open{transform:none}.main-content{margin-left:0}.icon-button{display:block}.topbar{padding:0 18px}.content-wrap{padding:20px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading select{min-width:0}.two-column,.admin-split,.scanner-layout{grid-template-columns:1fr}.scanner-result{min-height:440px}.scanner-controls{order:1}.scanner-result{order:2}.scanner-history{order:3}.ticket-body{grid-template-columns:1fr}.ticket-qr-wrap{border-left:0;border-top:1px dashed #c8ccd3}.workshop-picker{grid-template-columns:1fr}.registration-hero h1{font-size:42px}.metric-grid{grid-template-columns:1fr 1fr}.filter-bar{grid-template-columns:1fr}.table-panel{overflow-x:auto}.data-table{min-width:800px}}
@media(max-width:560px){.content-wrap,.public-main{padding:17px}.topbar>div{display:none}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:125px}.form-grid,.field-row{grid-template-columns:1fr}.span-2{grid-column:auto}.public-panel,.auth-card,.installer-card{padding:23px;border-radius:18px}.registration-hero{padding-top:15px}.registration-hero h1{font-size:35px}.ticket-top{align-items:flex-start;gap:15px;flex-direction:column}.ticket-body>section{padding:23px}.ticket-person h2{font-size:28px}.ticket-detail-grid{grid-template-columns:1fr}.ticket-footer{flex-direction:column;gap:3px}.ticket-page-actions{flex-direction:column}.scanner-result{min-height:390px;padding:25px}.result-idle h2,.scanner-result h2{font-size:31px}.result-status-icon{width:90px;height:90px;font-size:60px}}
@media print{.public-header,.ticket-page-actions,.ticket-help,.alert{display:none!important}.public-main{max-width:none;padding:0}.public-shell{background:#fff}.ticket-card{box-shadow:none;border:0;border-radius:0;max-width:none}.ticket-body{min-height:auto}}

.manual-scan-row{display:grid;grid-template-columns:1fr auto;gap:7px}.manual-scan-row input{min-width:0;border:1px solid #d7dbe2;border-radius:10px;padding:10px 11px}

/* =========================================================
   VRTX SCANNER — RESULTADO RESPONSIVO
   Corrige textos desbordados y columnas demasiado angostas
   ========================================================= */

.scanner-result.is-granted,
.scanner-result.is-denied {
    display: grid !important;
    grid-template-columns:
        120px
        minmax(280px, 1.15fr)
        minmax(220px, .85fr)
        minmax(190px, .55fr) !important;

    grid-template-areas:
        "icon label label meta"
        "icon title attendee meta"
        "icon message company meta" !important;

    align-items: center !important;
    column-gap: 28px !important;
    row-gap: 10px !important;

    width: 100% !important;
    min-height: 360px !important;
    padding: 42px 46px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Todos los hijos pueden encogerse sin desbordar */
.scanner-result.is-granted > *,
.scanner-result.is-denied > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Icono */
.scanner-result.is-granted .result-status-icon,
.scanner-result.is-denied .result-status-icon {
    grid-area: icon !important;

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

    width: 100px !important;
    height: 100px !important;

    margin: 0 auto !important;
    border-width: 5px !important;
    border-radius: 999px !important;

    font-size: 68px !important;
    line-height: 1 !important;
}

/* AUTORIZADO / DENEGADO */
.scanner-result.is-granted .result-label,
.scanner-result.is-denied .result-label {
    grid-area: label !important;

    margin: 0 !important;

    font-size: clamp(14px, 1.4vw, 20px) !important;
    line-height: 1.2 !important;
    letter-spacing: .24em !important;
    font-weight: 800 !important;

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

/* Título: Acceso autorizado / Boleto ya utilizado */
.scanner-result.is-granted h2,
.scanner-result.is-denied h2 {
    grid-area: title !important;

    margin: 0 !important;

    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    font-weight: 800 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: balance;
}

/* Nombre del asistente */
.scanner-result.is-granted h3,
.scanner-result.is-denied h3 {
    grid-area: attendee !important;

    margin: 0 !important;

    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    font-weight: 750 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: balance;
}

/* Empresa */
.scanner-result.is-granted .result-company,
.scanner-result.is-denied .result-company {
    grid-area: company !important;

    margin: 0 !important;

    font-size: clamp(18px, 1.8vw, 25px) !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;

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

/* Mensaje principal */
.scanner-result.is-granted > p:not(.result-company),
.scanner-result.is-denied > p:not(.result-company) {
    grid-area: message !important;

    margin: 0 !important;

    font-size: clamp(19px, 2vw, 28px) !important;
    line-height: 1.22 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: balance;
}

/* Folio, uso y hora */
.scanner-result.is-granted .result-meta,
.scanner-result.is-denied .result-meta {
    grid-area: meta !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 14px !important;

    width: 100% !important;
    margin: 0 !important;
}

/* Píldoras laterales */
.scanner-result.is-granted .result-meta span,
.scanner-result.is-denied .result-meta span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 62px !important;
    padding: 10px 14px !important;

    border-radius: 999px !important;

    font-size: 17px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.scanner-result.is-granted .result-meta strong,
.scanner-result.is-denied .result-meta strong {
    display: block !important;
    margin-top: 4px !important;

    font-size: 19px !important;
    line-height: 1.1 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Tabletas y laptops angostas */
@media (max-width: 1180px) {
    .scanner-result.is-granted,
    .scanner-result.is-denied {
        grid-template-columns:
            100px
            minmax(0, 1fr)
            210px !important;

        grid-template-areas:
            "icon label meta"
            "icon title meta"
            "icon attendee meta"
            "icon company meta"
            "icon message meta" !important;

        padding: 34px !important;
        column-gap: 24px !important;
    }

    .scanner-result.is-granted h2,
    .scanner-result.is-denied h2 {
        font-size: clamp(34px, 4.5vw, 50px) !important;
    }

    .scanner-result.is-granted h3,
    .scanner-result.is-denied h3 {
        font-size: clamp(27px, 3.5vw, 39px) !important;
    }
}

/* Teléfonos y pantallas pequeñas */
@media (max-width: 720px) {
    .scanner-result.is-granted,
    .scanner-result.is-denied {
        grid-template-columns: minmax(0, 1fr) !important;

        grid-template-areas:
            "icon"
            "label"
            "title"
            "attendee"
            "company"
            "message"
            "meta" !important;

        min-height: auto !important;
        padding: 28px 22px !important;
        row-gap: 14px !important;

        text-align: center !important;
    }

    .scanner-result.is-granted .result-status-icon,
    .scanner-result.is-denied .result-status-icon {
        width: 82px !important;
        height: 82px !important;
        font-size: 54px !important;
    }

    .scanner-result.is-granted h2,
    .scanner-result.is-denied h2 {
        font-size: clamp(34px, 11vw, 48px) !important;
        line-height: 1 !important;
    }

    .scanner-result.is-granted h3,
    .scanner-result.is-denied h3 {
        font-size: clamp(27px, 8vw, 38px) !important;
    }

    .scanner-result.is-granted > p:not(.result-company),
    .scanner-result.is-denied > p:not(.result-company) {
        font-size: 21px !important;
    }

    .scanner-result.is-granted .result-meta,
    .scanner-result.is-denied .result-meta {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;

        margin-top: 8px !important;
    }

    .scanner-result.is-granted .result-meta span:last-child,
    .scanner-result.is-denied .result-meta span:last-child {
        grid-column: 1 / -1 !important;
    }

    .scanner-result.is-granted .result-meta span,
    .scanner-result.is-denied .result-meta span {
        min-height: 58px !important;
        font-size: 15px !important;
    }

    .scanner-result.is-granted .result-meta strong,
    .scanner-result.is-denied .result-meta strong {
        font-size: 17px !important;
    }
}


/* =========================================================
   FIX DEFINITIVO: COLUMNAS + RESULTADO CENTRAL VERTICAL
   ========================================================= */

@media (min-width: 1200px) {

    /* Restaurar las tres columnas */
    .scanner-layout {
        display: grid !important;
        grid-template-columns:
            320px
            minmax(0, 1fr)
            320px !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .scanner-controls {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .scanner-result {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .scanner-history {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    /* Solo el contenido rojo/verde en formato vertical */
    .scanner-result.is-granted,
    .scanner-result.is-denied {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 650px !important;
        padding: 42px 34px !important;

        text-align: center !important;
        overflow: hidden !important;
    }

    .scanner-result.is-granted .result-status-icon,
    .scanner-result.is-denied .result-status-icon {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 16px !important;
        font-size: 62px !important;
    }

    .scanner-result.is-granted .result-label,
    .scanner-result.is-denied .result-label {
        margin: 0 0 12px !important;
        font-size: 18px !important;
        letter-spacing: .24em !important;
        text-align: center !important;
    }

    .scanner-result.is-granted h2,
    .scanner-result.is-denied h2 {
        width: 100% !important;
        max-width: 650px !important;
        margin: 0 auto !important;

        font-size: clamp(46px, 4vw, 68px) !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .scanner-result.is-granted h3,
    .scanner-result.is-denied h3 {
        width: 100% !important;
        margin: 20px auto 0 !important;

        font-size: clamp(32px, 3vw, 46px) !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }

    .scanner-result.is-granted .result-company,
    .scanner-result.is-denied .result-company {
        margin: 8px auto 0 !important;
        font-size: 22px !important;
        text-align: center !important;
    }

    .scanner-result.is-granted > p:not(.result-company),
    .scanner-result.is-denied > p:not(.result-company) {
        width: 100% !important;
        max-width: 620px !important;
        margin: 24px auto 0 !important;

        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .scanner-result.is-granted .result-meta,
    .scanner-result.is-denied .result-meta {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;

        width: min(620px, 100%) !important;
        margin: 26px auto 0 !important;
    }

    .scanner-result.is-granted .result-meta span,
    .scanner-result.is-denied .result-meta span {
        min-height: 70px !important;
        padding: 10px 14px !important;

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

        text-align: center !important;
    }

    .scanner-result.is-granted .result-meta span:last-child,
    .scanner-result.is-denied .result-meta span:last-child {
        grid-column: 1 / -1 !important;
    }
}

/* =========================================================
   HAITICKETS 2.0 — CUENTAS, AUTOGESTIÓN, PAGOS Y MENSAJES
   ========================================================= */
.public-brand-logo,
.brand-logo{display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.public-brand-logo img{display:block;max-width:180px;max-height:46px;width:auto;height:auto}
.brand-logo img{display:block;max-width:36px;max-height:28px;width:auto;height:auto}
.public-account-link{font-weight:700;text-decoration:none;color:inherit}
.manage-hero,.account-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 24px}
.manage-hero h1,.account-heading h1{margin:.25rem 0}
.public-panel{margin-bottom:22px}
.session-management-list,.registration-account-list{display:grid;gap:14px}
.session-management-card,.account-registration{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border:1px solid var(--border,#dfe3ea);border-radius:16px;background:#fff}
.session-management-card strong,.account-registration strong{display:block;font-size:18px}
.session-management-card small,.account-registration small{display:block;color:var(--muted,#667085);margin-top:5px}
.session-management-card p{margin:.55rem 0;color:var(--muted,#667085)}
.session-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.access-methods{display:grid;gap:12px;margin-top:22px}
.access-methods details{border:1px solid var(--border,#dfe3ea);border-radius:14px;padding:15px;background:#fff}
.access-methods summary{font-weight:800;cursor:pointer}
.access-methods form{margin-top:16px}
.access-fallback{border-top:1px solid var(--border,#dfe3ea);margin-top:22px;padding-top:18px}
.otp-input{text-align:center;font-size:30px!important;font-weight:800;letter-spacing:.32em}
.status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase;background:#eef1f5;color:#344054}
.status-delivered,.status-sent{background:#dcfce7;color:#166534}
.status-accepted,.status-processing{background:#dbeafe;color:#1d4ed8}
.status-pending{background:#fef3c7;color:#92400e}
.status-undeliverable,.status-failed{background:#fee2e2;color:#991b1b}
.status-pill+small,td small{display:block;margin-top:5px;color:var(--muted,#667085);overflow-wrap:anywhere}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.filter-row select{width:auto;min-width:190px}
.compact-metrics{margin-bottom:20px}
.compact-metrics .metric-card{min-height:120px}
.table-wrap{overflow:auto}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:13px 12px;border-bottom:1px solid var(--border,#e5e7eb);vertical-align:top;text-align:left}
.table-wrap th{white-space:nowrap;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#667085}
.event-hero-image{width:100%;max-height:340px;object-fit:cover;border-radius:20px;margin-bottom:22px}
.ticket-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ticket-type-option{border:1px solid var(--border,#dfe3ea);border-radius:14px;padding:15px;background:#fff}
.price-label{font-weight:800;font-size:18px}
.form-help{font-size:13px;color:var(--muted,#667085)}
.narrow-panel{max-width:850px;margin-inline:auto}

@media(max-width:760px){
  .manage-hero,.account-heading,.session-management-card,.account-registration{align-items:stretch;flex-direction:column}
  .session-management-card .row-actions,.account-registration .row-actions{width:100%}
  .session-management-card .row-actions>*{flex:1}
  .filter-row>*{width:100%!important}
}

/* =========================================================
   HAITICKETS 2.1 — CONSTANCIAS Y DIPLOMAS
   ========================================================= */
.certificate-overview-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.certificate-overview-card h2{margin:.55rem 0}.certificate-download-list{display:grid;gap:14px}.certificate-download-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border:1px solid var(--border,#dfe3ea);border-radius:16px;background:#fff}.certificate-download-card h3{margin:.65rem 0 .25rem}.certificate-download-card p{margin:0;color:var(--muted,#667085)}
@media(max-width:760px){.certificate-overview-card,.certificate-download-card{align-items:stretch;flex-direction:column}.certificate-overview-card .row-actions,.certificate-download-card .row-actions{width:100%}.certificate-download-card .row-actions>*{flex:1}}

.button-danger{background:var(--red);color:#fff}.button-danger:hover{background:#c92d2d}.danger-link{color:var(--red)}
.asset-field{gap:9px}.asset-control{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fafbfc;padding:12px}.asset-preview{height:92px;border:1px dashed #cbd1da;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:12px;font-weight:750;text-align:center;padding:10px}.asset-preview img{max-width:100%;max-height:100%;object-fit:contain}.asset-preview-wide{height:112px}.asset-inputs{display:flex;flex-direction:column;gap:7px;min-width:0}.asset-inputs input[type=file]{background:#fff}.asset-delete{margin-top:2px;color:#9e2525;font-weight:750}.asset-delete input{accent-color:var(--red)}
.registration-hero{max-width:920px;margin:0 0 24px;padding:18px 0 8px}.registration-hero.has-image{max-width:none;padding:0;margin:0 0 28px;background:none!important}.registration-hero-media{width:100%;border-radius:18px;overflow:hidden;background:#111;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.08)}.registration-hero-media img{display:block;width:100%;height:auto;aspect-ratio:1600/700;object-fit:cover}.registration-hero-copy{max-width:900px;padding:24px 0 0}.registration-hero.has-image .registration-hero-copy{padding-top:26px}.registration-hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.02;margin:8px 0 14px}.registration-hero>p,.registration-hero-copy>p{font-size:17px;color:#4f5663;max-width:780px}.registration-hero.has-image .event-meta span{background:#fff}.public-panel{border-radius:18px}.public-header{background:rgba(240,241,243,.9);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}
@media(max-width:850px){.registration-hero.has-image{margin-bottom:22px}.registration-hero-media{border-radius:14px}.registration-hero-copy{padding-top:20px}.registration-hero h1{font-size:38px}}
@media(max-width:560px){.registration-hero{padding-top:4px}.registration-hero-media{margin-inline:-2px;border-radius:12px}.registration-hero-media img{aspect-ratio:16/9}.registration-hero-copy{padding-top:18px}.registration-hero h1{font-size:32px}.registration-hero-copy>p{font-size:15px}.event-meta span{width:100%;justify-content:center;text-align:center}}
.public-account-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:850;text-decoration:none;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.03)}.public-account-link:hover{border-color:#b9c0ca}.public-account-menu{position:relative}.public-account-menu summary{list-style:none;display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.03)}.public-account-menu summary::-webkit-details-marker{display:none}.public-account-menu summary span{font-size:11px;font-weight:850;color:var(--muted);text-transform:uppercase}.public-account-menu summary strong{font-size:13px}.public-account-menu[open] summary{border-color:#b9c0ca}.public-account-menu>div{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:30}.public-account-menu a{display:block;padding:11px 12px;border-radius:10px;font-weight:750}.public-account-menu a:hover{background:#f3f5f8}.attendee-access-card{max-width:560px}.login-method-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:24px 0 18px;background:#edf0f4;border-radius:14px;padding:6px}.login-method-tabs button{border:0;border-radius:10px;background:transparent;color:#4d5563;padding:10px 8px;font-weight:850;font-size:12px}.login-method-tabs button.active{background:#fff;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.04)}.access-method-panels form{display:none}.access-method-panels form.active{display:flex;flex-direction:column;gap:16px}.login-help-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.login-help-strip strong{color:#111}.login-help-strip span{background:#f3f5f8;border-radius:999px;padding:5px 8px;font-weight:750}.verify-access-card p strong{color:#111}.account-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}.account-mini-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 0 rgba(0,0,0,.02)}.account-mini-card span{display:block;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.account-mini-card strong{display:block;margin:8px 0 4px;font-size:20px}.account-mini-card small{color:var(--muted)}.compact-panel-head{margin-bottom:18px}.account-heading>a{font-weight:800;color:#9e2525}.account-empty-state{border:1px dashed #cbd1da;border-radius:14px;padding:20px;background:#fafbfc}.account-empty-state p{margin:.35rem 0 0;color:var(--muted)}
@media(max-width:760px){.login-method-tabs{grid-template-columns:repeat(2,1fr)}.account-dashboard-grid{grid-template-columns:1fr}.public-account-menu summary{align-items:center}.public-account-menu summary span{display:none}.public-account-menu>div{right:0}.account-heading>a{align-self:flex-start}}
.ticket-visual{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:0}.ticket-visual img{display:block;width:100%;height:auto;aspect-ratio:1600/700;object-fit:contain;background:#fff}.ticket-card{border-radius:20px}.ticket-body{min-height:420px}.ticket-footer span:last-child{font-weight:750}
@media(max-width:850px){.ticket-visual img{aspect-ratio:16/7}.ticket-body{min-height:auto}}
.asset-control-full{grid-template-columns:1fr}.asset-preview-banner{height:auto;min-height:120px;aspect-ratio:16/7}.asset-preview-banner img{width:100%;height:100%;object-fit:contain}

/* UX refinements */
.ticket-visual{display:block;background:#fff}.ticket-visual img{width:100%;height:auto;max-height:340px;aspect-ratio:auto;object-fit:contain;object-position:center;vertical-align:top}.ticket-card{overflow:hidden}.ticket-page-actions .button{white-space:normal;text-align:center}.public-header{gap:14px;overflow:visible}.public-header .brand{min-width:0;flex:1}.public-header .brand>strong{white-space:normal;line-height:1.1;font-size:14px}.public-brand-logo{flex:0 0 auto;max-width:170px}.public-brand-logo img{max-width:170px;max-height:46px;object-fit:contain}.public-account-link{flex:0 0 auto;gap:7px;min-width:44px}.account-link-icon{display:none;font-size:20px;line-height:1}.account-registration{min-width:0}.account-registration>div:first-child{min-width:0}.account-registration .row-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.account-registration .button{white-space:normal}.public-account-menu>div{max-width:calc(100vw - 32px)}.email-header-image-wrap{padding-top:18px!important}
@media(max-width:700px){.public-header{height:auto;min-height:64px;padding:8px 14px}.public-header .brand{gap:8px}.public-header .brand>strong{display:none}.public-brand-logo{max-width:132px}.public-brand-logo img{max-width:132px;max-height:42px}.public-account-link{padding:10px;width:48px;height:48px;border-radius:999px}.account-link-icon{display:block}.account-link-text{display:none}.ticket-page-actions{gap:8px}.ticket-page-actions .button{width:100%}.ticket-visual img{max-height:220px}.account-registration{align-items:stretch}.account-registration .row-actions>*{flex:1 1 130px}.public-account-menu summary{height:42px;min-width:42px;justify-content:center}.public-account-menu summary strong{font-size:12px}.public-account-menu>div{right:0}.auth-card{margin:0 auto}}
@media(max-width:420px){.public-brand-logo{max-width:120px}.public-brand-logo img{max-width:120px}.ticket-visual img{max-height:190px}.ticket-top h1{font-size:23px}.ticket-code{font-size:13px}.account-registration .row-actions>*{flex-basis:100%}}
.ticket-visual img{height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}
@media(max-width:700px){.ticket-visual img{height:auto!important;max-height:none!important}.public-brand-logo{overflow:visible}.public-account-link{box-shadow:0 8px 22px rgba(14,18,28,.08)}}

/* =========================================================
   hubaccess.io / HaiTickets rebrand
   Visual refresh inspired by the Frox dashboard template.
   No markup contracts or workflows are changed here.
   ========================================================= */

:root{
    --ink:#101828;
    --ink-2:#182230;
    --paper:#f5f7fb;
    --white:#fff;
    --muted:#667085;
    --line:#e6e9f0;
    --green:#12b76a;
    --green-dark:#039855;
    --red:#f04438;
    --amber:#f79009;
    --blue:#2e90fa;
    --violet:#7a5af8;
    --cyan:#06aed4;
    --radius:14px;
    --shadow:0 18px 46px rgba(16,24,40,.08);
    --soft-shadow:0 8px 24px rgba(16,24,40,.06);
}

body{
    background:
        radial-gradient(circle at 100% 0, rgba(46,144,250,.12), transparent 28rem),
        linear-gradient(180deg,#f8fafc 0,#eef3f9 100%);
    color:#182230;
}

.admin-page .app-shell{
    display:grid;
    grid-template-columns:276px minmax(0,1fr);
    min-height:100vh;
}

.sidebar{
    width:276px;
    background:#fff;
    color:#182230;
    border-right:1px solid var(--line);
    padding:24px 18px;
    box-shadow:8px 0 34px rgba(16,24,40,.04);
}

.sidebar .brand{
    min-height:62px;
    padding:0 10px 26px;
    border-bottom:1px solid var(--line);
    margin-bottom:20px;
}

.brand strong{letter-spacing:0;font-weight:850}
.brand small{color:#98a2b3;font-weight:700}

.brand-mark{
    background:#111827;
    color:#fff;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(17,24,39,.16);
}

.brand-logo{
    width:44px;
    height:44px;
    background:linear-gradient(135deg,#111827,#344054);
}

.brand-logo img{max-width:34px;max-height:30px}

.sidebar nav{
    gap:6px;
    padding-top:4px;
}

.sidebar nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:13px 14px;
    border-radius:12px;
    color:#667085;
    font-weight:800;
    transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.sidebar nav a::before{
    content:"";
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:8px;
    background:#eef2f6;
    color:#475467;
    display:grid;
    place-items:center;
    font-size:14px;
}

.sidebar nav a[data-nav-icon="panel"]::before{content:"P"}
.sidebar nav a[data-nav-icon="events"]::before{content:"E"}
.sidebar nav a[data-nav-icon="attendees"]::before{content:"A"}
.sidebar nav a[data-nav-icon="users"]::before{content:"U"}
.sidebar nav a[data-nav-icon="messages"]::before{content:"M"}
.sidebar nav a[data-nav-icon="appearance"]::before{content:"L"}
.sidebar nav a[data-nav-icon="status"]::before{content:"S"}
.sidebar nav a[data-nav-icon="scan"]::before{content:"QR";font-size:10px}

.sidebar nav a:hover,
.sidebar nav a.active{
    background:#f2f4f7;
    color:#101828;
    transform:translateX(2px);
}

.sidebar nav a.active::after{
    content:"";
    position:absolute;
    inset:12px auto 12px -18px;
    width:4px;
    border-radius:999px;
    background:var(--blue);
}

.sidebar nav a.active::before{
    background:#d1e9ff;
    color:#175cd3;
}

.sidebar nav .nav-scan{
    margin-top:18px;
    background:#101828;
    color:#fff;
    box-shadow:0 14px 28px rgba(16,24,40,.18);
}

.sidebar nav .nav-scan::before{background:rgba(255,255,255,.14);color:#fff}
.sidebar nav .nav-scan:hover,.sidebar nav .nav-scan.active{background:#182230;color:#fff}

.sidebar-user{
    border-top:1px solid var(--line);
    padding:18px 10px 0;
}

.sidebar-user strong{font-size:14px}
.sidebar-user small{color:#98a2b3;font-weight:700}
.sidebar-user a{color:#344054;font-weight:800}

.main-content{
    margin-left:0;
    min-width:0;
}

.topbar{
    height:76px;
    background:rgba(255,255,255,.82);
    border-bottom:1px solid rgba(230,233,240,.9);
    box-shadow:0 6px 24px rgba(16,24,40,.04);
}

.topbar>div strong{
    font-size:15px;
    font-weight:850;
}

.content-wrap{
    padding:30px;
}

.page-heading{
    align-items:center;
    padding:4px 0 2px;
}

.page-heading h1{
    font-size:32px;
    letter-spacing:0;
    color:#101828;
}

.eyebrow{
    color:#2e90fa;
    letter-spacing:.14em;
}

.panel,.auth-card,.ticket-card,.account-mini-card{
    border-color:var(--line);
    border-radius:14px;
    box-shadow:var(--soft-shadow);
}

.panel{
    padding:24px;
}

.panel h2{
    color:#101828;
    font-weight:850;
}

.panel-head{
    align-items:center;
    padding-bottom:16px;
    border-bottom:1px solid #eef2f6;
}

.button{
    border-radius:12px;
    background:#101828;
    box-shadow:0 9px 18px rgba(16,24,40,.12);
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.button:hover{
    background:#182230;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(16,24,40,.16);
}

.button-secondary{
    background:#eef2f6;
    color:#182230;
    box-shadow:none;
}

.button-secondary:hover{background:#e4e7ec}
.button-ghost{background:#fff;color:#182230;border-color:#d0d5dd;box-shadow:none}
.button-danger{background:var(--red)}

.metric-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:20px;
}

.metric-card{
    position:relative;
    min-height:154px;
    background:#fff;
    color:#101828;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--soft-shadow);
    overflow:hidden;
}

.metric-card::after{
    content:"";
    position:absolute;
    right:-26px;
    top:-32px;
    width:118px;
    height:118px;
    border-radius:999px;
    background:rgba(46,144,250,.12);
}

.metric-card:nth-child(1){
    background:#101828;
    color:#fff;
    border-color:#101828;
}

.metric-card:nth-child(1)::after{background:rgba(255,255,255,.12)}
.metric-card:nth-child(2)::after{background:rgba(18,183,106,.13)}
.metric-card:nth-child(3)::after{background:rgba(247,144,9,.14)}
.metric-card:nth-child(4)::after{background:rgba(6,174,212,.13)}

.metric-card span{
    color:#667085;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.metric-card:nth-child(1) span,.metric-card:nth-child(1) small{color:#cbd5e1}

.metric-card strong{
    font-size:42px;
    letter-spacing:0;
    line-height:1;
    z-index:1;
}

.metric-card small{
    color:#98a2b3;
    font-weight:700;
    z-index:1;
}

.two-column{
    gap:20px;
}

.session-row{
    border-top-color:#eef2f6;
    grid-template-columns:minmax(0,1fr) auto;
}

.progress{
    height:8px;
    background:#eef2f6;
}

.progress i{
    background:linear-gradient(90deg,#2e90fa,#12b76a);
    border-radius:999px;
}

.feed-item{
    grid-template-columns:12px minmax(0,1fr) auto;
    border-bottom-color:#eef2f6;
}

.status-dot{
    width:10px;
    height:10px;
    box-shadow:0 0 0 4px rgba(152,162,179,.14);
}

.status-dot.ok{box-shadow:0 0 0 4px rgba(18,183,106,.15)}
.status-dot.bad{box-shadow:0 0 0 4px rgba(240,68,56,.15)}

.data-table th{
    background:#f8fafc;
    color:#667085;
    padding:15px 18px;
}

.data-table td{
    border-top-color:#eef2f6;
    padding:16px 18px;
}

.data-table tbody tr:hover{
    background:#fbfdff;
}

.badge{
    background:#eef2f6;
    color:#475467;
    border:1px solid transparent;
}

.badge-published,.badge-success{background:#dcfae6;color:#067647}
.badge-warning,.badge-draft{background:#fef0c7;color:#b54708}
.badge-closed{background:#fee4e2;color:#b42318}
.badge-archived{background:#f2f4f7;color:#667085}

.mini-card,.data-row{
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 0 rgba(16,24,40,.02);
}

.data-list{display:flex;flex-direction:column;gap:12px}
.data-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px}
.data-row strong,.data-row small{display:block}
.data-row small{color:var(--muted);font-size:12px}

.field input,.field select,.field textarea,.filter-bar input,.filter-bar select,.page-heading select{
    border-color:#d0d5dd;
    border-radius:12px;
    background:#fff;
}

.field label{
    color:#344054;
    letter-spacing:0;
}

.field input:focus,.field select:focus,.field textarea:focus,.filter-bar input:focus,.filter-bar select:focus{
    border-color:#84caff;
    box-shadow:0 0 0 4px rgba(46,144,250,.12);
}

.auth-card{
    border:1px solid var(--line);
}

.public-shell{
    background:
        radial-gradient(circle at 8% 0, rgba(18,183,106,.10), transparent 24rem),
        linear-gradient(180deg,#f8fafc 0,#eef3f9 100%);
}

.public-header{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(230,233,240,.8);
    border-radius:0 0 18px 18px;
    box-shadow:0 10px 28px rgba(16,24,40,.05);
}

.scanner-result{
    background:#101828;
    box-shadow:var(--soft-shadow);
}

.scanner-result.is-granted{background:#067647}
.scanner-result.is-denied{background:#b42318}

@media(max-width:1200px){
    .admin-page .app-shell{grid-template-columns:248px minmax(0,1fr)}
    .sidebar{width:248px}
}

@media(max-width:850px){
    .admin-page .app-shell{display:block}
    .sidebar{width:282px}
    .topbar{height:68px}
    .content-wrap{padding:20px}
}

@media(max-width:560px){
    .panel{padding:20px}
    .page-heading h1{font-size:28px}
    .metric-card strong{font-size:38px}
    .data-row{align-items:flex-start;flex-direction:column}
}
.ticket-notice{max-width:980px;margin:22px auto 18px;padding:14px 16px 14px 46px;border:1px solid #f2d27a;border-radius:14px;background:#fff7dc;color:#5f4300;box-shadow:0 10px 30px rgba(95,67,0,.06);position:relative;font-weight:650}.ticket-notice::before{content:"!";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#f1b51d;color:#111;font-size:13px;font-weight:900}.ticket-notice::selection{background:rgba(241,181,29,.25)}
@media(max-width:700px){.ticket-notice{margin:14px 0 16px;padding:13px 14px 13px 42px;font-size:14px;line-height:1.35}}
.account-verification-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-6px;margin-bottom:22px}.account-verification-notice strong,.account-verification-notice span{display:block}.account-verification-notice span{margin-top:2px;font-weight:500}.account-verification-notice form{margin:0;flex:0 0 auto}
@media(max-width:700px){.account-verification-notice{align-items:stretch;flex-direction:column}.account-verification-notice .button{width:100%}}

/* =========================================================
   hubaccess.io dashboard rework v2
   Fixes desktop layout and moves the admin UI closer to Frox.
   ========================================================= */

html[data-theme="dark"]{
    --ha-bg:#07080c;
    --ha-surface:#1f212b;
    --ha-surface-2:#242734;
    --ha-sidebar:#20222b;
    --ha-topbar:#20222b;
    --ha-border:#343746;
    --ha-text:#f8fafc;
    --ha-soft:#a0a3b1;
    --ha-muted:#777b8c;
    --ha-primary:#9b5cff;
    --ha-accent:#35d3b4;
    --ha-pink:#ff7aaa;
    --ha-blue:#61a5ff;
    --ha-card-shadow:0 18px 45px rgba(0,0,0,.25);
}

html[data-theme="light"]{
    --ha-bg:#f3f5f9;
    --ha-surface:#fff;
    --ha-surface-2:#f8fafc;
    --ha-sidebar:#fff;
    --ha-topbar:#fff;
    --ha-border:#e4e7ee;
    --ha-text:#111827;
    --ha-soft:#596174;
    --ha-muted:#8a93a6;
    --ha-primary:#7a5af8;
    --ha-accent:#12b76a;
    --ha-pink:#f670a4;
    --ha-blue:#2e90fa;
    --ha-card-shadow:0 16px 38px rgba(16,24,40,.08);
}

.admin-page{
    background:var(--ha-bg) !important;
    color:var(--ha-text);
}

.admin-page .app-shell{
    display:block !important;
    min-height:100vh;
    background:var(--ha-bg);
}

.admin-page .sidebar{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:252px !important;
    height:100vh;
    overflow-y:auto;
    background:var(--ha-sidebar) !important;
    color:var(--ha-text) !important;
    border-right:1px solid var(--ha-border) !important;
    box-shadow:none !important;
    padding:28px 18px 22px !important;
    z-index:60;
}

.admin-page .main-content{
    margin-left:252px !important;
    min-height:100vh;
    width:calc(100% - 252px);
    background:var(--ha-bg);
}

.admin-page .topbar{
    height:104px !important;
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:0 48px !important;
    background:var(--ha-topbar) !important;
    border-bottom:1px solid var(--ha-border) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}

.topbar-search{
    width:min(360px,48vw);
    height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    border-radius:12px;
    background:color-mix(in srgb,var(--ha-bg) 74%,#000 26%);
    border:1px solid transparent;
}

.topbar-search span{
    width:18px;
    height:18px;
    border:2px solid var(--ha-muted);
    border-radius:999px;
    position:relative;
    flex:0 0 auto;
}

.topbar-search span::after{
    content:"";
    width:7px;
    height:2px;
    background:var(--ha-muted);
    position:absolute;
    right:-5px;
    bottom:-2px;
    transform:rotate(45deg);
    border-radius:2px;
}

.topbar-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--ha-text);
    font-weight:750;
}

.topbar-search input::placeholder{color:var(--ha-muted)}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.theme-toggle{
    width:46px;
    height:46px;
    border:1px solid var(--ha-border);
    border-radius:999px;
    background:var(--ha-surface);
    display:grid;
    place-items:center;
    box-shadow:none;
}

.theme-toggle span{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--ha-primary);
    box-shadow:inset -7px -4px 0 rgba(0,0,0,.25);
}

html[data-theme="light"] .theme-toggle span{
    background:#f6c85f;
    box-shadow:0 0 0 4px rgba(246,200,95,.18);
}

.admin-page .sidebar .brand{
    min-height:54px;
    padding:0 0 34px !important;
    margin-bottom:24px !important;
    border-bottom:0 !important;
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-page .brand-logo{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    padding:5px;
    background:var(--ha-surface-2) !important;
    border:1px solid var(--ha-border);
    box-shadow:none !important;
}

.admin-page .brand-logo img{
    display:block;
    max-width:100% !important;
    max-height:100% !important;
    width:100%;
    height:100%;
    object-fit:contain;
}

.admin-page .brand strong{
    color:var(--ha-text);
    font-size:15px;
    line-height:1.1;
}

.admin-page .brand small{
    color:var(--ha-soft);
    font-size:11px;
    line-height:1.25;
}

.admin-page .sidebar nav{
    gap:8px !important;
}

.admin-page .sidebar nav a{
    min-height:48px;
    padding:13px 14px !important;
    border-radius:12px !important;
    color:var(--ha-soft) !important;
    font-weight:850 !important;
    background:transparent !important;
    transform:none !important;
}

.admin-page .sidebar nav a::before{
    width:22px;
    height:22px;
    border-radius:7px;
    background:transparent !important;
    border:1px solid currentColor;
    color:currentColor !important;
    font-size:11px;
    font-weight:900;
}

.admin-page .sidebar nav a:hover,
.admin-page .sidebar nav a.active{
    background:color-mix(in srgb,var(--ha-surface-2) 82%,transparent) !important;
    color:var(--ha-text) !important;
}

.admin-page .sidebar nav a.active::after{
    display:none !important;
}

.admin-page .sidebar nav a.active::before{
    border-color:var(--ha-primary);
    color:var(--ha-primary) !important;
    background:rgba(155,92,255,.12) !important;
}

.admin-page .sidebar nav .nav-scan{
    margin-top:18px;
    background:linear-gradient(135deg,var(--ha-primary),#6c47ff) !important;
    color:#fff !important;
    box-shadow:0 16px 34px rgba(122,90,248,.28) !important;
}

.admin-page .sidebar nav .nav-scan::before{
    border-color:rgba(255,255,255,.75);
    color:#fff !important;
    background:rgba(255,255,255,.12) !important;
}

.admin-page .sidebar-user{
    border-top:1px solid var(--ha-border) !important;
    color:var(--ha-text);
}

.admin-page .sidebar-user small{color:var(--ha-muted) !important}
.admin-page .sidebar-user a{color:var(--ha-text) !important}

.admin-page .content-wrap{
    max-width:none !important;
    padding:44px 24px 40px !important;
}

.admin-page .page-heading{
    margin-bottom:34px;
    align-items:flex-start;
}

.admin-page .page-heading h1{
    color:var(--ha-text) !important;
    font-size:30px;
    font-weight:900;
}

.admin-page .page-heading p,
.admin-page .muted{
    color:var(--ha-muted) !important;
}

.admin-page .eyebrow{
    color:var(--ha-primary) !important;
}

.admin-page .panel,
.admin-page .metric-card,
.admin-page .mini-card,
.admin-page .data-row,
.admin-page .table-panel{
    background:var(--ha-surface) !important;
    color:var(--ha-text) !important;
    border:1px solid var(--ha-border) !important;
    border-radius:14px !important;
    box-shadow:var(--ha-card-shadow) !important;
}

.admin-page .panel h1,
.admin-page .panel h2,
.admin-page .panel h3,
.admin-page .mini-card h3,
.admin-page .data-row strong{
    color:var(--ha-text) !important;
}

.admin-page .panel-head{
    border-bottom:1px solid var(--ha-border) !important;
}

.admin-page .metric-grid{
    gap:26px !important;
    margin-bottom:26px !important;
}

.admin-page .metric-card{
    min-height:130px;
    padding:24px 20px !important;
}

.admin-page .metric-card:nth-child(1),
.admin-page .metric-card:nth-child(2),
.admin-page .metric-card:nth-child(3),
.admin-page .metric-card:nth-child(4){
    background:var(--ha-surface) !important;
    border-color:var(--ha-border) !important;
    color:var(--ha-text) !important;
}

.admin-page .metric-card::after{
    width:54px;
    height:54px;
    right:20px;
    top:auto;
    bottom:22px;
    border-radius:12px;
    opacity:1;
}

.admin-page .metric-card:nth-child(1)::after{background:var(--ha-accent)}
.admin-page .metric-card:nth-child(2)::after{background:var(--ha-blue)}
.admin-page .metric-card:nth-child(3)::after{background:var(--ha-primary)}
.admin-page .metric-card:nth-child(4)::after{background:var(--ha-pink)}

.admin-page .metric-card span{
    color:var(--ha-muted) !important;
    text-transform:none;
    letter-spacing:0;
}

.admin-page .metric-card strong{
    color:var(--ha-text);
    font-size:28px;
    margin-top:auto;
}

.admin-page .metric-card small{
    color:var(--ha-muted) !important;
}

.admin-page .two-column{
    grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
    gap:20px;
}

.admin-page .data-table th{
    background:color-mix(in srgb,var(--ha-surface-2) 78%,transparent) !important;
    color:var(--ha-soft) !important;
    border:0;
}

.admin-page .data-table td{
    border-top:1px solid var(--ha-border) !important;
    color:var(--ha-text);
}

.admin-page .data-table tbody tr:hover{
    background:color-mix(in srgb,var(--ha-surface-2) 70%,transparent) !important;
}

.admin-page .field input,
.admin-page .field select,
.admin-page .field textarea,
.admin-page .filter-bar input,
.admin-page .filter-bar select,
.admin-page .page-heading select{
    background:var(--ha-surface-2) !important;
    color:var(--ha-text) !important;
    border-color:var(--ha-border) !important;
}

.admin-page .field label{
    color:var(--ha-soft) !important;
}

.admin-page .button{
    background:var(--ha-primary) !important;
    color:#fff !important;
    box-shadow:0 14px 28px rgba(122,90,248,.23) !important;
}

.admin-page .button-secondary{
    background:var(--ha-surface-2) !important;
    color:var(--ha-text) !important;
    box-shadow:none !important;
}

.admin-page .button-ghost{
    background:transparent !important;
    color:var(--ha-text) !important;
    border-color:var(--ha-border) !important;
}

.admin-page .button-danger{
    background:#f04438 !important;
}

.admin-page .progress{
    background:color-mix(in srgb,var(--ha-surface-2) 86%,#000 14%) !important;
}

.admin-page .progress i{
    background:linear-gradient(90deg,var(--ha-primary),var(--ha-accent)) !important;
}

.admin-page .feed-item,
.admin-page .session-row{
    border-color:var(--ha-border) !important;
}

.admin-page .badge{
    background:var(--ha-surface-2) !important;
    color:var(--ha-soft) !important;
}

.admin-page .badge-published,
.admin-page .badge-success{
    background:rgba(53,211,180,.14) !important;
    color:#35d3b4 !important;
}

.admin-page .badge-warning,
.admin-page .badge-draft{
    background:rgba(247,144,9,.16) !important;
    color:#fdb022 !important;
}

.admin-page .badge-closed{
    background:rgba(240,68,56,.16) !important;
    color:#f97066 !important;
}

.admin-page .alert{
    border-color:var(--ha-border);
}

html[data-theme="dark"] .admin-page .alert-success{background:rgba(18,183,106,.14);color:#75e0a7}
html[data-theme="dark"] .admin-page .alert-error{background:rgba(240,68,56,.14);color:#fda29b}

@media(max-width:1200px){
    .admin-page .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    .admin-page .two-column{grid-template-columns:1fr !important}
}

@media(max-width:850px){
    .admin-page .sidebar{
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:24px 0 60px rgba(0,0,0,.35) !important;
    }
    .admin-page .sidebar.is-open{transform:translateX(0)}
    .admin-page .main-content{
        margin-left:0 !important;
        width:100%;
    }
    .admin-page .topbar{
        height:76px !important;
        padding:0 18px !important;
    }
    .topbar-search{width:100%;max-width:none}
    .topbar-actions .button{display:none}
    .admin-page .content-wrap{padding:24px 18px 34px !important}
}

@media(max-width:560px){
    .admin-page .metric-grid{grid-template-columns:1fr !important}
    .admin-page .page-heading h1{font-size:26px}
}

html[data-accent="cyan"]{--ha-primary:#35d3ff;--ha-accent:#35d3b4}
html[data-accent="rose"]{--ha-primary:#ff7aaa;--ha-accent:#9b5cff}
html[data-accent="green"]{--ha-primary:#35d3b4;--ha-accent:#7a5af8}

.admin-page .brand-logo{
    padding:0 !important;
    overflow:hidden;
}

.admin-page .brand-logo img{
    object-fit:cover !important;
    transform:scale(1.08);
}

.topbar-mobile-brand{display:none}

.topbar-search{
    position:relative;
}

.global-search-results{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:min(520px,calc(100vw - 32px));
    max-height:70vh;
    overflow:auto;
    background:var(--ha-surface);
    color:var(--ha-text);
    border:1px solid var(--ha-border);
    border-radius:14px;
    box-shadow:0 22px 60px rgba(0,0,0,.32);
    padding:10px;
    z-index:90;
}

.global-search-results section+section{
    border-top:1px solid var(--ha-border);
    margin-top:8px;
    padding-top:8px;
}

.global-search-results h3{
    margin:4px 8px 7px;
    color:var(--ha-primary);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.global-search-results a{
    display:block;
    padding:10px 11px;
    border-radius:10px;
}

.global-search-results a:hover{
    background:var(--ha-surface-2);
}

.global-search-results strong,
.global-search-results small{
    display:block;
}

.global-search-results small{
    color:var(--ha-muted);
    font-size:12px;
    margin-top:2px;
}

.global-search-empty{
    padding:16px;
    color:var(--ha-muted);
    font-weight:800;
}

.palette-toggle,
.fullscreen-toggle,
.focus-toggle{
    width:46px;
    height:46px;
    border:1px solid var(--ha-border);
    border-radius:12px;
    background:var(--ha-surface);
    display:grid;
    place-items:center;
}

.palette-toggle span{
    width:22px;
    height:22px;
    border-radius:999px;
    background:conic-gradient(from 0deg,var(--ha-primary),var(--ha-accent),var(--ha-pink),var(--ha-blue),var(--ha-primary));
}

.fullscreen-toggle span{
    width:24px;
    height:24px;
    position:relative;
    display:block;
}

.fullscreen-toggle span::before,
.fullscreen-toggle span::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:3px;
    background:
        linear-gradient(var(--ha-muted),var(--ha-muted)) left top/9px 2px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) left top/2px 9px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) right top/9px 2px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) right top/2px 9px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) left bottom/9px 2px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) left bottom/2px 9px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) right bottom/9px 2px no-repeat,
        linear-gradient(var(--ha-muted),var(--ha-muted)) right bottom/2px 9px no-repeat;
}

.fullscreen-toggle span::after{
    inset:6px;
    border:1px solid color-mix(in srgb,var(--ha-muted) 55%,transparent);
    background:none;
}

html[data-fullscreen="on"] .fullscreen-toggle,
.fullscreen-toggle:hover{
    border-color:var(--ha-primary);
    background:color-mix(in srgb,var(--ha-primary) 18%,var(--ha-surface));
}

html[data-fullscreen="on"] .fullscreen-toggle span::before,
.fullscreen-toggle:hover span::before{
    background:
        linear-gradient(var(--ha-primary),var(--ha-primary)) left top/9px 2px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) left top/2px 9px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) right top/9px 2px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) right top/2px 9px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) left bottom/9px 2px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) left bottom/2px 9px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) right bottom/9px 2px no-repeat,
        linear-gradient(var(--ha-primary),var(--ha-primary)) right bottom/2px 9px no-repeat;
}

.fullscreen-toggle.is-unavailable{
    border-color:#f97066;
}

html[data-fullscreen="on"] .fullscreen-toggle span::after{
    border-color:var(--ha-primary);
}

.focus-toggle span{
    width:24px;
    height:18px;
    display:block;
    position:relative;
    border:2px solid var(--ha-muted);
    border-radius:5px;
}

.focus-toggle span::before{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    top:5px;
    height:2px;
    background:var(--ha-muted);
    box-shadow:0 5px 0 var(--ha-muted);
    border-radius:2px;
}

.focus-toggle span::after{
    content:"";
    position:absolute;
    inset:-7px -5px auto auto;
    width:8px;
    height:8px;
    border-top:2px solid var(--ha-primary);
    border-right:2px solid var(--ha-primary);
    border-radius:1px;
}

html[data-focus="on"] .focus-toggle,
.focus-toggle:hover{
    border-color:var(--ha-primary);
    background:color-mix(in srgb,var(--ha-primary) 18%,var(--ha-surface));
}

html[data-focus="on"] .focus-toggle span,
.focus-toggle:hover span{
    border-color:var(--ha-primary);
}

html[data-focus="on"] .focus-toggle span::before,
.focus-toggle:hover span::before{
    background:var(--ha-primary);
    box-shadow:0 5px 0 var(--ha-primary);
}

html[data-focus="on"] .admin-page .sidebar{
    transform:translateX(-100%) !important;
}

html[data-focus="on"] .admin-page .main-content{
    margin-left:0 !important;
    width:100% !important;
}

html[data-focus="on"] .admin-page .topbar{
    height:72px !important;
}

.admin-page .metric-card::after{
    content:attr(data-metric-icon);
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:950;
    font-size:16px;
}

.dashboard-live{
    position:relative;
}

.dashboard-live-status{
    display:flex;
    justify-content:flex-end;
    margin:-16px 0 12px;
    color:var(--ha-muted);
    font-size:12px;
    font-weight:800;
}

.dashboard-live-status span{
    color:var(--ha-primary);
    margin-left:4px;
}

.dashboard-live.is-refreshing .dashboard-live-status span{
    opacity:.55;
}

.panel-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.invalid-toggle{
    color:var(--ha-muted);
}

.invalid-toggle[aria-pressed="true"]{
    color:var(--ha-primary);
}

.hide-invalid-scans [data-invalid-scan="1"]{
    display:none;
}

.is-invalid-scan strong{
    color:#f97066 !important;
}

.is-invalid-scan small{
    color:var(--ha-muted) !important;
}

.dashboard-analytics{
    margin-bottom:20px;
    padding:0 !important;
    overflow:hidden;
}

.dashboard-analytics summary{
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    cursor:pointer;
    border-bottom:1px solid var(--ha-border);
}

.dashboard-analytics summary::-webkit-details-marker{display:none}
.dashboard-analytics summary h2{margin:0 0 3px}
.dashboard-analytics summary p{margin:0;color:var(--ha-muted)}
.dashboard-analytics summary>span{
    color:var(--ha-primary);
    font-size:12px;
    font-weight:900;
}

.dashboard-analytics:not([open]) summary{
    border-bottom:0;
}

.dashboard-analytics:not([open]) summary>span::before{
    content:"Mostrar / ";
}

.dashboard-charts{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:18px;
    padding:20px;
}

.chart-card{
    min-width:0;
    background:color-mix(in srgb,var(--ha-surface-2) 72%,transparent);
    border:1px solid var(--ha-border);
    border-radius:14px;
    padding:18px;
}

.chart-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.chart-head strong{color:var(--ha-text)}
.chart-head small{color:var(--ha-muted)}

.area-chart,
.bar-chart{
    height:190px;
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:10px 4px 0;
    border-bottom:1px solid var(--ha-border);
}

.area-chart span{
    flex:1;
    min-width:8px;
    height:var(--h);
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg,var(--ha-primary),rgba(255,122,170,.88));
    box-shadow:0 -8px 24px color-mix(in srgb,var(--ha-primary) 22%,transparent);
}

.bar-chart span{
    position:relative;
    flex:1;
    min-width:11px;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.bar-chart i,
.bar-chart b{
    position:absolute;
    bottom:0;
    width:70%;
    border-radius:8px 8px 0 0;
}

.bar-chart i{
    height:var(--h);
    background:rgba(155,92,255,.42);
}

.bar-chart b{
    height:var(--h);
    width:42%;
    background:var(--ha-accent);
}

.area-chart em,
.bar-chart em{
    align-self:center;
    margin:auto;
    color:var(--ha-muted);
    font-style:normal;
    font-weight:800;
}

.chart-labels{
    display:flex;
    gap:8px;
    padding-top:8px;
    overflow:hidden;
}

.chart-labels small{
    flex:1;
    min-width:8px;
    color:var(--ha-muted);
    font-size:10px;
    text-align:center;
}

@media(max-width:1200px){
    .dashboard-charts{grid-template-columns:1fr}
}

@media(max-width:850px){
    .admin-page .topbar{
        display:grid;
        grid-template-columns:52px minmax(118px,max-content) minmax(0,1fr) auto;
        gap:12px;
        height:auto !important;
        min-height:82px;
        padding:12px 16px !important;
    }

    .admin-page .icon-button{
        display:grid !important;
        place-items:center;
        width:48px;
        height:48px;
        border-radius:12px;
        background:var(--ha-primary);
        color:#fff;
        font-size:24px;
        font-weight:900;
        box-shadow:0 12px 26px rgba(122,90,248,.32);
    }

    .topbar-mobile-brand{
        display:inline-flex;
        align-items:center;
        gap:8px;
        width:auto;
        height:48px;
        padding:0 11px 0 4px;
        border:1px solid var(--ha-border);
        border-radius:14px;
        background:var(--ha-surface);
    }

    .topbar-mobile-brand::after{
        content:"HAI/Tickets";
        color:var(--ha-text);
        font-size:12px;
        font-weight:900;
        white-space:nowrap;
    }

    .topbar-mobile-brand .brand-logo{
        width:40px !important;
        height:40px !important;
        padding:0 !important;
        overflow:hidden;
    }

    .topbar-search{
        width:100%;
        height:48px;
        grid-column:auto;
    }

    .topbar-actions{
        gap:6px;
    }

    .palette-toggle,
    .fullscreen-toggle,
    .focus-toggle,
    .theme-toggle{
        width:40px;
        height:40px;
    }

    .fullscreen-toggle{display:grid}
    .focus-toggle{display:none}
}

@media(max-width:620px){
    .admin-page .topbar{
        grid-template-columns:48px 1fr auto;
    }

    .topbar-mobile-brand{
        min-width:0;
        max-width:150px;
    }

    .topbar-mobile-brand::after{
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .topbar-actions{
        grid-column:1/-1;
        grid-row:1;
        justify-content:flex-end;
    }

    .topbar-search{
        grid-column:1/-1;
        grid-row:2;
    }

    .dashboard-charts{
        padding:14px;
    }

    .area-chart,
    .bar-chart{
        height:150px;
        gap:5px;
    }
}

/* =========================================================
   Auth screens + configurable login methods
   ========================================================= */

.auth-screen .public-shell{
    position:relative;
    overflow:hidden;
    background:#07080c !important;
}

.auth-screen .public-shell::before{
    content:"";
    position:fixed;
    inset:-4vh -4vw;
    background-image:
        linear-gradient(90deg,rgba(7,8,12,.88) 0%,rgba(7,8,12,.62) 42%,rgba(7,8,12,.18) 100%),
        var(--auth-bg-url);
    background-size:cover;
    background-position:center;
    transform:translate3d(0,0,0) scale(1.04);
    animation:authParallax 18s ease-in-out infinite alternate;
    z-index:0;
}

.auth-screen .public-shell::after{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 18% 18%,rgba(155,92,255,.22),transparent 28rem),
        radial-gradient(circle at 82% 68%,rgba(53,211,180,.16),transparent 26rem);
    pointer-events:none;
    z-index:0;
}

.auth-screen .public-header,
.auth-screen .public-main{
    position:relative;
    z-index:1;
}

.auth-screen .public-header{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.auth-screen .public-header .brand{
    color:#fff;
}

.auth-screen .public-header .brand>strong{
    text-shadow:0 6px 20px rgba(0,0,0,.34);
}

.auth-screen .public-main{
    min-height:calc(100vh - 74px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width:1180px;
    padding-block:34px 60px;
}

.auth-screen .public-main>.alert{
    width:min(620px,100%);
    margin:0 0 14px !important;
    border-radius:16px;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.auth-screen .auth-card{
    width:min(620px,100%) !important;
    margin:0 !important;
    padding:44px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:26px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.34) !important;
    backdrop-filter:blur(18px);
}

.auth-brand-line{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
    color:#101828;
}

.auth-brand-line span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#9b5cff,#35d3b4);
    font-size:12px;
    font-weight:950;
}

.auth-brand-line strong{
    font-size:14px;
    font-weight:900;
}

.auth-screen .auth-card .eyebrow{
    color:#7a5af8;
}

.auth-screen .auth-card h1{
    font-size:42px;
    letter-spacing:-.035em;
    margin-bottom:16px;
}

.auth-screen .auth-card>p{
    font-size:17px;
    line-height:1.62;
    color:#526071;
    margin-bottom:30px;
}

.auth-screen .field{
    gap:9px;
}

.auth-screen .field input,
.auth-screen .field select{
    min-height:52px;
    border-radius:14px;
    border-color:#cfd6e3;
    background:#fff;
}

.auth-screen .button{
    min-height:52px;
    border-radius:14px;
}

.auth-screen .login-method-tabs{
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
    gap:8px;
    padding:8px;
    border-radius:18px;
    background:#edf1f7;
}

.auth-screen .login-method-tabs button{
    min-height:52px;
    border-radius:13px;
    font-size:13px;
}

.auth-screen .login-method-tabs button.active{
    background:#fff;
    color:#101828;
    box-shadow:0 10px 24px rgba(16,24,40,.10);
}

.auth-screen .access-method-panels form.active{
    gap:18px;
}

.auth-screen .access-method-panels form.is-recovery-panel:not(.active){
    display:none;
}

.forgot-password-link{
    align-self:flex-start;
    color:#7a5af8;
    font-size:13px;
    font-weight:900;
}

.forgot-password-link:hover{
    color:#101828;
}

.auth-screen .login-help-strip{
    margin-top:28px;
    padding-top:22px;
}

.auth-screen .login-help-strip span{
    background:#eef2f7;
}

.admin-login-card{
    width:min(540px,100%) !important;
}

.login-method-settings{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.login-method-settings .check-row{
    min-height:48px;
    align-items:center;
    padding:12px;
    border:1px solid var(--ha-border,var(--line));
    border-radius:12px;
    background:color-mix(in srgb,var(--ha-surface-2,#f8fafc) 78%,transparent);
    font-weight:850;
}

@keyframes authParallax{
    from{transform:translate3d(-1.2vw,-.8vh,0) scale(1.04)}
    to{transform:translate3d(1.2vw,.8vh,0) scale(1.075)}
}

@media(max-width:900px){
    .auth-screen .public-main{
        justify-content:center;
    }

    .auth-screen .auth-card{
        padding:34px !important;
    }

    .login-method-settings{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .auth-screen .public-main{
        padding:18px 16px 38px;
        align-items:flex-start;
    }

    .auth-screen .auth-card{
        padding:26px 22px !important;
        border-radius:22px !important;
    }

    .auth-screen .auth-card h1{
        font-size:32px;
    }

    .auth-screen .auth-card>p{
        font-size:15px;
    }

    .login-method-settings{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   Public attendee account dashboard
   ========================================================= */

.account-screen .public-shell{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 0,rgba(122,90,248,.14),transparent 28rem),
        linear-gradient(180deg,#f5f7fb 0,#eaf0f8 100%) !important;
}

.account-screen .public-header{
    max-width:1180px;
    height:76px;
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(226,232,240,.9) !important;
    border-top:0 !important;
    box-shadow:0 12px 32px rgba(16,24,40,.07) !important;
}

.account-screen .public-main{
    display:block !important;
    max-width:1180px;
    padding:36px 24px 70px;
}

.account-screen .account-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:22px;
}

.account-screen .account-heading h1{
    margin:0 0 8px;
    color:#101828;
    font-size:42px;
    line-height:1;
    letter-spacing:-.035em;
}

.account-screen .account-heading p{
    margin:0;
    color:#667085;
    font-size:15px;
}

.account-screen .account-heading>a{
    color:#b42318;
    font-weight:900;
    background:#fee4e2;
    border:1px solid #fecdca;
    border-radius:999px;
    padding:10px 14px;
}

.account-screen .account-verification-notice{
    max-width:none;
    margin:0 0 22px;
    background:#fff8df;
}

.account-screen .account-dashboard-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.account-screen .account-mini-card{
    border-radius:16px;
    padding:22px;
    min-height:138px;
    border-color:#e4e7ec;
    box-shadow:0 12px 30px rgba(16,24,40,.06);
}

.account-screen .account-mini-card strong{
    font-size:26px;
    line-height:1.15;
    color:#101828;
}

.account-screen .public-panel{
    border-radius:18px;
    border-color:#e4e7ec;
    box-shadow:0 16px 38px rgba(16,24,40,.08);
    margin-top:18px;
}

.account-screen .registration-account-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.account-screen .account-registration{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    padding:16px;
    border:1px solid #e4e7ec;
    border-radius:14px;
    background:#fff;
}

.account-screen .account-registration strong,
.account-screen .account-registration small{
    display:block;
}

.account-screen .account-registration small{
    color:#667085;
    margin-top:4px;
}

.account-screen .account-registration .row-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.account-screen .public-panel>p{
    max-width:680px;
    color:#667085;
}

.account-screen .public-panel .form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.account-screen .public-panel .field input{
    min-height:50px;
}

@media(max-width:820px){
    .account-screen .account-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .account-screen .account-dashboard-grid{
        grid-template-columns:1fr;
    }

    .account-screen .account-registration{
        grid-template-columns:1fr;
    }

    .account-screen .account-registration .row-actions{
        justify-content:flex-start;
    }

    .account-screen .public-panel .form-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .account-screen .public-main{
        padding:22px 16px 48px;
    }

    .account-screen .public-header{
        border-radius:0 0 16px 16px;
    }

    .account-screen .account-heading h1{
        font-size:34px;
    }

    .account-screen .account-registration .row-actions>*{
        flex:1 1 140px;
    }
}