/* HUD de bolsillo: la estética del HUD del escritorio, repartida en pantallas para el pulgar */
:root {
  --bg: #02060c;
  --bg2: #061220;
  --panel: rgba(8, 26, 44, 0.62);
  --line: rgba(70, 217, 255, 0.18);
  --line-hi: rgba(70, 217, 255, 0.6);
  --cyan: #46d9ff;
  --cyan-dim: #2a8fb0;
  --ice: #d8f6ff;
  --text: #b9dcea;
  --muted: #5d8399;
  --amber: #ffb547;
  --red: #ff5a6a;
  --green: #4dffb0;
  --glow: 0 0 12px rgba(70, 217, 255, 0.45);
  --display: 'Rajdhani', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, var(--bg2) 0%, var(--bg) 70%) fixed, var(--bg);
  color: var(--text);
  font: 500 17px/1.4 var(--display);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
svg { width: 22px; height: 22px; fill: currentColor; }
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(rgba(70, 217, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 217, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 70%);
  animation: drift 40s linear infinite;
}
@keyframes drift { to { background-position: 40px 40px, 40px 40px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Cabecera ---------- */
header.top {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(2, 6, 12, 0.95), rgba(2, 6, 12, 0.75));
}
.brand-mark { width: 30px; height: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(70, 217, 255, 0.6)); }
.brand-mark circle:nth-child(2) { stroke-dasharray: 4 3; transform-origin: center; animation: spin 12s linear infinite; }
.brand-mark .fill { fill: var(--cyan); }
body.busy .brand-mark circle:nth-child(2) { animation-duration: 1.5s; stroke: var(--amber); }
.brand { flex: 1; min-width: 0; }
h1 { font-size: 17px; font-weight: 700; letter-spacing: 0.28em; color: var(--ice); text-shadow: var(--glow); }
#clock { font: 400 11px var(--mono); color: var(--muted); letter-spacing: 0.06em; }
#voice-pill {
  display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--line-hi); border-radius: 19px; color: var(--cyan);
  font: 600 12px var(--display); letter-spacing: 0.12em;
}
#voice-pill svg { width: 18px; height: 18px; }
#voice-pill[data-mode="off"] { color: var(--muted); border-color: var(--line); }
#voice-pill[data-mode="phrases"] { color: var(--amber); border-color: rgba(255, 181, 71, 0.5); }

main { position: relative; min-height: 0; }
.screen { position: absolute; inset: 0; animation: screen-in 0.28s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateX(var(--from, 12px)); } }
.screen.scroll { overflow-y: auto; padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.screen.scroll > * { flex-shrink: 0; }

/* ---------- Pantalla HARVEY ---------- */
#s-harvey { display: grid; grid-template-rows: auto 1fr auto; }
.core-wrap { position: relative; height: min(34vh, 300px); transition: height 0.35s ease; cursor: pointer; touch-action: manipulation; }
body.compact .core-wrap { height: 92px; }
#core { width: 100%; height: 100%; display: block; }
.core-label { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; pointer-events: none; }
#state-label { font: 700 14px var(--display); letter-spacing: 0.32em; color: var(--ice); text-shadow: var(--glow); }
#state-hint { font: 400 11px var(--mono); color: var(--muted); min-height: 1.3em; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.compact .core-label { display: none; }
body.listening #state-label { color: #fff; }
body.busy #state-label { color: var(--amber); }

#log { overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; mask-image: linear-gradient(transparent 0, #000 14px); }
.msg { max-width: 90%; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; animation: rise 0.25s ease-out; }
.msg.yo { align-self: flex-end; background: rgba(70, 217, 255, 0.12); border: 1px solid var(--line-hi); color: var(--ice); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msg.yo .voz { font: 400 11px var(--mono); color: var(--cyan); display: block; margin-bottom: 2px; }
.msg.harvey { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: inset 0 0 24px rgba(70, 217, 255, 0.04); }
.msg.harvey.live { border-color: var(--line-hi); box-shadow: 0 0 18px rgba(70, 217, 255, 0.15); }
.msg.harvey.error { border-color: var(--red); color: #ffc2c8; }
.msg .ack { font: 600 12px var(--mono); color: var(--amber); letter-spacing: 0.04em; margin-bottom: 4px; }
.msg .ack::before { content: '◆ '; }
.msg .say { color: var(--ice); font-size: 18px; }
.msg .w { display: inline-block; white-space: pre; animation: word 0.45s both; }
@keyframes word { from { opacity: 0; filter: blur(5px); transform: translateY(3px); } }
.msg .detail { margin-top: 10px; padding: 8px 12px; border-left: 2px solid var(--cyan-dim); background: rgba(70, 217, 255, 0.04); font-size: 15px; }
.msg b { color: var(--ice); }
.msg ul { padding-left: 18px; margin: 2px 0; }
.msg a { color: var(--cyan); }
.msg code { font: 400 13px var(--mono); background: rgba(0, 0, 0, 0.35); padding: 1px 4px; border-radius: 4px; }
.typing::after { content: '▍'; color: var(--cyan); animation: pulse 0.8s steps(1) infinite; }
.sep { align-self: center; font: 400 11px var(--mono); letter-spacing: 0.1em; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 3px 10px; }
.tools { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tools:empty { display: none; }
.tools li { font: 400 12px var(--mono); border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; color: var(--muted); }
.tools li.run { color: var(--amber); border-color: rgba(255, 181, 71, 0.6); animation: pulse 1.2s ease-in-out infinite; }
.tools li.done::before { content: '✓ '; color: var(--green); }
.tools li.fail::before { content: '✕ '; color: var(--red); }

.composer { padding: 8px 12px 10px; border-top: 1px solid var(--line); background: rgba(2, 6, 12, 0.9); }
#choices { display: flex; flex-wrap: wrap; gap: 8px; }
#choices:not(:empty) { margin-bottom: 8px; }
#choices button {
  flex: 1 1 40%; min-height: 44px; border-radius: 12px; font-weight: 700; letter-spacing: 0.08em;
  border: 1px solid var(--green); color: var(--green); background: rgba(77, 255, 176, 0.08); animation: rise 0.25s ease-out;
}
#choices button.no { border-color: var(--red); color: var(--red); background: rgba(255, 90, 106, 0.08); }
.approval { flex-basis: 100%; border: 1px solid var(--amber); border-radius: 12px; padding: 10px 12px; background: rgba(255, 181, 71, 0.08); box-shadow: 0 0 20px rgba(255, 181, 71, 0.2); }
.approval h3 { font-size: 14px; letter-spacing: 0.1em; color: var(--amber); }
.approval code { display: block; margin-top: 6px; font: 400 12px var(--mono); color: var(--ice); white-space: pre-wrap; max-height: 120px; overflow: auto; }
#attachments { display: flex; gap: 8px; overflow-x: auto; }
#attachments:not(:empty) { margin-bottom: 8px; }
.att { position: relative; flex: none; width: 64px; height: 64px; border: 1px solid var(--line-hi); border-radius: 10px; overflow: hidden; display: grid; place-items: center; font: 400 11px var(--mono); }
.att img { width: 100%; height: 100%; object-fit: cover; }
.att button { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); font-size: 15px; line-height: 1; }
#ask-form { display: flex; align-items: flex-end; gap: 8px; }
#input {
  flex: 1; min-width: 0; min-height: 46px; max-height: 140px; resize: none;
  font: 500 17px/1.35 var(--display); color: var(--ice); /* 17px: iOS no hace zoom al escribir */
  background: rgba(8, 26, 44, 0.85); border: 1px solid var(--line-hi); border-radius: 23px; padding: 11px 16px;
}
#input::placeholder { color: var(--muted); }
.round { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line); }
.round.main { background: var(--cyan); color: var(--bg); border: 0; box-shadow: var(--glow); }
.round.stop { background: transparent; color: var(--red); border: 1px solid var(--red); box-shadow: 0 0 12px rgba(255, 90, 106, 0.4); }
body.listening #mic { background: var(--red); color: #fff; box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.6); animation: ring 1.2s ease-out infinite; }
@keyframes ring { to { box-shadow: 0 0 0 16px rgba(255, 90, 106, 0); } }

/* ---------- Tarjetas (Día, Correo, Metas, Sistema) ---------- */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; overflow: hidden; animation: rise 0.35s both; transition: border-color 0.4s, box-shadow 0.4s; }
.screen .card:nth-child(2) { animation-delay: 0.05s; } .screen .card:nth-child(3) { animation-delay: 0.1s; }
.card summary, .card-head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; min-height: 30px; }
.card summary::-webkit-details-marker { display: none; }
.card summary::before { content: '▸'; color: var(--cyan); transition: transform 0.25s; font-size: 14px; }
.card[open] summary::before { transform: rotate(90deg); }
.card[open] summary, .card-head { margin-bottom: 8px; }
.card h2 { font: 600 13px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(70, 217, 255, 0.14) 50%, transparent); transform: translateY(-100%); }
.card.refresh::after { animation: refresh 1.1s ease-out; }
@keyframes refresh { 0% { opacity: 1; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(100%); } }
.card.access { border-color: var(--amber); box-shadow: 0 0 22px rgba(255, 181, 71, 0.25); }
.card.access h2::after { content: ' · ACCEDIENDO'; color: var(--amber); font: 600 10px var(--mono); letter-spacing: 0.12em; animation: pulse 0.7s steps(1) infinite; }
.badge { margin-left: auto; font: 600 12px var(--mono); color: var(--bg); background: var(--cyan); padding: 1px 8px; border-radius: 10px; box-shadow: var(--glow); }
.badge.ghost { background: transparent; color: var(--cyan); border: 1px solid var(--line-hi); box-shadow: none; }
.badge.live { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.badge.live.on { color: var(--amber); border-color: var(--amber); animation: pulse 1.2s ease-in-out infinite; }

.list { list-style: none; }
.list li { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid rgba(70, 217, 255, 0.08); }
.list li:last-child { border-bottom: 0; }
.list li.new { animation: rise 0.5s both, newglow 3s ease-out; }
@keyframes newglow { 0%, 30% { background: rgba(70, 217, 255, 0.16); box-shadow: inset 2px 0 0 var(--cyan); } }
.list .k { font: 500 12px var(--mono); color: var(--cyan); white-space: nowrap; }
.list .t { color: var(--ice); overflow: hidden; text-overflow: ellipsis; }
.list .s { grid-column: 2; font-size: 14px; color: var(--muted); }
.list li.empty { display: block; color: var(--muted); font: 400 12px var(--mono); }
.list li.empty::before { content: '◇ '; color: var(--cyan-dim); }
.mail li { cursor: pointer; }
.mail li .s { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mail li.open .s { -webkit-line-clamp: unset; }
.mail li.imp .k::before { content: '★ '; color: var(--amber); }
.mail .act { grid-column: 2; justify-self: start; margin-top: 6px; font: 600 12px var(--display); letter-spacing: 0.1em; color: var(--cyan); border: 1px solid var(--line-hi); border-radius: 14px; padding: 4px 12px; }
.mail li:not(.open) .act { display: none; }

.dayline { position: relative; height: 26px; margin: 4px 6px 8px; border-bottom: 1px solid var(--line); }
.dayline .h { position: absolute; bottom: 0; height: 5px; border-left: 1px solid var(--line-hi); font: 400 9px var(--mono); color: var(--muted); }
.dayline .h span { position: absolute; bottom: 7px; left: -6px; }
.dayline .ev { position: absolute; bottom: 0; height: 10px; background: rgba(70, 217, 255, 0.35); border: 1px solid var(--cyan); }
.dayline .now { position: absolute; bottom: -3px; top: 0; width: 2px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.habits { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 5px; align-items: center; margin-top: 6px; }
.habits .hd { font: 400 11px var(--mono); color: var(--muted); text-align: center; }
.habits .hd.today { color: var(--amber); }
.habits .hl { font-size: 17px; text-align: center; }
.hc { height: 40px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ice); font: 500 12px var(--mono); transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.hc:disabled { opacity: .25; }
.hc.today { border-color: var(--amber); }
.hc.today:not(.ok):not(.no) { animation: hpulse 2s ease-in-out infinite; }
.hc.ok { background: rgba(77, 255, 176, .16); border-color: var(--green); color: var(--green); box-shadow: 0 0 8px #4dffb055; }
.hc.no { background: rgba(255, 90, 106, .12); border-color: var(--red); color: var(--red); }
.hc.pop { animation: hpop .45s ease-out; }
@keyframes hpop { 40% { transform: scale(1.25); } }
@keyframes hpulse { 50% { box-shadow: 0 0 10px #ffb54788; } }
.hread { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font: 400 12px var(--mono); color: var(--muted); }
.hread[hidden] { display: none; }
.hread button { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ice); font: 500 13px var(--mono); padding: 8px 10px; }
.hread button.on { border-color: var(--cyan); color: var(--cyan); }
#hprog { margin-top: 12px; }
#hprog b.done { color: var(--green); }
.note-s { color: var(--muted); font-size: 14px; margin-top: 8px; }

.areas { display: grid; gap: 12px; }
.area .top { display: flex; justify-content: space-between; color: var(--ice); }
.area .top b { font: 500 12px var(--mono); color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); box-shadow: var(--glow); transition: width 1.2s ease; }
.chip { font: 500 11px var(--mono); padding: 0 6px; border: 1px solid currentColor; border-radius: 8px; white-space: nowrap; }
.chip.red { color: var(--red); } .chip.amber { color: var(--amber); } .chip.yellow { color: #ffe066; } .chip.green { color: var(--green); }

.rings, .gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.gauges { grid-template-columns: repeat(3, 1fr); }
.ring { display: grid; justify-items: center; gap: 2px; font: 400 10px var(--mono); color: var(--muted); text-align: center; letter-spacing: 0.06em; }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg); fill: none; }
.ring circle { stroke-width: 4; }
.ring .track { stroke: var(--line); }
.ring .val { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; filter: drop-shadow(0 0 4px var(--cyan)); }
.ring.amber .val { stroke: var(--amber); filter: drop-shadow(0 0 4px var(--amber)); }
.ring.red .val { stroke: var(--red); filter: drop-shadow(0 0 4px var(--red)); }
.ring.green .val { stroke: var(--green); filter: drop-shadow(0 0 4px var(--green)); }
.ring .num { margin-top: -44px; height: 42px; font: 600 16px var(--mono); color: var(--ice); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.stats div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px; }
.stats b { display: block; font: 600 17px var(--mono); color: var(--ice); }
.stats span { font: 400 9px var(--mono); color: var(--muted); letter-spacing: 0.06em; }

.ops { list-style: none; }
.ops li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(70, 217, 255, 0.08); animation: slidein 0.35s both; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }
.ops .ic { width: 12px; height: 12px; border: 2px solid var(--cyan-dim); border-radius: 50%; }
.ops .run .ic { border-color: var(--amber) transparent; animation: spin 0.8s linear infinite; }
.ops .done .ic { background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow); }
.ops .fail .ic { border-color: var(--red); background: var(--red); }
.ops .n { color: var(--ice); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops .n small { display: block; color: var(--muted); font: 400 11px var(--mono); overflow: hidden; text-overflow: ellipsis; }
.ops .d { font: 400 11px var(--mono); color: var(--muted); }
.ops .sep { display: block; font: 500 10px var(--mono); letter-spacing: 0.16em; color: var(--cyan-dim); padding: 10px 2px 4px; border: 0; animation: none; }
.ccs { border-bottom: 1px solid rgba(70, 217, 255, 0.08); padding: 8px 0; }
.ccs summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 8px; cursor: pointer; }
.ccs summary::-webkit-details-marker { display: none; }
.ccs .n { color: var(--ice); }
.ccs .n small { display: block; font: 400 11px var(--mono); color: var(--muted); }
.ccs.run .n::before { content: '● '; color: var(--amber); animation: pulse 1s infinite; }
.ccs .body { padding: 8px 0 4px 8px; border-left: 2px solid var(--cyan-dim); margin-top: 6px; font-size: 14px; }
.ccs h4 { font: 500 10px var(--mono); letter-spacing: 0.14em; color: var(--cyan-dim); margin-top: 6px; }
.ccs .d { font: 400 11px var(--mono); color: var(--muted); }
.quiet { color: var(--muted); font: 400 12px var(--mono); }

/* ---------- Barra de pestañas ---------- */
nav.tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px);
  border-top: 1px solid var(--line); background: rgba(2, 6, 12, 0.96);
}
nav.tabs button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; min-height: 52px; font: 600 10px var(--display); letter-spacing: 0.12em; color: var(--muted); }
nav.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
nav.tabs svg .fill { fill: currentColor; }
nav.tabs button[aria-current="page"] { color: var(--cyan); text-shadow: var(--glow); }
nav.tabs button[aria-current="page"] svg { filter: drop-shadow(0 0 5px rgba(70, 217, 255, 0.7)); }
nav.tabs button[aria-current="page"]::before { content: ''; position: absolute; top: -5px; left: 30%; right: 30%; height: 2px; background: var(--cyan); box-shadow: var(--glow); border-radius: 2px; }
nav.tabs button.access { color: var(--amber); animation: pulse 0.8s ease-in-out infinite; }
.dot { position: absolute; top: 4px; left: 56%; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--cyan); color: var(--bg); font: 600 10px/17px var(--mono); letter-spacing: 0; }
.dot.warn { background: var(--amber); }
.dot.live { background: var(--amber); width: 9px; min-width: 9px; height: 9px; padding: 0; animation: pulse 1s infinite; }

/* ---------- Hoja de ajustes ---------- */
#sheet { position: fixed; inset: 0; z-index: 20; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 90dvh; overflow-y: auto;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(180deg, #0a1c2e, var(--bg)); border-top: 1px solid var(--line-hi); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(70, 217, 255, 0.15); animation: up 0.28s ease-out;
  display: flex; flex-direction: column; gap: 12px;
}
@keyframes up { from { transform: translateY(100%); } }
.grab { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-hi); }
.sheet h2 { font: 700 15px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ice); }
.modes { display: grid; gap: 8px; }
.modes button { text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; transition: all 0.2s; }
.modes b { font: 700 15px var(--display); letter-spacing: 0.14em; color: var(--ice); }
.modes span { font-size: 14px; color: var(--muted); }
.modes button[aria-checked="true"] { border-color: var(--cyan); background: rgba(70, 217, 255, 0.1); box-shadow: var(--glow); }
.modes button[aria-checked="true"] b::before { content: '● '; color: var(--cyan); }
.quota { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.quota svg { width: 52px; height: 52px; transform: rotate(-90deg); fill: none; }
.quota circle { stroke-width: 4; }
.quota .track { stroke: var(--line); }
.quota .val { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset 1s; }
.quota.low .val { stroke: var(--amber); }
.quota b { display: block; font: 600 18px var(--mono); color: var(--ice); }
.quota span { font-size: 14px; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); }
.wide { min-height: 48px; border-radius: 12px; border: 1px solid var(--cyan); color: var(--cyan); font-weight: 700; letter-spacing: 0.14em; }
.wide.ghost { border-color: var(--line); color: var(--muted); }

#toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 30; transform: translate(-50%, -20px);
  max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 18px; border: 1px solid var(--line-hi);
  background: rgba(6, 18, 32, 0.95); color: var(--ice); font-size: 15px; box-shadow: var(--glow);
  opacity: 0; pointer-events: none; transition: all 0.25s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Acceso ---------- */
#login { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, var(--bg2), var(--bg) 70%); padding: 24px; }
#login-form { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.brand-mark.big { width: 96px; height: 96px; margin-bottom: 6px; }
#login-form h2 { font-size: 24px; letter-spacing: 0.3em; color: var(--ice); text-shadow: var(--glow); }
#login-form p { color: var(--muted); }
#login-form input { width: 100%; min-height: 48px; font: 500 17px var(--display); color: var(--ice); background: rgba(8, 26, 44, 0.8); border: 1px solid var(--line-hi); border-radius: 12px; padding: 0 14px; text-align: center; }
#login-form button { width: 100%; min-height: 48px; border-radius: 12px; background: var(--cyan); color: var(--bg); font-weight: 700; letter-spacing: 0.2em; box-shadow: var(--glow); }
#login-error { color: var(--red) !important; min-height: 1.4em; }

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