/* ===========================================================================
   Gastos Origen — oscuro, elegante, marca Origen.
   Exo (display) + Noto Sans (texto) · fondo navy · degradado verde→teal→violeta
   · iconos de línea fina. Mobile-first.
=========================================================================== */
:root{
  --bg:#080a12;
  --surface:#12151d;
  --surface-2:#191d27;
  --surface-3:#20242f;
  --line:#242835;
  --line-2:#333847;
  --txt:#f3f5f8;
  --txt-2:#a2a9b8;
  --muted:#69707f;
  --accent:#17c2a4;
  --accent-2:#12a68c;
  --accent-soft:rgba(23,194,164,.14);
  --accent-ink:#04231d;
  --grad:linear-gradient(100deg,#35d07f 0%,#17c2a4 46%,#6c5ce7 100%);
  --danger:#f2726b;
  --ring:rgba(23,194,164,.32);
  --font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Exo","Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); color:var(--txt);
  background:
    radial-gradient(820px 460px at 50% -10%, rgba(23,194,164,.14), transparent 60%),
    radial-gradient(680px 380px at 88% 4%, rgba(108,92,231,.13), transparent 58%),
    radial-gradient(600px 360px at 8% 8%, rgba(53,208,127,.09), transparent 60%),
    var(--bg);
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.55;
}
.hidden{display:none !important}
button{font-family:inherit}
.ic{width:17px; height:17px; flex:0 0 auto; display:block}

/* ---------- Header ---------- */
header{display:flex; align-items:center; justify-content:space-between; padding:15px 22px; background:transparent}
.brand-logo{height:34px; width:auto; display:block; opacity:.96}
.header-actions{display:flex; gap:2px}
.ghost{background:none; border:none; color:var(--txt-2); font-size:13.5px; font-weight:500;
  cursor:pointer; padding:7px 12px; border-radius:9px; transition:.15s; font-family:var(--display); letter-spacing:.01em}
.ghost:hover{color:var(--txt); background:var(--surface-2)}

/* ---------- Login (bienvenida) ---------- */
.login{margin:auto; width:min(400px,92vw); text-align:center; padding:32px}
.login-logo{width:170px; max-width:60%; height:auto; margin:0 auto 30px; display:block; filter:drop-shadow(0 8px 30px rgba(23,194,164,.25))}
.login h1{font-family:var(--display); margin:0 0 12px; font-size:30px; font-weight:700; letter-spacing:-.01em; line-height:1.15}
.login p{color:var(--txt-2); font-size:15px; line-height:1.65; margin:0 0 32px}
.login p b{color:var(--txt); font-weight:600}
.ms-btn{width:100%; padding:14px 16px; border:1px solid var(--line-2); border-radius:14px;
  background:var(--surface); color:var(--txt); font-size:15px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:.15s}
.ms-btn:hover{background:var(--surface-2); border-color:var(--muted)}
.ms-logo{width:17px; height:17px; display:inline-block;
  background:
    linear-gradient(#f25022,#f25022) 0 0/7.5px 7.5px no-repeat,
    linear-gradient(#7fba00,#7fba00) 9.5px 0/7.5px 7.5px no-repeat,
    linear-gradient(#00a4ef,#00a4ef) 0 9.5px/7.5px 7.5px no-repeat,
    linear-gradient(#ffb900,#ffb900) 9.5px 9.5px/7.5px 7.5px no-repeat;
}

/* ---------- Chat ---------- */
.chat{flex:1; overflow-y:auto; padding:30px 20px 8px; display:flex; flex-direction:column; gap:16px;
  width:100%; max-width:720px; margin:0 auto}
.hero{padding:22px 4px 10px}
.hero h2{font-family:var(--display); margin:0 0 12px; font-size:36px; font-weight:700; letter-spacing:-.02em; line-height:1.08}
.hero h2 .wave{width:.8em; height:.8em; display:inline-block; vertical-align:-.06em; margin-left:6px;
  color:var(--accent); transform-origin:72% 72%; animation:wave 2.6s ease .2s 2}
@keyframes wave{0%,55%,100%{transform:rotate(0)}18%{transform:rotate(15deg)}30%{transform:rotate(-9deg)}42%{transform:rotate(12deg)}}
.hero p{margin:0; color:var(--txt-2); font-size:15.5px; line-height:1.6; max-width:52ch}
.hero p b{color:var(--txt); font-weight:600}
.msg{max-width:82%; font-size:15px; line-height:1.6; animation:pop .2s ease}
.msg.bot{align-self:flex-start; color:var(--txt-2)}
.msg.bot b{color:var(--txt); font-weight:600}
.msg.me{align-self:flex-end; background:var(--surface-2); color:var(--txt); border:1px solid var(--line);
  padding:11px 15px; border-radius:16px 16px 4px 16px}
.msg img{max-width:190px; border-radius:14px; display:block; margin-top:10px}
.msg code{background:var(--surface-2); border:1px solid var(--line); padding:1px 7px; border-radius:6px; font-size:13px}
.msg a{color:var(--accent); font-weight:600; text-underline-offset:3px}
@keyframes pop{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------- Formulario ---------- */
.form{align-self:stretch; width:100%; max-width:440px; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:18px}
.form h4{font-family:var(--display); margin:0 0 15px; font-size:14px; font-weight:600; color:var(--txt);
  display:flex; align-items:center; gap:8px}
.form .row{display:flex; gap:10px; margin-bottom:12px}
.form label{flex:1; font-size:12px; font-weight:500; color:var(--muted); display:flex; flex-direction:column; gap:6px}
.form input,.form select{width:100%; padding:10px 12px; border-radius:11px; border:1px solid var(--line-2);
  background:var(--bg); color:var(--txt); font-size:14px; transition:.15s}
.form input:focus,.form select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.form select option{background:var(--surface)}
.form .actions{display:flex; gap:10px; margin-top:8px}
.form button{flex:1; padding:11px; border:none; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; transition:.15s}
.form .save{background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(23,194,164,.28)}
.form .save:hover{filter:brightness(1.06)}
.form .cancel{background:transparent; border:1px solid var(--line-2); color:var(--txt-2); box-shadow:none}
.form .cancel:hover{background:var(--surface-2)}
.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent)}

/* ---------- Composer ---------- */
.barra{padding:14px 20px 22px; background:transparent}
.composer{width:100%; max-width:720px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; padding:10px 10px 10px 12px;
  display:flex; align-items:center; gap:8px; overflow-x:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
.composer::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); color:var(--txt-2);
  font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; transition:.16s}
.chip .ic{color:var(--txt-2); transition:.16s}
.chip:hover{background:var(--surface-3); color:var(--txt); border-color:var(--line-2); transform:translateY(-1px)}
.chip:hover .ic{color:var(--accent)}
.chip.primary{margin-left:auto; background:var(--grad); color:#fff; border:none; font-weight:700;
  padding:10px 18px; box-shadow:0 6px 22px rgba(23,194,164,.32)}
.chip.primary .ic{color:#fff}
.chip.primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.chip:disabled,.chip:has(input:disabled){opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; filter:none}

/* ---------- Panel lateral ---------- */
.panel{position:fixed; top:0; right:0; height:100dvh; width:min(400px,92vw); background:var(--surface);
  border-left:1px solid var(--line); padding:22px; display:flex; flex-direction:column;
  box-shadow:-30px 0 80px rgba(0,0,0,.55); z-index:30; animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(24px); opacity:.5}to{transform:none; opacity:1}}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.panel-head b{font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.01em}
#lista{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin:0 -6px}
.item{padding:14px 8px; border-bottom:1px solid var(--line); font-size:14px}
.item:last-child{border-bottom:none}
.item .t{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; gap:10px}
.item .t span:last-child{color:var(--accent); font-variant-numeric:tabular-nums}
.item .s{color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.5}
.item .s a{color:var(--accent); font-weight:600; text-decoration:none}
.item .s a:hover{text-decoration:underline}
.item .del{float:right; background:none; border:none; color:var(--muted); cursor:pointer;
  padding:4px; border-radius:8px; line-height:0; transition:.15s}
.item .del svg{width:16px; height:16px; display:block}
.item .del:hover{color:var(--danger); background:var(--surface-2)}
.panel-total{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; font-weight:500;
  color:var(--txt-2); display:flex; justify-content:space-between; align-items:baseline}
.panel-total span{font-family:var(--display); color:var(--txt); font-size:26px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:#2c3140; border-radius:20px; border:3px solid transparent; background-clip:padding-box}

@media(max-width:520px){
  .hero h2{font-size:29px}
  .msg{max-width:90%}
  .barra{padding:12px 14px 16px}
  .chip{padding:9px 13px}
}

/* ---------- Panel de contabilidad (admin.html) ---------- */
.admin{flex:1; overflow-y:auto; width:100%; max-width:820px; margin:0 auto; padding:28px 20px}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.admin-head h2{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0}
.buscar{flex:1; min-width:200px; max-width:320px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--txt); font-size:14px; transition:.15s}
.buscar:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.cierres{display:flex; flex-direction:column; gap:10px}
.cierre{display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 17px; transition:.15s}
.cierre:hover{border-color:var(--line-2); background:var(--surface-2); transform:translateY(-1px)}
.c-persona{font-weight:600; font-size:15px}
.c-sub{color:var(--muted); font-size:12.5px; margin-top:3px}
.c-total{font-family:var(--display); color:var(--accent); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap}
.vacio{color:var(--muted); font-size:14px; padding:8px 2px}
.noacceso{max-width:420px; margin:60px auto; text-align:center}
.noacceso h2{font-family:var(--display); font-size:24px}
.noacceso p{color:var(--txt-2)}
.det-meta{color:var(--muted); font-size:13px; margin-bottom:14px}
.dl-btn{display:inline-block; margin-bottom:16px; padding:9px 15px; border-radius:11px;
  background:var(--grad); color:#fff; font-weight:600; font-size:14px; text-decoration:none}
.det-lista{display:flex; flex-direction:column; gap:2px}

/* admin: grupos por mes + descargas */
.grupo-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:22px 2px 8px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.grupo-head span{font-family:var(--display); font-weight:600; font-size:14px; color:var(--txt-2)}
.grupo-head:first-child{margin-top:0}
.zip-btn{background:var(--surface-2); border:1px solid var(--line-2); color:var(--txt);
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:10px; cursor:pointer; transition:.15s}
.zip-btn:hover{background:var(--surface-3); border-color:var(--muted)}
.c-right{display:flex; align-items:center; gap:14px; white-space:nowrap}
.c-xls{color:var(--accent); font-weight:600; font-size:13px; text-decoration:none; padding:4px 2px}
.c-xls:hover{text-decoration:underline}