/* Egresos IDEA — estilo Apple (claro/oscuro). Sin emojis: iconos SVG de linea. */
:root{
  --bg:#f5f5f7; --panel:#ffffff; --panel2:#fbfbfd; --text:#1d1d1f; --muted:#6e6e73;
  --line:#e3e3e6; --accent:#0071e3; --accent-d:#0062c4;
  --ok:#1f7d36; --ok-dim:#e6f4ea; --warn:#9a6700; --warn-dim:#fdf3e2;
  --bad:#c9302c; --bad-dim:#fbeaea; --blue-dim:#e8f1fd;
  --r:18px; --r-sm:12px; --r-pill:9999px; --shadow:0 1px 0 rgba(0,0,0,.04);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --panel:#1d1d1f; --panel2:#161617; --text:#f5f5f7; --muted:#a1a1a6;
    --line:#2a2a2c; --accent:#2997ff; --accent-d:#0071e3;
    --ok:#4cd07d; --ok-dim:#10331d; --warn:#e6b23a; --warn-dim:#33280f;
    --bad:#ff6b61; --bad-dim:#3a1513; --blue-dim:#0f2740;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sf); background:var(--bg); color:var(--text); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;}
a{color:var(--accent); text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:13px}

/* Header */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line);}
.top .in{max-width:1000px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:14px;}
.brand{font-weight:700; font-size:21px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; line-height:1.15;}
.brand svg{width:22px;height:22px;color:var(--accent)}
.brand-logo{height:34px;width:auto;display:inline-block;vertical-align:middle}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-logo{filter:brightness(0) invert(1)}}
.top nav{margin-left:auto; display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.top nav a{padding:5px 11px; border-radius:var(--r-pill); color:var(--text); font-size:13px; font-weight:500;}
.top nav a .ic, .top nav a svg{width:15px;height:15px}
.top nav a:hover{background:var(--panel2)}
.top nav a.on{background:var(--accent); color:#fff}
.who{font-size:13px; color:var(--muted); padding-left:6px; border-left:1px solid var(--line); margin-left:4px}

/* Layout */
.wrap{max-width:1000px; margin:0 auto; padding:22px 16px 60px;}
h1{font-size:26px; letter-spacing:-.02em; font-weight:600; margin:.2em 0 .5em}
h2{font-size:20px; letter-spacing:-.01em; font-weight:600; margin:.2em 0 .6em}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); margin-bottom:18px;}
.grid{display:grid; gap:14px}
@media(min-width:640px){ .grid.c2{grid-template-columns:1fr 1fr} .grid.c3{grid-template-columns:1fr 1fr 1fr} }

/* Form */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; outline:none;}
.field textarea{min-height:88px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.row2{display:grid; gap:14px} @media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}

/* Botones */
.btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  padding:11px 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--panel); color:var(--text);}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-d); border-color:var(--accent-d); color:#fff}
.btn-ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn-ok:hover{filter:brightness(.95); color:#fff}
.btn-danger{background:var(--panel); border-color:var(--bad); color:var(--bad)}
.btn-danger:hover{background:var(--bad-dim)}
.btn svg{width:17px;height:17px}
.btn.block{width:100%; justify-content:center}

/* Badges / chips */
.badge{display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill);}
.b-pend{background:var(--warn-dim); color:var(--warn)}
.b-rev{background:var(--warn-dim); color:var(--warn)}
.b-auth{background:var(--blue-dim); color:var(--accent)}
.b-pay{background:var(--ok-dim); color:var(--ok)}
.b-rech,.b-anul{background:var(--bad-dim); color:var(--bad)}
.chip{display:inline-block; font-size:12px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); padding:3px 9px; border-radius:var(--r-pill); margin:2px 2px 0 0}

/* Tabla / lista */
.item{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); margin-bottom:10px;}
.item:hover{border-color:var(--accent)}
.item .m{font-weight:600; font-size:16px}
.item .c{color:var(--muted); font-size:14px; margin-top:2px}
.item .r{margin-left:auto; text-align:right; white-space:nowrap}
.money{font-variant-numeric:tabular-nums; font-weight:600}

/* Tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.tabs a{padding:8px 15px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--text); border:1px solid var(--line); background:var(--panel)}
.tabs a.on{background:var(--accent); color:#fff; border-color:var(--accent)}

/* Flash */
.flash{padding:12px 16px; border-radius:var(--r-sm); margin-bottom:16px; font-weight:500; border:1px solid}
.flash.ok{background:var(--ok-dim); color:var(--ok); border-color:transparent}
.flash.err{background:var(--bad-dim); color:var(--bad); border-color:transparent}

/* Dictado por micrófono */
.micbtn{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:1px 5px;border-radius:var(--r-pill);margin-left:6px}
.micbtn:hover{color:var(--accent)} .micbtn.rec{color:var(--bad)}
.micbtn.rec svg{animation:micpulse 1s ease-in-out infinite}@keyframes micpulse{50%{opacity:.4}}

/* Login */
.auth{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:20px}
.auth .card{max-width:400px; width:100%}
.dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px; margin:0}
.dl dt{color:var(--muted)} .dl dd{margin:0; font-weight:500}

/* ── Responsive / móvil ── */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }                 /* evita el "zoom out" por desbordes accidentales */
img, svg, .g-recaptcha{ max-width:100%; }  /* nada se sale del ancho de la pantalla */
.top .in{ flex-wrap:wrap; }
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:16px 14px 70px; }
  .card{ padding:18px 16px; }
  h1{ font-size:22px; }
  h2{ font-size:18px; }
  .field input, .field select, .field textarea{ font-size:16px; padding:12px; }  /* 16px evita el zoom de iOS al enfocar */
  .btn{ padding:12px 18px; }
  .btn.block, .wrap form .btn-primary{ width:100%; justify-content:center; }      /* botón de enviar a lo ancho */
  .top nav a{ padding:6px 10px; }
  .dl{ grid-template-columns:1fr; gap:2px 0; }
  .dl dt{ margin-top:8px; }
  .item{ flex-wrap:wrap; }
  .item .r{ margin-left:0; text-align:left; width:100%; }
}
/* reCAPTCHA en pantallas muy angostas (<330px): encoger un poco para que no se corte */
@media (max-width:330px){
  .g-recaptcha{ transform:scale(.90); transform-origin:left top; }
}