:root{
  --bg:#E9EDF2;          /* fondo gris frío, se separa de las tarjetas */
  --surface:#FFFFFF;     /* tarjetas */
  --ink:#16202B;
  --ink-soft:#5C6B7A;
  --primary:#0E5C55;     /* verde petróleo */
  --primary-2:#0A423D;
  --gold:#C08A2D;        /* oro sobrio para la marca */
  --pos:#157F52;         /* ingresos */
  --neg:#C0392B;         /* egresos */
  --line:#DBE2EA;
  --line-strong:#C4CFDA;
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 6px 18px rgba(22,32,43,.06);
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-text-size-adjust:100%; line-height:1.45;
}
.app{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:var(--bg);}

/* ---------- Topbar / marca ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--primary); color:#EAF3F1;
  padding:12px 16px calc(12px);
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:3px solid var(--gold);
}
.brand{display:flex; flex-direction:column; line-height:1.1;}
.brand .name{font-size:18px; font-weight:700; letter-spacing:.2px;}
.brand .name b{color:#fff;}
.brand .name .contable{color:var(--gold); font-weight:700;}
.brand .ctx{font-size:11.5px; color:#B9D3CE; margin-top:2px;}
.topbar .right{display:flex; align-items:center; gap:8px;}
.topbar .who{font-size:11.5px; color:#CFE3DF; text-align:right; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.btn-logout{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:8px; padding:7px 10px; font-size:12px; cursor:pointer;}
.btn-logout:active{transform:scale(.97);}

/* ---------- Contenido ---------- */
main{flex:1; padding:16px 14px 92px;}
h1.title{font-size:19px; font-weight:700; margin:2px 0 14px;}
h2.sub{font-size:14px; font-weight:600; margin:0 0 10px; color:var(--ink);}
.list-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.list-head h2.sub{margin:0;}
.list-head .ghost{flex-shrink:0; white-space:nowrap;}
.muted{color:var(--ink-soft); font-size:12.5px;}

/* ---------- Tarjetas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px;}

/* ---------- Formularios ---------- */
label{display:block; font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; margin:12px 0 5px;}
label:first-child{margin-top:0;}
input,select,textarea{
  width:100%; font-family:var(--sans); font-size:16px; /* 16px evita zoom en iOS */
  padding:11px 12px; border:1px solid var(--line-strong); border-radius:10px;
  background:#FBFCFD; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,92,85,.12);}
textarea{resize:vertical; min-height:54px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.field-mic{display:flex; gap:6px; align-items:flex-start;}
.field-mic>*:first-child{flex:1;}
.mic{width:44px; height:44px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:10px; background:#FBFCFD; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
.mic svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.mic.on{background:#FBE9E6; border-color:var(--neg); color:var(--neg);}

button.primary{
  width:100%; margin-top:16px; padding:13px; border:none; border-radius:11px;
  background:var(--primary); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
}
button.primary:active{transform:scale(.985); background:var(--primary-2);}
.ghost{display:inline-block; background:none; border:1px solid var(--line-strong); color:var(--ink-soft); border-radius:9px; padding:8px 11px; font-size:12.5px; cursor:pointer; text-decoration:none; font-family:var(--sans);}
.ghost:active{transform:scale(.98);}
.inline-form{display:inline;}

/* ---------- Tickets / ítems de lista ---------- */
.item{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:13px 14px; margin-bottom:10px; position:relative;}
.item .head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px;}
.item .name{font-weight:600; font-size:14.5px;}
.amount{font-family:var(--mono); font-size:15px; font-weight:600; white-space:nowrap;}
.amount.pos{color:var(--pos);}
.amount.neg{color:var(--neg);}
.meta{font-size:12px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center;}
.chip{display:inline-block; background:#EEF2F5; color:#3A4A57; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px;}
.chip.pay{background:#F1ECE0; color:#7A5C1E;}
.chip.low{background:#FBE9E6; color:var(--neg);}
.del{position:absolute; top:9px; right:11px; background:none; border:none; color:#AFBBC6; font-size:18px; line-height:1; cursor:pointer;}
.empty{text-align:center; color:var(--ink-soft); font-size:13.5px; padding:26px 12px; background:var(--surface); border:1px dashed var(--line-strong); border-radius:12px;}

/* estados */
.state{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.3px;}
.state.pendiente,.state.alta{background:#FBE9E6; color:var(--neg);}
.state.proceso,.state.media{background:#FCF1DA; color:#8A5A0B;}
.state.listo,.state.baja{background:#E5F0E9; color:var(--pos);}
.state.entregado,.state.pagado{background:#E7EEF5; color:#3C5978;}

.qty{font-family:var(--mono); font-size:18px; font-weight:600;}
.qty-btns{display:flex; gap:6px; margin-top:9px;}
.qty-btns button{flex:1; padding:8px; border:1px solid var(--line-strong); border-radius:8px; background:#FBFCFD; font-size:14px; cursor:pointer;}

/* ---------- Stats ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:13px 14px;}
.stat.wide{grid-column:1/-1;}
.stat .lbl{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.3px;}
.stat .val{font-family:var(--mono); font-size:19px; font-weight:600; margin-top:3px;}
.stat .val.pos{color:var(--pos);} .stat .val.neg{color:var(--neg);}
.bar{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--line);}
.bar:last-child{border-bottom:none;}
.bar .v{font-family:var(--mono); font-weight:600;}
.bar .v.pos{color:var(--pos);} .bar .v.neg{color:var(--neg);}

/* ---------- Bottom nav ---------- */
nav.bottom{
  position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto;
  background:#0C2E2B; display:flex; border-top:1px solid #123f3a;
  padding:5px 2px calc(5px + env(safe-area-inset-bottom));
}
nav.bottom a{flex:1; text-decoration:none; color:#7FA39D; font-size:10px; font-weight:600;
  padding:7px 2px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;}
nav.bottom a .ico{display:flex;}
nav.bottom a .ico svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
nav.bottom a.active{color:var(--gold);}
.side-brand{display:none;}

/* ---------- Sub-nav admin (scroll horizontal) ---------- */
.subnav{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; -webkit-overflow-scrolling:touch;}
.subnav a{flex:0 0 auto; text-decoration:none; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:8px 14px; white-space:nowrap;}
.subnav a.active{background:var(--primary); color:#fff; border-color:var(--primary);}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px; background:var(--bg);}
.login-card{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:18px; padding:26px 22px; width:100%; max-width:360px;}
.login-brand{text-align:center; margin-bottom:20px;}
.login-brand .logo{display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; background:var(--primary); color:#fff; font-size:24px; font-weight:800; margin-bottom:10px; border-bottom:3px solid var(--gold);}
.login-brand .name{font-size:21px; font-weight:800;}
.login-brand .name .contable{color:var(--gold);}
.login-brand .name .ax{color:var(--primary);}
.login-brand .tag{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
.alert{background:#FBE9E6; color:#8A2A20; border:1px solid #F0C9C3; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:12px;}
.alert.ok{background:#E5F0E9; color:#1B5E3B; border-color:#BFE0CD;}

.hint{font-size:12px; color:var(--ink-soft); background:#EEF2F5; border-radius:9px; padding:9px 11px; margin-top:12px; line-height:1.5;}
.badge-rol{font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; font-weight:700; color:var(--primary);}
a.link{color:var(--primary); font-weight:600; text-decoration:none;}

/* ---------- Permisos por sección (alta / edición de empleadas) ---------- */
.perm-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;}
.perm-chk{
  display:flex; align-items:center; gap:8px; background:#FBFCFD; border:1px solid var(--line-strong);
  border-radius:9px; padding:9px 10px; font-size:13px; font-weight:600; color:var(--ink);
  text-transform:none; letter-spacing:0; cursor:pointer; margin:0;
}
.perm-chk input{width:16px; height:16px; margin:0; accent-color:var(--primary); flex-shrink:0;}
.perm-chk span{flex:1;}

/* ---------- Filtro por fecha (Caja) ---------- */
.filter-card{padding:12px 14px;}
.filter-row{display:flex; gap:8px; flex-wrap:wrap;}
.filter-btn{flex:1; min-width:104px; text-align:center; margin:0;}
.filter-btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.fecha-form{display:none; margin-top:0; padding-top:0; border-top:none; max-height:0; overflow:hidden;
  transition:max-height .18s ease, margin-top .18s ease, padding-top .18s ease;}
.fecha-form.open{display:block; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); max-height:220px;}

/* ---------- Categorías (chips con borrar) ---------- */
.cats-card{padding-bottom:14px;}
.cats-wrap{display:flex; flex-wrap:wrap; gap:8px;}
.cat-chip{display:inline-flex; align-items:center; gap:6px; background:#EEF2F5; color:#3A4A57; border:1px solid var(--line);
  border-radius:20px; padding:6px 8px 6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--sans);}
.cat-chip span{color:#AFBBC6; font-size:14px; line-height:1;}
.cat-chip:active{background:#FBE9E6; color:var(--neg); border-color:#F0C9C3;}
.cat-chip:active span{color:var(--neg);}

/* ---------- Reportes ---------- */
.rep-grid{display:grid; grid-template-columns:1fr; gap:12px;}
.rep-card{display:flex; flex-direction:column; align-items:flex-start;}
.rep-ico{font-size:22px; margin-bottom:6px;}
.rep-card .sub{margin-bottom:4px;}
.rep-card p.muted{margin:0 0 14px;}
.primary-link{
  display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:600;
}
.primary-link:active{background:var(--primary-2);}

/* ---------- Pantalla de PIN del panel ---------- */
.pin-card{max-width:340px; margin:0 auto;}

/* ---------- Layout de 2 columnas: formulario + lista ---------- */
/* En mobile es simplemente un bloque (form arriba, lista abajo, como siempre) */
.layout-2col{display:block;}

/* =====================================================================
   RESPONSIVE — mobile queda intacto (todo lo de arriba). De acá para
   abajo solo se agranda/reacomoda para tablet y PC.
   ===================================================================== */

/* ---------- Tablet (≥700px): mismo layout, más aire y columnas ---------- */
@media (min-width:700px){
  .app{max-width:700px;}
  main{padding:22px 26px 100px;}
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  .row2{gap:14px;}
  .card{padding:20px 22px;}
  h1.title{font-size:21px;}
  .login-card{max-width:400px;}
}

/* ---------- Escritorio (≥1024px): shell de grilla — topbar de punta a
   punta arriba, sidebar fija a la izquierda debajo, contenido a la
   derecha. Antes la sidebar era "position:fixed" y se pisaba con el
   topbar (por eso se veía el logo duplicado/cortado); con grid cada
   cosa tiene su lugar y no hay superposiciones. ---------- */
@media (min-width:1024px){
  body{background:var(--bg);}
  .app{
    max-width:1200px; margin:0 auto; min-height:100vh;
    background:var(--bg); border-left:1px solid var(--line); border-right:1px solid var(--line);
    display:grid; grid-template-columns:230px 1fr; grid-template-rows:auto 1fr;
  }

  /* El topbar ocupa las dos columnas, de punta a punta */
  .topbar{grid-column:1 / -1; grid-row:1; padding:18px 30px;}
  /* La marca completa ("Ax · AxSoft Contable") ya se muestra arriba de
     la sidebar — en el topbar de escritorio solo queda el contexto del
     negocio, para no repetir el logo dos veces */
  .topbar .brand .name{display:none;}
  .topbar .brand .ctx{font-size:13.5px; font-weight:600; color:#EAF3F1; margin-top:0;}

  /* Contenido */
  main{grid-column:2; grid-row:2; padding:26px 34px 40px; max-width:none;}

  /* La nav de abajo pasa a ser la sidebar: columna propia, debajo del
     topbar (ya no "fixed", así que nunca lo tapa) */
  nav.bottom{
    grid-column:1; grid-row:2;
    position:static; max-width:none; width:auto; margin:0;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:18px 12px; gap:3px;
    border-top:none; border-right:1px solid #123f3a;
  }
  nav.bottom a{
    flex:none; flex-direction:row; justify-content:flex-start; gap:10px;
    padding:11px 12px; border-radius:10px; font-size:13.5px; text-align:left;
  }
  nav.bottom a .ico svg{width:18px; height:18px;}
  nav.bottom a.active{background:rgba(255,255,255,.10);}
  nav.bottom a:hover{background:rgba(255,255,255,.06);}

  /* Marquita de marca arriba del todo de la sidebar */
  .side-brand{
    display:flex; align-items:center; gap:9px;
    padding:6px 10px 18px; margin-bottom:10px;
    border-bottom:1px solid #123f3a; color:#EAF3F1; font-size:14px; font-weight:700;
  }
  .side-brand b{color:var(--gold);}
  .side-brand-logo{
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    background:var(--gold); color:#0C2E2B; font-weight:800; font-size:12.5px;
    display:flex; align-items:center; justify-content:center;
  }

  /* Subnav del panel admin: deja de scrollear horizontal, se acomoda */
  .subnav{overflow-x:visible; flex-wrap:wrap;}

  /* Más columnas donde tiene sentido en pantallas anchas */
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .card{padding:24px 26px;}

  /* Listas de items en dos columnas en desktop para no tener una tira infinita */
  .list-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
  .list-grid .item{margin-bottom:0;}

  h1.title{font-size:23px;}

  /* Formulario a la izquierda (fijo) + lista a la derecha, como un panel
     de verdad en vez de una tira mobile centrada con espacio muerto. */
  .layout-2col{display:grid; grid-template-columns:380px minmax(0,1fr); gap:24px; align-items:start; max-width:1040px;}
  .col-form{position:sticky; top:24px;}
  .col-form .card:last-child{margin-bottom:0;}

  /* Filtro por fecha: los botones no se estiran infinito */
  .filter-row{flex-wrap:nowrap;}
  .filter-btn{flex:0 0 auto; min-width:130px;}

  /* Reportes: tarjetas en 2 columnas */
  .rep-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Escritorio grande (≥1400px): un poco más de respiro ---------- */
@media (min-width:1400px){
  .app{max-width:1320px;}
  .list-grid{grid-template-columns:1fr 1fr 1fr;}
}