/* La caja de apps de Soyla (caja.go): la sirve la Home al Dashboard, a Jornada y a sí misma, y es la misma en
   todas; en el teléfono es una hoja desde abajo (bocetos en app/soyla/design/2026-10-16-caja-de-apps).
   El botón de los nueve puntos es de cada app, en su cabecera, como su botón de buscar.
   Los valores son los de la línea gráfica (brand/linea-grafica/linea.css), con nombres propios para no chocar con
   los de la app que la carga; caja_test.go los compara con la línea. */

.soyla-caja, .soyla-caja-velo {
  --sc-superficie: #FFFFFF;
  --sc-texto: #002020;
  --sc-suave: #5A6E6E;
  --sc-icono: #006060;
  --sc-encima: #F2F7DF;
  --sc-asa: #B9BBBD;
  --sc-radio: 28px;
  --sc-letra: 'Inter', 'Inter Variable', Arial, sans-serif;
}

/* La caja flota bajo los nueve puntos: blanca, radio 28 y con sombra, la única de la línea, para que se despegue
   de las tarjetas blancas (bocetos, 16-oct). caja.js la pone en su sitio. */
.soyla-caja {
  position: fixed; z-index: 1000; box-sizing: border-box; width: 360px; max-width: calc(100vw - 32px);
  padding: 24px 20px 20px; border-radius: var(--sc-radio); background: var(--sc-superficie); color: var(--sc-texto);
  box-shadow: 0 10px 28px rgba(0, 32, 32, .28); font: 400 16px/1.4 var(--sc-letra); text-align: left;
}
.soyla-caja[hidden] { display: none; }
.soyla-caja__cab { position: relative; display: flex; flex-direction: column; margin: 0 8px 12px; }
.soyla-caja__titulo { margin: 0; font-size: 18px; font-weight: 400; line-height: 24px; color: var(--sc-texto); }
.soyla-caja__quien, .soyla-caja__asa, .soyla-caja__cerrar { display: none; }
.soyla-caja__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px; margin: 0; padding: 0; list-style: none; }
.soyla-caja__app {
  display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 112px;
  padding: 8px 4px 10px; border-radius: 16px; color: var(--sc-texto); text-decoration: none; font-weight: 400;
}
.soyla-caja__app:hover, .soyla-caja__app:focus-visible { background: var(--sc-encima); color: var(--sc-texto); text-decoration: none; }
.soyla-caja__app:focus-visible { outline: 2px solid var(--sc-icono); outline-offset: -2px; }
.soyla-caja__app img, .soyla-caja__inicial { display: block; width: 56px; height: 56px; max-width: none; }
.soyla-caja__inicial {
  display: flex; align-items: center; justify-content: center; border-radius: 16px;
  background: var(--sc-encima); color: var(--sc-icono); font-size: 28px;
}
.soyla-caja__nombre { margin-top: 10px; font-size: 14px; line-height: 18px; text-align: center; }
.soyla-caja__aqui { font-size: 12px; line-height: 16px; color: var(--sc-suave); text-align: center; }
.soyla-caja__nota { margin: 4px 8px 8px; font-size: 14px; line-height: 20px; color: var(--sc-suave); }

/* El velo, solo en el teléfono. */
.soyla-caja-velo { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0, 32, 32, .45); }

/* En el teléfono, una hoja desde abajo: el asa, el título centrado, quién eres debajo y la ✕ a la derecha
   (las reglas de las hojas, 14-oct). */
@media (max-width: 760px) {
  .soyla-caja {
    top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--sc-radio) var(--sc-radio) 0 0;
  }
  .soyla-caja-velo:not([hidden]) { display: block; }
  .soyla-caja__asa { display: block; width: 32px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--sc-asa); }
  .soyla-caja__cab { align-items: center; margin: 0 0 16px; min-height: 44px; justify-content: center; text-align: center; }
  .soyla-caja__quien { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--sc-suave); }
  .soyla-caja__cerrar {
    display: flex; position: absolute; top: -2px; right: -10px; width: 44px; height: 44px; align-items: center;
    justify-content: center; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--sc-icono); cursor: pointer;
  }
  .soyla-caja__cerrar:focus-visible { outline: 2px solid var(--sc-icono); }
  .soyla-caja__cerrar svg { width: 28px; height: 28px; fill: currentColor; }
}