:root{ --bg:#070B10; --bg-1:#0C1219; --bg-2:#111A25; --surface:rgba(255,255,255,.042); --surface-2:rgba(255,255,255,.072); --border:rgba(255,255,255,.085); --border-2:rgba(255,255,255,.15); --text:#EDF2FA; --muted:rgba(237,242,250,.56); --muted-2:rgba(237,242,250,.32); --accent:#4F7FFF; --accent-hi:#7BA4FF; --accent-bg:rgba(79,127,255,.11); --accent-border:rgba(79,127,255,.26); --success:#3ad29f; --success-border:rgba(58,210,159,.4); --success-bg:rgba(58,210,159,.12); --warn:#f4b740; --warn-border:rgba(244,183,64,.4); --warn-bg:rgba(244,183,64,.12); --danger:#ff6b5e; --danger-border:rgba(255,107,94,.4); --danger-bg:rgba(255,107,94,.12); --shadow-md:0 8px 32px rgba(0,0,0,.36); --shadow-lg:0 24px 64px rgba(0,0,0,.5); --r:10px; --r-lg:14px; --wrap:1160px; --font-display:"Space Grotesk","Inter",system-ui,sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; } *,*::before,*::after{ box-sizing:border-box; margin:0; } html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--text); background:radial-gradient(1200px 600px at 80% -10%, rgba(79,127,255,.10), transparent 60%), var(--bg); -webkit-font-smoothing:antialiased; min-height:100vh; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } button,input,textarea,select{ font:inherit; color:inherit; } ul{ list-style:none; padding:0; } [hidden]{ display:none !important; } h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.1; } h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.018em; } h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.014em; font-size:1.05rem; } .muted{ color:var(--muted); } .small{ font-size:.82rem; } .eyebrow{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--accent-border); background:var(--accent-bg); font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:var(--r); border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:.875rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .btn:hover{ transform:translateY(-1px); background:#5B8AFF; box-shadow:0 8px 24px rgba(79,127,255,.32); } .btn:active{ transform:translateY(0); } .btn.alt, .btn-ghost{ background:var(--surface); border-color:var(--border); color:var(--text); box-shadow:none; } .btn.alt:hover, .btn-ghost:hover{ background:var(--surface-2); border-color:var(--border-2); box-shadow:none; } .btn.ghost{ background:transparent; border-color:var(--border); color:var(--muted); box-shadow:none; } .btn.ghost:hover{ color:var(--text); border-color:var(--border-2); background:var(--surface); } .btn.danger{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); box-shadow:none; } .btn.danger:hover{ background:rgba(255,107,94,.2); } .btn-sm{ height:34px; padding:0 12px; font-size:.8rem; } .btn-primary{ } .btn-block{ width:100%; } .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; } .field{ margin-bottom:16px; } .field-label{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px; } .field-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .field-input, input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=search],input[type=number],textarea,select{ width:100%; height:42px; padding:0 12px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r); color:var(--text); transition:border-color .15s, box-shadow .15s; } textarea{ height:auto; padding:10px 12px; resize:vertical; } .field-input:focus, input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); } .field-input::placeholder, input::placeholder, textarea::placeholder{ color:var(--muted-2); } .field-wrap{ position:relative; } .field-link{ font-size:.78rem; color:var(--accent-hi); } .error{ display:none; font-size:.82rem; color:var(--danger); margin:4px 0 8px; } .error.open{ display:block; } .wrap{ max-width:var(--wrap); margin:0 auto; } #toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(140%); z-index:9999; padding:12px 20px; background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--r); box-shadow:var(--shadow-lg); font-size:.875rem; color:var(--text); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease; max-width:90vw; } #toast.open{ transform:translateX(-50%) translateY(0); opacity:1; } #toast.toast-ok{ border-color:var(--success-border); } #toast.toast-err{ border-color:var(--danger-border); } #toast.toast-warn{ border-color:var(--warn-border); } .ico{ display:inline-block; width:16px; height:16px; background-color:currentColor; -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; flex-shrink:0; vertical-align:middle; } .ico-sm{ width:13px; height:13px; } .ico-md{ width:18px; height:18px; } .ico-lg{ width:24px; height:24px; } .ico-xl{ width:30px; height:30px; } .ico-events { --ico:url(/ui/int/icon/events.svg); } .ico-excel { --ico:url(/ui/int/icon/excel.svg); } .ico-search { --ico:url(/ui/int/icon/search.svg); } .ico-trash { --ico:url(/ui/int/icon/trash.svg); } .ico-pencil { --ico:url(/ui/int/icon/pencil.svg); } .ico-plus { --ico:url(/ui/int/icon/plus.svg); } .ico-log-out { --ico:url(/ui/int/icon/log-out.svg); } .ico-account { --ico:url(/ui/int/icon/account.svg); } .ico-settings { --ico:url(/ui/int/icon/settings.svg); } .ico-calendar { --ico:url(/ui/int/icon/calendar.svg); } .ico-users { --ico:url(/ui/int/icon/users.svg); } .ico-whatsapp { --ico:url(/ui/int/icon/whatsapp.svg); } .ico-grid { --ico:url(/ui/int/icon/grid.svg); } .ico-key { --ico:url(/ui/int/icon/key-round.svg); } .ico-close { --ico:url(/ui/int/icon/close.svg); } .ico-chevron-left{ --ico:url(/ui/int/icon/chevron-left.svg); } .ico-reload { --ico:url(/ui/int/icon/reload.svg); } .ico-qr { --ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><path d='M14 14h3v3h-3zM20 14v7M14 20h7'/></svg>"); } .icon-btn{ width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--bg-1); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:border-color .15s, background .15s, color .15s, transform .1s; flex-shrink:0; } .icon-btn:hover{ border-color:var(--accent-border); background:var(--bg-2); color:var(--text); } .icon-btn:active{ transform:scale(.94); } .icon-btn.danger:hover{ color:var(--danger); border-color:var(--danger-border); } .badge{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--surface); border:1px solid var(--border); color:var(--muted); } .badge[data-state=active]{ background:var(--success-bg); border-color:var(--success-border); color:var(--success); } .badge[data-state=pending]{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn); } .badge[data-state=error]{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); } .mod-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; } .mod-title{ font-size:1.7rem; } .mod-sub{ color:var(--muted); margin-top:4px; font-size:.92rem; } .mod-head-right{ display:flex; align-items:center; gap:12px; } .mod-counter{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); } .mod-head-back{ display:flex; align-items:center; gap:14px; } .btn-back{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:.85rem; } .btn-back:hover{ color:var(--text); } .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; margin-bottom:18px; } .panel-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin-bottom:14px; } .panel-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .kv{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); font-size:.9rem; } .kv span{ color:var(--muted); } .table-wrap{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:auto; background:var(--bg-1); } table.tabla{ width:100%; border-collapse:collapse; font-size:.88rem; } table.tabla thead th{ text-align:left; font-family:var(--font-mono); font-weight:600; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--border); background:var(--bg-2); white-space:nowrap; } table.tabla tbody td{ padding:4px 8px; border-bottom:1px solid var(--border); vertical-align:middle; } table.tabla tbody tr:last-child td{ border-bottom:0; } table.tabla tbody tr:hover{ background:rgba(79,127,255,.05); } .cell-edit{ width:100%; height:34px; padding:0 8px; background:transparent; border:1px solid transparent; border-radius:8px; color:inherit; } .cell-edit:hover{ border-color:var(--border); } .cell-edit:focus{ outline:none; background:var(--bg-2); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); } .col-tight{ width:1%; white-space:nowrap; } .row-actions{ display:flex; gap:6px; } .empty-state{ text-align:center; padding:48px 20px; border:1px dashed var(--border-2); border-radius:var(--r-lg); } .empty-icon{ color:var(--muted-2); margin-bottom:12px; } .empty-title{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-bottom:6px; } .empty-copy{ color:var(--muted); margin-bottom:18px; } .modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(7,11,16,.7); backdrop-filter:blur(4px); } .modal.open{ display:flex; } .modal-panel{ width:100%; max-width:560px; background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); max-height:90vh; overflow:auto; animation:modalpop .16s ease; } .modal-panel.sm{ max-width:420px; } @keyframes modalpop{ from{ transform:translateY(8px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } } .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); } .modal-head h2{ font-size:1.15rem; } .modal-close{ background:none; border:0; color:var(--muted); cursor:pointer; width:30px; height:30px; } .modal-close:hover{ color:var(--text); } .modal-body{ padding:22px; } .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:760px){ .panel-row,.form-grid{ grid-template-columns:1fr; } } #login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; } .auth-wrap{ width:100%; max-width:420px; } .auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--shadow-md); } .auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; } .auth-brand-mark{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent-hi); } .auth-brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; } .auth-brand-name em{ font-style:italic; color:var(--accent-hi); } .auth-head{ margin-bottom:22px; } .auth-title{ font-size:1.7rem; margin:10px 0 6px; } .auth-sub{ color:var(--muted); font-size:.9rem; } .field-wrap .auth-toggle-pw{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); cursor:pointer; padding:6px; } #app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; } #nav{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; background:var(--bg-1); border-right:1px solid var(--border); padding:20px 14px; } .nav-brand{ padding:6px 8px 22px; } .brand{ display:flex; align-items:center; gap:10px; } .brand-mark{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent-hi); } .brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; } .brand-name em, .nav-mobile-brand em{ font-style:italic; color:var(--accent-hi); } .nav-menu{ display:flex; flex-direction:column; gap:2px; } .nav-link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r); color:var(--muted); font-size:.9rem; font-weight:500; transition:background .15s, color .15s; } .nav-link .nav-icon{ display:flex; } .nav-link:hover{ background:var(--surface); color:var(--text); } .nav-link.on{ background:var(--accent-bg); color:var(--accent-hi); border:1px solid var(--accent-border); padding:9px 11px; } .nav-bottom{ margin-top:auto; padding-top:16px; } .nav-user{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r); background:var(--surface); border:1px solid var(--border); } .nav-user-avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-weight:700; font-size:.8rem; flex-shrink:0; } .nav-user-info{ flex:1; min-width:0; } .nav-user-name{ display:block; font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-user-email{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-logout{ color:var(--muted); padding:6px; } .nav-logout:hover{ color:var(--danger); } #ctx{ padding:36px 40px 64px; max-width:var(--wrap); width:100%; margin:0 auto; } #ctx > section{ display:none; } #ctx > section.open{ display:block; } .nav-mobile-head{ display:none; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg-1); position:sticky; top:0; z-index:30; } .nav-mobile-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; } .nav-mobile-toggle{ width:38px; height:38px; background:none; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer; } .nav-mobile-toggle span{ width:16px; height:2px; background:var(--text); border-radius:2px; } .nav-mobile-logout{ color:var(--muted); } .nav-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; } @media(max-width:900px){ #app{ grid-template-columns:1fr; } .nav-mobile-head{ display:flex; } #nav{ position:fixed; left:0; top:0; z-index:50; width:248px; transform:translateX(-100%); transition:transform .2s ease; } #app.nav-open #nav{ transform:none; } #app.nav-open .nav-overlay{ display:block; } #ctx{ padding:24px 18px 56px; } } .eventos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; } .evento-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; transition:transform .12s ease, border-color .12s ease; cursor:pointer; } .evento-card:hover{ transform:translateY(-3px); border-color:var(--accent-border); } .evento-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .evento-card-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent-hi); } .evento-card-name{ font-size:1.15rem; margin-bottom:6px; } .evento-card-meta{ margin-bottom:16px; } .evento-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; } .evento-card-go{ font-family:var(--font-mono); font-size:.74rem; color:var(--accent-hi); } #evento .inline-form{ display:flex; gap:8px; } #evento .inline-form input{ flex:1; } .salas-list{ display:flex; flex-direction:column; gap:0; margin-bottom:14px; } .salas-list li{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; } .salas-list li:last-child{ border-bottom:0; } .search-wrap{ position:relative; display:flex; align-items:center; } .search-wrap .ico{ position:absolute; left:11px; color:var(--muted); pointer-events:none; } .search-wrap input{ padding-left:32px; min-width:240px; height:34px; } .scan-input{ font-family:var(--font-mono); text-align:center; font-size:1.05rem; height:52px; margin-bottom:8px; } .scan-result{ margin-top:14px; padding:18px; border-radius:var(--r); border:1px solid var(--border); } .scan-result.is-ok{ background:var(--success-bg); border-color:var(--success-border); } .scan-result.is-warn{ background:var(--warn-bg); border-color:var(--warn-border); } .scan-result.is-err{ background:var(--danger-bg); border-color:var(--danger-border); } .scan-result h3{ margin-bottom:6px; } .scan-result p{ margin:2px 0; } .scan-result .btn{ margin-top:12px; } .qr-box{ display:flex; justify-content:center; padding:8px; } .qr-box svg{ width:220px; height:220px; border-radius:8px; } #account .panel-title{ margin-bottom:16px; } #account .panel .btn{ margin-top:6px; }