/* Componentes de interfaz HidalgoUgalde — levantados de Signatune v2.0.0 (2026-09-21)
   Módulo 08-identidad-hidalgougalde · se COPIA junto a tokens.css, no se enlaza.
   Requiere tokens.css cargado antes (usa --hu-verde, --hu-crema, --hu-coral, --hu-ladrillo, --hu-mostaza, --hu-menta,
   --hu-sans, --hu-mono). Sin framework, sin preflight: cada clase es independiente y se puede pegar suelta.

   Dos reglas medidas que están detrás de todo esto (ver REFERENCIA-INTERFAZ-SIGNATUNE.md):
   1. El coral solo alcanza 4,5:1 sobre el verde (5,10) y sobre el pozo (6,36). Sobre las superficies altas NO pasa
      (3,96 en --hu-ui-alta). Por eso todo texto/icono coral vive en un pozo (.hu-pozo, .hu-badge, .hu-tarjeta__icono).
   2. «Activo» es siempre relleno ladrillo + crema (5,76:1), nunca coral sobre superficie: .hu-btn--primario,
      .hu-seg > .on, .hu-pestana.on. */

:root{
  /* Escala de superficies: tintes del verde, de lo más hondo a lo más alto */
  --hu-ui-pozo:#16292C;      /* campos, lienzo, cajas de segmentado, pozos de acento */
  --hu-ui-baja:#233F42;      /* paneles, cabecera */
  --hu-ui-media:#274448;     /* tarjetas, filas */
  --hu-ui-alta:#2C4B4F;      /* pastillas, botón secundario */
  --hu-ui-masalta:#33555A;   /* hover, badges neutros */
  --hu-ui-linea:#3B5F63;     /* bordes y divisores */
  /* Tintas secundarias: tintes del crema (el arena #A6A197 no llega a 4,5:1 sobre las superficies altas) */
  --hu-ui-tinta-2:#D3C8BB;   /* rótulos */
  --hu-ui-tinta-3:#C4BDB2;   /* iconos apagados, texto auxiliar (4,35:1 sobre --hu-ui-masalta: solo ≥18 px ahí) */
  --hu-ui-ladrillo-hover:#A63A2D;
  --hu-ui-velo:rgba(6,14,32,.72);
  /* Geometría y movimiento */
  --hu-ui-r-ctl:4px; --hu-ui-r-caja:8px; --hu-ui-r-tarjeta:12px;
  --hu-ui-alto-toque:44px;
  --hu-ui-rapido:.14s; --hu-ui-medio:.24s; --hu-ui-curva:cubic-bezier(.2,.7,.3,1);
}

/* ---------- base opcional del anfitrión ---------- */
.hu-app{background:var(--hu-verde);color:var(--hu-crema);font-family:var(--hu-sans);font-size:16px;line-height:1.5}
.hu-app :focus-visible{outline:2px solid var(--hu-ladrillo);outline-offset:2px;box-shadow:0 0 0 3px rgba(232,146,122,.25)}
@media (prefers-reduced-motion:reduce){.hu-app *{animation:none!important;transition:none!important}}

/* ---------- lienzo de puntos (fondo de héroe o sección destacada) ---------- */
.hu-lienzo-puntos{background-color:var(--hu-ui-pozo);background-image:radial-gradient(var(--hu-ui-masalta) 1px,transparent 1px);background-size:16px 16px}

/* ---------- botones ---------- */
.hu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hu-ui-alto-toque);padding:0 16px;
  border-radius:var(--hu-ui-r-ctl);border:1px solid transparent;font:600 15px/1 var(--hu-sans);color:var(--hu-crema);
  background:var(--hu-ui-alta);cursor:pointer;text-decoration:none;
  transition:background var(--hu-ui-rapido) var(--hu-ui-curva),transform var(--hu-ui-rapido) var(--hu-ui-curva)}
.hu-btn:hover{background:var(--hu-ui-masalta)}
.hu-btn:active{transform:scale(.97)}
.hu-btn--primario{background:var(--hu-ladrillo);color:var(--hu-crema)}           /* crema sobre ladrillo 5,76:1 */
.hu-btn--primario:hover{background:var(--hu-ui-ladrillo-hover)}
.hu-btn--secundario{background:var(--hu-ui-alta);border-color:var(--hu-ui-linea)}
.hu-btn--fantasma{background:transparent;color:var(--hu-ui-tinta-2)}
.hu-btn--fantasma:hover{background:var(--hu-ui-baja);color:var(--hu-crema)}
.hu-btn--peligro:hover{background:var(--hu-ladrillo);color:var(--hu-crema)}      /* el peligro se dice al pasar, no con otro rojo */
.hu-btn--mostaza{background:var(--hu-mostaza);color:var(--hu-verde)}             /* verde sobre mostaza 6,58:1 */
.hu-btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- pozo, pastilla y badge (la casa del coral) ---------- */
.hu-pozo{background:var(--hu-ui-pozo);border:1px solid var(--hu-ui-linea);border-radius:var(--hu-ui-r-ctl)}
.hu-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--hu-ui-pozo);
  border:1px solid var(--hu-ui-linea);font:600 11px/14px var(--hu-sans);letter-spacing:.03em;color:var(--hu-coral)}   /* 6,36:1 */
.hu-badge--neutro{color:var(--hu-crema)}
.hu-badge--ok{color:var(--hu-menta)}
.hu-badge--codigo{font-family:var(--hu-mono);border-radius:var(--hu-ui-r-ctl)}
.hu-avatar{width:28px;height:28px;border-radius:50%;background:var(--hu-ui-pozo);border:1px solid var(--hu-ui-linea);
  display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--hu-sans);color:var(--hu-coral)}

/* ---------- tarjeta con icono en pozo ---------- */
.hu-tarjeta{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--hu-ui-media);
  border:1px solid color-mix(in srgb,var(--hu-ui-linea) 60%,transparent);border-radius:var(--hu-ui-r-caja);color:var(--hu-crema);text-decoration:none;
  transition:border-color var(--hu-ui-rapido) var(--hu-ui-curva),transform var(--hu-ui-medio) var(--hu-ui-curva)}
.hu-tarjeta:hover{border-color:var(--hu-ladrillo)}
.hu-tarjeta__icono{width:36px;height:36px;border-radius:var(--hu-ui-r-ctl);background:var(--hu-ui-pozo);
  display:inline-flex;align-items:center;justify-content:center;color:var(--hu-coral)}
.hu-tarjeta__icono--b{color:var(--hu-mostaza)} .hu-tarjeta__icono--c{color:var(--hu-menta)}
.hu-tarjeta__icono svg{width:20px;height:20px}
.hu-tarjeta__titulo{margin:0;font:600 16px/1.3 var(--hu-sans)}
.hu-tarjeta__texto{margin:0;font-size:14px;line-height:1.5;color:var(--hu-ui-tinta-2)}
.hu-tarjeta.sel{background:var(--hu-ui-pozo);border:2px solid var(--hu-ladrillo)}   /* seleccionada: se hunde, no se levanta */

/* ---------- segmentado (filtros, idioma, sí/no) ---------- */
.hu-seg{display:inline-flex;gap:2px;padding:2px;background:var(--hu-ui-pozo);border:1px solid var(--hu-ui-linea);border-radius:var(--hu-ui-r-ctl)}
.hu-seg>button,.hu-seg>a,.hu-seg>span{flex:1;min-height:36px;padding:0 12px;border:0;border-radius:3px;background:transparent;
  font:600 13px/1 var(--hu-sans);color:var(--hu-ui-tinta-3);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--hu-ui-rapido),color var(--hu-ui-rapido)}
.hu-seg>span{cursor:default}
.hu-seg>button:hover,.hu-seg>a:hover{color:var(--hu-crema)}
.hu-seg>.on{background:var(--hu-ladrillo);color:var(--hu-crema)}
.hu-seg>[aria-current]{background:var(--hu-ladrillo);color:var(--hu-crema)}       /* conmutador de idioma: el actual no es enlace */

/* ---------- pestaña de modo y pastilla de filtro ---------- */
.hu-pestana{display:inline-flex;align-items:center;gap:6px;min-height:var(--hu-ui-alto-toque);padding:0 14px;border-radius:var(--hu-ui-r-caja);
  background:var(--hu-ui-alta);color:var(--hu-crema);font:600 13px/1 var(--hu-sans);border:0;cursor:pointer}
.hu-pestana.on{background:var(--hu-ladrillo);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.hu-pestana .punto{width:6px;height:6px;border-radius:50%;background:var(--hu-crema)}
.hu-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:var(--hu-ui-r-ctl);
  background:transparent;color:var(--hu-ui-tinta-2);font:600 12px/1 var(--hu-sans);border:0;cursor:pointer}
.hu-chip:hover{background:var(--hu-ui-alta);color:var(--hu-crema)}
.hu-chip.on{background:var(--hu-ladrillo);color:var(--hu-crema)}

/* ---------- rótulo de sección ---------- */
.hu-rotulo{display:block;margin:0 0 8px;font:600 11px/14px var(--hu-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hu-ui-tinta-2)}
.hu-rotulo+*{margin-top:0}
.hu-rotulo--separado{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--hu-ui-linea) 40%,transparent)}
.hu-rotulo .hu-badge{float:right;color:var(--hu-menta);background:var(--hu-ui-masalta);border:0;text-transform:none;letter-spacing:.03em}

/* ---------- campos ---------- */
.hu-campo{display:block;margin-bottom:12px}
.hu-campo>span{display:block;margin-bottom:6px;font:600 12px/16px var(--hu-sans);color:var(--hu-ui-tinta-2)}
.hu-campo input,.hu-campo select,.hu-campo textarea{width:100%;min-height:var(--hu-ui-alto-toque);padding:10px 12px;box-sizing:border-box;
  background:var(--hu-ui-pozo);border:1px solid var(--hu-ui-linea);border-radius:var(--hu-ui-r-ctl);
  color:var(--hu-crema);font:400 16px/1.4 var(--hu-sans)}
.hu-campo input::placeholder,.hu-campo textarea::placeholder{color:var(--hu-ui-tinta-3)}
.hu-campo input:focus,.hu-campo select:focus,.hu-campo textarea:focus{outline:none;border-color:var(--hu-coral);box-shadow:0 0 0 3px rgba(232,146,122,.25)}

/* ---------- aviso flotante (hex literal: flota sobre cualquier fondo) ---------- */
.hu-aviso{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--hu-ui-r-caja);
  background:#E8B84A;color:#1F3A3D;font:500 13px/1.4 var(--hu-sans);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hu-aviso .hu-btn{min-height:36px;background:#1F3A3D;color:#E6D5C3;font-size:13px}
.hu-aviso--ok{background:#9FD9BF}
.hu-aviso--error{background:#8C2F24;color:#E6D5C3}

/* ---------- velo y modal ---------- */
.hu-velo{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;
  background:var(--hu-ui-velo);backdrop-filter:blur(2px);z-index:100}
.hu-velo.on{display:flex}
.hu-modal{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;box-sizing:border-box;
  background:var(--hu-ui-baja);border:1px solid var(--hu-ui-linea);border-radius:var(--hu-ui-r-caja);color:var(--hu-crema);
  box-shadow:0 20px 60px rgba(0,0,0,.5);animation:huModalEntra var(--hu-ui-medio) var(--hu-ui-curva) both}
.hu-modal h2{margin:0 0 8px;font:600 22px/1.2 var(--hu-serif)}
.hu-modal h2 em{font-style:normal;color:var(--hu-coral)}
.hu-modal p{margin:0 0 16px;color:var(--hu-ui-tinta-2);font-size:14px;line-height:1.5}
.hu-modal__acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@keyframes huModalEntra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- semáforo de estado ---------- */
.hu-estado{font-family:var(--hu-mono);font-size:12px;color:var(--hu-ui-tinta-3)}
.hu-estado b{font-weight:600;color:var(--hu-menta)}
.hu-estado b.aviso{color:var(--hu-mostaza)}
.hu-estado b.mal{color:var(--hu-coral)}

/* ---------- indicador de animación / punto de estado ---------- */
.hu-punto{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hu-menta);box-shadow:0 0 6px var(--hu-menta)}
.hu-punto.off{background:var(--hu-ui-tinta-3);box-shadow:none}

/* ---------- acordeón de panel ---------- */
.hu-acordeon{background:var(--hu-ui-baja);border:1px solid var(--hu-ui-linea);border-radius:var(--hu-ui-r-caja);overflow:hidden}
.hu-acordeon>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:var(--hu-ui-alto-toque);padding:0 14px;
  font:600 14px/1 var(--hu-sans);color:var(--hu-crema)}
.hu-acordeon>summary::-webkit-details-marker{display:none}
.hu-acordeon>summary .hu-badge{margin-left:auto}
.hu-acordeon>div{padding:0 14px 14px}