/* ══════════════════════════════════════════════════════════════════════════
   BANDA DEL ECOSISTEMA XESTIO  ·  hoja compartida

   Se copia tal cual a 03_CODELAB y a 09_APP_MD_TO_PDF. Un guardian en cada
   repositorio comprueba que las tres copias son identicas: si esta pieza se
   desvia en una aplicacion, se acaba justo lo que se queria conseguir con
   ella, que es que las tres se vean del mismo sitio.

   🚨 Si se toca aqui, hay que copiarla a los tres.

   ── Por que no usa las variables de cada aplicacion ──

   Las tres tienen `--color-primary`, `--color-accent` y demas, pero cada una
   les da un valor distinto: en CreateLab el acento es turquesa sobre claro, en
   CodeLab hay un fondo tecnico #111415. Si esta banda leyera esos tokens, se
   veria DISTINTA en cada sitio, que es exactamente el problema.

   Lee los del KIT -`--xestio-petroleum`, `--createlab-accent`...-, que salen
   del manifiesto de marca y valen lo mismo en las tres. Y lleva respaldo en
   cada `var()` por si una aplicacion no cargara `xestio-tokens.css`: mejor la
   banda con su color que la banda transparente.
   ══════════════════════════════════════════════════════════════════════════ */

.xeco {
  /* Los colores del kit, resueltos UNA vez aqui. El resto de la hoja usa
     estos, asi que cambiar el respaldo de un color es un sitio y no doce. */
  --xeco-fondo: var(--xestio-petroleum, #0F3D3E);
  --xeco-hondo: #0A2C2D;
  --xeco-turquesa: var(--xestio-turquoise, #14B8A6);
  /* El turquesa de marca como TEXTO PEQUENO sobre la tarjeta da 4,01:1 y la
     WCAG pide 4,5. Medido, no estimado. Este aclarado da 5,36:1. Mismo recurso
     que la norma del kit aplica al amarillo de FocusLab con --focuslab-text:
     el color de marca se queda para relleno, y para rotular va su version con
     contraste. */
  --xeco-turquesa-texto: #2DD4BF;
  --xeco-tinta: #FFFFFF;
  --xeco-tenue: rgba(255, 255, 255, 0.72);
  --xeco-borde: rgba(255, 255, 255, 0.12);
  --xeco-superficie: rgba(255, 255, 255, 0.06);

  /* El acento de cada laboratorio, para el punto de color de su fila. */
  --xeco-codelab: var(--codelab-accent, #ADFF00);
  --xeco-createlab: var(--createlab-accent, #E11D48);

  /* ── La escala, declarada aqui dentro ──

     Son los valores del sistema de diseno de CodeLab -tres radios y una escala
     de texto de siete pasos-, que es el mas estricto de los tres y tiene
     razon: nadie distingue un radio de 12 de uno de 16 mirando un panel, pero
     todo el mundo nota al pasar de una pantalla a otra que no es la misma
     aplicacion.

     Se declaran AQUI y no se leen de `--ui-radius-*` porque esos tokens solo
     existen en CodeLab: la banda tiene que pintarse igual en las tres, y en
     dos de ellas esa variable no resolveria. Asi la banda adopta el sistema
     mas exigente sin depender de el.

     🚨 Ni un literal de radio o de tamano fuera de estas variables: el
     guardian de CodeLab -tests/test_sistema_de_diseno.py- rechaza la hoja. */
  --xeco-radio-control: 8px;
  --xeco-radio-superficie: 16px;
  --xeco-radio-pastilla: 999px;

  --xeco-texto-xs: 0.75rem;      /* 12px · suelo: etiquetas y metadatos */
  --xeco-texto-sm: 0.8125rem;    /* 13px */
  --xeco-texto-md: 0.875rem;     /* 14px */
  --xeco-texto-base: 1rem;       /* 16px · cuerpo */
  --xeco-focuslab: var(--focuslab-accent, #FFF200);
  --xeco-breaklab: var(--breaklab-accent, #F59E0B);

  display: block;
  margin: 0;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, rgba(20, 184, 166, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 92% 100%, rgba(225, 29, 72, 0.10) 0%, transparent 62%),
    var(--xeco-fondo);
  color: var(--xeco-tinta);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  border-top: 1px solid var(--xeco-borde);
}

.xeco a {
  color: inherit;
  text-decoration: none;
}

/* El foco se ve SIEMPRE. Es una banda de enlaces sobre fondo oscuro y quien
   navegue con teclado tiene que saber donde esta; el contorno va en turquesa,
   que sobre petroleo da 4,80:1 -medido-. */
.xeco a:focus-visible {
  outline: 2px solid var(--xeco-turquesa);
  outline-offset: 3px;
  /* Sin `border-radius`: el contorno ya sigue por si solo la forma del
     elemento, y fijarlo aqui cuadraba las pastillas justo al enfocarlas. */
}

/* ── La lamina ──────────────────────────────────────────────────────────── */

.xeco-lamina {
  display: block;
  width: min(280px, 62vw);
  margin: 0 auto clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

.xeco-lamina img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── El texto ───────────────────────────────────────────────────────────── */

.xeco-cuerpo {
  width: min(1040px, 100%);
  margin: 0 auto;
  text-align: center;
}

.xeco-titulo {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  font-weight: 700;
  color: var(--xeco-tinta);
  line-height: 1.25;
}

.xeco-lead {
  max-width: 56ch;
  margin: 0 auto clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  color: var(--xeco-tenue);
  font-size: var(--xeco-texto-base);
  line-height: 1.6;
}

/* ── Las herramientas ───────────────────────────────────────────────────── */

.xeco-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
  margin: 0 0 clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  padding: 0;
  list-style: none;
  text-align: left;
}

.xeco-app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "punto nombre"
    "punto desc"
    "punto acceso";
  gap: 0 0.6rem;
  align-content: center;
  height: 100%;
  padding: 0.85rem 1rem;
  background: var(--xeco-superficie);
  border: 1px solid var(--xeco-borde);
  border-radius: var(--xeco-radio-superficie);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.xeco-app:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(20, 184, 166, 0.45);
  transform: translateY(-2px);
}

/* El punto de color es lo unico que distingue a un laboratorio de otro aqui,
   igual que en la lamina de marca cambia solo el nodo de acento. */
.xeco-app-punto {
  grid-area: punto;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--xeco-turquesa);
}

.xeco-app--codelab   .xeco-app-punto { background: var(--xeco-codelab); }
.xeco-app--createlab .xeco-app-punto { background: var(--xeco-createlab); }
.xeco-app--focuslab  .xeco-app-punto { background: var(--xeco-focuslab); }
.xeco-app--breaklab  .xeco-app-punto { background: var(--xeco-breaklab); }

.xeco-app-nombre {
  grid-area: nombre;
  font-weight: 700;
  font-size: var(--xeco-texto-base);
  color: var(--xeco-tinta);
}

.xeco-app-desc {
  grid-area: desc;
  font-size: var(--xeco-texto-sm);
  color: var(--xeco-tenue);
  line-height: 1.35;
}

/* La letra pequena: dice lo que se va a encontrar ANTES de pulsar. Dos de las
   cinco llevan a una pantalla de acceso, y eso no se descubre despues. */
.xeco-app-acceso {
  grid-area: acceso;
  margin-top: 0.35rem;
  font-size: var(--xeco-texto-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xeco-turquesa-texto);   /* 5,36:1 */
}

.xeco-app-acceso--cuenta {
  color: rgba(255, 255, 255, 0.7);     /* al 55% daba 4,25:1 */
}

/* La aplicacion en la que ya se esta no se ofrece como destino. */
.xeco-app--aqui {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.11);
}

.xeco-app-aqui {
  grid-area: acceso;
  margin-top: 0.35rem;
  font-size: var(--xeco-texto-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xeco-tinta);
}

/* ── Las dos acciones ───────────────────────────────────────────────────── */

.xeco-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

.xeco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;             /* objetivo tactil: no menos de 44 px */
  padding: 0.6rem 1.5rem;
  border-radius: var(--xeco-radio-pastilla);
  font-size: var(--xeco-texto-md);
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Turquesa con tinta petroleo: 4,80:1 al reves da poco, y asi da 4,80:1 con el
   texto oscuro sobre el relleno claro, que es el sentido que si cumple. */
.xeco-btn--primario {
  background: var(--xeco-turquesa);
  color: var(--xeco-fondo);
}

.xeco-btn--primario:hover {
  background: #0D9488;
  color: var(--xeco-tinta);
}

.xeco-btn--fantasma {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--xeco-tinta);
}

.xeco-btn--fantasma:hover {
  border-color: var(--xeco-turquesa);
  color: var(--xeco-turquesa);
}

/* ── La variante de firma ───────────────────────────────────────────────── */

/* Para la pantalla de descanso, que se PROYECTA en un aula. Ahi una banda con
   cinco enlaces y dos botones rompe la calma, que es justo el producto. */
.xeco--firma {
  padding: 1rem;
  background: transparent;
  border-top: none;
  text-align: center;
}

.xeco--firma .xeco-lamina {
  width: min(180px, 40vw);
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

.xeco-firma-texto {
  margin: 0;
  font-size: var(--xeco-texto-sm);
  color: var(--xeco-tenue);
}

.xeco-firma-texto a {
  color: var(--xeco-turquesa);
}

/* ── Movimiento ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .xeco-app,
  .xeco-btn {
    transition: none;
  }
  .xeco-app:hover {
    transform: none;
  }
}