/* =====================================================================
   app.css — la cáscara de la app instalable y web. SOLO layout.
   =====================================================================
   Los colores salen de tokens.css (regla 16): aquí no se declara ninguno. En el
   teléfono (menos de 900 px) la pantalla es la de la extensión tal cual: cabecera verde
   con sus tres pestañas, a todo el ancho. En el computador la cabecera se esconde y la
   barra lateral ocupa su lugar; el contenido se centra en una columna cómoda. */

body.app { max-width: none; margin: 0; }
.app-barra { display: none; }
.app-contenido { min-width: 0; }

@media (min-width: 900px) {
  body.app {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
  }
  body.app .gw-cab { display: none; }   /* la barra lateral sustituye a la cabecera con pestañas */
  .app-barra {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding: var(--e-4) var(--e-3);
    background: var(--gw-verde);
    color: var(--gw-blanco);
  }
  .app-contenido {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--e-4) var(--e-4) var(--e-6);
    box-sizing: border-box;
  }
  /* El modo Tarifario es la única vista a la que se le suelta el ancho (style.css). */
  body.app.tarifario-ancho .app-contenido { max-width: none; }
}

.app-marca {
  margin: 0 var(--e-2);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1;
}
.app-marca span {
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--gw-magenta);
}

.app-nav { display: flex; flex-direction: column; gap: var(--e-1); }
.app-nav-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--r-s);
  color: inherit;
  font: inherit;
  font-size: var(--t-m);
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
  text-decoration: none;
}
.app-nav-btn:hover,
.app-nav-btn:focus-visible { background: var(--gw-verde-claro); outline: none; }
.app-nav-btn.active {
  background: var(--gw-verde-claro);
  border-left-color: var(--gw-magenta);
  font-weight: 700;
}
.app-nav-btn[hidden] { display: none; }
.app-nav-sep {
  margin-top: var(--e-3);
  padding: 0 var(--e-3);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

.app-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  font-size: var(--t-micro);
}
.app-usuario { opacity: .85; overflow-wrap: anywhere; }
.app-instalar {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-s);
  color: inherit;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 700;
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
}
.app-instalar[hidden] { display: none; }
.app-version { opacity: .6; }

/* ---------- la pantalla «Entrar» (la pinta adaptador.js) ---------- */
.app-entrar {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
  box-sizing: border-box;
  background: var(--gw-verde);
  color: var(--gw-texto);
  font-family: var(--tipo);
}
.app-entrar-caja {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: var(--e-4);
  border-radius: var(--r-m);
  background: var(--gw-blanco);
  box-shadow: var(--sombra-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.app-entrar-marca {
  margin: 0;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1;
  color: var(--gw-verde);
}
.app-entrar-marca span {
  display: block;
  margin-top: 3px;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--gw-magenta);
}
.app-entrar-titulo { margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--gw-verde); }
.app-entrar-texto { margin: 0; font-size: var(--t-m); color: var(--gw-texto-2); }
.app-entrar-btn {
  width: 100%;
  border: 0;
  border-radius: var(--r-s);
  padding: var(--e-3) var(--e-4);
  background: var(--gw-verde);
  color: var(--gw-blanco);
  font: inherit;
  font-size: var(--t-m);
  font-weight: 700;
  cursor: pointer;
}
.app-entrar-btn:disabled { opacity: .6; cursor: progress; }
.app-entrar-msg { margin: 0; min-height: 1.3em; font-size: var(--t-s); color: var(--gw-peligro); }
.app-entrar-nota { margin: 0; font-size: var(--t-micro); color: var(--gw-texto-3); }