/* Mobile-first. Paleta y tipografías heredadas de la planilla original (ámbar sobre gris azulado). */
:root {
  --bg: #E8E2D4; --card: #F8F4EA; --ink: #1B2430; --muted: #4C5766; --line: #CBC3B0; --row: #EFE9DB;
  --stub: #F4D98A; --stub-ink: #4A3600; --accent: #96600A; --focus: #1F4FB8; --hit: #F9E7A8;
  --danger: #A3201A; --ok: #1F6E42; --ok-bg: #D3E8D8; --warn-bg: #F3DFA0; --warn-ink: #6B4300; --off-bg: #D9D2C1;
  --pay: #2E7D4F; --res: #D9A21F; --free: #CFC7B3; --wa: #17803F;
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
/* Un solo control para el tamaño de todo el texto: todo lo demás está en rem. */
html { font-size: 112.5%; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.45 var(--f-body);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.2rem; }
.rango { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
h1.rango { font-size: 2.2rem; }
a { color: var(--focus); }
.wrap { max-width: 56rem; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
main.wrap { padding-block: 1rem 2rem; display: block; }
main > * + * { margin-top: .8rem; }
.sub { margin: .25rem 0 0; color: var(--muted); font-size: 1rem; }
.err { color: var(--danger); margin: 0; min-height: 1.2em; font-size: 1rem; }
.empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.back {
  display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; min-height: 3rem; padding: .3rem 1.1rem .3rem .55rem;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 999px;
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
}
.back svg { width: 1.7rem; height: 1.7rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back:active { background: var(--row); }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* cabecera */
.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .8rem; align-items: center; padding-block: .7rem;
  grid-template-areas: "brand salir" "quien live" "tabs tabs";
}
.brand { grid-area: brand; font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.salir { grid-area: salir; }
.quien { grid-area: quien; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien em { color: var(--muted); font-style: normal; }
.live { grid-area: live; display: inline-flex; align-items: center; gap: .45rem; justify-content: flex-end; white-space: nowrap; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.live i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); animation: pulso 2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }
.tabs { grid-area: tabs; display: flex; gap: .6rem; }
.tabs .tab { flex: 1; }
@media (min-width: 720px) {
  .top { position: sticky; top: 0; z-index: 5; }
  .top-in { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "brand tabs quien live salir"; }
  .tabs { justify-content: flex-start; } .tabs .tab { flex: none; }
}

/* botones y formularios */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 8px; padding: .7rem 1.1rem; min-height: 3.2rem;
  background: var(--accent); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
button.sec { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.small { min-height: 2.6rem; padding: .35rem 1rem; }
.btn.wa { background: var(--wa); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form { display: grid; gap: .8rem; }
.form label, .asig { display: grid; gap: .3rem; font-size: 1rem; color: var(--muted); font-weight: 500; }
input, select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .75rem; min-height: 3.2rem; width: 100%; min-width: 0;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.preview { margin: 0; padding: .6rem .8rem; background: var(--hit); border-radius: 8px; font-size: 1rem; min-height: 1.2em; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.panel, .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .85rem; }
.panel { display: grid; gap: .5rem; }

/* auth */
.auth { max-width: 24rem; margin: 3rem auto 0; display: grid; gap: .8rem; padding-inline: 1rem; }
.kv { margin: 0; }
.demo-box { font-size: 1rem; color: var(--muted); }
.demo-box ul { padding-left: 1.1rem; }

/* tarjetas */
.cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover, .tabla:hover { border-color: var(--accent); }
.card p { margin: .3rem 0 0; }
.card-link { display: block; color: inherit; text-decoration: none; }
.tabla.libre { background: var(--row); border-style: dashed; }
.tabla.mia { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.owner { font-weight: 600; }
.cnt { font-family: var(--f-num); font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cnt b { color: var(--ink); }
.mine { font-size: 1rem; color: var(--accent); font-weight: 600; }
.asig { margin-top: .6rem; }
.badge { font-size: .85rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.off { background: var(--off-bg); color: var(--muted); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* barras de avance */
.meter { height: 6px; border-radius: 3px; background: var(--free); display: flex; overflow: hidden; margin-top: .6rem; }
.meter.big { height: 10px; border-radius: 5px; }
.meter i.p, .strip i.s2, .k.p { background: var(--pay); }
.meter i.r, .strip i.s1, .k.r { background: var(--res); }
.strip { display: flex; gap: 2px; margin-top: .6rem; }
.strip i { flex: 1; height: 12px; border-radius: 2px; background: var(--free); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; font-size: 1rem; color: var(--muted); }
.legend > span { white-space: nowrap; }
.k { width: .75rem; height: .75rem; border-radius: 2px; display: inline-block; margin-right: .45rem; }
.k.l { background: var(--free); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .4rem 1.1rem; border-radius: 999px;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
}
.tab span { font-family: var(--f-num); color: var(--muted); font-size: .9rem; margin-left: .45rem; }
.tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab.on span { color: var(--bg); }

/* tabla de números */
.save { display: block; min-height: 1.2em; font-size: .95rem; color: var(--muted); }
.filas { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fila { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 6.8rem; align-items: stretch; border-bottom: 1px solid var(--line); min-height: 3.6rem; }
.fila:last-child { border-bottom: 0; }
.fila .num { display: grid; place-items: center; background: var(--row); color: var(--muted); font-family: var(--f-num); font-weight: 600; font-size: 1rem; }
.fila.e1 .num { background: var(--stub); color: var(--stub-ink); }
.fila.e2 .num { background: var(--pay); color: #fff; }
.celda { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.nm { border: 0; border-radius: 0; background: transparent; min-height: 3.6rem; padding: .35rem .6rem; }
.celda:has(.meta:not(:empty)) .nm { padding-top: .2rem; padding-bottom: 1.2rem; }
.nm:read-only { cursor: default; }
.nm:focus-visible { outline-offset: -2px; background: var(--hit); }
.meta { position: absolute; left: .6rem; bottom: .15rem; font-size: .8rem; color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 1rem); }
.pill {
  border: 0; border-left: 1px solid var(--line); border-radius: 0; min-height: 0; padding: 0 .4rem;
  background: transparent; color: var(--muted); font-size: 1rem; font-weight: 600;
}
.e1 .pill { background: var(--warn-bg); color: var(--warn-ink); }
.e2 .pill { background: var(--ok-bg); color: var(--ok); }
/* con permiso de edición: botón redondeado como las pestañas (borde de 2 px del color del estado) */
.pill.activo { margin: .5rem .55rem; border: 2px solid currentColor; border-radius: 999px; cursor: pointer; }
.pill.activo:active { filter: brightness(.93); }
.pill:disabled { opacity: 1; cursor: default; }
.fila.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--hit); } to { background: transparent; } }
.fila.destacada { outline: 4px solid var(--focus); outline-offset: -4px; }

/* pie de demo */
.demo { padding-block: 1rem 2rem; color: var(--muted); font-size: 1rem; }
.demo p { margin: .5rem 0 0; }

#toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw, 28rem);
  display: flex; align-items: center; gap: 1rem; background: var(--ink); color: var(--bg); padding: .65rem 1rem; border-radius: 8px; font-size: 1.05rem; z-index: 20; box-shadow: 0 4px 16px #0004;
}
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.form.edit { margin-top: .2rem; }

#toast button { background: transparent; color: var(--bg); border: 2px solid var(--bg); min-height: 2.4rem; padding: .2rem .9rem; flex: none; }

/* barra fija de la tabla: estado de guardado + conteo, siempre a la vista */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--card); border-top: 2px solid var(--line); font-weight: 600;
  padding: .7rem max(16px, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.barra .save { min-height: 0; font-size: 1.05rem; color: var(--ink); }
.barra .save.mal { color: var(--danger); }
.conteo { display: flex; gap: .9rem; font-variant-numeric: tabular-nums; }
.conteo .k { margin-right: .3rem; }
.con-barra main.wrap { padding-bottom: 6.5rem; }
.con-barra #toast { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }

/* buscador y resultados */
.buscar { border-width: 2px; appearance: none; -webkit-appearance: none; }
.stack > * + * { margin-top: .8rem; }
.resultados { display: grid; gap: .6rem; }
.res {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 3.8rem; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding-right: .8rem; color: inherit; text-decoration: none;
}
.res .num { align-self: stretch; display: grid; place-items: center; background: var(--row); color: var(--muted); font-family: var(--f-num); font-weight: 600; }
.res.e1 .num { background: var(--stub); color: var(--stub-ink); }
.res.e2 .num { background: var(--pay); color: #fff; }
.quien-res { display: flex; flex-direction: column; min-width: 0; padding-block: .4rem; }
.quien-res b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien-res small { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado-res { font-size: .85rem; font-weight: 700; color: var(--muted); }
.res.e1 .estado-res { color: var(--warn-ink); } .res.e2 .estado-res { color: var(--ok); }
.mios p { margin: .2rem 0 0; }
.mios h2 { margin-bottom: .2rem; }
.mis { margin-top: .3rem; }
.mis .mine { margin: 0; }

.tel { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; }