/* buclea · componentes
 * ---------------------------------------------------------------------------
 * Las piezas que salen en los cuatro módulos. Cada una existe porque ya estaba
 * repetida —y distinta— en dos o tres sitios. Origen: las maquetas aprobadas
 * de docs/maquetas-ui/comu.mjs.
 *
 * Regla de docs/marca/identidad.md §06b: el degradado y el volumen viven en el
 * botón primario, el progreso, la banda de cabecera y las baldosas de módulo.
 * En tablas, comprobaciones, panel docente e impresión, nunca.
 */
@layer ui.components {

  /* ====================================================== botón ============ */
  .ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    border: 1.5px solid var(--linia);
    background: var(--blanc);
    color: var(--tinta);
    padding: 8px 16px;
    border-radius: var(--radi-rodo);
    font-weight: 600; font-size: 13.5px; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--mov), border-color var(--mov), color var(--mov);
  }
  .ui-btn:hover { border-color: var(--verd); color: var(--profund); }
  .ui-btn svg { width: 16px; height: 16px; flex: none; }

  .ui-btn--principal {
    background: var(--grad); border-color: transparent; color: #fff;
  }
  .ui-btn--principal:hover { background: var(--profund); color: #fff; }
  .ui-btn--segon { border-color: var(--verd); color: var(--profund); }
  .ui-btn--fantasma { background: transparent; border-color: transparent; color: var(--pissarra); }
  .ui-btn--fantasma:hover { background: var(--paper); }
  .ui-btn--fosc { background: var(--tinta); border-color: var(--tinta); color: var(--blanc); }
  .ui-btn--petit { padding: 5px 12px; font-size: 12px; }

  /* Un botón deshabilitado tiene que decir POR QUÉ lo está; la clase sola no
   * basta. Ver ui/index.html, sección «estados». */
  .ui-btn[disabled], .ui-btn[aria-disabled='true'] {
    opacity: .5; cursor: not-allowed; background: var(--paper);
    border-color: var(--linia); color: var(--pissarra);
  }

  /* ====================================================== chip ============= */
  .ui-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--radi-rodo);
    font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
    background: var(--paper); color: var(--pissarra); border: 1px solid var(--linia);
  }
  .ui-chip svg { width: 13px; height: 13px; flex: none; }
  .ui-chip--ara,
  .ui-chip--ok { background: var(--menta-clar); color: var(--profund); border-color: transparent; }
  .ui-chip--avis { background: var(--ocre-clar); color: var(--ocre-text); border-color: transparent; }
  .ui-chip--error { background: var(--error-clar); color: var(--error); border-color: transparent; }
  .ui-chip--mono { font-family: var(--mono); font-weight: 600; }

  /* ====================================================== tarjeta ========== */
  .ui-targeta {
    background: var(--blanc);
    border: 1px solid var(--linia);
    border-radius: var(--radi);
    box-shadow: var(--ombra-suau);
  }
  .ui-targeta--plana { box-shadow: none; }
  .ui-targeta--alta { box-shadow: var(--ombra); }

  /* ====================================================== etiqueta ========= */
  .ui-etiqueta {
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 11px; font-weight: 700; color: var(--pissarra);
  }
  .ui-apagat { color: var(--pissarra); }

  /* ====================================================== progreso ========= */
  .ui-prog { height: 8px; border-radius: var(--radi-rodo); background: var(--menta-clar); overflow: hidden; }
  .ui-prog > i { display: block; height: 100%; border-radius: var(--radi-rodo); background: var(--grad-prog); }

  /* ====================================================== comprobaciones ===
   * ✓ hecho · ○ pendiente · ✗ falla. Color Y símbolo Y texto: nunca solo
   * color (hallazgo 10 de docs/marca/critica-pantallas.md). */
  .ui-comprova { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .ui-comprova > li { display: flex; gap: var(--esp-2); align-items: flex-start; font-size: 13px; line-height: 1.45; }
  .ui-comprova > li > .ui-marca { flex: none; margin-top: 2px; display: flex; }
  .ui-comprova > li[data-estat='fet'] > .ui-marca { color: var(--verd); }
  .ui-comprova > li[data-estat='pendent'] > .ui-marca { color: var(--linia); }
  .ui-comprova > li[data-estat='pendent'] { color: var(--pissarra); }
  .ui-comprova > li[data-estat='falla'] > .ui-marca { color: var(--error); }

  /* Franja de retorno bajo la zona de trabajo. Dice QUÉ falta, no «mal». */
  .ui-retorn {
    display: flex; align-items: flex-start; gap: var(--esp-3);
    padding: 10px 13px; border-radius: var(--radi-petit);
    font-size: 13px; line-height: 1.5;
    background: var(--menta-clar); color: var(--profund);
  }
  .ui-retorn > svg { flex: none; margin-top: 1px; width: 16px; height: 16px; }
  .ui-retorn--avis { background: var(--ocre-clar); color: var(--ocre-text); }
  .ui-retorn--error { background: var(--error-clar); color: var(--error); }

  /* ====================================================== pistas ===========
   * L1/L2/L3, graduadas y sin penalizar. «Digues-m'ho d'una altra manera» NO
   * es una pista: es reformulación, siempre disponible y nunca registrada. */
  .ui-pista { border: 1px solid var(--linia); border-radius: var(--radi-petit); overflow: hidden; }
  .ui-pista > summary {
    cursor: pointer; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
    color: var(--profund); background: var(--paper); list-style: none;
    display: flex; align-items: center; gap: var(--esp-2);
  }
  .ui-pista > summary::-webkit-details-marker { display: none; }
  .ui-pista[open] > summary { border-bottom: 1px solid var(--linia); }
  .ui-pista > div { padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
  .ui-pista[data-nivell='L3'] > summary { background: var(--ocre-clar); color: var(--ocre-text); }

  /* ====================================================== banda y baldosa ===
   * Los dos únicos sitios grandes donde vive el degradado. */
  .ui-banda {
    background: var(--grad); color: #fff;
    border-radius: var(--radi-gran);
    padding: var(--esp-5) var(--esp-6);
  }
  .ui-banda h1, .ui-banda h2 { color: #fff; }
  .ui-banda .ui-apagat { color: rgba(255, 255, 255, .82); }

  .ui-baldosa {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: var(--radi-petit);
    background: var(--menta-clar); color: var(--verd);
  }
  .ui-baldosa--marca { background: var(--grad); color: #fff; }
  .ui-baldosa--modul { background: var(--mod-clar); color: var(--mod); }

  /* ====================================================== camino de nodos ===
   * La espiral desplegada: cada nodo, un paso. Misma forma que el símbolo. */
  .ui-cami { display: flex; flex-direction: column; gap: 1px; }
  .ui-pas {
    display: flex; gap: 9px; align-items: center;
    padding: 7px 10px; border-radius: var(--radi-petit);
  }
  .ui-pas[data-estat='ara'] { background: var(--menta-clar); }
  .ui-node { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; }
  .ui-pas[data-estat='fet'] .ui-node { background: var(--verd); color: #fff; }
  .ui-pas[data-estat='ara'] .ui-node { background: var(--menta); box-shadow: 0 0 0 4px var(--menta-clar); }
  .ui-pas[data-estat='pendent'] .ui-node { background: var(--blanc); border: 2px solid var(--linia); }
  /* display:block no és decoratiu: text-overflow NO s'aplica a elements en
   * línia, i sense això els títols del raïl es tallen a mitja paraula en
   * comptes de posar-hi punts suspensius. */
  .ui-pas-tipus {
    display: block;
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; color: var(--pissarra);
  }
  .ui-pas[data-estat='ara'] .ui-pas-tipus { color: var(--profund); }
  .ui-pas-titol { display: block; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-pas[data-estat='ara'] .ui-pas-titol { font-weight: 600; }
  .ui-pas[data-estat='pendent'] .ui-pas-titol { color: var(--pissarra); }

  /* ====================================================== tabla de clase ====
   * Sin degradado y sin sombra: es una tabla de trabajo que se imprime. */
  .ui-taula { width: 100%; font-size: 13px; }
  .ui-taula th {
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--pissarra);
    padding: 8px 10px; background: var(--paper);
  }
  .ui-taula td { padding: 8px 10px; border-top: 1px solid var(--linia); }
  .ui-taula tbody tr:hover { background: var(--paper); }
  .ui-taula .ui-num { font-family: var(--mono); }

  /* Rúbrica NA/AS/AN/AE. Color + texto siempre: el texto es el que manda. */
  .ui-nivell {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 2px 8px; border-radius: var(--radi-rodo);
    font-size: 11.5px; font-weight: 700; font-family: var(--mono);
  }
  .ui-nivell[data-n='NA'] { background: var(--blanc); color: var(--pissarra); border: 1.5px solid var(--linia); }
  .ui-nivell[data-n='AS'] { background: var(--menta-clar); color: var(--profund); }
  .ui-nivell[data-n='AN'] { background: var(--verd); color: #fff; }
  .ui-nivell[data-n='AE'] { background: var(--profund); color: #fff; }
  /* Rayado: NO hay cápsula que evidencie esto. No es un cero, y el panel de
   * full de càlcul ya lo hacía bien: la honestidad va en la propia celda. */
  .ui-nivell[data-n='—'] {
    background: repeating-linear-gradient(45deg, var(--blanc), var(--blanc) 2px, var(--linia) 2px, var(--linia) 4px);
    color: var(--pissarra); border: 1px solid var(--linia);
  }

  /* ====================================================== aviso y diálogo === */
  .ui-avis {
    position: fixed; left: 50%; bottom: var(--esp-5); transform: translateX(-50%);
    background: var(--tinta); color: var(--blanc);
    padding: 10px 18px; border-radius: var(--radi-rodo);
    font-size: 13.5px; font-weight: 500; box-shadow: var(--ombra);
    z-index: 60;
  }
  .ui-dialeg {
    border: 1px solid var(--linia); border-radius: var(--radi);
    background: var(--blanc); color: var(--tinta);
    padding: var(--esp-5); box-shadow: var(--ombra-alta); max-width: 34rem;
  }
  .ui-dialeg::backdrop { background: rgba(20, 33, 28, .45); }
}