/* ─────────────────────────────────────────────────────────────────────
   ui.css — Lo que se ve de la capa de interacción (ui.js).

   Todo el color sale de variables del tema. Este archivo no decide cómo es
   ATH: decide cómo se comportan la hoja, los avisos y el foco. Cambia el
   tema y esto le sigue sin tocar una línea.

   Nota sobre las transiciones: aquí solo hay las de entrada/salida simples.
   Todo lo que sigue al dedo lo mueve ui.js con muelles, porque una transición
   CSS no sabe a qué velocidad venía el gesto y al interrumpirla se ve el corte.
   ───────────────────────────────────────────────────────────────────── */

/* ── La hoja ───────────────────────────────────────────────────────── */

.ss-velo{
  position:fixed; inset:0; z-index:9600;
  background:rgba(0,0,0,.62);
  opacity:0;                      /* lo pinta ui.js, en proporción al arrastre */
  display:flex; align-items:flex-end; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

.ss-hoja{
  width:100%; max-width:560px;
  max-height:88vh;
  background:var(--surface,#0E0F12);
  border:1px solid var(--sep,#1C1E22);
  border-bottom:none;
  border-radius:18px 18px 0 0;
  display:flex; flex-direction:column;
  /* Sin transition: la mueve el muelle. Una transición aquí pelearía con él. */
  will-change:transform;
  box-shadow:0 -18px 60px rgba(0,0,0,.6);
  padding-bottom:env(safe-area-inset-bottom,0);
}
/* En pantallas anchas la hoja se centra y despega del borde: ahí ya no es un
   gesto de pulgar, es un diálogo, y flotando se lee mejor. */
@media (min-width:720px){
  .ss-velo{align-items:center}
  .ss-hoja{border-radius:18px; border-bottom:1px solid var(--sep,#1C1E22); max-height:80vh}
}

/* El asa: además de decorar, es la zona donde arrastrar siempre funciona,
   incluso si el contenido de dentro está desplazado. */
.ss-hoja-asa{
  flex:0 0 auto; height:22px; display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
}
.ss-hoja-asa::before{
  content:''; width:38px; height:4px; border-radius:99px;
  background:var(--t3,#5A606B); opacity:.5;
}
.ss-hoja-asa:active{cursor:grabbing}

.ss-hoja-cab{
  flex:0 0 auto; padding:2px 18px 12px;
  font-size:15px; font-weight:700; color:var(--t,#fff);
}
.ss-hoja-cuerpo{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 18px 18px;
  -webkit-overflow-scrolling:touch;
}

/* ── Los avisos ────────────────────────────────────────────────────── */

.ss-avisos{
  position:fixed; z-index:9700;
  left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0));
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
@media (min-width:720px){
  .ss-avisos{left:auto; right:20px; bottom:20px; align-items:flex-end}
}

.ss-aviso{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:400px;
  padding:12px 14px;
  background:var(--surface,#0E0F12);
  border:1px solid var(--sep,#1C1E22);
  border-radius:12px;
  color:var(--t,#fff); font-size:13.5px; line-height:1.45;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  /* Entra desde abajo y con un punto de escala: el ojo lo lee como que "llega"
     en vez de aparecer, y eso hace que se note sin gritar. */
  opacity:0; transform:translate3d(0,14px,0) scale(.97);
  transition:opacity 200ms cubic-bezier(.2,0,.2,1), transform 260ms cubic-bezier(.23,1,.32,1);
  touch-action:pan-y;
}
.ss-aviso.dentro{opacity:1; transform:none}
.ss-aviso span{flex:1 1 auto; min-width:0}
.ss-aviso button{
  flex:0 0 auto; background:none; border:none; cursor:pointer;
  color:var(--accent,#22E0A1); font:inherit; font-weight:700;
  padding:4px 2px;
}
/* Una barra de color a la izquierda en vez de teñir el fondo: el aviso se
   distingue de un vistazo y el texto conserva todo su contraste. */
.ss-aviso-ok{border-left:3px solid var(--accent,#22E0A1)}
.ss-aviso-mal{border-left:3px solid var(--r,#ea3943)}

/* ── Foco visible ──────────────────────────────────────────────────── */
/* :focus-visible y no :focus — el anillo aparece para quien navega con teclado
   y no molesta a quien pulsa con el ratón. */
.ss-hoja :focus-visible,
.ss-aviso :focus-visible,
[data-press]:focus-visible{
  outline:2px solid var(--accent,#22E0A1);
  outline-offset:2px;
  border-radius:6px;
}

/* ── Pulsación ─────────────────────────────────────────────────────── */
[data-press]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;   /* quita el retraso de 300ms del doble toque */
  will-change:transform;
}

/* ── Sin movimiento ────────────────────────────────────────────────── */
/* ui.js ya aplica los estados finales de golpe; esto apaga lo que quede en CSS
   para que no se cuele ninguna transición por detrás. */
@media (prefers-reduced-motion:reduce){
  .ss-aviso{transition:none; opacity:1; transform:none}
  .ss-hoja{box-shadow:none}
}