/* ⚠ COPIA — el original vive en `00 SUITE AFB/`.
   No edites este archivo: edita el original y corre
       node "00 SUITE AFB/llevar-a-la-app.js" "09 AFB COSTOS"
   Cualquier cambio hecho aquí se pierde en el siguiente llevado. */
/* ============================================================================
   00 SUITE AFB — Estilos de la cáscara común
   ----------------------------------------------------------------------------
   ⚠ ESTE ES EL ORIGINAL. Las copias dentro de cada app se sobrescriben con
   `node "00 SUITE AFB/llevar-a-la-app.js" "<carpeta>"`. No edites la copia.

   ── Se pinta con los colores de su anfitrión ──
   Todo va en tokens, y los tokens son los que ya usan las apps del ecosistema.
   El lanzador viejo traía una paleta dorada fija (#d4af37) y por eso se veía
   pegado encima de la app en vez de formar parte de ella.

   Si la app no define alguno, el bloque de abajo pone un valor de emergencia
   —claro y oscuro— para que el lanzador nunca salga sin color. Una app con su
   propio tema los sobrescribe con sólo declararlos: `var(--x, respaldo)` toma
   siempre el de la app cuando existe.
   ========================================================================== */

:root {
  --suite-superficie: var(--superficie, #ffffff);
  --suite-superficie-2: var(--superficie-2, #f0f2f5);
  --suite-fondo: var(--fondo, #f6f7f9);
  --suite-borde: var(--borde, #dfe3e8);
  --suite-texto: var(--texto, #16202c);
  --suite-texto-2: var(--texto-2, #5b6b7c);
  --suite-acento: var(--acento, #2563a5);
  --suite-acento-suave: var(--acento-suave, #e8f0f8);
  --suite-sombra: var(--sombra, 0 1px 2px rgba(16,32,44,.06), 0 4px 12px rgba(16,32,44,.06));
  --suite-r: var(--r, 10px);
  /* El alto del pie. La app lo descuenta de su área de trabajo. */
  --pie-alto: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --suite-superficie: var(--superficie, #151d27);
    --suite-superficie-2: var(--superficie-2, #1c2734);
    --suite-fondo: var(--fondo, #0d1219);
    --suite-borde: var(--borde, #27343f);
    --suite-texto: var(--texto, #e7edf3);
    --suite-texto-2: var(--texto-2, #94a5b8);
    --suite-acento: var(--acento, #7fb0e0);
    --suite-acento-suave: var(--acento-suave, #17293a);
  }
}
:root[data-tema="oscuro"] {
  --suite-superficie: var(--superficie, #151d27);
  --suite-superficie-2: var(--superficie-2, #1c2734);
  --suite-fondo: var(--fondo, #0d1219);
  --suite-borde: var(--borde, #27343f);
  --suite-texto: var(--texto, #e7edf3);
  --suite-texto-2: var(--texto-2, #94a5b8);
  --suite-acento: var(--acento, #7fb0e0);
  --suite-acento-suave: var(--acento-suave, #17293a);
}

/* ══ Pie de aplicación ═════════════════════════════════════════════════════════
   La marca, su dirección y la versión, pegados abajo. No es adorno: esta app se
   entrega y se usa meses sin volver al sitio, y la dirección a la vista es lo
   que hace que quien la usa sepa de dónde salió y a dónde escribir.

   Es una barra de ESTADO, no de trabajo: 24 px, 11 px de texto, sin nada que
   se opere. Por eso puede ser tan baja — no hay que atinarle con el dedo.

   `no-imprimir` en el marcado: en papel el mismo dato ya va en el membrete del
   reporte, y repetirlo al pie de cada hoja es ruido. */
.pie-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--pie-alto);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--suite-superficie); border-top: 1px solid var(--suite-borde);
  font-size: 11px; color: var(--suite-texto-2);
}
.pie-marca { font-weight: 600; letter-spacing: .02em; }
.pie-sitio {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--suite-acento); text-decoration: none;
}
.pie-sitio:hover { text-decoration: underline; }
.pie-sitio .ico { opacity: .75; }
/* Empuja la versión hasta la orilla derecha. */
.pie-sep { flex: 1; }
.pie-version { font-family: var(--mono); font-size: 10px; opacity: .6; }

/* ══ Lanzador de la suite ══════════════════════════════════════════════════════
   El panel cuelga del `<body>` y se coloca al abrirlo, no con CSS: vive dentro
   de la barra, que cambia de ancho cuando el marcador se encoge, así que la
   posición buena sólo se conoce en el momento de abrirlo. */
.suite-pop {
  position: fixed; z-index: 60; width: 268px;
  padding: 6px; border-radius: var(--suite-r);
  background: var(--suite-superficie); border: 1px solid var(--suite-borde);
  box-shadow: var(--suite-sombra);
}
.suite-pop[hidden] { display: none; }
.suite-tit {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--suite-texto-2); padding: 4px 8px 7px;
}
.suite-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px;
  text-decoration: none; color: var(--suite-texto);
}
a.suite-fila:hover { background: var(--suite-acento-suave); }
a.suite-fila:focus-visible { outline: 2px solid var(--suite-acento); outline-offset: -2px; }
.suite-ic {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--suite-acento);
  background: var(--suite-superficie-2); border: 1px solid var(--suite-borde);
}
.suite-tx { flex: 1; min-width: 0; }
.suite-tx b { display: block; font-size: 12.5px; font-weight: 600; }
/* La frase de qué hace cada app se corta antes que ensanchar el panel: es una
   pista, no la documentación. */
.suite-tx small {
  display: block; font-size: 10.5px; color: var(--suite-texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suite-ar { flex: none; color: var(--suite-texto-2); display: inline-flex; }
/* La app en la que estás: marcada y sin enlace. Verla dice dónde estás dentro
   de la suite; que no se pueda pulsar evita recargar la app que ya tienes
   abierta —que en una PWA con la base montada cuesta levantarla entera—. */
.suite-fila.es-aqui { background: var(--suite-acento-suave); cursor: default; }
.suite-fila.es-aqui .suite-ic { border-color: var(--suite-acento); }
.suite-aqui {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--suite-acento);
}
.suite-pie {
  display: block; margin-top: 4px; padding: 7px 8px 4px;
  border-top: 1px solid var(--suite-borde);
  font-size: 11px; color: var(--suite-acento); text-decoration: none; text-align: center;
}
.suite-pie:hover { text-decoration: underline; }
/* ── Pantallas chicas ──
   A 268 px fijos el panel se salía de la pantalla de un teléfono cuando el
   botón queda cerca de la orilla. Aquí se pega a los dos bordes y mide lo que
   quede. El `!important` es contra el `right` en línea que pone `montarSuite`
   al colocarlo: ese valor va en el elemento y le gana a cualquier regla. */
@media (max-width: 860px) {
  .suite-pop { left: 8px; right: 8px !important; width: auto; }
}

/* En papel la cáscara no existe: el pie de la app no es el pie del documento,
   y el lanzador no se imprime. Cada app marca además su propio `no-imprimir`. */
@media print {
  .pie-app, .suite-pop, #suite-btn { display: none !important; }
}