/* =====================================================================
   Dojo de Ventas — sistema de diseño (móvil primero)
   Usa SIEMPRE estos tokens y componentes; cada vista solo añade lo suyo
   en css/views/<vista>.css con clases prefijadas por la vista.
   ===================================================================== */

:root {
  --bg: #0d0e12;
  --bg-elev: #14161c;
  --surface: #191b22;
  --surface-2: #20232c;
  --surface-3: #2a2e39;
  --border: #2b2f3a;
  --border-strong: #3a3f4d;
  --text: #eef0f4;
  --text-2: #b4bac6;
  --text-3: #8a91a1;
  --primary: #ff5a3c;
  --primary-press: #e8442a;
  --primary-soft: rgba(255, 90, 60, 0.14);
  /* texto sobre fondos rellenos de --primary / --success / --gold (contraste AA ≥ 4,5:1) */
  --primary-text: #1a0a05;
  --gold: #f5b83d;
  --gold-soft: rgba(245, 184, 61, 0.14);
  --gold-text: #2a1a00;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.13);
  --success-text: #06281a;
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.13);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  --appbar-h: 56px;
  --max-w: 760px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

:root[data-tema="claro"] {
  --bg: #f6f3ee;
  --bg-elev: #fbf9f6;
  --surface: #ffffff;
  --surface-2: #f3f0ea;
  --surface-3: #e9e4dc;
  --border: #e3ddd3;
  --border-strong: #cfc7ba;
  --text: #16171b;
  --text-2: #4a4f5c;
  --text-3: #5c6170;
  --primary: #b8321a;
  --primary-press: #9f2a15;
  --primary-soft: rgba(184, 50, 26, 0.1);
  --primary-text: #ffffff;
  --gold: #825a00;
  --gold-soft: rgba(130, 90, 0, 0.12);
  --gold-text: #ffffff;
  --success: #0a7148;
  --success-soft: rgba(10, 113, 72, 0.1);
  --success-text: #ffffff;
  --warning: #8d5300;
  --warning-soft: rgba(141, 83, 0, 0.1);
  --danger: #b92b2b;
  --danger-soft: rgba(185, 43, 43, 0.09);
  --info: #1d4ed8;
  --info-soft: rgba(29, 78, 216, 0.09);
  --shadow: 0 10px 30px rgba(40, 30, 10, 0.12);
  --shadow-sm: 0 2px 10px rgba(40, 30, 10, 0.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
/* PWA de iOS: la meta black-translucent pinta siempre la hora y la batería en blanco; en el tema claro se oscurece esa franja. */
:root.ios-app[data-tema="claro"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-top); z-index: 1000;
  background: #16171b; pointer-events: none;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
/* reciben el foco por código (cambio de pantalla, diálogos) pero no son controles */
.appbar-titulo:focus, [data-titulo-vista]:focus, .hoja:focus, .celebracion-caja:focus { outline: none; }
[hidden] { display: none !important; }
.sr-solo { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.t-display { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.t-h1 { font-size: 24px; font-weight: 800; }
.t-h2 { font-size: 19px; font-weight: 750; }
.t-h3 { font-size: 16px; font-weight: 700; }
.t-body { font-size: 15px; }
.t-small { font-size: 13px; }
.t-tiny { font-size: 11.5px; letter-spacing: 0.02em; }
.t-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.t-muted { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-primary { color: var(--primary); }
.t-gold { color: var(--gold); }
.t-success { color: var(--success); }
.t-danger { color: var(--danger); }
.t-center { text-align: center; }
.t-num { font-variant-numeric: tabular-nums; }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- estructura de la app ---------- */
#app { min-height: 100%; }
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.appbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--appbar-h) + var(--safe-top)); padding: var(--safe-top) var(--sp-2) 0;
  display: flex; align-items: center; gap: var(--sp-2);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.appbar.con-borde { border-bottom-color: var(--border); }
.appbar-titulo { flex: 1; font-family: var(--font-display); font-weight: 750; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--sp-2); }
.appbar-acciones { display: flex; gap: var(--sp-1); }
.vista {
  flex: 1; width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-6));
  animation: entrar 0.28s var(--ease);
}
.shell.sin-tabbar .vista { padding-bottom: calc(var(--safe-bottom) + var(--sp-6)); }
.shell.pantalla-completa .appbar, .shell.pantalla-completa .tabbar { display: none; }
.shell.pantalla-completa .vista { max-width: none; padding: 0; animation: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--border);
}
.shell.sin-tabbar .tabbar { display: none; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: var(--text-3); font-size: 11px; font-weight: 600; cursor: pointer;
  transition: color 0.15s; position: relative;
}
.tab svg { width: 24px; height: 24px; }
.tab.activo { color: var(--primary); }
.tab.activo::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }

@media (min-width: 900px) {
  .shell { padding-left: 232px; }
  .tabbar {
    top: 0; right: auto; width: 232px; height: auto; flex-direction: column; justify-content: flex-start;
    padding: calc(var(--sp-6) + var(--safe-top)) var(--sp-3); gap: var(--sp-1); border-top: 0; border-right: 1px solid var(--border);
  }
  .tabbar::before { content: attr(data-marca); font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--text); padding: 0 var(--sp-3) var(--sp-6); }
  .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: var(--sp-3); padding: 11px var(--sp-3); border-radius: var(--radius-sm); font-size: 15px; }
  .tab:hover { background: var(--surface); color: var(--text); }
  .tab.activo { background: var(--primary-soft); }
  .tab.activo::before { display: none; }
  .shell.sin-tabbar { padding-left: 0; }
  .vista { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
}

/* ---------- botones ---------- */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  font-weight: 700; font-size: 15.5px; cursor: pointer; user-select: none; text-align: center;
  transition: background 0.15s, transform 0.08s, opacity 0.15s, border-color 0.15s;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn-primario { background: var(--primary); color: var(--primary-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-primario:hover { background: var(--primary-press); }
.btn-secundario { background: var(--surface-2); border-color: var(--border); }
.btn-secundario:hover { border-color: var(--border-strong); }
.btn-fantasma { background: transparent; color: var(--text-2); }
.btn-fantasma:hover { background: var(--surface); color: var(--text); }
.btn-peligro { background: var(--danger-soft); color: var(--danger); }
.btn-exito { background: var(--success); color: var(--success-text); }
.btn-oro { background: var(--gold); color: var(--gold-text); }
.btn-bloque { display: flex; width: 100%; }
.btn-grande { min-height: 56px; font-size: 17px; border-radius: var(--radius); }
.btn-peq { min-height: 44px; padding: 0 var(--sp-3); font-size: 14px; }
.btn-icono {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-2); cursor: pointer;
}
.btn-icono:hover { background: var(--surface); color: var(--text); }
.btn-icono svg { width: 22px; height: 22px; }
.btn .spinner { width: 18px; height: 18px; border-width: 2.5px; }

/* ---------- tarjetas y listas ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--sp-3); }
.rejilla > .card, .opciones > .card { margin-top: 0; }
.card-pulsable { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.card-pulsable:hover { border-color: var(--border-strong); }
.card-pulsable:active { transform: scale(0.99); }
.card-destacada { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.card-oro { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); }
.card-titulo { font-weight: 750; font-size: 16px; margin-bottom: var(--sp-1); }

.seccion { margin-top: var(--sp-6); }
.seccion:first-child { margin-top: 0; }
.seccion-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.seccion-titulo { font-family: var(--font-display); font-weight: 750; font-size: 18px; }

.lista { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4); min-height: 56px;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); width: 100%; text-align: left; cursor: pointer; color: var(--text);
}
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--surface-2); }
.item-icono { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: 20px; }
.item-icono svg { width: 22px; height: 22px; }
.item-cuerpo { flex: 1; min-width: 0; }
.item-titulo { font-weight: 650; font-size: 15.5px; }
.item-sub { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.item-fin { color: var(--text-3); display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.item-fin svg { width: 18px; height: 18px; }

.rejilla { display: grid; gap: var(--sp-3); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .rejilla-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

.fila { display: flex; align-items: center; gap: var(--sp-3); }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pila { display: flex; flex-direction: column; gap: var(--sp-3); }
.pila-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.crece { flex: 1; min-width: 0; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.separador { height: 1px; background: var(--border); margin: var(--sp-4) 0; border: 0; }

/* ---------- estadísticas ---------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.stat-valor { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-etiqueta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* ---------- chips, badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: 2px var(--sp-4); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.chip.activo, .chip[aria-pressed="true"] { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--primary); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 750; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge-primario { background: var(--primary-soft); color: var(--primary); }
.badge-exito { background: var(--success-soft); color: var(--success); }
.badge-aviso { background: var(--warning-soft); color: var(--warning); }
.badge-peligro { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-oro { background: var(--gold-soft); color: var(--gold); }
.badge-pro { background: linear-gradient(135deg, #f5b83d, #ff8a3d); color: #2a1200; }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo + .campo { margin-top: var(--sp-4); }
.campo-etiqueta { font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.campo-ayuda { font-size: 12.5px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 16px; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); background: var(--surface); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); margin-top: 1px; flex-shrink: 0; }
.rango { width: 100%; accent-color: var(--primary); }

/* control segmentado */
.segmentos { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.segmento { flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 650; font-size: 14px; cursor: pointer; }
.segmento.activo { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* opciones grandes seleccionables (onboarding, configuración de llamada) */
.opciones { display: grid; gap: var(--sp-2); }
.opciones-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcion {
  display: flex; align-items: center; gap: var(--sp-3); padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--border); cursor: pointer; text-align: left; color: var(--text); width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.opcion-vertical { flex-direction: column; align-items: flex-start; gap: 6px; }
.opcion:hover { border-color: var(--border-strong); }
.opcion.activa, .opcion[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); }
.opcion-icono { font-size: 26px; line-height: 1; }
.opcion-titulo { font-weight: 700; font-size: 15px; }
.opcion-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }

/* ---------- progreso ---------- */
.barra { height: 8px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.6s var(--ease); }
.barra-relleno.exito { background: var(--success); }
.barra-relleno.oro { background: linear-gradient(90deg, var(--gold), #ff8a3d); }
.anillo { --valor: 0; --color: var(--primary); --tam: 96px; width: var(--tam); height: var(--tam); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--color) calc(var(--valor) * 1%), var(--surface-3) 0); position: relative; }
.anillo::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.anillo > * { position: relative; }

/* cinturón (identidad de nivel) */
.cinturon { --color-cinturon: #f2f2f2; display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 750; }
.cinturon-tira { width: 44px; height: 12px; border-radius: 3px; background: var(--color-cinturon); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08); position: relative; }
.cinturon-tira::after { content: ""; position: absolute; right: 8px; top: -2px; width: 6px; height: 16px; border-radius: 2px; background: color-mix(in srgb, var(--color-cinturon) 80%, #000); }

/* ---------- avatar ---------- */
.avatar { --tam: 44px; width: var(--tam); height: var(--tam); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; color: #fff; font-size: calc(var(--tam) * 0.4); background: linear-gradient(135deg, #ff7a45, #c2362a); }

/* ---------- burbujas de chat ---------- */
.chat { display: flex; flex-direction: column; gap: var(--sp-2); }
.burbuja { max-width: 84%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; font-size: 15px; word-wrap: break-word; animation: entrar 0.2s var(--ease); }
.burbuja-yo { align-self: flex-end; background: var(--primary); color: var(--primary-text); border-bottom-right-radius: 6px; }
.burbuja-ella { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.burbuja-sistema { align-self: center; background: transparent; color: var(--text-3); font-size: 13px; text-align: center; padding: 4px 10px; }
.burbuja-pista { align-self: center; background: var(--success-soft); color: var(--success); border: 1px dashed color-mix(in srgb, var(--success) 60%, transparent); font-size: 14px; }
.md p { margin: 0 0 0.6em; } .md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 0.2em 0 0.7em; padding-left: 1.3em; }
.md li { margin-bottom: 0.25em; }
.md h2, .md h3 { margin: 1em 0 0.45em; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; }
.md blockquote { margin: 0 0 0.7em; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--text-2); }
.md code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.md strong { color: var(--text); }

/* entrada de chat fija abajo */
.composer { position: sticky; bottom: 0; display: flex; gap: var(--sp-2); align-items: flex-end; padding: var(--sp-3) 0 calc(var(--sp-3) + var(--safe-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.composer .textarea { min-height: 48px; max-height: 140px; border-radius: 24px; padding: 12px 16px; resize: none; }

/* ---------- estados ---------- */
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--primary); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.cargando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: 64px var(--sp-4); color: var(--text-3); text-align: center; }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: 48px var(--sp-4); color: var(--text-2); }
.vacio-icono { font-size: 44px; margin-bottom: var(--sp-2); }
.esqueleto { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: brillo 1.4s ease infinite; border-radius: var(--radius-sm); min-height: 18px; }
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.aviso { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); font-size: 14px; }
.aviso svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--info); margin-top: 1px; }
.aviso-aviso { background: var(--warning-soft); } .aviso-aviso svg { color: var(--warning); }
.aviso-peligro { background: var(--danger-soft); } .aviso-peligro svg { color: var(--danger); }
.aviso-exito { background: var(--success-soft); } .aviso-exito svg { color: var(--success); }

/* ---------- hoja inferior y modal ---------- */
.capa { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; animation: fundido 0.2s ease; }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.hoja {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 1px solid var(--border); border-bottom: 0;
  padding: var(--sp-2) var(--sp-5) calc(var(--sp-6) + var(--safe-bottom)); box-shadow: var(--shadow);
  animation: subir 0.3s var(--ease);
}
.hoja::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 4px auto var(--sp-4); }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 640px) {
  .capa { align-items: center; }
  .hoja { border-radius: var(--radius-lg); border-bottom: 1px solid var(--border); animation: aparecerModal 0.22s var(--ease); }
  @keyframes aparecerModal { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
}
.hoja-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: var(--sp-2); }
.hoja-acciones { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 0; right: 0; top: calc(var(--safe-top) + 10px); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none; padding: 0 var(--sp-4); }
.toast { pointer-events: auto; max-width: 480px; width: fit-content; display: flex; gap: var(--sp-2); align-items: center; padding: 11px 16px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text); box-shadow: var(--shadow); font-size: 14.5px; font-weight: 600; animation: bajar 0.3s var(--ease); }
.toast-error { background: #4a1d1f; color: #ffd0d0; }
.toast-exito { background: #0f3b2b; color: #b9f5da; }
:root[data-tema="claro"] .toast-error { background: #fde2e2; color: #8a1c1c; }
:root[data-tema="claro"] .toast-exito { background: #dcf7ea; color: #0c5b3a; }
@keyframes bajar { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* aviso de versión nueva (main.js): encima de las pestañas; arriba en pantalla completa para no tapar la llamada */
.aviso-version {
  position: fixed; left: 0; right: 0; margin: 0 auto; z-index: 90;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  width: min(480px, calc(100% - 2 * var(--sp-4)));
  display: flex; align-items: center; gap: var(--sp-2); padding: 4px 4px 4px var(--sp-4);
  border-radius: var(--radius); background: var(--surface-3); color: var(--text); box-shadow: var(--shadow);
  font-size: 14.5px; font-weight: 600;
}
/* la región viva se inserta vacía (para que se anuncie al rellenarla): invisible pero en el árbol de accesibilidad */
.aviso-version:empty { opacity: 0; pointer-events: none; }
.aviso-version:not(:empty) { animation: fundido 0.25s ease; }
.shell.sin-tabbar .aviso-version { bottom: calc(var(--safe-bottom) + var(--sp-4)); }
.shell.pantalla-completa .aviso-version { top: calc(var(--safe-top) + var(--sp-2)); bottom: auto; }
@media (min-width: 900px) {
  .aviso-version { bottom: calc(var(--safe-bottom) + var(--sp-6)); }
  .shell:not(.sin-tabbar):not(.pantalla-completa) .aviso-version { left: 232px; }
}

/* ---------- celebración ---------- */
.celebracion { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(0,0,0,0.7); animation: fundido 0.25s ease; padding: var(--sp-6); }
.celebracion-caja { text-align: center; max-width: 360px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); box-shadow: var(--shadow); animation: rebote 0.5s var(--ease); }
.celebracion-icono { font-size: 64px; line-height: 1; margin-bottom: var(--sp-3); }
@keyframes rebote { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.confeti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 301; pointer-events: none; animation: caer linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}