/* Radar de Cerámica — tokens de la app.
 *
 * Mismo lenguaje que la landing (template Velorah): oscuro pero no negro
 * puro, Instrument Serif para títulos y cifras grandes, Inter para el resto,
 * bordes de 1 px, píldoras. Los nombres viejos (--bg, --acc, --line…) se
 * mapean al final para que las reglas que ya existen en cada página queden
 * repintadas sin reescribirlas.
 */

:root{
  /* superficies: el lienzo es un poco más claro que el negro de la landing
     porque aquí no hay video que lo ilumine */
  --lienzo:#0b0b0b;
  --tarjeta:#141414;
  --hundido:#1c1c1c;
  --borde:#2e2e2e;
  --borde-fuerte:rgba(255,255,255,.3);

  /* tinta */
  --tinta:#fff;
  --tinta-suave:#a5a5ac;
  --tinta-apagada:#6b6b73;

  /* acción principal: blanco sobre negro, como el botón primario del template */
  --primario:#fff;
  --primario-ink:#0a0a0a;

  /* semánticos: significan alcanza / faltan / preguntar, y nada más */
  --ok:#22c55e;
  --warn:#f5a623;
  --mal:#ef4444;
  --no:#6b6b73;
  --tinte-ok:rgba(34,197,94,.16);
  --tinte-warn:rgba(245,166,35,.18);
  --tinte-mal:rgba(239,68,68,.16);

  --wa:#25D366;
  --wa-ink:#08331d;

  --velo:rgba(0,0,0,.6);

  /* tipografía */
  --font-display:'Instrument Serif',Georgia,serif;
  --font-ui:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,Menlo,Consolas,monospace;
  --track-titular:-.02em;
  --track-etiqueta:.08em;

  /* forma */
  --grosor-borde:1px;
  --grosor-borde-fino:1px;
  --r-etiqueta:6px;
  --r-mini:10px;
  --r-control:9999px;
  --r-campo:14px;
  --r-panel:20px;
  --r-tarjeta:16px;
  --r-pildora:9999px;

  --sombra-flota:0 8px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);

  /* --- compatibilidad con los nombres que ya usan las páginas --- */
  --bg:var(--lienzo);
  --card:var(--tarjeta);
  --card2:var(--hundido);
  --line:var(--borde);
  --linea:var(--borde);
  --linea-sutil:var(--borde);
  --tx:var(--tinta);
  --tx2:var(--tinta-suave);
  --acc:var(--primario);
  --sobre-acc:var(--primario-ink);
  --superficie-card:var(--tarjeta);
  --superficie-hundida:var(--hundido);
  --acento:var(--primario);
  --acento-ink:var(--primario-ink);
}

/* Nada ensancha la página más que la pantalla: los inputs tienen un ancho
   intrínseco (20 caracteres) que en un grid de "1fr" o un flex empuja todo
   hacia la derecha en celular. Se les quita, y las columnas nacen en cero. */
*{min-width:0;grid-auto-columns:minmax(0,1fr)}
input,select,textarea,button{max-width:100%}
img,video,svg,canvas{max-width:100%}
html,body{overflow-x:clip}

body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
}
*{touch-action:manipulation}
button,a{-webkit-tap-highlight-color:rgba(255,255,255,.08)}

/* Foco solo con teclado, por fuera, en blanco: se ve sobre cualquier superficie. */
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
input:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}

/* ── Barra inferior: los tres trabajos, al alcance del pulgar ── */
.nav-app{position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(11,11,11,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--borde);display:flex;gap:6px}
.nav-app a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;
  border-radius:var(--r-pildora);color:var(--tinta-suave);font-size:13px;font-weight:500;
  text-decoration:none;transition:color .15s,background .15s}
.nav-app a svg{width:18px;height:18px;flex:none}
.nav-app a[aria-current="page"]{background:var(--primario);color:var(--primario-ink);font-weight:600}
.nav-app a .cuenta{background:rgba(0,0,0,.18);border-radius:999px;min-width:20px;height:20px;padding:0 6px;
  font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.nav-app a:not([aria-current="page"]) .cuenta{background:var(--hundido);color:var(--tinta)}
body.con-nav{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* Menú "más" de la cabecera: lo que no cabe en tres pestañas */
.menu-mas{position:relative}
.menu-mas>button{width:40px;height:40px;border-radius:var(--r-pildora);border:1px solid var(--borde);
  background:var(--tarjeta);color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.menu-mas>button svg{width:18px;height:18px}
.menu-mas ul{position:absolute;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;min-width:200px;
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r-campo);
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu-mas ul[hidden]{display:none}
.menu-mas li a,.menu-mas li button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;
  color:var(--tinta);font:inherit;font-size:14px;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none}
.menu-mas li a:hover,.menu-mas li button:hover{background:var(--hundido)}
.menu-mas li a svg,.menu-mas li button svg{width:16px;height:16px;color:var(--tinta-suave)}
.menu-mas li .punto{margin-left:auto;background:var(--primario);color:var(--primario-ink);border-radius:999px;
  min-width:20px;height:20px;padding:0 6px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* pedidos nuevos: un punto sobre el botón "más", sin abrirlo */
html[data-pedidos-nuevos] .menu-mas>button::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;
  border-radius:50%;background:var(--ok);border:2px solid var(--tarjeta)}
.menu-mas>button{position:relative}

/* Sin sesión no se escribe: fuera los botones de agregar a la lista. */
body.sin-sesion .agregar,body.sin-sesion .mas,body.sin-sesion #navLista,body.sin-sesion #navListaArriba{display:none}

/* El orbe del asistente no se monta sobre la barra inferior en celular. */
@media(max-width:767px){body.con-nav .sa-raiz{bottom:calc(84px + env(safe-area-inset-bottom))!important}}