@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";html,body,#root{width:100%;height:100%;min-height:100vh;margin:0;padding:0}:root{--font-primary:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-main:#0b0f19;--bg-card:#111827b3;--bg-input:#1f2937cc;--color-text:#f3f4f6;--color-muted:#9ca3af;--color-primary:#14b8a6;--color-primary-hover:#0d9488;--color-success:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--color-border:#ffffff14;--glass-border:#ffffff14;--glass-shadow:0 8px 32px 0 #0000005e;--glass-filter:blur(12px);--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--transition-fast:.2s ease;--transition-normal:.3s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--color-text);font-family:var(--font-primary);background-image:radial-gradient(at 0 0,#14b8a61a 0,#0000 50%),radial-gradient(at 100% 0,#6366f11a 0,#0000 50%),radial-gradient(at 50% 100%,#14b8a60d 0,#0000 50%);min-height:100vh;line-height:1.5}.demo-shell{flex-direction:column;min-height:100vh;display:flex}.simulator-header{-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border-bottom:1px solid var(--color-border);z-index:100;background:#0f172ad9;justify-content:space-between;align-items:center;padding:12px 24px;display:flex;position:sticky;top:0}.simulator-title{align-items:center;gap:10px;display:flex}.sim-logo{background:linear-gradient(135deg, var(--color-primary), #6366f1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:700}.sim-badge{color:var(--color-primary);letter-spacing:.5px;background:#14b8a626;border:1px solid #14b8a64d;border-radius:20px;padding:2px 8px;font-size:.75rem;font-weight:600}.simulator-nav{border:1px solid var(--color-border);background:#ffffff0a;border-radius:40px;gap:4px;padding:4px;display:flex}.nav-tab{color:var(--color-muted);font-family:var(--font-primary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:30px;align-items:center;gap:8px;padding:8px 18px;font-size:.9rem;font-weight:500;display:flex}.nav-tab:hover{color:var(--color-text);background:#ffffff08}.nav-tab.active{background:var(--color-primary);color:#0b0f19;font-weight:600;box-shadow:0 4px 14px #14b8a666}.demo-container{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:24px}.glass{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg);overflow:hidden}h1{letter-spacing:-.5px;margin-bottom:4px;font-size:2rem;font-weight:700}h2{letter-spacing:-.3px;font-size:1.25rem;font-weight:600}h3{font-size:1.1rem;font-weight:600}.subtitle{color:var(--color-muted);font-size:.95rem}.highlight{color:var(--color-primary)}.portal-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.btn{font-family:var(--font-primary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-primary);color:#0b0f19}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.btn-secondary{color:var(--color-text);border:1px solid var(--color-border);background:#ffffff14}.btn-secondary:hover{background:#ffffff1f}.btn-secondary-outline{color:var(--color-text);border:1px solid var(--color-primary);background:0 0}.btn-secondary-outline:hover{background:#14b8a61a}.btn-primary-outline{color:var(--color-primary);background:#14b8a60d;border:1px solid #14b8a64d}.btn-primary-outline:hover{background:#14b8a626}.btn-danger-outline{color:var(--color-danger);background:#ef44440d;border:1px solid #ef44444d}.btn-danger-outline:hover{background:#ef444426}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-warn{background:var(--color-warning);color:#0b0f19}.btn-sm{border-radius:var(--radius-sm);padding:6px 12px;font-size:.8rem}.btn-icon{border-radius:50%;width:36px;height:36px;padding:0}.btn-block{width:100%;display:flex}.badge-status{text-transform:uppercase;letter-spacing:.3px;border-radius:20px;align-items:center;padding:2px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-status.success{color:var(--color-success);background:#10b98126;border:1px solid #10b9814d}.badge-status.danger{color:var(--color-danger);background:#ef444426;border:1px solid #ef44444d}.badge-status.muted{color:var(--color-muted);background:#9ca3af26;border:1px solid #9ca3af4d}.unit-tag{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#ffffff0d;padding:2px 6px;font-size:.85rem;font-weight:500}.vehicle-tag{color:var(--color-muted);margin-top:4px;font-size:.75rem}.form-group{margin-bottom:16px}.form-group label{color:var(--color-muted);margin-bottom:6px;font-size:.85rem;font-weight:500;display:block}input,select,textarea{background:var(--bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text);font-family:var(--font-primary);transition:var(--transition-fast);padding:10px 14px;font-size:.95rem}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #14b8a626}.form-row{gap:12px;display:flex}.form-row .col{flex:1}.table-wrapper{width:100%;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th,td{border-bottom:1px solid var(--color-border);padding:14px 20px;font-size:.9rem}th{color:var(--color-muted);text-transform:uppercase;letter-spacing:.5px;background:#ffffff05;font-size:.75rem;font-weight:600}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff03}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:30px;display:grid}.metric-card{align-items:center;gap:20px;padding:20px;display:flex}.metric-icon{border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.metric-icon.blue{color:#3b82f6;background:#3b82f626}.metric-icon.purple{color:#8b5cf6;background:#8b5cf626}.metric-icon.green{color:#10b981;background:#10b98126}.metric-icon.red{color:#ef4444;background:#ef444426}.metric-data h3{margin-bottom:2px;font-size:1.75rem;font-weight:700;line-height:1.1}.metric-data p{color:var(--color-muted);margin-bottom:4px;font-size:.85rem}.admin-content-grid{grid-template-columns:3fr 2fr;gap:24px;display:grid}@media (width<=1024px){.admin-content-grid{grid-template-columns:1fr}}.card-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.resident-name-info{align-items:center;gap:12px;display:flex}.avatar{background:var(--color-primary);color:#0b0f19;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.8rem;font-weight:700;display:flex}.action-buttons{gap:6px;display:flex}.logs-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.search-input{max-width:220px;padding:6px 12px;font-size:.85rem}.logs-timeline{max-height:480px;padding:24px;overflow-y:auto}.log-item{gap:16px;margin-bottom:20px;display:flex;position:relative}.log-item:last-child{margin-bottom:0}.log-item:after{content:"";background:var(--color-border);width:2px;position:absolute;top:15px;bottom:-25px;left:5px}.log-item:last-child:after{display:none}.log-marker{background:var(--color-muted);border:2px solid var(--bg-main);z-index:1;border-radius:50%;width:12px;height:12px;margin-top:5px}.log-item.granted .log-marker{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.log-item.denied .log-marker{background:var(--color-danger);box-shadow:0 0 8px var(--color-danger)}.log-info{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff05;flex:1;padding:10px 14px}.log-meta{color:var(--color-muted);justify-content:space-between;margin-bottom:4px;font-size:.75rem;display:flex}.log-time{font-family:monospace}.log-unit{color:var(--color-primary);font-weight:600}.log-title{margin-bottom:2px;font-size:.9rem}.log-desc{color:var(--color-text);margin-bottom:4px;font-size:.85rem}.log-guard{color:var(--color-muted);font-size:.75rem;font-style:italic}.no-data{text-align:center;color:var(--color-muted);padding:40px 0}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#000000b3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{width:100%;max-width:500px;padding:24px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.close-btn{color:var(--color-muted);cursor:pointer;background:0 0;border:none;font-size:2rem}.close-btn:hover{color:var(--color-text)}.modal-footer{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.simulation-auth-header{align-items:center;gap:14px;margin-bottom:24px;padding:12px 20px;display:flex}.auth-select{border-color:var(--color-primary);max-width:280px;padding:6px 12px;font-weight:600}.resident-grid{grid-template-columns:4fr 5fr;gap:24px;display:grid}@media (width<=1024px){.resident-grid{grid-template-columns:1fr}}.radio-group-segmented{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff08;gap:4px;padding:4px;display:flex}.segment-btn{font-family:var(--font-primary);color:var(--color-muted);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;flex:1;padding:8px 0;font-size:.85rem;font-weight:500}.segment-btn:hover{color:var(--color-text)}.segment-btn.active{color:var(--color-primary);background:#14b8a626;border:1px solid #14b8a64d;font-weight:600}.info-alert{color:#93c5fd;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#3b82f614;border-left:3px solid #3b82f6;margin-top:12px;padding:10px 14px;font-size:.85rem}.form-sub-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff05;margin-top:14px;padding:14px}.sub-label{color:var(--color-muted);margin-bottom:10px;font-size:.8rem;display:block}.days-checkboxes{flex-wrap:wrap;gap:6px;display:flex}.day-btn{border:1px solid var(--color-border);width:32px;height:32px;color:var(--color-muted);cursor:pointer;transition:var(--transition-fast);background:#ffffff05;border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;font-weight:600;display:flex}.day-btn.active{background:var(--color-primary);color:#0b0f19;border-color:var(--color-primary);box-shadow:0 0 10px #14b8a64d}.cell-validity{max-width:180px}.days-list-small{color:var(--color-primary);font-size:.75rem;font-weight:600}.capitalize{text-transform:capitalize}.qr-modal{max-width:400px}.qr-container-card{color:#1f2937;border-radius:var(--radius-lg);--notch-radius:12px;--notch-bottom:90px;-webkit-mask:radial-gradient(circle at 0 calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px)), radial-gradient(circle at 100% calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px));-webkit-mask-composite:source-in;-webkit-mask:radial-gradient(circle at 0 calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px)), radial-gradient(circle at 100% calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px));mask:radial-gradient(circle at 0 calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px)), radial-gradient(circle at 100% calc(100% - var(--notch-bottom)), transparent var(--notch-radius), #000 calc(var(--notch-radius) + .5px));background:#fff;flex-direction:column;align-items:center;margin-bottom:20px;padding:24px;display:flex;position:relative;-webkit-mask-composite:source-in;mask-composite:intersect}.qr-container-card:after{content:"";bottom:calc(var(--notch-bottom) - 1px);border-top:2px dashed #e5e7eb;position:absolute;left:20px;right:20px}.qr-ticket-header{text-align:center;border-bottom:2px dashed #e5e7eb;width:100%;margin-bottom:20px;padding-bottom:12px}.qr-ticket-header h3{color:#111827;font-size:1.5rem;font-weight:700}.qr-ticket-header p{color:#6b7280;font-size:.8rem;font-weight:600}.qr-wrapper-box{border-radius:var(--radius-md);background:#f9fafb;border:1px solid #e5e7eb;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px;padding:16px;display:flex}.qr-ticket-body{text-align:center;width:100%;margin-top:10px;padding-bottom:20px}.qr-ticket-body h4{color:#111827;margin-bottom:6px;font-size:1.1rem;font-weight:700}.ticket-plates{color:#4b5563;margin-bottom:4px;font-size:.85rem}.ticket-type{color:#4b5563;margin-bottom:12px;font-size:.85rem}.ticket-dates{border-radius:var(--radius-sm);color:#374151;background:#f3f4f6;padding:8px 12px;font-size:.8rem}.qr-actions-buttons{flex-direction:column;gap:10px;width:100%;display:flex}.guard-layout-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}@media (width<=900px){.guard-layout-grid{grid-template-columns:1fr}}.left-column,.right-column{flex-direction:column;gap:24px;display:flex}.scanner-view-container{background:#000;justify-content:center;align-items:center;min-height:280px;display:flex;position:relative;overflow:hidden}.scanner-placeholder{color:var(--color-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex}.scanner-placeholder-icon{opacity:.6;margin-bottom:12px;font-size:3rem}.camera-feed-box{width:100%;height:100%;position:relative}.html5-qr-reader{border:none!important;width:100%!important}.html5-qr-reader video{object-fit:cover!important;width:100%!important;height:100%!important}.stop-cam-btn{z-index:5;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.scanner-overlay{pointer-events:none;border:30px solid #0009;position:absolute;inset:0}.scan-line{background:var(--color-primary);height:3px;box-shadow:0 0 10px var(--color-primary);animation:2s linear infinite scan;position:absolute;top:30px;left:30px;right:30px}@keyframes scan{0%{top:30px}50%{top:calc(100% - 33px)}to{top:30px}}.manual-entry-divider{text-align:center;color:var(--color-muted);letter-spacing:1px;align-items:center;margin:16px 20px;font-size:.75rem;font-weight:700;display:flex}.manual-entry-divider:before,.manual-entry-divider:after{content:"";border-bottom:1px solid var(--color-border);flex:1}.manual-entry-divider:not(:empty):before{margin-right:.5em}.manual-entry-divider:not(:empty):after{margin-left:.5em}.manual-entry-form{gap:10px;padding:0 20px 20px;display:flex}.token-input{font-family:monospace;font-size:.85rem}.demo-shortcuts-list{flex-direction:column;gap:8px;max-height:280px;padding:16px;display:flex;overflow-y:auto}.demo-shortcut-item{border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-primary);cursor:pointer;text-align:left;transition:var(--transition-fast);background:#ffffff05;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.demo-shortcut-item:hover{background:#14b8a614;border-color:#14b8a64d}.shortcut-info{flex-direction:column;display:flex}.shortcut-info span{color:var(--color-muted);font-size:.75rem}.no-data-small{color:var(--color-muted);text-align:center;padding:20px 0;font-size:.85rem}.result-display-content{justify-content:center;align-items:center;min-height:280px;padding:24px;display:flex}.scan-feedback-empty{text-align:center;color:var(--color-muted)}.scan-feedback-empty span{opacity:.4;font-size:3rem}.scan-feedback-panel{border-radius:var(--radius-lg);text-align:center;width:100%;padding:20px}.scan-feedback-panel.success{background:#10b98114;border:1px solid #10b9814d}.scan-feedback-panel.denied{background:#ef444414;border:1px solid #ef44444d}.feedback-icon-big{margin-bottom:10px;font-size:3.5rem}.feedback-status-title{letter-spacing:.5px;margin-bottom:4px;font-size:1.5rem;font-weight:700}.scan-feedback-panel.success .feedback-status-title{color:var(--color-success)}.scan-feedback-panel.denied .feedback-status-title{color:var(--color-danger)}.feedback-message{color:var(--color-muted);margin-bottom:20px;font-size:.95rem}.feedback-visitor-details{border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:left;background:#0003;padding:16px}.detail-row{border-bottom:1px solid #ffffff0a;justify-content:space-between;padding:8px 0;display:flex}.detail-row:last-child{border-bottom:none}.detail-row .lbl{color:var(--color-muted);font-size:.85rem}.detail-row .val{font-size:.9rem;font-weight:600}.plates-val{color:#111827;background:#fff;border:1px solid #9ca3af;border-radius:4px;padding:2px 8px;font-family:monospace;font-size:.85rem}.highlight-val{color:var(--color-primary)}.barrier-sim-visual{border-radius:var(--radius-md);background:#1e293b;height:200px;margin:20px;position:relative;overflow:hidden}.barrier-post{z-index:5;background:#475569;border-radius:4px 4px 0 0;width:20px;height:60px;position:absolute;bottom:20px;left:50px}.barrier-arm{transform-origin:10px 6px;background:#e2e8f0;border-radius:6px;width:240px;height:12px;transition:transform 1.2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:10px;left:10px;overflow:hidden;transform:rotate(0);box-shadow:0 4px 6px #0000004d}.barrier-arm.opening,.barrier-arm.open{transform:rotate(-85deg)}.barrier-arm.closing{transform:rotate(0)}.barrier-stripe{background:#f59e0b;flex:1;margin:0 4px;transform:skew(-30deg)}.barrier-stripe:nth-child(2n){background:#1e293b}.barrier-light{width:10px;height:10px;transition:var(--transition-fast);background:#ef4444;border-radius:50%;position:absolute;top:10px;left:5px;box-shadow:0 0 6px #ef4444}.barrier-light.green{background:#10b981;box-shadow:0 0 10px #10b981,0 0 20px #10b981}.barrier-light.yellow{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.barrier-light.red{background:#ef4444;box-shadow:0 0 8px #ef4444}.barrier-road{background:#0f172a;height:20px;position:absolute;bottom:0;left:0;right:0}.barrier-status-tag{border:1px solid var(--color-border);background:#00000080;border-radius:20px;padding:4px 10px;font-size:.75rem;font-weight:600;position:absolute;top:12px;right:12px}.status-text.closed{color:#f87171}.status-text.opening,.status-text.closing{color:#fbbf24}.status-text.open{color:#34d399}.barrier-manual-actions{padding:0 20px 20px}.hardware-config-body{padding:20px}.config-select,.config-input{font-size:.85rem}.config-subform{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#ffffff05;margin-top:14px;padding:12px}.form-row .col-half{flex:0 0 calc(50% - 6px)}.help-text{color:var(--color-muted);margin-top:4px;font-size:.75rem;display:block}.serial-connection-panel{border-top:1px dashed var(--color-border);justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;display:flex}.serial-badge{border-radius:4px;padding:3px 8px;font-family:monospace;font-size:.75rem;font-weight:600}.serial-badge.disconnected{color:#f87171;background:#ef44441a;border:1px solid #ef444433}.serial-badge.connected{color:#34d399;background:#10b9811a;border:1px solid #10b98133}.fade-in{animation:.4s forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.error-text{color:var(--color-danger);font-size:.85rem}.qr-short-code{letter-spacing:2px;color:var(--color-primary);text-align:center;border-radius:var(--radius-md);border:1px dashed var(--color-primary);background:#14b8a61a;margin-top:15px;padding:8px 16px;font-family:Courier New,Courier,monospace;font-size:1.5rem;font-weight:700}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.auth-card{width:100%;max-width:420px;padding:32px 28px}.auth-brand{text-align:center;margin-bottom:20px}.auth-brand .sim-logo{font-size:1.9rem}.auth-card form{margin-top:16px}.auth-help{color:var(--color-muted);margin-bottom:14px;font-size:.9rem}.auth-footnote{color:var(--color-muted);text-align:center;margin-top:22px;font-size:.78rem}.auth-card .manual-entry-divider{margin:18px 0}.auth-card a.btn{justify-content:center;text-decoration:none}.link-btn{color:var(--color-primary);font-family:var(--font-primary);cursor:pointer;text-align:center;background:0 0;border:none;margin:16px auto 0;font-size:.88rem;text-decoration:none;display:block}.link-btn:hover{text-decoration:underline}.info-alert.danger{border-left-color:var(--color-danger);color:#fca5a5;background:#ef444414}.user-menu{align-items:center;gap:12px;display:flex}.user-menu-info{flex-direction:column;align-items:flex-end;font-size:.85rem;line-height:1.2;display:flex}.user-menu-info span{color:var(--color-muted);font-size:.75rem}.condo-select{width:auto;max-width:240px}.admin-tabs{max-width:560px}.muted{color:var(--color-muted)}.card.glass>form:not(.manual-entry-form){padding:20px 24px 24px}.card.glass>.info-alert{margin:12px 24px 0}.card.glass>form.manual-entry-form.mt-3{padding-top:8px}.enlace-activacion code{border-radius:var(--radius-sm);word-break:break-all;color:var(--color-text);background:#0000004d;margin:8px 0;padding:8px;font-size:.8rem;display:block}@media (width<=900px){.simulator-header{flex-wrap:wrap;gap:10px;padding:10px 16px}.simulator-nav{order:3;width:100%;overflow-x:auto}.simulator-header .sim-logo{white-space:nowrap;font-size:1.2rem}.portal-header{flex-direction:column;align-items:flex-start}.demo-container{padding:16px}}