/* Pixelario · componentes
   Se carga después de styles.css y brand.css. Usa solo tokens de :root.
   Estados comunes en todos los controles:
     :hover · :active · :focus-visible · [disabled] / [aria-disabled="true"] · .is-loading / [aria-busy="true"]
   Las clases .is-hover, .is-active y .is-focus fuerzan un estado (solo para documentación).
   Comportamiento (modales, menús, tooltips, avisos, pestañas): js/ui.js. Guía: BRAND.md */

/* =====================================================================
   0. Utilidades de sistema
   ===================================================================== */
.elev-0 { background: var(--elev-0-bg); box-shadow: var(--elev-0-sh); }
.elev-1 { background: var(--elev-1-bg); box-shadow: var(--elev-1-sh); border: var(--bw) solid var(--line); }
.elev-2 { background: var(--elev-2-bg); box-shadow: var(--elev-2-sh); border: var(--bw) solid var(--line-2); }
.elev-3 { background: var(--elev-3-bg); box-shadow: var(--elev-3-sh); border: var(--bw) solid var(--line-2); }
.elev-4 { background: var(--elev-4-bg); box-shadow: var(--elev-4-sh); border: var(--bw) solid var(--line-2); }
.kbd { white-space: nowrap; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border: var(--bw) solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
.spinner { width: 16px; height: 16px; display: inline-block; position: relative; flex: none; }
.spinner::before, .spinner::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 1.5px; background: currentColor; animation: px-orbit 1s steps(1) infinite; }
.spinner::after { opacity: .35; animation-delay: -.5s; }
@keyframes px-orbit-sm { 0% { left: 0; top: 0; } 25% { left: 10px; top: 0; } 50% { left: 10px; top: 10px; } 75% { left: 0; top: 10px; } }
.spinner::before, .spinner::after { animation-name: px-orbit-sm; }

/* =====================================================================
   1. Botones
   Jerarquía: .btn-pack (una acción principal por zona) > .btn-brand (Pixel+) > .btn (secundaria)
   > .btn-ghost (terciaria). .btn-danger solo para borrar o denunciar.
   Tamaños: .btn-sm 32 px · base 40 px · .btn-lg 48 px. En pantallas táctiles, mínimo 44 px.
   ===================================================================== */
.btn {
  --btn-h: 40px; --btn-px-x: 16px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 var(--btn-px-x);
  border: var(--bw) solid var(--line-2); border-radius: var(--shape);
  background: rgba(244, 239, 230, .04); color: var(--fg);
  font: 600 var(--fs-sm)/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease), filter var(--dur-3), box-shadow var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn.is-hover { background: rgba(244, 239, 230, .08); border-color: var(--line-3); }
.btn:active, .btn.is-active { transform: translateY(1px); background: rgba(244, 239, 230, .03); }
.btn.is-focus { outline: 2px solid var(--spark); outline-offset: 2px; }
.btn-sm { --btn-h: 32px; --btn-px-x: 12px; font-size: var(--fs-xs); gap: 6px; border-radius: var(--shape-sm); }
.btn-lg { --btn-h: 48px; --btn-px-x: 22px; font-size: var(--fs-md); border-radius: 13px var(--r-px) 13px 13px; }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--r-full); }
.btn .arr { transition: transform var(--dur-3) var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
@media (pointer: coarse) { .btn { min-height: max(var(--btn-h), 44px); } }

/* Principal: esquina cortada; al pasar el ratón sale un píxel de la esquina. */
.btn-pack, .btn-primary, .btn-brand, .btn-danger {
  --btn-bg: var(--pack); --btn-ink: var(--pack-ink); --btn-px: var(--fg); --cut: 8px;
  color: var(--btn-ink); border-color: transparent; box-shadow: none;
  background: linear-gradient(225deg, transparent var(--cut), var(--btn-bg) calc(var(--cut) + .5px)) border-box;
  border-radius: var(--r) 0 var(--r) var(--r);
}
.btn-brand { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-px: var(--pack); }
.btn-danger { --btn-bg: var(--bad); --btn-ink: var(--bad-ink); --btn-px: var(--fg); }
.btn-lg.btn-pack, .btn-lg.btn-primary, .btn-lg.btn-brand, .btn-lg.btn-danger { --cut: 10px; border-radius: 13px 0 13px 13px; }
.btn-sm.btn-pack, .btn-sm.btn-primary, .btn-sm.btn-brand, .btn-sm.btn-danger { --cut: 6px; border-radius: var(--r-sm) 0 var(--r-sm) var(--r-sm); }
.btn-pack:hover, .btn-primary:hover, .btn-brand:hover, .btn-danger:hover,
.btn-pack.is-hover, .btn-brand.is-hover, .btn-danger.is-hover {
  background: linear-gradient(225deg, transparent var(--cut), color-mix(in oklab, var(--btn-bg) 86%, #fff) calc(var(--cut) + .5px)) border-box;
  filter: drop-shadow(0 10px 22px color-mix(in oklab, var(--btn-bg) 40%, transparent));
}
.btn-pack:active, .btn-primary:active, .btn-brand:active, .btn-danger:active, .btn-pack.is-active, .btn-brand.is-active, .btn-danger.is-active {
  background: linear-gradient(225deg, transparent var(--cut), color-mix(in oklab, var(--btn-bg) 82%, #000) calc(var(--cut) + .5px)) border-box; filter: none;
}
.btn-pack::after, .btn-primary::after, .btn-brand::after, .btn-danger::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 5px; height: 5px; border-radius: 1px; background: var(--btn-px);
  transform: scale(0); transition: transform var(--dur-2) var(--ease-px); pointer-events: none;
}
.btn-pack:hover::after, .btn-primary:hover::after, .btn-brand:hover::after, .btn-danger:hover::after,
.btn-pack:focus-visible::after, .btn-brand:focus-visible::after, .btn-pack.is-hover::after { transform: translate(3px, -3px) scale(1); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover, .btn-ghost.is-hover { background: rgba(244, 239, 230, .06); border-color: transparent; color: var(--fg); }
.icon-btn { width: var(--btn-h); padding: 0; border-radius: 11px var(--r-px) 11px 11px; }
.icon-btn.btn-sm { width: 32px; }
.icon-btn .counter { position: absolute; top: -5px; right: -5px; }

/* Desactivado y cargando */
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; filter: none; }
.btn.is-loading, .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn.is-loading > *, .btn[aria-busy="true"] > * { visibility: hidden; }
.btn.is-loading::before, .btn[aria-busy="true"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -8px 0 0 -8px; border-radius: 1.5px;
  background: var(--btn-ink, var(--fg)); box-shadow: 10px 10px 0 color-mix(in oklab, var(--btn-ink, var(--fg)) 35%, transparent);
  animation: btn-load 1s steps(1) infinite;
}
@keyframes btn-load {
  0% { transform: translate(0, 0); } 25% { transform: translate(10px, 0); } 50% { transform: translate(10px, 10px); } 75% { transform: translate(0, 10px); }
}
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* =====================================================================
   2. Campos de texto
   .field agrupa etiqueta + control + ayuda + mensaje. El estado lo marca el control:
   [aria-invalid="true"] = error · .is-valid = correcto. El mensaje va en .msg (aria-describedby).
   ===================================================================== */
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field > label:not(.check):not(.radio):not(.switch):not(.slot), .field > .lbl, .field legend { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); padding: 0; }
.field .req { color: var(--muted); font-weight: 400; }
.field .help { font-size: var(--fs-xs); color: var(--muted); }
.field .msg { display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.4; }
.field .msg::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; margin-top: 4px; flex: none; background: currentColor; }
.field .msg.error { color: var(--bad); }
.field .msg.ok { color: var(--ok); }
.field .msg:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; }

.input, .textarea, .select {
  width: 100%; min-height: 40px; padding: 0 12px;
  background: var(--surface-2); color: var(--fg);
  border: var(--bw) solid var(--line-2); border-radius: var(--shape);
  font: 400 var(--fs-sm)/1.4 var(--body);
  transition: border-color var(--dur-1), box-shadow var(--dur-2), background var(--dur-1);
}
.textarea { min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .textarea:hover, .select:hover, .input.is-hover { border-color: var(--line-3); }
.input:focus, .textarea:focus, .select:focus, .input.is-focus {
  outline: none; border-color: var(--spark); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--spark) 28%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--bad); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad) 28%, transparent); }
.input.is-valid, .textarea.is-valid { border-color: color-mix(in oklab, var(--ok) 70%, transparent); }
.input:disabled, .textarea:disabled, .select:disabled { opacity: .5; cursor: not-allowed; }
.input[readonly] { background: transparent; border-style: dashed; }
.input-sm { min-height: 32px; font-size: var(--fs-xs); }
.input-lg { min-height: 48px; font-size: var(--fs-md); padding-inline: 16px; }

/* Con icono delante y acción detrás */
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap > .ico:first-child { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.input-wrap > .ico:first-child ~ .input { padding-left: 38px; }
.input-wrap > .end { position: absolute; right: 6px; display: flex; gap: 4px; align-items: center; }
.input-wrap > .end ~ .input, .input-wrap .input:has(~ .end) { padding-right: 64px; }
.input-wrap.is-loading::after { content: ""; position: absolute; right: 14px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--spark); animation: btn-load 1s steps(1) infinite; margin-top: -10px; }
.input-wrap .state-ico { position: absolute; right: 12px; pointer-events: none; }

/* =====================================================================
   3. Selectores
   ===================================================================== */
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A39C90' stroke-width='1.75' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.select option { background: var(--surface-2); color: var(--fg); }

/* Casilla y opción: un píxel que se enciende */
.check, .radio { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--fg); cursor: pointer; line-height: 1.45; }
.check .sub, .radio .sub { display: block; color: var(--muted); font-size: var(--fs-xs); }
.check input, .radio input {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 18px; height: 18px; flex: none; cursor: pointer;
  border: 1.5px solid var(--line-3); background: var(--surface-2); display: grid; place-items: center;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.check input { border-radius: 5px 2px 5px 5px; }
.radio input { border-radius: 50%; }
.check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--dur-2) var(--ease-px);
  background: var(--pack-ink); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 24%, 86% 10%, 38% 70%); }
.radio input::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--pack-ink); transform: scale(0); transition: transform var(--dur-2) var(--ease-px); }
.check input:checked, .radio input:checked { background: var(--spark); border-color: var(--spark); }
.check input:checked::before, .radio input:checked::before { transform: scale(1); }
.check input:indeterminate { background: var(--spark); border-color: var(--spark); }
.check input:indeterminate::before { transform: scale(1); clip-path: inset(40% 10%); }
.check:hover input, .radio:hover input { border-color: var(--muted); }
.check input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.check input:disabled, .radio input:disabled { opacity: .45; cursor: not-allowed; }
.check:has(input:disabled), .radio:has(input:disabled) { color: var(--faint); cursor: not-allowed; }
.check input[aria-invalid="true"] { border-color: var(--bad); }

/* Interruptor: el mando avanza por pasos */
.toggle { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; flex: none; margin: 0; cursor: pointer;
  background: var(--surface-4); border: 1.5px solid var(--line-3); border-radius: 7px 3px 7px 7px; transition: background var(--dur-2), border-color var(--dur-2); }
.toggle::before { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; border-radius: 4px 2px 4px 4px; background: var(--muted); transition: transform var(--dur-2) var(--ease-px), background var(--dur-2); }
.toggle:checked { background: var(--spark); border-color: var(--spark); }
.toggle:checked::before { transform: translateX(18px); background: var(--pack-ink); }
.toggle:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.toggle:disabled { opacity: .45; cursor: not-allowed; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: var(--bw) solid var(--line); border-radius: var(--shape); background: var(--surface); cursor: pointer; }
.switch b { display: block; font-size: var(--fs-sm); }
.switch span { font-size: var(--fs-xs); color: var(--muted); }
.switch:has(.toggle:focus-visible) { border-color: var(--line-3); }

/* Control segmentado (pocos valores excluyentes; JS mueve .pill) */
.seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--shape); padding: 3px; }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; min-height: 32px; padding: 0 12px; font: 500 var(--fs-xs) var(--mono); color: var(--muted); border-radius: 9px 2px 9px 9px; transition: color var(--dur-2); cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { color: var(--bg); }
.seg button:not(.has-pill)[aria-pressed="true"] { background: var(--fg); }
.seg .pill { position: absolute; z-index: 0; background: var(--fg); border-radius: 9px 2px 9px 9px; transition: left var(--dur-3) var(--ease), top var(--dur-3) var(--ease), width var(--dur-3) var(--ease), height var(--dur-3) var(--ease); }

/* Chips de filtro (pueden quitarse) */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: var(--bw) solid var(--line-2); background: transparent; border-radius: var(--r-full); padding: 0 13px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1); }
.chip:hover { color: var(--fg); border-color: var(--line-3); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .x { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -9px; border-radius: 50%; border: 0; background: rgba(15, 14, 13, .12); color: inherit; cursor: pointer; padding: 0; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }

/* Ranuras: elegir resolución, versión o pieza como en un inventario */
.slots { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
.slot { position: relative; display: grid; place-items: center; gap: 2px; min-width: 64px; height: 64px; padding: 6px 10px; cursor: pointer;
  background: var(--surface); border-radius: 10px 3px 10px 10px; color: var(--muted);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(244, 239, 230, .05), 0 0 0 1px var(--line); transition: box-shadow var(--dur-1), color var(--dur-1), background var(--dur-1); }
.slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot b { font: 600 var(--fs-md)/1 var(--mono); color: var(--fg); }
.slot small { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.slot:hover { background: var(--surface-2); color: var(--fg); }
.slot:has(input:checked) { background: color-mix(in oklab, var(--spark) 14%, var(--surface)); color: var(--fg); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--spark); }
.slot:has(input:checked)::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--spark); }
.slot:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
.slot:has(input:disabled) { opacity: .4; cursor: not-allowed; }

/* =====================================================================
   4. Modales (<dialog class="modal">). En móvil se abren como hoja desde abajo.
   ===================================================================== */
dialog { border: var(--bw) solid var(--line-2); background: var(--elev-4-bg); color: var(--fg); border-radius: var(--shape-xl); padding: 0; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--elev-4-sh); }
dialog::backdrop { background: rgba(8, 7, 6, .72); backdrop-filter: blur(6px); }
dialog[open] { animation: modal-in var(--dur-3) var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
dialog.modal { width: min(520px, calc(100vw - 24px)); overflow: hidden; display: none; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal.modal-sm { width: min(400px, calc(100vw - 24px)); }
dialog.modal.modal-lg { width: min(760px, calc(100vw - 24px)); }
.modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 6px; }
.modal-head .ttl { flex: 1; min-width: 0; display: grid; gap: 6px; }
.modal-head h2, .modal-head h3 { margin: 0; font: 800 24px/1.05 var(--display); letter-spacing: -.035em; font-variation-settings: "opsz" 96; }
.modal-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.modal-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px 3px 12px 12px; background: var(--surface-3); color: var(--fg); }
.modal-danger .modal-icon { background: var(--bad-soft); color: var(--bad); }
.modal-body { padding: 14px 22px; overflow: auto; display: grid; gap: 14px; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; border-top: var(--bw) solid var(--line); background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.modal-close { flex: none; }
/* compatibilidad con los diálogos que ya existen */
.dlg { position: relative; padding: 24px; display: flex; flex-direction: column; gap: 15px; }
.dlg h3 { margin: 0; font: 800 26px/1 var(--display); letter-spacing: -.04em; }
.dlg p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.dlg .x { position: absolute; right: 14px; top: 14px; border: 0; background: rgba(244, 239, 230, .07); width: 32px; height: 32px; border-radius: 9px 2px 9px 9px; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 560px) {
  dialog.modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) 4px 0 0; max-height: 92vh; border-bottom: 0; }
  dialog.modal[open] { animation: sheet-in var(--dur-3) var(--ease); }
  .modal-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .modal-foot .btn { flex: 1 1 auto; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }

/* =====================================================================
   5. Menús desplegables (role="menu"; teclado: flechas, Inicio, Fin, Esc)
   ===================================================================== */
.dropdown, .menu-wrap { position: relative; display: inline-block; }
.dropdown-menu, .menu {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  background: var(--elev-3-bg); border: var(--bw) solid var(--line-2); border-radius: 14px 4px 14px 14px; box-shadow: var(--elev-3-sh);
  padding: 6px; transform-origin: top left; animation: menu-in var(--dur-2) var(--ease);
}
.dropdown-menu[hidden] { display: none; }
.dropdown-menu.end, .menu { left: auto; right: 0; transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.dropdown-item, .menu a, .menu button {
  position: relative; display: flex; width: 100%; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 12px;
  border: 0; background: transparent; color: var(--fg); text-align: left; text-decoration: none;
  font: 500 var(--fs-sm)/1.2 var(--body); border-radius: 8px 2px 8px 8px; cursor: pointer;
}
.dropdown-item .ico { color: var(--muted); }
.dropdown-item .kbd, .dropdown-item .meta { margin-left: auto; }
.dropdown-item .meta { font: 500 var(--fs-2xs) var(--mono); color: var(--faint); }
.dropdown-item:hover, .dropdown-item:focus-visible, .dropdown-item.is-hover, .menu a:hover, .menu button:hover { background: var(--surface-3); outline: none; }
.dropdown-item:focus-visible::before, .dropdown-item.is-hover::before { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 1px; background: var(--spark); }
.dropdown-item[aria-checked="true"]::after { content: ""; margin-left: auto; width: 12px; height: 10px; background: var(--spark); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 24%, 86% 10%, 38% 70%); }
.dropdown-item.danger { color: var(--bad); }
.dropdown-item.danger .ico { color: var(--bad); }
.dropdown-item[aria-disabled="true"], .dropdown-item:disabled { color: var(--faint); cursor: not-allowed; background: transparent; }
.dropdown-sep { height: 1px; background: var(--line); margin: 6px 4px; border: 0; }
.dropdown-label { padding: 8px 12px 4px; font: 500 var(--fs-2xs) var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint); }
.menu .head { padding: 10px 11px 12px; border-bottom: var(--bw) solid var(--line); margin-bottom: 4px; }
.menu .head b { display: block; font-size: 14px; }
.menu .head span { font-size: 12px; color: var(--muted); }

/* =====================================================================
   6. Tooltips: como la descripción de un objeto, con nombre y una línea técnica
   ===================================================================== */
.tooltip {
  position: fixed; z-index: var(--z-tooltip); max-width: 260px; pointer-events: none;
  padding: 8px 10px; border-radius: 9px 2px 9px 9px;
  background: rgba(12, 10, 22, .97); color: var(--fg); font-size: var(--fs-xs); line-height: 1.4;
  border: var(--bw) solid color-mix(in oklab, var(--spark) 55%, #241d4a);
  box-shadow: inset 0 0 0 1px rgba(12, 10, 22, .9), 0 10px 30px -8px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-px);
}
.tooltip.show { opacity: 1; transform: none; }
.tooltip .tt-title { display: block; font-weight: 600; color: var(--fg); }
.tooltip .tt-meta { display: block; margin-top: 2px; font: 500 var(--fs-2xs) var(--mono); color: var(--indigo-300); }
.tooltip.static { position: relative; opacity: 1; transform: none; display: inline-block; }

/* =====================================================================
   7. Tarjetas con función propia (no hay "tarjeta genérica")
   .card    = un pack: imagen manda, texto debajo
   .creator = una persona: avatar + datos + seguir
   .stat    = una cifra del panel: número grande, etiqueta, variación
   ===================================================================== */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; min-width: 0; color: var(--fg); border-radius: var(--shape-lg); }
.card .img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: var(--surface); border: var(--bw) solid var(--line); transition: transform var(--dur-3) var(--ease), border-color var(--dur-2); }
.card .img img, .card .img canvas { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.card:hover .img, .card:focus-visible .img, .card.is-hover .img { border-color: color-mix(in oklab, var(--spark) 45%, var(--line-2)); }
.card:hover .img img, .card:hover .img canvas, .card.is-hover .img img { transform: scale(1.05); }
.card:hover .img::before, .card:focus-visible .img::before, .card.is-hover .img::before { background-size: 7px 7px; }
.card:focus-visible { outline-offset: 4px; }
.card .res { position: absolute; top: 10px; left: 10px; z-index: 2; }
.card .meta { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.card .t { min-width: 0; flex: 1; }
.card h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em; }
.card.feat h3 { font: 800 22px/1.1 var(--display); letter-spacing: -.035em; }
.card .sub .au { min-height: 24px; }
.card .sub { display: flex; gap: 10px; align-items: center; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; }
.card .rank { font-family: var(--display); font-weight: 800; font-size: 58px; line-height: .78; letter-spacing: -.06em; font-variation-settings: "opsz" 96; }

.creator { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--shape-lg); background: var(--surface); border: var(--bw) solid var(--line); transition: border-color var(--dur-2); }
.creator:hover { border-color: var(--line-2); }
.creator .av { width: 52px; height: 52px; border-radius: 14px 3px 14px 14px; overflow: hidden; background: var(--surface-3); image-rendering: pixelated; }
.creator .av img, .creator .av canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.creator .name { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: 6px; min-width: 0; }
.creator .name a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator .name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.creator { position: relative; }
.creator .btn { position: relative; z-index: 1; }
.creator .facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 var(--fs-2xs) var(--mono); color: var(--muted); margin-top: 2px; }

.stat { display: grid; gap: 6px; padding: 18px 18px 16px; border-radius: var(--shape-lg); background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.stat .k { font: 500 var(--fs-2xs) var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
.stat .v { font: 800 40px/1 var(--display); letter-spacing: -.04em; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums; }
.stat .d { font: 500 var(--fs-xs) var(--mono); color: var(--muted); }
.stat .d.up { color: var(--ok); }
.stat .d.down { color: var(--bad); }
.stat .bar { margin-top: 6px; }

/* =====================================================================
   8. Badges y etiquetas
   .badge = sobre una imagen · .tag = dato del pack · .status = estado con palabra · .counter = número
   ===================================================================== */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; font-size: var(--fs-2xs); font-weight: 600; color: var(--fg); background: rgba(15, 14, 13, .74); backdrop-filter: blur(8px); border-radius: 7px 2px 7px 7px; }
.badge.spark::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--spark); }
.badge-plus, .badge.plus { background: var(--brand); color: var(--brand-ink); backdrop-filter: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; font: 500 var(--fs-2xs)/1 var(--mono); color: var(--paper-200); background: var(--surface-3); border: var(--bw) solid var(--line); border-radius: 6px 2px 6px 6px; white-space: nowrap; }
.tag-res::before { content: ""; width: 9px; height: 9px; flex: none; background: conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 4.5px 4.5px; opacity: .8; }
.tag-ver { color: var(--indigo-300); background: color-mix(in oklab, var(--indigo-500) 14%, var(--surface)); border-color: color-mix(in oklab, var(--indigo-500) 30%, transparent); }
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--line-3); color: var(--fg); }
.status { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 0 9px 0 8px; font-size: var(--fs-2xs); font-weight: 600; border-radius: 7px 2px 7px 7px; color: var(--muted); background: var(--surface-3); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; flex: none; }
.status.ok { color: var(--ok); background: var(--ok-soft); }
.status.warn { color: var(--warn); background: var(--warn-soft); }
.status.bad { color: var(--bad); background: var(--bad-soft); }
.status.info { color: var(--info); background: var(--info-soft); }
.status.live::before { animation: live 1.2s steps(2) infinite; }
@keyframes live { 50% { opacity: .2; } }
.counter { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px 2px 6px 6px; background: var(--spark); color: var(--pack-ink); font: 600 10.5px/1 var(--mono); box-shadow: 0 0 0 2px var(--bg); }

/* =====================================================================
   9. Navegación
   ===================================================================== */
.nav-links a { position: relative; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 1px; background: var(--spark); }

/* Pestañas (role="tablist"): barra inferior que se mueve con el valor */
.tabbar, .tabs-page { display: flex; gap: 2px; border-bottom: var(--bw) solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabbar [role="tab"], .tabs-page button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; background: transparent;
  color: var(--muted); font: 600 var(--fs-sm) var(--body); white-space: nowrap; cursor: pointer; border-radius: 8px 2px 0 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
  transition: color var(--dur-1), background var(--dur-1);
}
.tabbar [role="tab"]:hover, .tabs-page button:hover { color: var(--fg); background: rgba(244, 239, 230, .03); }
.tabbar [role="tab"][aria-selected="true"], .tabs-page button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--spark); }
.tabbar [role="tab"] .counter { box-shadow: none; }
.tabbar [role="tab"]:focus-visible { outline-offset: -2px; }
[role="tabpanel"]:focus-visible { outline-offset: 4px; }

/* Migas */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 var(--fs-xs) var(--mono); color: var(--muted); list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; padding: 2px 0; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--fg); }

/* Paginación: ranuras como la barra rápida del juego */
.pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; }
.pager a, .pager button, .pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 9px 2px 9px 9px; font: 500 var(--fs-xs) var(--mono); color: var(--muted); text-decoration: none; background: var(--surface); border: 0; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), 0 0 0 1px var(--line); }
.pager a:hover, .pager button:hover { color: var(--fg); background: var(--surface-2); }
.pager [aria-current="page"] { color: var(--fg); background: color-mix(in oklab, var(--spark) 16%, var(--surface)); box-shadow: 0 0 0 2px var(--spark); }
.pager [aria-disabled="true"], .pager button:disabled { opacity: .4; pointer-events: none; }
.pager span { background: transparent; box-shadow: none; }

/* Menú lateral del panel */
.sidenav { display: grid; gap: 2px; min-width: 0; }
.sidenav .dropdown-label { padding-inline: 12px; }
.sidenav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px 3px 10px 10px; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.sidenav a .ico { color: var(--faint); }
.sidenav a:hover { background: rgba(244, 239, 230, .04); color: var(--fg); }
.sidenav a[aria-current] { background: var(--surface-2); color: var(--fg); }
.sidenav a[aria-current] .ico { color: var(--spark); --ico-px: var(--spark); }
.sidenav a[aria-current]::before { content: ""; position: absolute; left: -8px; top: 50%; width: 4px; height: 16px; margin-top: -8px; border-radius: 0 2px 2px 0; background: var(--spark); }
.sidenav a .counter { margin-left: auto; box-shadow: none; }

/* Barra rápida en móvil (navegación inferior de 4–5 destinos) */
.hotbar { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-nav);
  display: none; gap: 4px; padding: 5px; border-radius: 16px 4px 16px 16px; background: rgba(23, 22, 20, .92); backdrop-filter: blur(14px); border: var(--bw) solid var(--line-2); box-shadow: var(--sh-3); }
.hotbar.demo { position: relative; left: auto; bottom: auto; transform: none; display: inline-flex; }
.hotbar a { position: relative; display: grid; place-items: center; gap: 2px; width: 60px; height: 52px; border-radius: 11px 3px 11px 11px; color: var(--muted); text-decoration: none; font: 500 10px/1 var(--body); }
.hotbar a:hover { color: var(--fg); background: rgba(244, 239, 230, .04); }
.hotbar a[aria-current="page"] { color: var(--fg); background: var(--surface-3); box-shadow: 0 0 0 2px var(--spark); }
@media (max-width: 760px) { .hotbar { display: inline-flex; } }

/* =====================================================================
   10. Esqueletos de carga: un barrido por pasos, como un escaneo de píxeles
   El contenedor que carga lleva aria-busy="true"; los esqueletos van con aria-hidden.
   ===================================================================== */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 6px 2px 6px 6px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0 30%, rgba(244, 239, 230, .055) 30% 45%, rgba(244, 239, 230, .09) 45% 55%, rgba(244, 239, 230, .055) 55% 70%, transparent 70%);
  animation: skel-scan 1.6s steps(10, end) infinite; }
@keyframes skel-scan { to { transform: translateX(100%); } }
.skel-line { height: 12px; }
.skel-line.w-80 { width: 80%; } .skel-line.w-60 { width: 60%; } .skel-line.w-40 { width: 40%; }
.skel-title { height: 22px; width: 70%; }
.skel-media { aspect-ratio: 16 / 9; border-radius: var(--shape-lg); max-width: 100%; }
.skel-avatar { width: 52px; height: 52px; border-radius: 14px 3px 14px 14px; flex: none; }
.skel-btn { height: 40px; width: 120px; border-radius: var(--shape); }
.skel-card { display: grid; gap: 10px; }
.skel-row { display: flex; gap: 12px; align-items: center; }
.skel-stack { display: grid; gap: 8px; flex: 1; min-width: 0; }
.skeleton { background: var(--surface-2); border-radius: var(--shape-lg); }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 30%, rgba(244, 239, 230, .07) 50%, transparent 70%); animation: skel-scan 1.6s steps(10, end) infinite; }

/* Barra de progreso por segmentos (como la barra de experiencia) */
.progress { --v: 0; position: relative; height: 10px; border-radius: 3px 1px 3px 3px; background: var(--surface-3); overflow: hidden; }
.progress::before { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 1%); background: var(--spark); transition: width var(--dur-3) var(--ease-px); }
.progress::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg) calc(10% - 2px) 10%); }
.progress.ok::before { background: var(--ok); }
.progress.bad::before { background: var(--bad); }
.progress.indeterminate::before { width: 30%; animation: prog-ind 1.4s steps(10, end) infinite; }
@keyframes prog-ind { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.progress-row { display: grid; gap: 6px; }
.progress-row .lbl { display: flex; justify-content: space-between; font: 500 var(--fs-2xs) var(--mono); color: var(--muted); }

/* =====================================================================
   11. Alertas en la página (role="status"; los errores, role="alert")
   ===================================================================== */
.alert { --tone: var(--info); --tone-soft: var(--info-soft); --tone-ink: var(--info-ink);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: var(--shape-lg);
  background: var(--tone-soft); border: var(--bw) solid color-mix(in oklab, var(--tone) 32%, transparent); color: var(--fg); }
.alert.is-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); --tone-ink: var(--ok-ink); }
.alert.is-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); --tone-ink: var(--warn-ink); }
.alert.is-bad { --tone: var(--bad); --tone-soft: var(--bad-soft); --tone-ink: var(--bad-ink); }
.alert .a-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px 2px 9px 9px; background: var(--tone); color: var(--tone-ink); --ico-px: currentColor; }
.alert .a-body { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.alert .a-title { font-weight: 600; font-size: var(--fs-sm); }
.alert .a-text { font-size: var(--fs-sm); color: var(--paper-200); }
.alert .a-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.alert .a-close { width: 32px; height: 32px; }
.alert-banner { border-radius: 0; border-inline: 0; grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px max(16px, env(safe-area-inset-left, 0px)); }

/* =====================================================================
   12. Notificaciones flotantes (como un logro conseguido)
   ===================================================================== */
.notify-stack { position: fixed; z-index: var(--z-toast); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.notify { --tone: var(--spark); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 12px 14px; pointer-events: auto; overflow: hidden;
  background: var(--elev-3-bg); border: var(--bw) solid var(--line-2); border-radius: 14px 4px 14px 14px; box-shadow: var(--elev-3-sh); color: var(--fg);
  animation: notify-in var(--dur-3) var(--ease-px); }
.notify.is-ok { --tone: var(--ok); } .notify.is-warn { --tone: var(--warn); } .notify.is-bad { --tone: var(--bad); } .notify.is-info { --tone: var(--info); }
.notify .n-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px 3px 10px 10px; background: color-mix(in oklab, var(--tone) 18%, var(--surface-3)); color: var(--tone); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 40%, transparent); --ico-px: currentColor; }
.notify .n-ico img, .notify .n-ico canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.notify .n-kicker { font: 500 var(--fs-2xs) var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--tone); }
.notify .n-title { font-weight: 600; font-size: var(--fs-sm); margin-top: 2px; }
.notify .n-text { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.notify .n-actions { display: flex; gap: 6px; margin-top: 8px; }
.notify .n-close { width: 28px; height: 28px; min-height: 28px; margin: -2px -2px 0 0; }
.notify .n-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tone); transform-origin: left; animation: notify-time var(--t, 5s) linear forwards; }
.notify:hover .n-time, .notify:focus-within .n-time { animation-play-state: paused; }
.notify.out { animation: notify-out var(--dur-2) var(--ease) forwards; }
@keyframes notify-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes notify-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes notify-time { to { transform: scaleX(0); } }
.notify-stack.demo { position: relative; right: auto; bottom: auto; width: 100%; pointer-events: auto; }
@media (max-width: 560px) { .notify-stack { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* Bandeja de notificaciones */
.inbox { display: grid; list-style: none; margin: 0; padding: 0; }
.inbox li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 12px 12px 18px; border-radius: 12px 3px 12px 12px; }
.inbox li + li { border-top: var(--bw) solid var(--line); }
.inbox li:hover { background: rgba(244, 239, 230, .03); }
.inbox .unread::before { content: ""; position: absolute; left: 4px; top: 20px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--spark); }
.inbox .when { font: 500 var(--fs-2xs) var(--mono); color: var(--faint); white-space: nowrap; }
.inbox p { margin: 0; font-size: var(--fs-sm); }
.inbox p b { font-weight: 600; }
.inbox .av > * { width: 100%; height: 100%; display: block; }
.inbox .av { width: 36px; height: 36px; border-radius: 10px 3px 10px 10px; background: var(--surface-3); overflow: hidden; image-rendering: pixelated; }

/* =====================================================================
   13. Estados de página: vacío, error, éxito
   El símbolo de Pixelario cambia de ventana según el estado.
   ===================================================================== */
.state { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 20px; border-radius: var(--shape-xl); border: 1.5px dashed var(--line-2); }
.state.solid { border-style: solid; border-color: var(--line); background: var(--surface); }
.state .s-mark { height: 64px; width: auto; color: var(--surface-4); }
.state .s-mark .win { fill: var(--bg); }
.state.is-ok .s-mark { color: var(--fg); } .state.is-ok .s-mark .win { fill: var(--ok); }
.state.is-bad .s-mark { color: var(--fg); } .state.is-bad .s-mark .win { fill: var(--bad); animation: win-err 1.6s steps(2) infinite; }
.state.is-warn .s-mark { color: var(--fg); } .state.is-warn .s-mark .win { fill: var(--warn); }
@keyframes win-err { 50% { fill: var(--surface-3); } }
.state .s-code { font: 500 var(--fs-2xs) var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint); }
.state h3 { margin: 0; font: 800 26px/1.05 var(--display); letter-spacing: -.035em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.state p { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 44ch; }
.state .btn-group { justify-content: center; margin-top: 6px; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 56px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--shape-lg); }
.empty strong { color: var(--fg); display: block; font-size: 16px; margin-bottom: 6px; }

/* Aviso breve heredado (toast() en core.js usa ahora .notify) */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 18px); background: var(--fg); color: var(--bg); padding: 11px 17px; border-radius: 12px 3px 12px 12px; font-weight: 600; font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); z-index: var(--z-toast); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .skel::after, .skeleton::after { animation: none; background: rgba(244, 239, 230, .04); transform: none; }
  .btn.is-loading::before, .btn[aria-busy="true"]::before, .input-wrap.is-loading::after, .spinner::before, .spinner::after, .progress.indeterminate::before { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  .notify .n-time { animation: none; }
}

/* Objetivos táctiles de al menos 24 px en listas de enlaces */
footer ul { gap: 0; }
footer ul a { display: inline-block; padding-block: 4px; }

/* Texto pequeño sobre botones de proveedor: Piedra para mantener 4,5:1 */
.prov .fine { color: var(--muted); }

/* =====================================================================
   14. Pie de página y accesos globales
   ===================================================================== */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--shape); background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
footer .foot-top { padding-block: 56px 32px; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
footer .foot-top .about { display: grid; gap: 14px; align-content: start; }
footer .foot-top .about .tagline { margin: 4px 0 0; font-size: 26px; line-height: 1; color: var(--fg); max-width: none; }
footer .foot-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
footer .foot-cta a { color: inherit; }
footer .foot-cta .btn-pack { color: var(--pack-ink); }
@media (max-width: 960px) { footer .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .foot-top .about { grid-column: 1 / -1; } }
@media (max-width: 760px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* =====================================================================
   15. Navegación global (js/nav.js)
   ≥1100 px: menú completo · 760–1099: menú lateral · <760: menú lateral + barra inferior
   ===================================================================== */
header.nav { view-transition-name: site-nav; }
.hotbar { view-transition-name: hotbar; }
::view-transition-group(site-nav), ::view-transition-group(hotbar) { animation: none; }
::view-transition-old(root) { animation: vt-out .16s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .26s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.nav-bar { gap: 6px; padding: 6px 6px 6px 12px; transition: background var(--dur-2), box-shadow var(--dur-2); }
.nav.scrolled .nav-bar { background: rgba(23, 22, 20, .92); box-shadow: var(--sh-2); }
.nav-links { margin-left: 10px; }
.nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 9px 2px 9px 9px; background: transparent; color: var(--muted); font: 500 var(--fs-sm) var(--body); text-decoration: none; cursor: pointer; position: relative; transition: color var(--dur-1), background var(--dur-1); }
.nav-a:hover, .nav-btn[aria-expanded="true"] { color: var(--fg); background: rgba(244, 239, 230, .05); }
.nav-a[aria-current="page"], .nav-btn[data-current="true"] { color: var(--fg); }
.nav-a[aria-current="page"]::after, .nav-btn[data-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 1px; background: var(--spark); }
.nav-btn .chev { transition: transform var(--dur-2) var(--ease); }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-soon { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px 1px 4px 4px; padding: 2px 4px; }

/* Paneles desplegables */
.nav-panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 10px); left: 0; min-width: 280px; padding: 8px;
  background: var(--elev-3-bg); border: var(--bw) solid var(--line-2); border-radius: 16px 4px 16px 16px; box-shadow: var(--elev-3-sh); animation: menu-in var(--dur-2) var(--ease); }
.nav-panel[hidden] { display: none; }
.nav-panel.end { left: auto; right: 0; }
.nav-item.has-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* puente para el ratón */
.nav-panel.mega { width: min(860px, calc(100vw - 48px)); left: -80px; padding: 18px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1.25fr 1.2fr 1fr; gap: 22px; }
.mega-h { margin: 0 0 8px; font: 500 var(--fs-2xs)/1 var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega-col ul.two { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.mega-col a:not(.tag) { display: block; padding: 7px 8px; margin-inline: -8px; border-radius: 8px 2px 8px 8px; color: var(--fg); text-decoration: none; font-size: var(--fs-sm); }
.mega-col a:not(.tag):hover, .mega-col a:not(.tag):focus-visible { background: var(--surface-3); }
.chips-ul { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.chips-ul .tag { min-height: 28px; }
.mega-cta { position: relative; display: grid; align-content: end; gap: 6px; padding: 16px; border-radius: 14px 3px 14px 14px; color: var(--fg); text-decoration: none; min-height: 170px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--pack) 22%, var(--surface)), var(--surface) 75%); border: var(--bw) solid color-mix(in oklab, var(--pack) 30%, var(--line)); }
.mega-cta b { font: 800 22px/1.05 var(--display); letter-spacing: -.03em; }
.mega-cta span:not(.eyebrow):not(.go) { font-size: var(--fs-xs); color: var(--muted); }
.mega-cta .go { position: absolute; top: 14px; right: 16px; font-size: 18px; transition: transform var(--dur-2) var(--ease); }
.mega-cta:hover .go { transform: translateX(4px); }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-list a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 10px 2px 10px 10px; color: var(--fg); text-decoration: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--surface-3); }
.menu-list a[aria-current="page"] { background: color-mix(in oklab, var(--spark) 12%, var(--surface-2)); }
.menu-list .mi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px 2px 9px 9px; background: var(--surface-3); color: var(--muted); }
.menu-list a:hover .mi { color: var(--fg); --ico-px: var(--spark); }
.menu-list b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.menu-list small { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Buscador (abre el buscador rápido) */
.nav-search-btn { flex: 1 1 200px; max-width: 300px; min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px 0 12px; border: var(--bw) solid var(--line); border-radius: 10px 3px 10px 10px; background: rgba(244, 239, 230, .04); color: var(--muted); font: 400 var(--fs-sm) var(--body); cursor: pointer; text-align: left; transition: border-color var(--dur-1), background var(--dur-1); }
.nav-search-btn:hover { border-color: var(--line-3); color: var(--fg); }
.nav-search-btn .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-btn .kbd { position: static; transform: none; }
.nav-actions { display: flex; gap: 6px; align-items: center; margin-left: 6px; }
.nav-pop { position: relative; display: flex; gap: 6px; align-items: center; }
.nav-bell .counter { position: absolute; top: -4px; right: -4px; }
.nav-menu { display: none; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: var(--bw) solid var(--line-2); background: transparent; border-radius: 11px 3px 11px 11px; padding: 4px 10px 4px 4px; color: var(--fg); font: 600 var(--fs-sm) var(--body); cursor: pointer; }
.user-btn:hover { border-color: var(--line-3); }
.user-btn .ava > * { width: 30px; height: 30px; border-radius: 8px 2px 8px 8px; display: block; image-rendering: pixelated; }
.user-btn .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-panel.account { left: auto; right: 0; width: 290px; }
.acc-head { display: grid; gap: 2px; padding: 8px 10px 12px; border-bottom: var(--bw) solid var(--line); margin-bottom: 6px; }
.acc-head span { font: 500 var(--fs-2xs) var(--mono); color: var(--muted); }
.acc-foot { border-top: var(--bw) solid var(--line); margin-top: 6px; padding-top: 6px; display: flex; justify-content: flex-end; }
.nav-panel.notif { left: auto; right: 0; width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: var(--bw) solid var(--line); }
.np-body { max-height: min(60vh, 440px); overflow: auto; padding: 6px; }
.np-body .inbox a { color: var(--fg); text-decoration: none; }
.np-body .inbox a:hover b { text-decoration: underline; text-decoration-color: var(--spark); }
.np-t { font-size: var(--fs-xs); color: var(--muted); }
.np-ico { display: grid; place-items: center; color: var(--muted); }
.np-ico.is-ok { color: var(--ok); } .np-ico.is-bad { color: var(--bad); } .np-ico.is-warn { color: var(--warn); }
.np-ico > img, .np-ico > canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.np-empty { display: grid; justify-items: center; gap: 12px; padding: 28px 22px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.np-empty p { margin: 0; }
.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: var(--bw) solid var(--line); font-size: var(--fs-xs); }
.np-foot a { color: var(--link); }

/* Migas */
.crumbs-bar { padding-block: 6px 0; }
.crumbs-bar .crumbs { min-height: 28px; }

/* Buscador rápido */
dialog.modal.cmdk { width: min(640px, calc(100vw - 24px)); margin-top: 10vh; margin-bottom: auto; }
.cmdk-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: var(--bw) solid var(--line); }
.cmdk-top .ico { color: var(--muted); width: 20px; height: 20px; }
.cmdk-top input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--fg); font: 400 var(--fs-lg) var(--body); outline: none; }
.cmdk-top input::-webkit-search-cancel-button { display: none; }
.cmdk-list { max-height: min(56vh, 460px); overflow: auto; padding: 8px; }
.cmdk-g { padding: 10px 10px 6px; font: 500 var(--fs-2xs) var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint); }
.cmdk-opt { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px 2px 10px 10px; color: var(--fg); text-decoration: none; }
.cmdk-opt[aria-selected="true"] { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--spark); }
.co-ic, .co-th { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px 2px 9px 9px; background: var(--surface-3); color: var(--muted); }
.co-th > * { width: 24px; height: 24px; image-rendering: pixelated; }
.co-t b { display: block; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-t small { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-k { font: 500 var(--fs-2xs) var(--mono); color: var(--faint); }
.cmdk-empty { display: grid; gap: 4px; padding: 28px 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.cmdk-empty b { color: var(--fg); }
.cmdk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; border-top: var(--bw) solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.cmdk-foot a { margin-left: auto; color: var(--link); }

/* Menú lateral */
dialog.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(380px, 100vw); border-radius: 22px 0 0 22px; border-right: 0; padding: 0; display: none; flex-direction: column; overflow: hidden; }
dialog.drawer[open] { display: flex; animation: drawer-in var(--dur-3) var(--ease); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 10px 18px; }
.dr-search { display: flex; align-items: center; gap: 10px; margin: 4px 14px 10px; min-height: 44px; padding: 0 14px; border: var(--bw) solid var(--line-2); border-radius: 12px 3px 12px 12px; background: var(--surface-2); color: var(--muted); font: 400 var(--fs-sm) var(--body); cursor: pointer; text-align: left; }
.dr-nav { flex: 1; overflow: auto; padding: 0 10px 10px; display: grid; gap: 2px; align-content: start; }
.dr-a, .dr-g > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 10px; border-radius: 12px 3px 12px 12px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: var(--fs-md); cursor: pointer; list-style: none; }
.dr-g > summary::-webkit-details-marker { display: none; }
.dr-a small, .dr-g > summary small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.dr-a:hover, .dr-g > summary:hover { background: rgba(244, 239, 230, .04); }
.dr-a[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--spark); }
.dr-a .ico, .dr-g > summary .ico { color: var(--muted); }
.dr-g[open] > summary .chev { transform: rotate(180deg); }
.dr-sub { display: grid; gap: 1px; padding: 0 0 8px 46px; }
.dr-sub > a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 9px 2px 9px 9px; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.dr-sub > a:hover { color: var(--fg); background: rgba(244, 239, 230, .04); }
.dr-sub > a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
.dr-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.dr-foot { display: grid; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: var(--bw) solid var(--line); }
.hotbar button { position: relative; display: grid; place-items: center; gap: 2px; width: 60px; height: 52px; border: 0; border-radius: 11px 3px 11px 11px; background: transparent; color: var(--muted); font: 500 10px/1 var(--body); cursor: pointer; }
.hotbar button:hover { color: var(--fg); background: rgba(244, 239, 230, .04); }

@media (max-width: 1099px) {
  .nav-links { display: none; }
  .nav-menu { display: inline-flex; }
  .nav-search-btn { max-width: 360px; }
}
@media (max-width: 760px) {
  .nav-search-btn, .nav-up { display: none; }
  .nav-actions { margin-left: auto; }
  .user-btn .nm, .user-btn .chev { display: none; }
  .user-btn { padding: 4px; }
  .mega-grid { grid-template-columns: 1fr; }
  dialog.modal.cmdk { margin-top: 0; }
  .cmdk-foot a { margin-left: 0; }
}
@media (max-width: 400px) { .nav-bar .btn-pack { padding-inline: 12px; } }
@media (max-width: 560px) { dialog.modal.cmdk { width: 100vw; max-width: 100vw; margin: 0 0 auto; border-radius: 0 0 var(--r-xl) var(--r-xl); max-height: 88vh; } }
.kbd { position: static; transform: none; display: inline-block; }

/* =====================================================================
   16. Tarjeta de pack de la biblioteca (.card.pkc)
   La portada manda; encima solo lo que decide la descarga: resolución y edición.
   Debajo: nombre, creador, versiones, descargas y «me gusta», y hasta 3 etiquetas.
   ===================================================================== */
.pkc .img { border-radius: var(--shape-lg); }
.pkc .pk-top { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; justify-content: flex-end; pointer-events: none; }
.pkc .pk-flag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; font: 600 var(--fs-2xs)/1 var(--body); color: var(--ink-950); background: var(--paper-50); border-radius: 7px 2px 7px 7px; box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.pkc .pk-flag .ico { color: var(--indigo-500, #6C5CFF); }
.pkc .pk-demo { background: var(--surface-3); color: var(--fg); }
.pkc .pk-bot { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.pkc .pk-bot .res { position: static; background: rgb(15 14 13 / .82); color: var(--paper-50); border-color: rgb(255 255 255 / .14); backdrop-filter: blur(6px); }
.pkc .pk-ed { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; font: 600 var(--fs-2xs)/1 var(--mono); letter-spacing: .02em; color: var(--paper-50); background: rgb(15 14 13 / .82); border: var(--bw) solid rgb(255 255 255 / .14); border-radius: 6px; backdrop-filter: blur(6px); }
.pkc .pk-bedrock { color: #C9F2DA; }
.pkc .meta { align-items: flex-start; }
.pkc .t { display: grid; gap: 6px; }
.pkc .sub { justify-content: space-between; gap: 8px; }
.pkc .sub .au { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pkc .sub canvas, .pkc .sub img { width: 16px; height: 16px; border-radius: 4px 1px 4px 4px; flex: none; image-rendering: pixelated; }
.pkc .pk-vr { flex: none; color: var(--faint, var(--muted)); font-size: var(--fs-2xs); }
.pkc .pk-stats { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--fg); }
.pkc .pk-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.pkc .pk-stats .ico { color: var(--muted); }
.pkc .pk-tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pkc .pk-tags .tag { min-height: 22px; }
.pkc:hover .pk-stats .ico:first-child { color: var(--spark); }
.pkc .pk-rt { color: var(--warn); }

/* ---------- ventana de acceso (js/auth.js) ---------- */
dialog.au { width: min(440px, calc(100vw - 24px)); }
.au-dlg { gap: 14px; }
.au-tabs { display: flex; width: 100%; }
.au-tabs[hidden] { display: none; }
.au-tabs button { flex: 1; min-height: 38px; font-family: var(--body); font-size: var(--fs-sm); }
.au-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.au section { display: grid; gap: 12px; }
.au section[hidden] { display: none; }
.au-form { display: grid; gap: 12px; }
.au-go { width: 100%; }
.au-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.au-link { background: none; border: 0; padding: 0; min-height: 28px; color: var(--link, var(--indigo-300)); font: inherit; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-link:hover { color: var(--fg); }
.au-pw .input { padding-right: 76px; }
.au-code { font-family: var(--mono); letter-spacing: .3em; font-size: var(--fs-lg); text-align: center; }
.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -4px; }
.au-meter span { height: 4px; border-radius: 2px; background: var(--surface-3); transition: background var(--dur-2); }
.au-meter[data-s="1"] span.on { background: var(--bad); }
.au-meter[data-s="2"] span.on { background: var(--warn); }
.au-meter[data-s="3"] span.on, .au-meter[data-s="4"] span.on { background: var(--ok); }
.au-resend[hidden] { display: none; }
.au-sent { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 8px 0; }
.au-sent p { color: var(--fg); font-size: var(--fs-sm); }
.au-env { width: 56px; height: 40px; border-radius: 8px 3px 8px 8px; background: linear-gradient(155deg, transparent 49%, var(--spark) 50%, transparent 53%), linear-gradient(25deg, transparent 49%, var(--spark) 50%, transparent 53%), var(--surface-3); box-shadow: inset 0 0 0 2px var(--spark); }

/* =====================================================================
   Reacciones (dibujos de 8×8 píxeles propios de Pixelario)
   ===================================================================== */
.rx { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rx-b { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 9px; border-radius: 10px 3px 10px 10px; border: var(--bw) solid var(--line); background: var(--surface-2); color: var(--muted); font: 600 var(--fs-xs) var(--mono); cursor: pointer; transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.rx-b:hover:not(:disabled) { border-color: var(--line-2, var(--line)); color: var(--fg); transform: translateY(-1px); }
.rx-b:focus-visible { outline: 2px solid var(--ring, var(--brand)); outline-offset: 2px; }
.rx-b:disabled { cursor: default; }
.rx-b.is-on { border-color: color-mix(in oklab, var(--pack, var(--brand)) 60%, var(--line)); background: color-mix(in oklab, var(--pack, var(--brand)) 14%, var(--surface-2)); color: var(--fg); }
.rx-g { fill: currentColor; flex: none; }
.rx-encanta { color: #ff5d7a; } .rx-fuego { color: #ff8a3d; } .rx-diamante { color: #5fd8f0; } .rx-risa { color: #ffc247; } .rx-wow { color: #b48cff; }
.rx-sm .rx-b { min-height: 26px; padding: 0 7px; }
.rx-add { position: relative; display: inline-flex; gap: 4px; }
.rx-more .rx-g { color: var(--muted); }
.rx-pick { display: inline-flex; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .rx-b { transition: none; } }