/* ==========================================================================
   34 · EL PANEL COMO APP DEL CELULAR
   ==========================================================================
   Tres cosas: el diálogo «El panel en tu celular», el resumen de una semana
   que abre la notificación del lunes, y lo que cambia cuando el panel corre
   instalado —sin barra del navegador—, que es sobre todo la muesca del iPhone.
   ========================================================================== */

/* --- El diálogo ----------------------------------------------------------- */
/* Las filas de estado son las de «Sonido y avisos» (17-alarma.css); falta el
   tono informativo, que allá no se usa. */
.al-aj__e--info .ico { color: var(--tinta-3); }

.app-botones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.app-nota { margin: .7rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--tinta-3); }

/* Los dos avisos: qué llega, y —activado— su interruptor. El ícono lleva el
   color de lo que avisa: la estrella de Google, la gráfica del Resumen. */
.app-temas { list-style: none; margin: .2rem 0 .8rem; padding: 0; display: grid; gap: .1rem; }
.app-tema {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start;
  gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--linea-sutil);
  transition: opacity var(--d-rapido) var(--ease);
}
.app-tema:first-child { border-top: 0; padding-top: .2rem; }
.app-tema--off .app-tema__i, .app-tema--off .app-tema__t { opacity: .55; }
.app-tema__i {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.1rem; background: var(--crema-2); color: var(--tinta-2);
}
.app-tema__i--resenas { background: #FDF1D6; color: #C98A00; }
.app-tema__i--resenas .ico { fill: currentColor; }
.app-tema__i--semanal { background: #FBE6E2; color: var(--rojo); }
.app-tema__t { display: grid; gap: .15rem; min-width: 0; }
.app-tema__t b { font-size: .92rem; font-weight: 650; line-height: 1.3; }
.app-tema__t > span { font-size: .8rem; line-height: 1.45; color: var(--tinta-3); }
.app-tema .interruptor { margin-top: .35rem; }
.app-tema__probar {
  justify-self: start; display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .25rem; padding: .2rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: #B86400;
}
.app-tema__probar:hover { text-decoration: underline; }
.app-tema__probar:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }
.app-tema__probar[aria-busy="true"] { opacity: .6; }

/* Cómo se ve en el teléfono, antes de activarlo: una notificación dibujada
   con la cara de las de Android e iOS —vidrio claro, esquinas grandes—. */
.app-muestra {
  display: flex; gap: .7rem; align-items: flex-start; margin: .2rem 0 .3rem;
  padding: .75rem .85rem; border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F6EFE6);
  border: 1px solid var(--linea-sutil);
  box-shadow: 0 10px 28px -14px rgba(33, 22, 16, .45), 0 1px 0 rgba(255, 255, 255, .8) inset;
  animation: app-muestra-cae .55s var(--resorte, var(--ease)) both .15s;
}
.app-muestra img { flex: none; border-radius: 9px; }
.app-muestra__c { display: grid; gap: .1rem; min-width: 0; font-size: .82rem; line-height: 1.35; }
.app-muestra__de { font-size: .7rem; color: var(--tinta-3); display: flex; gap: .4rem; }
.app-muestra__de i { font-style: normal; margin-left: auto; }
.app-muestra__c b { font-weight: 650; }
.app-muestra__c > span:last-child {
  color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes app-muestra-cae {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .app-muestra { animation: none; } }

/* Los pasos del iPhone, cada uno con el dibujo que se va a buscar en pantalla:
   «Compartir» escrito no se encuentra; el cuadrado con la flecha, sí. */
.app-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.app-pasos li {
  display: flex; align-items: center; gap: .7rem;
  font-size: .88rem; line-height: 1.45; color: var(--tinta-2);
}
.app-pasos__i {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--crema-2); color: #0A7AFF;          /* el azul de iOS */
}
.app-pasos__i img { width: 26px; height: 26px; border-radius: 7px; }

/* --- El resumen de una semana --------------------------------------------- */
.app-semana { display: grid; gap: 1.1rem; }
.app-semana .tbl-borde { margin: 0; }
/* En la ventana siempre dos por fila: cuatro no caben en 580 px con cifras
   de millones, y tres con una suelta debajo se lee como un olvido. */
.app-kpis { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.app-kpis .tbl-cifra__n { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }

.app-sem h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0 0 .55rem;
}

.app-sedes { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.app-sedes li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--linea-sutil);
}
.app-sedes li:first-child { border-top: 0; padding-top: 0; }
.app-sedes b { font-size: .9rem; font-weight: 600; }
.app-sedes strong { font-family: var(--display); font-size: 1.15rem; font-weight: 600;
                    font-variant-numeric: tabular-nums; }
.app-sedes .tbl-cifra__p { grid-column: 1 / -1; margin-top: .2rem; }

/* Siete días, en renglones: el día, la barra y la cifra, sin tener que pasar
   el dedo por encima de nada para leerla. */
.app-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.app-dias li {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem;
  align-items: center; gap: .6rem; font-size: .85rem;
}
.app-dias__d { font-weight: 600; white-space: nowrap; }
.app-dias__d small { font-weight: 400; color: var(--tinta-3); font-size: .74rem; }
.app-dias__b { height: 10px; border-radius: 5px; background: var(--crema-2); overflow: hidden; }
.app-dias__b i {
  display: block; height: 100%; border-radius: 5px; background: var(--rojo);
  opacity: .55; transform-origin: left; animation: tbl-crece-x .8s var(--ease) both;
}
.app-dias--mejor .app-dias__b i { opacity: 1; }
.app-dias--mejor .app-dias__d { color: var(--rojo); }
.app-dias__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .app-dias__b i { animation: none; }
}

/* --- Instalado: la muesca y la barra de inicio ----------------------------
   Con `black-translucent` el iPhone dibuja la hora y la batería ENCIMA de la
   página, así que la barra oscura del panel se estira por debajo de ellas y
   el contenido empieza donde acaba la muesca. `env()` vale cero en cualquier
   otro sitio —el navegador normal, Android, el computador—, así que estas
   reglas no mueven nada fuera del iPhone instalado. */
.barra { padding-top: env(safe-area-inset-top, 0px); }
.nav { top: calc(70px + env(safe-area-inset-top, 0px)); }
.entrada__marca { top: calc(clamp(1.1rem, 3.4vh, 2.6rem) + env(safe-area-inset-top, 0px)); }
.acceso {
  padding-top: max(1.2rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
}
.velo:not(.velo--cajon) {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
#avisos { bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 720px) {
  .nav { top: calc(54px + env(safe-area-inset-top, 0px)); }
  main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .cajon { max-height: calc(var(--visible, 100dvh) - 1.4rem - env(safe-area-inset-top, 0px)); }
}
@media (max-width: 900px) {
  .entrada__marca {
    padding-top: calc(clamp(1rem, 4.5vw, 1.7rem) + env(safe-area-inset-top, 0px));
  }
}

/* Instalado no hay navegador alrededor: el rebote de arriba enseñaba el fondo
   crema por encima de la barra oscura, que es lo que delata una página web. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
}