/* Capas que se montan encima de la vista: bottom sheet, confirmaciones,
   toasts y el selector de iconos que vive dentro de un sheet. */

/* --------------------------------------------------------- bottom sheet --- */
.sheet-fondo{
  position:fixed; inset:0; z-index:40;
  background:rgb(0 0 0 / 0.35);
  animation:aparecer var(--transicion);
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-height:88dvh; overflow-y:auto;
  padding:8px var(--sep) calc(env(safe-area-inset-bottom) + var(--sep));
  background:var(--bg); border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  box-shadow:0 -1px 14px rgb(0 0 0 / 0.10);
  animation:subir 220ms cubic-bezier(0.22,0.9,0.3,1);
}
.sheet-agarre{
  width:38px; height:4px; border-radius:999px;
  background:var(--line); margin:6px auto 14px;
}
.sheet h2{ font-size:17px; font-weight:620; letter-spacing:-0.02em; margin-bottom:14px; }
@keyframes subir{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }

/* --------------------------------------------------------------- toasts --- */
.toasts{
  position:fixed; left:0; right:0; z-index:60;
  bottom:calc(var(--alto-tab) + env(safe-area-inset-bottom) + 18px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-inline:var(--sep); pointer-events:none;
}
.toast{
  max-width:100%;
  padding:10px 15px; border-radius:999px;
  background:var(--fg); color:var(--bg);
  font-size:13.5px; font-weight:520;
  animation:aparecer var(--transicion);
}
.toast-error{ background:var(--neg); color:#fff; }

/* --------------------------------------------------- rejilla de iconos --- */
.rejilla-iconos{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr));
  gap:6px;
  max-height:190px; overflow-y:auto;
  padding:8px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2);
}
.icono-opcion{
  display:grid; place-items:center;
  height:var(--toque);
  border:1px solid transparent; border-radius:10px;
  background:none; color:var(--fg-2); cursor:pointer;
  transition:background var(--transicion), color var(--transicion);
}
.icono-opcion.elegido{ background:var(--fg); color:var(--bg); border-color:var(--fg); }