/* NOOXIA · kit bento · marca v2.8.0
   COPIADO por Branding/brand/instalar.mjs — no se edita acá: si algo se ve mal, se corrige
   en el kit de la marca y se vuelve a instalar. */
/* ==========================================================================
   NOOXIA — Kit BENTO v2 · la firma de www.nooxia.com, para webs y apps
   Requiere brand/tokens.css v2.6.0+ cargado ANTES (define --nx-sig-*).
   Montserrat en 400, 500, 600, 700 y 800.

   De dónde sale: 03_listo_produccion/www.nooxia.com/web (style.css, index.html).
   Las recetas de la web se copiaron tal cual; los componentes de app (campos,
   kanban, modal, toast…) se DERIVAN de esas mismas recetas: nada acá es inventado
   por fuera de la firma. Si algo se ve genérico, el error está en este archivo o
   en brand.json → signature, y se corrige ahí, no en la app.

   ⛔ NO NEGOCIABLE
     · El acento lime es PLANO: nunca se degrada.
     · Toda superficie de contenido es base, contraste o acento (la tríada).
     · Botones y chips siempre píldora. Contenedores con radio 32 o 20, nunca 6-12.
     · Una sola píldora destacada por título.
     · No mezclar con .b-* (bold) ni .neo-* (neumórfico).
   ========================================================================== */

/* ============ 0. PÁGINA ============ */
/* Una pieza del kit con el atributo hidden no se muestra, nunca. Cada pieza declara su display
   (flex, inline-flex) y eso le ganaba al [hidden] del navegador: un contador escondido seguía
   diciendo «0» y una capa cerrada seguía tapando la pantalla. */
[class*="bento-"][hidden] { display: none !important; }

/* Cada superficie publica su trío de texto (--bento-text, --bento-muted, --bento-line):
   los textos de adentro lo heredan solos. Así nunca queda texto oscuro sobre una
   card oscura, que es el error que la marca más repitió. */
.bento-page,
.bento-card,
.bento-stat,
.bento-topbar,
.bento-modal,
.bento-drawer,
.bento-column,
.bento-task,
.bento-popover,
.bento-dock {
  --bento-text: var(--nx-sig-base-text);
  --bento-muted: var(--nx-sig-base-muted);
  --bento-line: var(--nx-sig-base-line);
}

.bento-page {
  background: var(--nx-sig-page);
  color: var(--bento-text);
  font-family: var(--nx-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
/* Especificidad de los resets de elementos: tiene que ser EXACTAMENTE la de un elemento
   (0,0,1). Con `.bento-page h3` (0,1,1) le ganaba a `.bento-title` y el título quedaba
   pegado a su párrafo. Con `:where(...)` entero (0,0,0) perdía contra el reset de
   Tailwind (`h1 { font-weight: inherit }`) y en una app Next los títulos perdían el 600
   y el tracking. Con (0,0,1) le gana a Tailwind por orden y cualquier clase le gana a él. */
:where(.bento-page) *,
:where(.bento-page) *::before,
:where(.bento-page) *::after { box-sizing: border-box; }

:where(.bento-page) h1,
:where(.bento-page) h2,
:where(.bento-page) h3,
:where(.bento-page) h4 {
  margin: 0;
  font-weight: var(--nx-sig-heading-weight);
  letter-spacing: var(--nx-sig-heading-tracking);
  line-height: var(--nx-sig-heading-leading);
}
:where(.bento-page) p { margin: 0; }
:where(.bento-page) a { color: inherit; text-decoration: none; }

.bento-container {
  width: 100%;
  max-width: var(--nx-sig-container);
  margin: 0 auto;
  padding: var(--nx-sig-page-pad);
}
.bento-container--wide { max-width: var(--nx-sig-container-wide); }
/* Controles nativos (calendario de un campo de fecha, barras de scroll) en el tema de la página. */
.bento-page { color-scheme: light; }
:root[data-theme="dark"] .bento-page { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bento-page { color-scheme: dark; } }

/* ============ 1. TIPOGRAFÍA ============ */
/* Los títulos llevan la firma en la clase y no solo en el reset de .bento-page: una app que
   adopta el kit de a una pantalla no tiene .bento-page en el body y su propio reset los
   dejaba en 700 sin tracking (inmobiliaria.nooxia.com, 2026-09-22). */
.bento-h1, .bento-h2, .bento-title, .bento-title--sm {
  font-weight: var(--nx-sig-heading-weight);
  letter-spacing: var(--nx-sig-heading-tracking);
  line-height: var(--nx-sig-heading-leading);
}
.bento-h1 { font-size: var(--nx-sig-h1); }
.bento-h2 { font-size: var(--nx-sig-h2); }
.bento-h2--lg { font-size: var(--nx-sig-h2-lg); }
.bento-title { font-size: var(--nx-sig-card-title); margin-bottom: 16px; }
.bento-title--sm { font-size: var(--nx-sig-card-title-sm); margin-bottom: 8px; }
.bento-lead { font-size: var(--nx-sig-lead); color: var(--bento-muted); }
.bento-p { font-size: var(--nx-sig-body); line-height: var(--nx-sig-body-leading); color: var(--bento-muted); }
.bento-small { font-size: var(--nx-sig-small); color: var(--bento-muted); }
.bento-strong { font-weight: 600; color: var(--bento-text); }
/* Un nombre o una dirección sin espacios ni guiones no tiene dónde cortarse y estira la
   página entera (pasó en el taller de inmobiliaria: 835px en un teléfono de 390). Los
   bloques de texto del kit la cortan. */
.bento-h1, .bento-h2, .bento-title, .bento-title--sm, .bento-lead, .bento-p, .bento-small,
.bento-row__title, .bento-row__meta, .bento-task__title, .bento-task__meta,
.bento-stat__label, .bento-menu__item { overflow-wrap: break-word; }

/* Rótulo en mayúsculas. Con .bento-dot delante indica un estado. */
.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--nx-sig-eyebrow-tracking);
  color: var(--bento-muted);
}
.bento-eyebrow--strong { color: var(--bento-text); }

.bento-dot {
  display: inline-block;
  vertical-align: 0.05em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bento-muted);
}
.bento-dot--accent   { background: var(--nx-sig-accent-fill); box-shadow: 0 0 0 1px var(--nx-sig-accent-edge); }
.bento-dot--contrast { background: var(--nx-sig-contrast-lo); box-shadow: 0 0 0 1px var(--nx-sig-contrast-edge); }
.bento-dot--danger   { background: var(--nx-sig-danger); }
.bento-card--accent .bento-dot--accent { background: var(--nx-sig-accent-text); box-shadow: none; }

/* Ícono del set dentro de un texto: <svg class="bento-icono"><use href="…/iconos.svg#i-…"/></svg>.
   Los símbolos del sprite no traen trazo propio, así que el trazo sale de acá; mide como la
   letra que lo rodea y toma su color. Reemplaza a los emojis que hacían de ícono. */
.bento-icono {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bento-icono--lg { width: 32px; height: 32px; vertical-align: middle; }

/* Número decorativo de paso: SIEMPRE con aria-hidden; el paso real lo dice el título. */
.bento-step {
  font-size: var(--nx-sig-step);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--nx-sig-accent-fill);
}
.bento-card--contrast .bento-step { color: var(--nx-sig-contrast-text); opacity: .2; }
.bento-card--accent .bento-step { color: var(--nx-sig-accent-text); opacity: .3; }

/* ============ 2. SUPERFICIES — LA TRÍADA ============ */
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--nx-sig-radius);
  padding: var(--nx-sig-pad);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--bento-text);
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
}
.bento-card--contrast {
  --bento-text: var(--nx-sig-contrast-text);
  --bento-muted: var(--nx-sig-contrast-muted);
  --bento-line: var(--nx-sig-contrast-line);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  border-color: var(--nx-sig-contrast-edge);
  box-shadow: var(--nx-sig-contrast-shadow);
}
/* El acento es PLANO: el degradado es solo para superficies neutras. */
.bento-card--accent {
  --bento-text: var(--nx-sig-accent-text);
  --bento-muted: var(--nx-sig-accent-muted);
  --bento-line: var(--nx-sig-accent-line);
  background: var(--nx-sig-accent-fill);
  border-color: var(--nx-sig-accent-edge);
  box-shadow: var(--nx-sig-accent-shadow);
}
.bento-card--lg { padding: var(--nx-sig-pad-lg); }
.bento-card--sm {
  border-radius: var(--nx-sig-radius-sm);
  padding: var(--nx-sig-pad-sm);
  box-shadow: var(--nx-sig-base-shadow-sm);
}
.bento-card--sm.bento-card--contrast { box-shadow: var(--nx-sig-contrast-shadow-sm); }
.bento-card--sm.bento-card--accent { box-shadow: var(--nx-sig-accent-shadow-sm); }
.bento-card--clip { overflow: hidden; }

/* Card clickeable completa: se levanta como un botón. */
a.bento-card, button.bento-card { cursor: pointer; text-align: left; font: inherit;
  transition: transform var(--nx-dur-base) var(--nx-ease-standard); }
a.bento-card:hover, button.bento-card:hover { transform: translateY(var(--nx-sig-lift)); }

/* ============ 3. GRILLA Y RITMO ============ */
.bento-grid { display: grid; gap: var(--nx-sig-gap); }
.bento-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-row-2 { grid-row: span 2; }

.bento-section { margin-bottom: var(--nx-sig-section); }
.bento-section-header { margin-bottom: var(--nx-sig-header-gap); }
.bento-section-header--center { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
.bento-section-header .bento-eyebrow { margin-bottom: 16px; }
.bento-section-header .bento-lead { margin-top: 16px; }

.bento-stack { display: flex; flex-direction: column; gap: 16px; }
/* Un título dentro de una fila flex no lleva margen abajo: lo alinea la fila. */
.bento-spread > :is(.bento-title, .bento-title--sm),
.bento-cluster > :is(.bento-title, .bento-title--sm) { margin-bottom: 0; }
.bento-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Envuelve: si el contenido no entra, la acción baja a la línea siguiente en vez de
   aplastar el texto en una columna finita (el título de a una palabra por línea en móvil). */
.bento-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
/* El bloque de texto de una fila: crece, y cuando queda menos de 16rem cede la línea. */
.bento-grow { flex: 1 1 16rem; min-width: 0; }
.bento-push { margin-top: auto; }

/* ============ 4. PÍLDORA DESTACADA ============ */
/* El gesto más reconocible de la marca: UNA palabra clave del título, rotada -2°. */
.bento-highlight {
  display: inline-block;
  padding: 4px 20px;
  border-radius: var(--nx-radius-pill);
  transform: rotate(-2deg);
  background: var(--nx-sig-accent-fill);
  color: var(--nx-sig-accent-text);
  border: 1px solid var(--nx-sig-accent-edge);
  box-shadow: var(--nx-sig-pill-accent-shadow);
}
.bento-highlight--contrast {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  border-color: var(--nx-sig-contrast-edge);
  box-shadow: var(--nx-sig-pill-contrast-shadow);
}
.bento-highlight--sm { padding: 4px 12px; font-size: var(--nx-sig-small); }

/* ============ 5. BOTONES TÁCTILES ============ */
.bento-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: var(--nx-sig-button-pad-y) var(--nx-sig-button-pad-x);
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--nx-sig-btn-contrast-edge);
  font-family: inherit;
  font-size: var(--nx-sig-button);
  font-weight: var(--nx-sig-button-weight);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  box-shadow: var(--nx-sig-btn-contrast-rest);
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard),
              box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-btn:hover  { transform: translateY(var(--nx-sig-lift)); box-shadow: var(--nx-sig-btn-contrast-hover); }
.bento-btn:active { transform: translateY(var(--nx-sig-press)); box-shadow: var(--nx-sig-btn-contrast-press); }
.bento-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.bento-btn--accent {
  background: var(--nx-sig-accent-fill);
  color: var(--nx-sig-accent-text);
  border-color: var(--nx-sig-accent-edge);
  box-shadow: var(--nx-sig-btn-accent-rest);
}
.bento-btn--accent:hover  { box-shadow: var(--nx-sig-btn-accent-hover); }
.bento-btn--accent:active { box-shadow: var(--nx-sig-btn-accent-press); }

.bento-btn--base {
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--nx-sig-base-text);
  border-color: var(--nx-sig-btn-base-edge);
  box-shadow: var(--nx-sig-btn-base-rest);
}
.bento-btn--base:hover  { box-shadow: var(--nx-sig-btn-base-hover); }
.bento-btn--base:active { box-shadow: var(--nx-sig-btn-base-press); }

.bento-btn--sm { min-height: 44px; padding: var(--nx-sig-chip-pad-y) 16px; font-size: var(--nx-sig-small); }
.bento-btn--sm svg { width: 16px; height: 16px; }
.bento-btn--lg { padding: 20px 40px; font-size: var(--nx-sig-lead); }
.bento-btn--block { width: 100%; }

.bento-btn:disabled,
.bento-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* Enlace de texto (la navegación de la web). */
.bento-link {
  color: var(--bento-muted);
  font-weight: var(--nx-sig-nav-weight);
  font-size: var(--nx-sig-nav);
  transition: color var(--nx-dur-fast) var(--nx-ease-standard);
  cursor: pointer;
}
.bento-link:hover { color: var(--bento-text); }

/* ============ 6. BOTÓN CIRCULAR DE ACCIÓN ============ */
.bento-action {
  width: var(--nx-sig-action);
  height: var(--nx-sig-action);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--nx-sig-btn-base-edge);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--nx-sig-base-text);
  box-shadow: var(--nx-sig-action-base);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard),
              box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-action svg { width: 20px; height: 20px; }
.bento-action:hover  { transform: translateY(var(--nx-sig-press)); box-shadow: var(--nx-sig-action-base-hover); }
.bento-action:active { transform: translateY(var(--nx-sig-press-action)); box-shadow: var(--nx-sig-action-press); }

.bento-card--contrast .bento-action,
.bento-action--contrast {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  border-color: var(--nx-sig-btn-contrast-edge);
  box-shadow: var(--nx-sig-action-contrast);
}
.bento-card--accent .bento-action {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-accent-fill);
  border-color: var(--nx-sig-btn-contrast-edge);
  box-shadow: var(--nx-sig-action-accent);
}
.bento-action--corner { position: absolute; top: var(--nx-sig-pad); right: var(--nx-sig-pad); }
.bento-card--sm .bento-action--corner { top: var(--nx-sig-pad-sm); right: var(--nx-sig-pad-sm); }
.bento-action--sm { width: 44px; height: 44px; }
.bento-action--sm svg { width: 16px; height: 16px; }

/* ============ 7. DISCOS ============ */
.bento-disc {
  width: var(--nx-sig-disc);
  height: var(--nx-sig-disc);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nx-sig-accent-fill);
  color: var(--nx-sig-accent-text);
}
.bento-disc svg { width: 50%; height: 50%; }
.bento-disc--sm { width: var(--nx-sig-disc-sm); height: var(--nx-sig-disc-sm); }
.bento-disc--lg { width: var(--nx-sig-disc-lg); height: var(--nx-sig-disc-lg); }
.bento-card--accent .bento-disc { background: var(--nx-sig-accent-text); color: var(--nx-sig-accent-fill); }
.bento-disc--contrast {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
}
.bento-disc--danger { background: var(--nx-sig-danger-tint); color: var(--nx-sig-danger); }
.bento-disc--muted { background: var(--bento-line); color: var(--bento-muted); }

/* ============ 8. LISTA DE FEATURES ============ */
.bento-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bento-list > li { display: flex; align-items: center; gap: 12px; font-size: var(--nx-sig-list); font-weight: 500; }
.bento-list--rich > li { align-items: flex-start; }
.bento-list--rich > li .bento-disc { margin-top: 4px; }
.bento-list--rich strong { display: block; margin-bottom: 4px; font-weight: 600; }
.bento-list--rich > li > div > span { display: block; font-size: var(--nx-sig-nav); font-weight: 400; color: var(--bento-muted); }

/* ============ 9. ESTADÍSTICAS ============ */
/* La tarjeta de estadística de la web es PLANA: sin degradado ni sombra. */
.bento-stat {
  border-radius: var(--nx-sig-radius-sm);
  padding: var(--nx-sig-pad-sm);
  background: var(--nx-sig-base-hi);
  color: var(--bento-text);
}
.bento-stat--contrast {
  --bento-text: var(--nx-sig-contrast-text);
  --bento-muted: var(--nx-sig-contrast-muted);
  background: var(--nx-sig-contrast-lo);
}
.bento-stat__value {
  display: block;
  font-size: var(--nx-sig-stat);
  font-weight: 600;
  letter-spacing: var(--nx-sig-heading-tracking);
  line-height: 1.1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.bento-stat__label { font-size: var(--nx-sig-stat-label); font-weight: 500; color: var(--bento-muted); }

/* Número de reloj: Montserrat con cifras tabulares, nunca monospace. */
.bento-timer {
  font-size: var(--nx-sig-stat);
  font-weight: 700;
  letter-spacing: var(--nx-sig-heading-tracking);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bento-timer--xl { font-size: var(--nx-sig-step); }

/* ============ 10. BARRA SUPERIOR FLOTANTE ============ */
.bento-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 8px 8px 32px;
  margin-bottom: var(--nx-sig-header-gap);
  border-radius: var(--nx-radius-pill);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
}
.bento-topbar--sticky { position: sticky; top: 16px; z-index: var(--nx-sig-z-sticky); }
/* Lado derecho de la barra: estado, selector, tema, avatar. */
.bento-topbar__end { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Envoltorio de lo que sobra en móvil (el chip de estado, el avatar). En escritorio no existe. */
.bento-desktop-only { display: contents; }
.bento-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; font-weight: 700; letter-spacing: var(--nx-sig-heading-tracking); }
/* El logo casi siempre es un link al inicio: sin .bento-page alrededor salía con el azul y el
   subrayado del navegador. */
a.bento-logo { color: var(--bento-text); text-decoration: none; }
/* Cualquier superficie del kit que sea un link hereda el color de su texto, no el azul del
   navegador: sin .bento-page alrededor, el reset de <a> no existe. */
a.bento-card, a.bento-media, a.bento-task, a.bento-stat, a.bento-chip, a.bento-menu__item,
a.bento-row, a.bento-action { color: inherit; text-decoration: none; }
.bento-logo img { height: 24px; display: block; }
/* El logo nunca se achica: en una barra llena de secciones el isotipo es un elemento flexible
   más y se encogía hasta desaparecer (inmobiliaria, cuando la barra sumó Contabilidad). */
.bento-logo, .bento-logo > svg, .bento-logo > img { flex-shrink: 0; }

.bento-nav { display: flex; align-items: center; gap: 32px; }
/* En apps la navegación marca la sección actual con una píldora de contraste. */
.bento-nav--pills { gap: 4px; }
.bento-nav--pills .bento-navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--nx-radius-pill);
  color: var(--bento-muted);
  font-size: var(--nx-sig-nav);
  font-weight: var(--nx-sig-nav-weight);
  transition: color var(--nx-dur-fast) var(--nx-ease-standard), background var(--nx-dur-fast) var(--nx-ease-standard);
}
/* Una sección con submenú es un botón, no un link: sin fondo ni borde del navegador. */
button.bento-navlink { border: 0; background: none; font: inherit; cursor: pointer; }
.bento-nav--pills .bento-navlink:hover { color: var(--bento-text); }
.bento-nav--pills .bento-navlink[aria-current="page"],
.bento-nav--pills .bento-navlink.is-active {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  font-weight: 600;
  box-shadow: var(--nx-sig-btn-contrast-rest);
}

/* ============ 11. CHIPS Y CONTADORES ============ */
/* Regla de estado: el color va al punto o al relleno; las letras quedan en grises. */
.bento-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--nx-sig-chip-pad-y) 12px;
  border-radius: var(--nx-radius-pill);
  background: var(--bento-line);
  color: var(--bento-text);
  font-size: var(--nx-sig-small);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.bento-chip--accent { background: var(--nx-sig-accent-fill); color: var(--nx-sig-accent-text); }
.bento-chip--accent .bento-dot--accent { background: var(--nx-sig-accent-text); box-shadow: none; }
.bento-chip--contrast {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
}
.bento-chip--danger { background: var(--nx-sig-danger-tint); color: var(--bento-text); }
.bento-chip--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--bento-line); }

.bento-count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nx-radius-pill);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bento-card--contrast .bento-count { background: var(--nx-sig-accent-fill); color: var(--nx-sig-accent-text); }
/* Un chip de contraste sobre una card de contraste desaparece: se invierte a base. */
.bento-card--contrast .bento-chip--contrast {
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--nx-sig-base-text);
}
/* Card anidada en una de contraste: sin sombra. Cualquier sombra clara deja un halo alrededor. */
.bento-card--contrast .bento-card { box-shadow: none; }

.bento-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  box-shadow: var(--nx-sig-field-shadow);
  color: var(--bento-muted);
  /* <kbd> trae monospace del navegador y del reset de Tailwind: la marca no usa monospace
     fuera de bloques de código. Antes lo parcheaba cada app (PULSE lo tuvo en marca.css). */
  font-family: inherit;
  font-size: var(--nx-sig-eyebrow);
  font-weight: 600;
  white-space: nowrap;
}

/* ============ 12. CAMPOS DE FORMULARIO ============ */
/* La web no tiene campos: se derivan del botón base presionado (hundido en la superficie). */
.bento-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--nx-sig-label);
  font-weight: 600;
  color: var(--bento-text);
}
.bento-field {
  width: 100%;
  height: var(--nx-sig-field-height);
  padding: 0 var(--nx-sig-field-pad-x);
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--nx-sig-field-edge);
  background: var(--nx-sig-field-bg);
  box-shadow: var(--nx-sig-field-shadow);
  color: var(--nx-sig-base-text);
  font-family: inherit;
  font-size: 1rem;
  transition: box-shadow var(--nx-dur-fast) var(--nx-ease-standard), border-color var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-field::placeholder { color: var(--nx-sig-base-muted); opacity: 1; }
.bento-field:focus {
  outline: none;
  border-color: var(--nx-sig-accent-edge);
  box-shadow: var(--nx-sig-field-shadow), var(--nx-sig-field-focus);
}
.bento-field[aria-invalid="true"] {
  border-color: var(--nx-sig-danger);
  box-shadow: var(--nx-sig-field-shadow), 0 0 0 3px var(--nx-sig-danger-tint);
}
textarea.bento-field {
  height: auto;
  min-height: 120px;
  padding: 16px var(--nx-sig-field-pad-x);
  border-radius: var(--nx-sig-radius-sm);
  line-height: var(--nx-sig-body-leading);
  resize: vertical;
}
select.bento-field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
}
:root[data-theme="dark"] select.bento-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.bento-help { margin-top: 8px; font-size: var(--nx-sig-small); color: var(--bento-muted); }
.bento-help--danger { color: var(--nx-sig-danger); }

/* Interruptor: riel hundido, perilla táctil. Encendido = riel de acento. */
.bento-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.bento-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bento-switch__track {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: var(--nx-radius-pill);
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  box-shadow: var(--nx-sig-field-shadow);
  transition: background var(--nx-dur-base) var(--nx-ease-standard);
}
.bento-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  box-shadow: var(--nx-sig-btn-base-rest);
  transition: transform var(--nx-dur-base) var(--nx-ease-standard);
}
.bento-switch input:checked + .bento-switch__track { background: var(--nx-sig-accent-fill); border-color: var(--nx-sig-accent-edge); }
.bento-switch input:checked + .bento-switch__track::after {
  transform: translateX(20px);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  box-shadow: var(--nx-sig-btn-contrast-rest);
}
.bento-switch input:focus-visible + .bento-switch__track { box-shadow: var(--nx-sig-field-shadow), var(--nx-sig-field-focus); }

/* Casilla de verificación: caja hundida como el campo; marcada, relleno de acento plano. */
.bento-check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--bento-text); font-size: var(--nx-sig-small); font-weight: 500; line-height: 1.5; }
.bento-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bento-check > span:last-child { min-width: 0; padding-top: 2px; }
.bento-check__box {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  box-shadow: var(--nx-sig-field-shadow);
  color: var(--nx-sig-accent-text);
  transition: background var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-check__box svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.bento-check input:checked + .bento-check__box { background: var(--nx-sig-accent-fill); border-color: var(--nx-sig-accent-edge); box-shadow: none; }
.bento-check input:checked + .bento-check__box svg { opacity: 1; }
.bento-check input:focus-visible + .bento-check__box { box-shadow: var(--nx-sig-field-shadow), var(--nx-sig-field-focus); }
/* Una sola opción entre varias (un radio): la misma casilla, redonda y con punto. */
/* Varias casillas cortas en una fila (comodines, servicios): la casilla se ve como píldora
   y no ocupa un renglón entero. */
.bento-check--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 16px 4px 8px;
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--nx-sig-btn-base-edge);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  box-shadow: var(--nx-sig-btn-base-rest);
}
.bento-check--inline:has(input:checked) {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  border-color: var(--nx-sig-btn-contrast-edge);
}
.bento-check--inline > span:last-child { padding-top: 0; }
/* Una sola opción entre varias (un radio): la misma casilla, redonda. Marcada muestra el mismo
   check que una casilla común; con un punto ADEMÁS del check se veían las dos cosas. */
.bento-check--radio .bento-check__box { border-radius: 50%; }

/* ============ 13. PESTAÑAS SEGMENTADAS ============ */
/* Riel hundido con la opción activa en relieve: el gesto táctil de la marca. */
.bento-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--nx-radius-pill);
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  box-shadow: var(--nx-sig-field-shadow);
}
/* Si las opciones no entran (seis pasos en un celular), el segmentado se desliza de
   costado: nunca se parte en dos líneas ni ensancha la página. Con overflow, un hijo de
   una columna flexible pierde su alto mínimo y un modal lo aplastaba: no se encoge. */
.bento-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.bento-segmented::-webkit-scrollbar { display: none; }
.bento-segmented > button,
.bento-segmented > a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--nx-radius-pill);
  background: transparent;
  color: var(--nx-sig-base-muted);
  font-family: inherit;
  font-size: var(--nx-sig-small);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--nx-dur-fast) var(--nx-ease-standard), box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-segmented > [aria-selected="true"],
.bento-segmented > .is-active {
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border-color: var(--nx-sig-btn-base-edge);
  color: var(--nx-sig-base-text);
  box-shadow: var(--nx-sig-btn-base-rest);
}

/* Opción seleccionable (elegir a una persona, un filtro): píldora táctil que al
   elegirse pasa a contraste. En un grupo excluyente, aria-pressed en cada una. */
.bento-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--nx-sig-btn-base-edge);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--nx-sig-base-text);
  box-shadow: var(--nx-sig-btn-base-rest);
  font-family: inherit;
  font-size: var(--nx-sig-small);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard), box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-choice:hover { transform: translateY(var(--nx-sig-lift)); box-shadow: var(--nx-sig-btn-base-hover); }
.bento-choice[aria-pressed="true"] {
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  border-color: var(--nx-sig-btn-contrast-edge);
  box-shadow: var(--nx-sig-btn-contrast-rest);
}
.bento-choice svg { width: 16px; height: 16px; flex-shrink: 0; }
.bento-choice:focus-visible { outline: 3px solid var(--nx-sig-accent-edge); outline-offset: 3px; }

/* Campo compacto: para barras y filtros, donde 48px pesa demasiado. */
.bento-field--compact { width: auto; height: 44px; padding-left: 16px; font-size: var(--nx-sig-small); }
select.bento-field--compact { padding-right: 48px; background-position: right 16px center; }

.bento-tabular { font-variant-numeric: tabular-nums; }

/* ============ 14. FILAS DE LISTA ============ */
.bento-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bento-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bento-line);
}
.bento-row:last-child { border-bottom: 0; }
.bento-row__index { min-width: 24px; font-weight: 700; color: var(--bento-muted); font-variant-numeric: tabular-nums; }
.bento-row__main { flex: 1; min-width: 0; }
.bento-row__title { max-width: 100%; font-weight: 600; color: var(--bento-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-row__meta { font-size: var(--nx-sig-small); color: var(--bento-muted); }
/* Algo más de la fila (una nota, un aviso anidado) va en su propia línea, debajo. Sin esto,
   un bloque ancho dentro de la fila aplasta el nombre a "D…" y se parte en una columna finita. */
.bento-row:has(> .bento-row__extra) { flex-wrap: wrap; }
.bento-row__extra { flex: 1 1 100%; min-width: 0; }
/* Lista densa de pares dato–cifra (un desglose por tipo, una ficha técnica): la fila de 16px
   deja once renglones en 600px de alto. La cifra va a la derecha con bento-tabular. */
.bento-rows--compact .bento-row { padding: 8px 0; gap: 12px; font-size: var(--nx-sig-small); }
.bento-rows--compact .bento-row__title { font-weight: 500; }

/* ============ 14b. TABLA DE DATOS ============ */
/* Una tabla no es una grilla de cards: se lee en filas. El encabezado es un rótulo en
   mayúsculas, la fila se separa con una línea y se ilumina al pasar por encima, y los
   números van tabulares para que las comas queden en la misma columna. En pantallas
   angostas la tabla scrollea de costado dentro de su marco, sin estirar la página. */
.bento-table-wrap { width: 100%; overflow-x: auto; }
.bento-table { width: 100%; border-collapse: collapse; font-size: var(--nx-sig-small); }
.bento-table th {
  padding: 8px 16px;
  text-align: left;
  white-space: nowrap;
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--nx-sig-eyebrow-tracking);
  color: var(--bento-muted);
  border-bottom: 1px solid var(--bento-line);
}
.bento-table td {
  padding: 16px;
  border-bottom: 1px solid var(--bento-line);
  color: var(--bento-text);
  vertical-align: top;
}
.bento-table tbody tr:last-child td { border-bottom: 0; }
.bento-table tbody tr { transition: background var(--nx-dur-fast) var(--nx-ease-standard); }
.bento-table tbody tr:hover { background: var(--nx-sig-field-bg); }
.bento-table td--num, .bento-table .bento-tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============ 15. TABLERO KANBAN ============ */
/* position: relative: lo absoluto de adentro (un texto solo para lector) queda recortado por
   el scroll lateral en vez de estirar la página. */
.bento-board {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--nx-sig-gap);
  align-items: start;
  overflow-x: auto;
  padding: 8px 4px 24px;
}
/* Radios concéntricos: columna de 32 con tareas de 20 → 12px de padding (32 − 12 = 20).
   Con 20px la tarea queda desalineada del borde y no entran sus dos acciones en una línea. */
.bento-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  padding: 12px;
  border-radius: var(--nx-sig-radius);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
}
.bento-column__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px; }
/* La columna protagonista (lo que está en curso) va en contraste; sus tareas siguen en base. */
.bento-column--contrast {
  --bento-text: var(--nx-sig-contrast-text);
  --bento-muted: var(--nx-sig-contrast-muted);
  --bento-line: var(--nx-sig-contrast-line);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  border-color: var(--nx-sig-contrast-edge);
  box-shadow: var(--nx-sig-contrast-shadow);
  color: var(--bento-text);
}
.bento-column--contrast .bento-count { background: var(--nx-sig-accent-fill); color: var(--nx-sig-accent-text); }
/* Pozo hundido: el lugar vacío dentro de una superficie (columna sin tareas, lista sin
   ítems, un dato secundario). Es la misma receta del campo de formulario. */
.bento-well,
.bento-column__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-radius: var(--nx-sig-radius-sm);
  background: var(--nx-sig-field-bg);
  box-shadow: var(--nx-sig-field-shadow);
  color: var(--nx-sig-base-muted);
  font-size: var(--nx-sig-small);
  font-weight: 500;
  text-align: center;
  padding: 24px;
}
/* Sobre una card de contraste el pozo claro quedaba como un agujero de luz: se hunde en el
   tono bajo de la misma card. Como la card se invierte con el tema, el pozo también. */
.bento-card--contrast .bento-well,
.bento-column--contrast .bento-column__empty {
  background: var(--nx-sig-contrast-lo);
  box-shadow: var(--nx-sig-contrast-well);
  color: var(--bento-muted);
}

.bento-task {
  /* La tarea es base aunque viva en una columna de contraste: reinicia los colores heredados. */
  --bento-text: var(--nx-sig-base-text);
  --bento-muted: var(--nx-sig-base-muted);
  --bento-line: var(--nx-sig-base-line);
  color: var(--bento-text);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--nx-sig-gap);
  border-radius: var(--nx-sig-radius-sm);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow-sm);
}
.bento-task__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bento-task__title { font-size: var(--nx-sig-body); font-weight: 600; line-height: 1.3; color: var(--bento-text); }
.bento-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bento-line);
  font-size: var(--nx-sig-small);
  color: var(--bento-muted);
}
/* Pozo en línea: un dato secundario dentro de una fila o un panel, alineado a la izquierda. */
.bento-well--inline {
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 12px 20px;
  text-align: left;
}

/* "Ver más" dentro de una tarea o un pozo: el detalle que no hace falta a primera vista. */
.bento-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: var(--nx-sig-small);
  font-weight: 600;
  color: var(--bento-text);
}
.bento-disclosure > summary::-webkit-details-marker { display: none; }
.bento-disclosure > summary svg { width: 16px; height: 16px; transition: transform var(--nx-dur-fast) var(--nx-ease-standard); }
.bento-disclosure[open] > summary svg { transform: rotate(180deg); }
.bento-disclosure > summary:focus-visible { outline: 3px solid var(--nx-sig-accent-edge); outline-offset: 3px; border-radius: 8px; }

/* Estado de una card cualquiera: al borde, nunca al fondo ni a las letras. */
.bento-edge--accent   { border: 2px solid var(--nx-sig-accent-edge); }
.bento-edge--contrast { border: 2px solid var(--nx-sig-contrast-lo); }
.bento-edge--danger   { border: 2px solid var(--nx-sig-danger); }

/* Estado de la tarea: al borde, nunca a las letras. */
.bento-task--focus   { border: 2px solid var(--nx-sig-accent-edge); }
.bento-task--review  { border: 2px solid var(--nx-sig-contrast-lo); }
.bento-task--blocked { border: 2px solid var(--nx-sig-danger); }

/* ============ 16. AVATARES ============ */
.bento-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--nx-sig-base-hi);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  overflow: hidden;
}
/* El avatar que abre el menú de la cuenta es un botón: 44px táctiles y el relieve de un
   botón de acción, que se hunde al apretarlo. */
button.bento-avatar {
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--nx-sig-action-contrast);
  transition: transform var(--nx-dur-fast) var(--nx-ease-standard), box-shadow var(--nx-dur-fast) var(--nx-ease-standard);
}
button.bento-avatar:hover  { transform: translateY(var(--nx-sig-press)); }
button.bento-avatar:active { transform: translateY(var(--nx-sig-press-action)); box-shadow: var(--nx-sig-action-press); }
button.bento-avatar:focus-visible { outline: 3px solid var(--nx-sig-accent-edge); outline-offset: 2px; }
.bento-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bento-avatar--lg { width: 48px; height: 48px; font-size: var(--nx-sig-small); }
.bento-avatar--accent { background: var(--nx-sig-accent-fill); color: var(--nx-sig-accent-text); }
.bento-avatar-stack { display: inline-flex; }
.bento-avatar-stack > * + * { margin-left: -12px; }

/* ============ 17. PROGRESO ============ */
.bento-progress {
  height: 12px;
  border-radius: var(--nx-radius-pill);
  background: var(--nx-sig-field-bg);
  border: 1px solid var(--nx-sig-field-edge);
  box-shadow: var(--nx-sig-field-shadow);
  overflow: hidden;
}
.bento-progress > span { display: block; height: 100%; border-radius: var(--nx-radius-pill); background: var(--nx-sig-accent-fill); }
/* Sobre la card de acento, lime sobre lime no se ve: riel y relleno pasan a tinta. */
.bento-card--accent .bento-progress { background: var(--nx-sig-accent-line); border-color: transparent; box-shadow: none; }
.bento-card--accent .bento-progress > span { background: var(--nx-sig-accent-text); }

/* ============ 16b. ZONA PARA SOLTAR ARCHIVOS ============ */
/* Un pozo hundido con borde punteado: se ve que ahí se suelta algo. Al arrastrar encima
   (.is-over, que pone la app) se ilumina con el acento. */
.bento-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 32px 24px;
  border-radius: var(--nx-sig-radius-sm);
  background: var(--nx-sig-field-bg);
  border: 2px dashed var(--nx-sig-base-line);
  box-shadow: var(--nx-sig-field-shadow);
  color: var(--bento-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--nx-dur-fast) var(--nx-ease-standard), background var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-dropzone:hover,
.bento-dropzone:focus-visible,
.bento-dropzone.is-over { border-color: var(--nx-sig-accent-fill); }
.bento-dropzone .bento-disc { margin-bottom: 8px; }

/* ============ 17b. IMAGEN Y MAPA EN UNA CARD ============ */
/* La foto de una propiedad, una portada o un mapa, con el radio de la card chica y sin
   borde propio. La imagen llena el marco sin deformarse (object-fit). --map da alto fijo a
   un mapa (Leaflet, Mapbox) que no tiene alto propio. */
.bento-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--nx-sig-radius-sm);
  overflow: hidden;
  background: var(--nx-sig-field-bg);
}
.bento-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento-media > .bento-chip { position: absolute; top: 16px; left: 16px; }
.bento-media--map { aspect-ratio: auto; min-height: 320px; isolation: isolate; }
/* --fill: en una card que la grilla estira (la destacada al lado de un bloque alto), la foto
   ocupa todo el alto que sobra en vez de dejar un hueco debajo del texto. Nunca baja de 240px. */
.bento-media--fill { aspect-ratio: auto; flex: 1 1 240px; min-height: 240px; }
/* Miniatura de una galería: más baja y clickeable (un botón sin borde ni relleno propio). */
.bento-media--thumb { aspect-ratio: 16 / 9; }
button.bento-media { padding: 0; border: 0; cursor: pointer; }
button.bento-media:hover > img { transform: scale(1.04); }
.bento-media > img { transition: transform var(--nx-dur-base) var(--nx-ease-standard); }
.bento-card > .bento-media:first-child { margin-bottom: 20px; }
/* Los controles de zoom de Leaflet vienen rectangulares y planos: dentro del marco de mapa
   toman el botón circular del kit. */
.bento-media--map .leaflet-bar { border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 8px; }
.bento-media--map .leaflet-bar a,
.bento-media--map .leaflet-bar a:first-child,
.bento-media--map .leaflet-bar a:last-child {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nx-sig-btn-base-edge);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  color: var(--nx-sig-base-text);
  box-shadow: var(--nx-sig-action-base);
  font: 600 20px/44px var(--nx-font);
}

/* ============ 18. ACORDEÓN (preguntas frecuentes de la web) ============ */
.bento-accordion > details { border-bottom: 1px solid var(--bento-line); padding: 24px 0; }
.bento-accordion > details:last-child { border-bottom: 0; }
.bento-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-size: var(--nx-sig-faq);
  font-weight: 600;
  color: var(--bento-text);
}
.bento-accordion summary::-webkit-details-marker { display: none; }
.bento-accordion summary svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform var(--nx-dur-slow) var(--nx-ease-standard); }
.bento-accordion details[open] summary svg { transform: rotate(45deg); }
.bento-accordion--compact > details { padding: 8px 0; }
.bento-accordion .bento-accordion__body { padding-top: 16px; font-size: var(--nx-sig-body); line-height: var(--nx-sig-body-leading); color: var(--bento-muted); }

/* ============ 19. CAPAS: MODAL, PANEL LATERAL, AVISO, DOCK ============ */
.bento-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--nx-sig-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--nx-sig-overlay);
}
.bento-modal {
  position: relative;
  z-index: var(--nx-sig-z-modal);
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--nx-sig-pad-lg);
  border-radius: var(--nx-sig-radius);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
  color: var(--bento-text);
}
.bento-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
/* El título ocupa el lugar y a la derecha va SOLO el botón de cerrar. Con un chip al lado, en un
   teléfono el título quedaba de a una palabra por línea. */
.bento-modal__header > :first-child { flex: 1 1 auto; min-width: 0; }
.bento-modal__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Modal de lectura (una auditoría, un reporte): más ancho que el de formulario. */
.bento-modal--lg { width: min(880px, 100%); }

.bento-drawer {
  position: fixed;
  z-index: var(--nx-sig-z-modal);
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(480px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--nx-sig-pad);
  border-radius: var(--nx-sig-radius);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
  color: var(--bento-text);
}

.bento-toast {
  position: fixed;
  z-index: var(--nx-sig-z-toast);
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100% - 48px));
  padding: 8px 24px 8px 8px;
  border-radius: var(--nx-radius-pill);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  border: 1px solid var(--nx-sig-contrast-edge);
  box-shadow: var(--nx-sig-contrast-shadow);
  color: var(--nx-sig-contrast-text);
  font-weight: 600;
}

.bento-dock {
  position: fixed;
  z-index: var(--nx-sig-z-dock);
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--nx-radius-pill);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
}

.bento-tooltip {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--nx-sig-radius-xs);
  background: linear-gradient(145deg, var(--nx-sig-contrast-hi), var(--nx-sig-contrast-lo));
  color: var(--nx-sig-contrast-text);
  font-size: var(--nx-sig-small);
  font-weight: 500;
  box-shadow: var(--nx-sig-contrast-shadow-sm);
}

/* Panel anclado a un botón (declarar un bloqueo, un menú de acciones). */
.bento-popover {
  position: absolute;
  z-index: var(--nx-sig-z-modal);
  top: calc(100% + 8px);
  right: 0;
  width: min(400px, calc(100vw - 32px));
  padding: var(--nx-sig-pad-sm);
  border-radius: var(--nx-sig-radius-sm);
  background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
  border: 1px solid var(--nx-sig-base-edge);
  box-shadow: var(--nx-sig-base-shadow);
  color: var(--bento-text);
  text-align: left;
}
/* El panel lateral se alinea a la derecha: el overlay no lo centra. */
.bento-overlay--right { justify-content: flex-end; align-items: stretch; }
/* Un popover que cuelga de un botón de la barra se abre hacia la derecha, alineado a él. */
.bento-popover--start { left: 0; right: auto; width: min(280px, calc(100vw - 32px)); }

/* Menú: lo que va adentro de un popover o de un panel lateral de navegación. Cada opción es
   un botón de 44px que se ilumina como píldora; la actual lleva aria-current. Los grupos se
   titulan con bento-menu__header y se separan con bento-sep. */
.bento-menu { display: flex; flex-direction: column; gap: 2px; }
.bento-menu__header {
  padding: 8px 16px 4px;
  font-size: var(--nx-sig-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--nx-sig-eyebrow-tracking);
  color: var(--bento-muted);
}
.bento-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--nx-radius-pill);
  background: transparent;
  color: var(--bento-text);
  font: inherit;
  font-size: var(--nx-sig-nav);
  font-weight: var(--nx-sig-nav-weight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nx-dur-fast) var(--nx-ease-standard);
}
.bento-menu__item:hover { background: var(--nx-sig-field-bg); }
.bento-menu__item[aria-current="page"] { background: var(--nx-sig-field-bg); font-weight: 600; }
/* El ícono de la opción elegida se pinta con el acento: es la marca de «estás acá». */
.bento-menu__item[aria-current="page"] .bento-icono { color: var(--nx-accent-text); }
.bento-menu__item > .bento-count { margin-left: auto; }
/* Punto o ícono delante: el mismo ancho para los dos, así los textos quedan alineados. */
.bento-menu__item > .bento-icono { width: 18px; height: 18px; vertical-align: 0; }
.bento-menu__item > .bento-dot { margin-inline: 4px; }
.bento-menu .bento-sep { margin: 8px 0; }

/* ============ 20. ESTADO VACÍO ============ */
.bento-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}
.bento-empty .bento-p { max-width: 420px; }

.bento-sep { border: 0; border-top: 1px solid var(--bento-line); margin: 24px 0; }

/* ============ 21. ACCESIBILIDAD ============ */
.bento-btn:focus-visible,
.bento-action:focus-visible,
.bento-link:focus-visible,
.bento-navlink:focus-visible,
.bento-menu__item:focus-visible,
.bento-segmented > button:focus-visible,
.bento-popover :focus-visible,
.bento-segmented > a:focus-visible,
.bento-accordion summary:focus-visible,
a.bento-card:focus-visible,
button.bento-card:focus-visible {
  outline: 3px solid var(--nx-sig-accent-edge);
  outline-offset: 3px;
}
/* El segmentado se desliza de costado y recorta lo que se sale de sus 4px de relleno: el
   anillo de foco va pegado al botón para que se vea entero. */
.bento-segmented > button:focus-visible,
.bento-segmented > a:focus-visible { outline-offset: 0; }
.bento-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bento-btn, .bento-action, a.bento-card, button.bento-card { transition: none; }
  .bento-btn:hover, .bento-btn:active, .bento-action:hover, .bento-action:active,
  a.bento-card:hover, button.bento-card:hover { transform: none; }
}

/* ============ 22. RESPONSIVE ============ */
/* Filas: en pantallas chicas el título ocupa su línea entera y los chips y botones bajan.
   Con el título recortado a "segu…" la fila no dice nada. */
@media (max-width: 560px) {
  .bento-row { flex-wrap: wrap; row-gap: 12px; }
  .bento-row__main { flex: 1 1 calc(100% - 64px); }
  .bento-row__title { white-space: normal; }
  /* Pie de modal: botones a todo el ancho, con la acción principal (la última) arriba. */
  .bento-modal__footer { flex-direction: column-reverse; }
  .bento-modal__footer > * { width: 100%; }
  /* Una cifra de 2.5rem no entra en una estadística de media pantalla ("18.5 h" se partía). */
  .bento-stat__value { font-size: var(--nx-sig-card-title); }
}
@media (max-width: 1024px) {
  .bento-grid--3, .bento-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-span-3 { grid-column: span 2; }
}
@media (max-width: 768px) {
  .bento-container { padding: 16px; }
  .bento-dock { bottom: 16px; max-width: calc(100vw - 32px); }
  .bento-grid--2, .bento-grid--3, .bento-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .bento-span-2, .bento-span-3 { grid-column: span 1; }
  .bento-row-2 { grid-row: auto; }
  /* Barra superior en móvil: UNA sola píldora, como la web (que a 390px mide 47px de alto y
     esconde los enlaces). Partida en tres filas deja de ser la barra flotante y el selector
     se sale de la card. La navegación de una app baja a una píldora flotante inferior, al
     alcance del pulgar; lo accesorio se envuelve en .bento-desktop-only. */
  .bento-topbar { padding: 8px 8px 8px 20px; gap: 12px; }
  .bento-nav { gap: 16px; }
  .bento-topbar > .bento-nav--pills {
    position: fixed;
    z-index: var(--nx-sig-z-dock);
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 6px;
    gap: 4px;
    max-width: calc(100vw - 32px);
    border-radius: var(--nx-radius-pill);
    background: linear-gradient(145deg, var(--nx-sig-base-hi), var(--nx-sig-base-lo));
    border: 1px solid var(--nx-sig-base-edge);
    box-shadow: var(--nx-sig-base-shadow);
  }
  .bento-page:has(.bento-topbar > .bento-nav--pills) { padding-bottom: 96px; }
  .bento-page:has(.bento-topbar > .bento-nav--pills) .bento-dock { bottom: 84px; }
  .bento-topbar .bento-field--compact { max-width: 38vw; text-overflow: ellipsis; }
  .bento-desktop-only { display: none; }
  /* Los atajos de teclado no sirven en una pantalla táctil. */
  .bento-kbd { display: none; }
  .bento-card { padding: var(--nx-sig-pad-sm); }
  .bento-action--corner { top: var(--nx-sig-pad-sm); right: var(--nx-sig-pad-sm); }
  .bento-modal { padding: var(--nx-sig-pad-sm); }
  .bento-board { grid-auto-columns: minmax(260px, 86%); }
}