*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f5f5f5;color:#333;min-height:100vh;overflow-x:hidden}
.view{display:none;flex-direction:column;min-height:100vh}
.view.active{display:flex}
.main-header{background:linear-gradient(135deg,#005577,#003b52,#001a26);padding:30px 20px;text-align:center;color:#fff}
.main-header .app-icon{width:80px;height:80px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.main-header .app-icon img,.main-header .app-icon svg{width:80px;height:80px}
.main-header h1{font-size:1.25rem;font-weight:bold;letter-spacing:.12em;margin-bottom:6px}
.main-header .subtitle{font-size:.85rem;opacity:.8;margin-bottom:10px}
.divider{width:50px;height:1.5px;background:rgba(255,255,255,.53);margin:14px auto 0}
.content{flex:1;padding:20px 20px 50px;max-width:500px;width:100%;margin:0 auto}
.aviso-card{background:rgba(255,255,255,.8);border-radius:16px;padding:16px;text-align:center;color:#003b52;font-size:1rem;font-weight:bold;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.actions-row{display:flex;gap:16px;justify-content:center;margin-bottom:24px}
.btn-circle{width:120px;height:120px;border-radius:20px;background:linear-gradient(to bottom,#fff,#ddd);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .15s,box-shadow .15s}
.btn-circle:active{transform:scale(.95)}
.btn-circle img,.btn-circle svg{width:64px;height:64px}
.btn-rounded{display:inline-block;background:linear-gradient(to bottom,#fff,#ddd);border:none;border-radius:20px;padding:12px 32px;font-size:.85rem;font-weight:bold;color:#003b52;letter-spacing:.08em;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);text-align:center}
.btn-rounded:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#005577,#003b52);color:#fff;width:100%;padding:14px;border-radius:20px;border:none;font-size:1rem;font-weight:bold;cursor:pointer}
.btn-primary:active{opacity:.85}
.btn-green{background:#00e735;color:#fff;border:none;border-radius:20px;padding:12px 24px;font-size:1rem;font-weight:bold;cursor:pointer;flex:1}
.btn-green:active{opacity:.85}
.btn-green:disabled{background:#999;cursor:not-allowed}
.btn-red{background:#fe0202;color:#fff;border:none;border-radius:20px;padding:12px 24px;font-size:1rem;font-weight:bold;cursor:pointer;flex:1}
.btn-red:active{opacity:.85}
.btn-red:disabled{background:#999;cursor:not-allowed}
.form-group{margin-bottom:16px}
.form-label{display:block;color:#003b52;font-size:.95rem;font-weight:bold;margin-bottom:8px}
.form-input{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:1rem;background:#fff}
.form-input:focus{outline:none;border-color:#005577;box-shadow:0 0 0 2px rgba(0,85,119,.15)}
.form-input-row{display:flex;gap:8px;align-items:center}
.form-input-row .form-input{flex:1}
.icon-btn{width:60px;height:60px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}
.icon-btn:active{background:rgba(0,0,0,.05)}
.icon-btn svg{width:40px;height:40px}
textarea.form-input{min-height:120px;resize:vertical}
.list-view{flex:1;padding:10px}
.list-item{padding:12px 16px;border-bottom:1px solid #eee;cursor:pointer}
.list-item:active{background:#f0f0f0}
.list-item .item-title{color:#0271fe;font-size:1.1rem;font-weight:700;margin-bottom:4px}
.list-item .item-status{color:#ccc;font-size:.9rem}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-box{background:#fff;border-radius:16px;padding:24px;max-width:340px;width:90%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:modalIn .2s ease-out}
@keyframes modalIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-box h3{font-size:1.1rem;margin-bottom:8px;color:#333}
.modal-box p{font-size:.95rem;color:#666;margin-bottom:16px;line-height:1.4}
.modal-box .btn-primary{max-width:200px;margin:0 auto}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:12px 24px;border-radius:8px;font-size:.9rem;z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1}
.scanner-container{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;z-index:500;display:none}
.scanner-container.active{display:block}
.scanner-container video{width:100%;height:100%;object-fit:cover}
.scanner-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.3);border:none;color:#fff;font-size:1.5rem;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}
.scanner-overlay-text{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);color:#fff;font-size:1rem;background:rgba(0,0,0,.6);padding:10px 20px;border-radius:8px;white-space:nowrap}
.nav-bar{display:flex;background:linear-gradient(135deg,#005577,#003b52,#001a26);padding:10px;gap:8px;position:sticky;top:0;z-index:100}
.nav-bar button{background:rgba(255,255,255,.15);border:none;color:#fff;padding:8px 16px;border-radius:20px;font-size:.85rem;cursor:pointer}
.nav-bar button:active{background:rgba(255,255,255,.3)}
.nav-bar button.active{background:rgba(255,255,255,.3);font-weight:bold}
.sub-header{background:linear-gradient(135deg,#005577,#003b52,#001a26);padding:14px;text-align:center;color:#fff;font-size:1.25rem;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:12px}
.sub-header .back-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 8px;position:absolute;left:12px}
.action-row{display:flex;gap:10px;margin-top:20px;margin-bottom:20px}
.empty-state{text-align:center;padding:40px 20px;color:#999}
.scroll-view{flex:1;overflow-y:auto;padding:10px}
.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#debug-bar{background:#ff0;color:#000;padding:8px;font-size:12px;text-align:center;display:none}
.footer-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#005577,#003b52,#001a26);color:rgba(255,255,255,.6);text-align:center;padding:10px;font-size:.8rem;z-index:100}