/* =========================================================
   Balance Mensual — hoja de estilos
   Tokens primero, componentes después. Tema claro + oscuro.

   Idea de color: contabilidad. Lo que está a favor va en tinta,
   lo que está en contra va en rojo ("estar en rojo"). El naranja
   es la marca y la interacción, nunca un signo de plata.
   ========================================================= */

:root{
  --paper:#F7F4F2;
  --paper-raised:#FFFFFF;
  --paper-sunk:#EFE9E5;
  --ink:#241512;
  --ink-2:#5E4F4A;
  --ink-3:#8C7D77;
  --border:#E9E1DC;
  --border-strong:#D5C9C2;

  --brand:#F2541B;          /* naranja caqui: bloques de marca */
  --on-brand:#2B0F0C;       /* texto sobre --brand */
  --accent:#E0480F;         /* bordes, foco, barras */
  --accent-strong:#B03A0C;  /* texto naranja sobre fondo claro */
  --accent-soft:#FDE9DF;

  --positive:var(--ink);
  --negative:#C8102E;
  --negative-soft:#FBE4E7;
  --negative-block:#C8102E; /* fondo del hero cuando el mes cierra en rojo */
  --on-negative:#FFFFFF;
  --warning:#8F5A00;
  --warning-soft:#FCEFD3;
  --amber:#E8A317;
  --sync-ok:#4FB286;        /* punto de "guardado": el único verde, para que se lea como ok */

  --rail:#2B0F0C;           /* barra lateral bordó */
  --rail-raised:#3A1813;
  --rail-line:#4A231D;
  --rail-ink:#F7EAE4;
  --rail-ink-2:#C0A39A;

  --field-hover:#F6F0EC;
  --field-focus:#FFFFFF;
  --focus:#E0480F;
  --shadow-pop:0 18px 48px -18px rgba(43,15,12,.35);

  --display:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body:"Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B1311;
    --paper-raised:#241A17;
    --paper-sunk:#150E0C;
    --ink:#F5EBE6;
    --ink-2:#C6B4AD;
    --ink-3:#8F7D76;
    --border:#352723;
    --border-strong:#4A3833;
    --brand:#FF6A2B;
    --on-brand:#2B0F0C;
    --accent:#FF7A3D;
    --accent-strong:#FF9B68;
    --accent-soft:#3A2117;
    --negative:#FF5C70;
    --negative-soft:#3F1B21;
    --negative-block:#B30E29;
    --on-negative:#FFFFFF;
    --warning:#F2BA4E;
    --warning-soft:#3A2C12;
    --rail:#130B09;
    --rail-raised:#221412;
    --rail-line:#2F1E1A;
    --field-hover:#2D221E;
    --field-focus:#2D221E;
    --focus:#FF7A3D;
    --shadow-pop:0 18px 48px -18px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"]{
  --paper:#1B1311;
  --paper-raised:#241A17;
  --paper-sunk:#150E0C;
  --ink:#F5EBE6;
  --ink-2:#C6B4AD;
  --ink-3:#8F7D76;
  --border:#352723;
  --border-strong:#4A3833;
  --brand:#FF6A2B;
  --on-brand:#2B0F0C;
  --accent:#FF7A3D;
  --accent-strong:#FF9B68;
  --accent-soft:#3A2117;
  --negative:#FF5C70;
  --negative-soft:#3F1B21;
  --negative-block:#B30E29;
  --on-negative:#FFFFFF;
  --warning:#F2BA4E;
  --warning-soft:#3A2C12;
  --rail:#130B09;
  --rail-raised:#221412;
  --rail-line:#2F1E1A;
  --field-hover:#2D221E;
  --field-focus:#2D221E;
  --focus:#FF7A3D;
  --shadow-pop:0 18px 48px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{
  font-family:var(--display); margin:0; text-wrap:balance;
  font-stretch:112%; font-weight:750; letter-spacing:-.015em; line-height:1.1;
}
button{font-family:inherit;}
.num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1, "lnum" 1;}

/* ---------- estructura ---------- */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:248px; flex:none;
  background:var(--rail); color:var(--rail-ink);
  padding:26px 16px 20px;
  display:flex; flex-direction:column; gap:26px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:11px; padding:0 8px;}
/* dos mitades: lo que entra y lo que sale */
.brand-mark{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--brand) 0 50%, var(--negative) 50% 100%);
}
.brand h1{font-size:1.3rem; font-stretch:125%; font-weight:800; letter-spacing:-.03em;}
.brand span{font-size:.74rem; color:var(--rail-ink-2); display:block; margin-top:1px;}

.month-picker{
  background:var(--rail-raised); border:1px solid var(--rail-line);
  border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:10px;
}
.month-picker select{
  border:none; background:transparent; color:var(--rail-ink);
  font-family:var(--display); font-stretch:112%; font-weight:700; font-size:1.02rem; width:100%;
  -webkit-appearance:none; appearance:none; cursor:pointer; padding:0 18px 0 0;
  background-image:linear-gradient(45deg, transparent 50%, var(--rail-ink-2) 50%), linear-gradient(135deg, var(--rail-ink-2) 50%, transparent 50%);
  background-position:calc(100% - 6px) 55%, calc(100% - 1px) 55%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.month-picker select option{background:var(--paper-raised); color:var(--ink);}
.dolar-row{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--rail-line); padding-top:10px;}
.dolar-row label{font-size:.78rem; color:var(--rail-ink-2);}
.dolar-row input{
  width:92px; text-align:right; border:1px solid transparent; background:transparent;
  color:var(--rail-ink); font-family:var(--body); font-weight:600; font-size:.9rem;
  font-variant-numeric:tabular-nums; border-radius:6px; padding:3px 6px;
}
.dolar-row input:hover{background:var(--rail-line);}
.dolar-row input:focus{background:var(--rail); border-color:var(--brand); outline:none;}

nav.primary-nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 11px; border-radius:9px;
  color:var(--ink-2); font-size:.92rem; font-weight:500;
  cursor:pointer; border:none; background:none;
  text-align:left; width:100%; position:relative;
}
.nav-item svg{flex:none; opacity:.8;}
.sidebar .nav-item{color:var(--rail-ink-2);}
.sidebar .nav-item:hover{background:var(--rail-raised); color:var(--rail-ink);}
.sidebar .nav-item.active{background:var(--rail-raised); color:var(--rail-ink); font-weight:650;}
.sidebar .nav-item.active svg{color:var(--brand); opacity:1;}
.sidebar .nav-item.active::before{
  content:""; position:absolute; left:-16px; top:8px; bottom:8px; width:4px;
  border-radius:0 4px 4px 0; background:var(--brand);
}

.sidebar-foot{margin-top:auto; font-size:.74rem; color:var(--rail-ink-2); padding:0 8px; line-height:1.55; overflow-wrap:anywhere;}

/* estado de guardado en la nube */
.sync{display:flex; align-items:center; gap:7px; font-weight:600; color:var(--rail-ink); margin-bottom:4px;}
.sync:empty{display:none;}
.sync::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--rail-ink-2); flex:none;}
.sync[data-estado="guardado"]::before{background:var(--sync-ok);}
.sync[data-estado="guardando"]::before{background:var(--amber);}
.sync[data-estado="sin-conexion"]::before, .sync[data-estado="error"]::before{background:var(--negative);}
.sync-punto{margin:0;}
.sync-punto:empty{display:flex;}
.sync-punto[data-estado="local"]{display:none;}
.sync-punto::before{background:var(--ink-3);}

/* ---------- login ---------- */
.login{
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background:var(--rail); color:var(--rail-ink);
}
.login-caja{max-width:360px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.login-mark{width:64px; height:64px;}
.login h1{font-size:2.6rem; font-stretch:125%; font-weight:850; letter-spacing:-.04em;}
.login-bajada{margin:0 0 10px; color:var(--rail-ink-2); font-size:1rem; line-height:1.5;}
.login-btn{padding:12px 22px; font-size:1rem; gap:10px;}
.login-btn:disabled{opacity:.6; cursor:progress;}
.login-btn svg{background:#fff; border-radius:50%; padding:2px; box-sizing:content-box;}
.login-error{margin:0; min-height:1.4em; color:var(--rail-ink); font-size:.88rem;}
.login[aria-busy="true"] .login-mark{animation:latido 1.2s ease-in-out infinite;}
@keyframes latido{50%{transform:scale(.88); opacity:.7;}}

main.content{flex:1; min-width:0; padding:34px clamp(16px,4vw,52px) 96px; max-width:1240px;}

.content-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.content-header h2{font-size:clamp(1.7rem, 3vw, 2.25rem); font-stretch:118%; font-weight:800; letter-spacing:-.03em;}
.content-header p{margin:6px 0 0; color:var(--ink-2); font-size:.95rem; max-width:62ch;}

.view{display:none;}
.view.active{display:block;}

/* ---------- botones ---------- */
.btn{
  border:1px solid var(--border-strong); background:var(--paper-raised); color:var(--ink);
  padding:8px 14px; border-radius:999px; font-size:.86rem; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{border-color:var(--accent); color:var(--accent-strong);}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700;}
.btn.primary:hover{background:var(--accent); border-color:var(--accent); color:var(--on-brand);}
.btn.ghost{background:transparent; border-color:var(--border);}
.btn.small{padding:5px 11px; font-size:.8rem;}
.btn:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, .nav-item:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* ---------- hero del resumen ----------
   Lo único ruidoso de la app: el mes y cómo cierra.
   Naranja si cierra a favor, rojo si cierra en contra. */
.hero{
  --hero-bg:var(--brand);
  --hero-ink:var(--on-brand);
  background:var(--hero-bg); color:var(--hero-ink);
  border-radius:22px; padding:clamp(22px,3.4vw,36px);
  margin-bottom:18px; position:relative; overflow:hidden;
}
.hero.rojo{--hero-bg:var(--negative-block); --hero-ink:var(--on-negative);}
.hero-estado{
  font-family:var(--display); font-stretch:118%; font-weight:700;
  font-size:clamp(1.05rem,2vw,1.3rem); letter-spacing:-.01em; margin:0;
}
.hero-monto{
  font-family:var(--display); font-stretch:125%; font-weight:850;
  font-size:clamp(2.6rem, 8vw, 5.4rem); line-height:.95; letter-spacing:-.045em;
  margin:10px 0 12px; overflow-wrap:anywhere;
}
.hero-acumulado{margin:0; font-size:.95rem; max-width:52ch; opacity:.86;}
.hero-acumulado strong{font-weight:700; font-variant-numeric:tabular-nums;}

/* la cuenta del mes, escrita como cuenta */
.ecuacion{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:0;
  margin-top:clamp(20px,3vw,30px); padding-top:16px;
  border-top:1.5px solid color-mix(in srgb, var(--hero-ink) 28%, transparent);
}
.eq-term{display:flex; align-items:center; gap:14px; padding-right:20px;}
.eq-op{
  font-family:var(--display); font-stretch:125%; font-weight:500;
  font-size:1.9rem; line-height:1; opacity:.6; width:.8em; text-align:center;
}
.eq-body{display:flex; flex-direction:column;}
.eq-label{font-size:.8rem; opacity:.78;}
.eq-valor{font-weight:700; font-size:1.12rem; font-variant-numeric:tabular-nums;}
.eq-term.resultado .eq-valor{font-weight:850;}
.eq-op:empty{display:none;}

@media (max-width:640px){
  .ecuacion{flex-direction:column;}
  .eq-term{padding:7px 0; justify-content:flex-start;}
  .eq-body{flex-direction:row; justify-content:space-between; align-items:baseline; flex:1; gap:10px;}
  .eq-op, .eq-op:empty{display:block; font-size:1.4rem;}
  .eq-term.resultado{border-top:1px solid color-mix(in srgb, var(--hero-ink) 28%, transparent); margin-top:4px; padding-top:10px;}
}

/* ---------- paneles ---------- */
.panels{display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start;}
.panels{margin-bottom:18px;}
.panels > div{min-width:0;}
.panels > div > .panel:last-child{margin-bottom:0;}
@media (max-width:920px){ .panels{grid-template-columns:1fr;} }

.panel{
  background:var(--paper-raised); border:1px solid var(--border); border-radius:16px;
  padding:20px; margin-bottom:18px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.panel-head h3{font-size:1.08rem; font-stretch:112%; font-weight:750;}
.panel-head .count{font-size:.8rem; color:var(--ink-3);}
.panel-note{font-size:.87rem; color:var(--ink-2); margin:0 0 12px; max-width:68ch;}

.tabs{display:flex; gap:2px; background:var(--paper-sunk); border-radius:999px; padding:4px; margin-bottom:16px; width:fit-content;}
.tab{border:none; background:none; padding:7px 16px; border-radius:999px; font-size:.87rem; font-weight:600; color:var(--ink-2); cursor:pointer;}
.tab:hover{color:var(--ink);}
.tab.active{background:var(--ink); color:var(--paper);}

/* ---------- tabla editable ---------- */
.etable{width:100%; border-collapse:collapse; font-size:.92rem;}
.etable th{
  text-align:right; font-size:.78rem; color:var(--ink-3);
  font-weight:500; padding:0 6px 8px; white-space:nowrap;
  border-bottom:1px solid var(--border-strong);
}
.etable th.left, .etable td.left{text-align:left;}
/* las columnas de números se encogen a su contenido: la de texto se queda con el resto */
.etable th:not(.left), .etable td:not(.left){width:1%; white-space:nowrap;}
.etable td{padding:0; border-bottom:1px solid var(--border);}
.etable tbody tr:last-child td{border-bottom:none;}
.etable tbody tr:hover .row-del{opacity:1;}

.cell-input{
  width:100%; border:1px solid transparent; background:transparent; color:var(--ink);
  font:inherit; font-size:.92rem; padding:9px 6px; border-radius:7px; min-width:0;
}
.cell-input.money{
  text-align:right; font-variant-numeric:tabular-nums; font-weight:500; min-width:98px;
}
.cell-input.cuota{text-align:center; font-variant-numeric:tabular-nums; font-size:.85rem; max-width:72px;}
.cell-input:hover{background:var(--field-hover);}
.cell-input:focus{background:var(--field-focus); border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);}
.cell-input::placeholder{color:var(--ink-3); opacity:.7;}
.cell-input[readonly]{color:var(--ink-2); cursor:default;}
.cell-input[readonly]:hover{background:transparent;}
select.cell-input{cursor:pointer; min-width:4.8rem;}
.cell-input.opciones{min-width:8.5rem;}
/* en pantallas angostas la tabla scrollea antes que aplastar la descripción */
.etable td.left .cell-input{min-width:7.5rem;}
select.cell-input option{background:var(--paper-raised); color:var(--ink);}

td.col-check{text-align:center;}
.cell-check{width:18px; height:18px; accent-color:var(--brand); cursor:pointer; margin:0 6px;}
td.col-del{width:30px;}
.row-del{
  border:none; background:none; color:var(--ink-3); cursor:pointer;
  font-size:1.1rem; line-height:1; padding:4px 7px; border-radius:6px; opacity:0;
}
.row-del:hover{color:var(--negative); background:var(--negative-soft);}
.row-del:focus-visible{opacity:1;}
.row-del:disabled{cursor:default; opacity:.25 !important; background:none !important; color:var(--ink-3) !important;}
@media (hover:none){ .row-del{opacity:.6;} .row-del:disabled{opacity:.2;} }

.table-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:2px solid var(--ink); margin-top:4px; padding-top:12px;
}
.table-foot .foot-total{font-weight:700; font-size:.98rem;}
.table-foot .foot-total .num{margin-left:8px;}
.add-row{
  border:1px dashed var(--border-strong); background:transparent; color:var(--ink-2);
  font-size:.84rem; font-weight:600; padding:6px 13px; border-radius:999px; cursor:pointer;
}
.add-row:hover{border-color:var(--accent); color:var(--accent-strong); border-style:solid; background:var(--accent-soft);}

.empty-row{padding:14px 6px; color:var(--ink-3); font-size:.88rem;}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.badge.warning{background:var(--warning-soft); color:var(--warning);}
.badge.ok{background:var(--accent-soft); color:var(--accent-strong);}
.badge.auto{background:var(--accent-soft); color:var(--accent-strong); font-size:.7rem;}

/* ---------- proyectos ---------- */
.project-card{border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:12px; padding:14px 16px; margin-bottom:14px;}
.project-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.project-head input{
  font-family:var(--display); font-stretch:112%; font-size:1.05rem; font-weight:750; color:var(--ink);
  border:1px solid transparent; background:transparent; border-radius:7px; padding:4px 6px; flex:1; min-width:0;
}
.project-head input:hover{background:var(--field-hover);}
.project-head input:focus{background:var(--field-focus); border-color:var(--accent); outline:none;}
.project-neto{font-weight:750; font-size:1.02rem; white-space:nowrap; font-variant-numeric:tabular-nums;}

/* reparto del proyecto: qué % del neto es tuyo, para proyectos compartidos con un socio */
.project-split{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-2px 0 14px; font-size:.87rem; color:var(--ink-2);}
.project-split label{white-space:nowrap;}
.project-split input{
  width:52px; text-align:right; border:1px solid var(--border-strong); background:var(--paper);
  color:var(--ink); font:inherit; font-variant-numeric:tabular-nums; border-radius:7px; padding:5px 7px;
}
.project-split input:hover{background:var(--field-hover);}
.project-split input:focus{background:var(--field-focus); border-color:var(--accent); outline:none;}
.project-split-nota{color:var(--ink-3); font-size:.83rem;}
.project-split-nota:empty{display:none;}

.project-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch;}
/* que los pies de las dos tablas del proyecto queden alineados abajo */
.project-grid > div{display:flex; flex-direction:column;}
.project-grid > div > div{display:flex; flex-direction:column; flex:1;}
.project-grid .table-foot{margin-top:auto; border-top-width:1px;}
@media (max-width:680px){ .project-grid{grid-template-columns:1fr;} }
.project-grid h4{font-size:.84rem; color:var(--ink-2); margin:0 0 4px; font-weight:650;}

/* ---------- presupuesto ---------- */
.aviso{
  background:var(--warning-soft); color:var(--warning); font-size:.87rem; font-weight:600;
  padding:9px 12px; border-radius:10px; margin:0 0 12px;
}
.parte{padding:14px 0; border-bottom:1px solid var(--border);}
.parte:last-child{border-bottom:none; padding-bottom:2px;}
.parte-head, .parte-foot{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;}
.parte-nombre{font-family:var(--display); font-stretch:112%; font-weight:750; font-size:1rem;}
.parte-pct{font-size:.84rem; color:var(--ink-2); font-weight:600;}
.parte-barra{height:12px; background:var(--paper-sunk); border-radius:6px; overflow:hidden; margin:8px 0 7px;}
.parte-fill{height:100%; border-radius:6px; background:var(--brand);}
.parte.meta .parte-fill{background:var(--ink);}
.parte.pasado .parte-fill{background:var(--negative);}
.parte-foot{font-size:.84rem; color:var(--ink-3);}
.parte-estado{font-weight:650; color:var(--ink-2);}
.parte.pasado .parte-estado{color:var(--negative);}
.parte.cumplida .parte-estado{color:var(--ink);}

.total-row.freelance-total{border-top:none; padding-top:0; margin-top:0;}

/* ---------- gráfico ---------- */
.chart-caption{font-size:.8rem; color:var(--ink-3); margin-top:8px; display:flex; gap:16px; flex-wrap:wrap;}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}

.split-bar{display:flex; height:16px; border-radius:8px; overflow:hidden; gap:3px;}
.split-bar > div{border-radius:4px;}
.split-legend{display:flex; justify-content:space-between; font-size:.84rem; color:var(--ink-2); margin-top:10px; gap:10px; flex-wrap:wrap;}

.line-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.92rem;
}
.line-item:last-child{border-bottom:none;}
.line-item .amt{white-space:nowrap; font-weight:500;}
.total-row{
  display:flex; justify-content:space-between; padding:12px 0 2px;
  font-weight:750; font-size:1rem; border-top:2px solid var(--ink); margin-top:4px;
}

/* ---------- ajustes ---------- */
.field-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);}
.field-row:last-of-type{border-bottom:none;}
.field-row label{font-size:.9rem; color:var(--ink-2);}
.field-row input{
  border:1px solid var(--border-strong); background:var(--paper); color:var(--ink);
  font:inherit; font-size:.9rem; padding:8px 11px; border-radius:9px; max-width:190px;
}
.field-row input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

/* ---------- dialog ---------- */
dialog{
  border:none; border-radius:20px; background:var(--paper-raised);
  color:var(--ink); padding:0; max-width:min(440px,92vw); box-shadow:var(--shadow-pop);
  border-top:6px solid var(--brand);
}
dialog::backdrop{background:rgba(43,15,12,.5);}
.dialog-inner{padding:24px;}
.dialog-inner h3{font-size:1.35rem; font-stretch:118%; margin-bottom:6px;}
.dialog-inner p{font-size:.9rem; color:var(--ink-2); margin:0 0 16px;}
.dialog-inner .field-row{border-bottom:none; padding:6px 0;}
.dialog-inner select, .dialog-inner input{
  border:1px solid var(--border-strong); background:var(--paper); color:var(--ink);
  font:inherit; font-size:.92rem; padding:8px 11px; border-radius:9px;
}
.check-row{display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:.9rem; color:var(--ink-2);}
.check-row input{accent-color:var(--brand); margin-top:3px;}
.dialog-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--rail); color:var(--rail-ink); padding:11px 18px; border-radius:999px;
  font-size:.88rem; box-shadow:var(--shadow-pop); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:60; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- mobile ---------- */
.bottom-nav{display:none;}
.mobile-topbar{display:none; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px;}
.mobile-topbar .brand{padding:0;}
.mobile-topbar-der{display:flex; align-items:center; gap:10px;}
.mobile-topbar .brand-mark{width:22px; height:22px;}
.mobile-topbar select{
  font-family:var(--display); font-stretch:112%; font-weight:700; font-size:.9rem; border:1px solid var(--border-strong);
  border-radius:999px; padding:7px 12px; background:var(--paper-raised); color:var(--ink);
}

@media (max-width:820px){
  .sidebar{display:none;}
  main.content{padding:18px 16px 96px;}
  .mobile-topbar{display:flex;}
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0;
    background:var(--rail); border-top:1px solid var(--rail-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:40;
  }
  /* ocho vistas no entran en 400px: la barra scrollea de costado */
  .bottom-nav{overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;}
  .bottom-nav::-webkit-scrollbar{display:none;}
  .bottom-nav .nav-item{
    flex:1 0 64px; flex-direction:column; gap:3px; font-size:.66rem; text-align:center; padding:6px 2px;
    border-radius:9px; color:var(--rail-ink-2); scroll-snap-align:start;
  }
  .bottom-nav .nav-item.active{color:var(--rail-ink); font-weight:650;}
  .bottom-nav .nav-item.active svg{color:var(--brand);}
  .etable{font-size:.88rem;}
  .cell-input{padding:10px 5px;}
  .content-header{margin-bottom:18px;}
  .hero{border-radius:18px;}
}

/* tablas anchas: scroll propio, nunca la página */
.table-scroll{overflow-x:auto;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}