*{box-sizing:border-box;}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#181519;color:#F5F0EC;min-height:100vh;}
.hidden{display:none!important;}
#view-login{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-box{background:#1F1B20;border:1px solid #322C31;border-radius:12px;padding:32px;width:320px;text-align:center;}
.login-logo{font-size:22px;font-weight:700;color:#BF2B54;margin-bottom:6px;}
.login-sub{font-size:12px;color:#A79DA3;margin-bottom:18px;}
input,select{width:100%;padding:10px;border-radius:6px;border:1px solid #322C31;background:#0F0D10;color:#F5F0EC;font-family:inherit;font-size:13px;margin-bottom:8px;}
button{cursor:pointer;font-family:inherit;}
.btn-primary{width:100%;background:#BF2B54;color:#fff;border:none;padding:11px;border-radius:6px;font-weight:700;font-size:13px;}
.login-error{color:#FF8080;font-size:12px;margin-top:8px;min-height:14px;}
#app{display:flex;min-height:100vh;}
.sidebar{width:200px;background:#1F1B20;border-right:1px solid #322C31;padding:20px 0;flex-shrink:0;}
.sidebar-logo{font-weight:700;color:#BF2B54;padding:0 20px 18px;font-size:16px;}
.nav-item{padding:12px 20px;font-size:13px;color:#A79DA3;cursor:pointer;}
.nav-item.active,.nav-item:hover{background:#2A242A;color:#F5F0EC;}
.main{flex:1;padding:26px 32px;overflow-x:auto;}
.view{display:none;}
.view.active{display:block;}
h2{margin:0 0 18px;font-size:20px;}
table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:20px;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #322C31;}
th{color:#A79DA3;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.btn-sm{background:#2A242A;color:#F5F0EC;border:1px solid #322C31;padding:6px 10px;border-radius:5px;font-size:11px;}
.btn-danger{background:#7A1620;color:#fff;border:none;padding:6px 10px;border-radius:5px;font-size:11px;}
.btn-ok{background:#1E382B;color:#fff;border:none;padding:6px 10px;border-radius:5px;font-size:11px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;background:#1F1B20;padding:16px;border-radius:8px;margin-bottom:16px;border:1px solid #322C31;}
.form-row label{font-size:11px;color:#A79DA3;display:block;margin-bottom:4px;}
.schedule-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;font-size:12px;}
.badge{font-size:10px;padding:2px 8px;border-radius:10px;background:#2A242A;}
.badge-pending_deposit{background:#5C4A1A;color:#F5D98B;}
.badge-confirmed{background:#1E3A2A;color:#8FE3B0;}
.badge-expired{background:#3A2A2A;color:#E39B8F;}
.badge-cancelled{background:#3A2A2A;color:#E39B8F;}
.badge-completed{background:#1E3A2A;color:#8FE3B0;}
.ref-code{font-weight:700;font-family:monospace;font-size:12px;}
#logout-btn{margin:20px;background:none;border:1px solid #322C31;color:#A79DA3;padding:8px;border-radius:6px;font-size:12px;width:calc(100% - 40px);}

/* ── Avisos, bandeja de movimientos y diálogos ─────────────────────────── */
.muted{color:#A79DA3;}
.section-title{font-size:13px;color:#A79DA3;margin:20px 0 10px;}
.section-title:first-of-type{margin-top:0;}
.msg{font-size:12px;color:#A79DA3;min-height:16px;}
.span-all{grid-column:1/-1;}
.align-end{align-self:end;}
a.btn-sm{text-decoration:none;display:inline-block;}

.live{display:flex;align-items:center;gap:8px;padding:0 20px 14px;font-size:11px;color:#A79DA3;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#6B5F66;transition:background .3s;}
.live.on .live-dot{background:#3FBF7F;box-shadow:0 0 0 0 rgba(63,191,127,.6);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,127,.5);}70%{box-shadow:0 0 0 7px rgba(63,191,127,0);}100%{box-shadow:0 0 0 0 rgba(63,191,127,0);}}

.nav-badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;border-radius:9px;background:#BF2B54;color:#fff;font-size:10px;font-weight:700;text-align:center;}
.nav-badge:empty{display:none;}

.event-list{list-style:none;margin:0;padding:0;}
.event-item{display:flex;gap:12px;padding:12px 14px;border:1px solid #322C31;border-radius:8px;margin-bottom:8px;background:#1F1B20;}
.event-item.unread{border-color:#BF2B54;}
.event-icon{font-size:18px;line-height:1.2;}
.event-title{font-size:13px;font-weight:600;}
.event-detail{font-size:12px;color:#A79DA3;margin-top:2px;}
.event-time{font-size:11px;color:#6B5F66;margin-top:4px;}
.view-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.view-header h2{margin:0;}

#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:50;max-width:min(360px,calc(100vw - 40px));}
.toast{background:#2A242A;border:1px solid #322C31;border-left:4px solid #BF2B54;border-radius:8px;padding:12px 14px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:toast-in .25s ease-out;cursor:pointer;}
.toast.error{border-left-color:#E0584F;}
.toast.ok{border-left-color:#3FBF7F;}
.toast-title{font-weight:700;}
.toast-detail{color:#A79DA3;font-size:12px;margin-top:3px;}
.toast.leaving{animation:toast-out .2s ease-in forwards;}
@keyframes toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px);}}

dialog.confirm{border:1px solid #322C31;border-radius:12px;background:#1F1B20;color:#F5F0EC;padding:22px;width:min(360px,calc(100vw - 40px));}
dialog.confirm::backdrop{background:rgba(0,0,0,.55);}
dialog.confirm p{margin:0 0 18px;font-size:14px;}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;}

@media (max-width:760px){
  #app{flex-direction:column;}
  .sidebar{width:auto;border-right:none;border-bottom:1px solid #322C31;padding:12px 0;}
  .sidebar nav{display:flex;overflow-x:auto;}
  .nav-item{white-space:nowrap;padding:10px 14px;}
  .main{padding:18px 16px;}
  #logout-btn{margin:12px 16px 0;width:calc(100% - 32px);}
}