/*
  ARCHIVO GENERADO — NO SE EDITA A MANO.

  Sale de design/tokens.json (los valores) y design/componentes.css (la
  librería) con `node scripts/generar-tokens.mjs`, que corre al compilar.
  Un cambio de color, letra, tamaño o radio se hace en design/tokens.json;
  un cambio de componente, en design/componentes.css.

  Puntos de quiebre: 1100 y 768 px.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* Colores: cada nombre es su uso. */
  --sn-fondo: #0B1220;
  --sn-barra: #0D1526;
  --sn-superficie: #111A2B;
  --sn-superficie-hover: #13203A;
  --sn-borde: #1F2A3D;
  --sn-borde-fuerte: #2A3850;
  --sn-texto: #E6EDF7;
  --sn-texto-secundario: #8A9BB4;
  --sn-texto-terciario: #6B7C96;
  --sn-acento: #22D3EE;
  --sn-texto-sobre-acento: #06202A;
  --sn-fondo-vacio: rgba(17,26,43,0.5);
  --sn-advertencia-fondo: #2A2213;
  --sn-advertencia-borde: #4A3B1C;
  --sn-advertencia-texto: #F5D9A3;
  --sn-advertencia-cifra: #F5B544;
  --sn-correcto-fondo: #12352B;
  --sn-correcto-texto: #6EE7B7;
  --sn-revisar-fondo: #3A1E22;
  --sn-revisar-texto: #F59E9E;
  --sn-burbuja: #005C4B;

  /* Mapas: una por zona o sector, por orden; pasada la sexta se repite. */
  --sn-mapa-1: #6A5AE0;
  --sn-mapa-2: #E4572E;
  --sn-mapa-3: #E27BC6;
  --sn-mapa-4: #3FCF8F;
  --sn-mapa-5: #8AD6FA;
  --sn-mapa-6: #FBEA9A;

  /* Tipografía. */
  --sn-fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sn-fuente-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sn-alto-de-linea: 1.45;
  --sn-tamano-marca: 15px;
  --sn-tamano-titulo-seccion: 30px;
  --sn-tamano-titulo-grupo: 13px;
  --sn-tamano-subgrupo: 12px;
  --sn-tamano-titulo-vacio: 18px;
  --sn-tamano-nombre-tarjeta: 16px;
  --sn-tamano-nombre-fila: 14px;
  --sn-tamano-cuerpo: 15px;
  --sn-tamano-secundario: 13px;
  --sn-tamano-menor: 12px;
  --sn-espaciado-marca: 0.08em;
  --sn-espaciado-titulo: -0.01em;
  --sn-espaciado-grupo: 0.06em;

  /* Espaciado. */
  --sn-espacio-4: 4px;
  --sn-espacio-8: 8px;
  --sn-espacio-10: 10px;
  --sn-espacio-12: 12px;
  --sn-espacio-16: 16px;
  --sn-espacio-18: 18px;
  --sn-espacio-24: 24px;
  --sn-espacio-32: 32px;
  --sn-espacio-48: 48px;

  /* Radios. */
  --sn-radio-panel: 16px;
  --sn-radio-tarjeta: 12px;
  --sn-radio-control: 10px;
  --sn-radio-icono: 8px;
  --sn-radio-pildora: 999px;
  --sn-radio-circulo: 50%;

  /* Medidas del marco. */
  --sn-alto-barra: 52px;
  --sn-ancho-panel: 288px;
  --sn-tactil: 44px;
  --sn-avatar: 36px;
  --sn-ancho-publico: 1280px;

  /* Transición: borde, fondo y desplazamiento. */
  --sn-transicion: 0.15s ease;
}

/*
  LA LIBRERÍA DE COMPONENTES DE SUPERNOVA (22-10-2026).

  Una sola, para todo el portal: Management, cada módulo, la carta pública y
  Radar. Se escribe aquí y viaja dentro de /css/supernova-marca.css, que se
  genera al compilar (scripts/generar-tokens.mjs) con los tokens de
  design/tokens.json delante. Ningún valor de color, letra, tamaño, radio ni
  sombra se escribe a mano: todo es una variable --sn-*.

  Puntos de quiebre: 1100 y 768 px (design/tokens.json → quiebre). Un media
  query no lee variables, por eso son los dos únicos números que se repiten.
*/

/* ══ BASE ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--sn-fondo); }

body {
  margin: 0;
  background: var(--sn-fondo);
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-cuerpo);
  font-weight: 400;
  line-height: var(--sn-alto-de-linea);
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Todo lo que se toca mide al menos el objetivo táctil (24-10-2026). `:where` no
   pesa: una regla de módulo puede ensanchar o alargar, nunca bajar de aquí sin
   que la guardia del objetivo táctil lo diga. */
:where(button, summary, select, [role="button"]) { min-height: var(--sn-tactil); }
:where(button) { min-width: var(--sn-tactil); }
a { color: var(--sn-acento); }
code, kbd, samp, pre { font-family: var(--sn-fuente-mono); }
:focus-visible { outline: 2px solid var(--sn-acento); outline-offset: 2px; }

/* Un ícono de la librería: trazo de 1.8, extremos redondeados, sin relleno, del color del texto. */
.sn-icono {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.sn-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Un identificador sin nombre legible: en monoespaciada, en secundario. */
.sn-codigo { font-family: var(--sn-fuente-mono); color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); }
/* Un dato que nadie declaró. */
.sn-sin-declarar { color: var(--sn-texto-secundario); }

/* ══ MARCA ═════════════════════════════════════════════════════════════════ */
.sn-marca {
  color: var(--sn-acento);
  font-size: var(--sn-tamano-marca);
  font-weight: 700;
  letter-spacing: var(--sn-espaciado-marca);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ══ EL LOGO DEL DOMINIO ═══════════════════════════════════════════════════
   Un círculo perfecto, sea como sea el logo. Un anillo fino del color de borde,
   4 px de fondo entre el anillo y la imagen, y la imagen llenando el círculo
   recortada al centro. Sin logo, las iniciales del nombre.

     <span class="sn-logo" style="--sn-logo-size: 56px">
       <img class="sn-logo__imagen" src="…" alt="Nombre" />
     </span>
     <span class="sn-logo" style="--sn-logo-size: 56px" role="img" aria-label="Nombre">
       <span class="sn-logo__iniciales" aria-hidden="true">AB</span>
     </span>
   ══════════════════════════════════════════════════════════════════════════ */
.sn-logo {
  --sn-logo-size: 56px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--sn-logo-size);
  height: var(--sn-logo-size);
  aspect-ratio: 1;
  border-radius: var(--sn-radio-circulo);
  overflow: hidden;
  padding: var(--sn-espacio-4);
  border: 1px solid var(--sn-borde);
  background: var(--sn-fondo);
}
.sn-logo__imagen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--sn-radio-circulo);
  object-fit: cover;
  object-position: center;
}
.sn-logo__iniciales {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--sn-radio-circulo);
  background: var(--sn-superficie);
  color: var(--sn-texto-secundario);
  font-family: var(--sn-fuente);
  font-weight: 700;
  font-size: calc(var(--sn-logo-size) * 0.32);
  line-height: 1;
}

/* ══ BARRA SUPERIOR ════════════════════════════════════════════════════════
   <header class="sn-barra">
     <div class="sn-barra__lugar">
       <a class="sn-marca" href="/management/">SUPERNOVA</a>
       <span class="sn-barra__separador" aria-hidden="true"></span>
       <span class="sn-barra__modulo">Fabricación</span>
       <span class="sn-barra__dominio">Negocio</span>
     </div>
     <div class="sn-barra__persona">
       <span class="sn-barra__quien"><span class="sn-barra__nombre">…</span><span class="sn-barra__rol">…</span></span>
       <div class="sn-cuenta">
         <button class="sn-avatar" aria-haspopup="menu" aria-expanded="false" aria-label="Tu cuenta">DP</button>
         <div class="sn-cuenta__menu" role="menu" hidden>…</div>
       </div>
     </div>
   </header>
   Lo arma /js/supernova-marco.js.
   ══════════════════════════════════════════════════════════════════════════ */
.sn-barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-espacio-16);
  height: var(--sn-alto-barra);
  padding: 0 var(--sn-espacio-24);
  background: var(--sn-barra);
  border-bottom: 1px solid var(--sn-borde);
}
.sn-barra__lugar { display: flex; align-items: center; gap: var(--sn-espacio-12); min-width: 0; }
.sn-barra__separador { flex: 0 0 auto; width: 1px; height: 20px; background: var(--sn-borde-fuerte); }
.sn-barra__modulo { flex: 0 0 auto; color: var(--sn-texto); font-size: var(--sn-tamano-nombre-fila); font-weight: 600; white-space: nowrap; }
.sn-barra__dominio {
  min-width: 0;
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-nombre-fila);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-barra__modulo:empty, .sn-barra__dominio:empty { display: none; }
.sn-barra__modulo:empty + .sn-barra__dominio:empty, .sn-barra__separador:has(+ .sn-barra__modulo:empty + .sn-barra__dominio:empty) { display: none; }
.sn-barra__persona { display: flex; align-items: center; gap: var(--sn-espacio-10); flex: 0 0 auto; }
.sn-barra__quien { display: grid; text-align: right; line-height: 1.25; }
.sn-barra__nombre { color: var(--sn-texto); font-size: var(--sn-tamano-secundario); font-weight: 600; white-space: nowrap; }
.sn-barra__rol { color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); white-space: nowrap; }
.sn-barra__nombre:empty, .sn-barra__rol:empty { display: none; }

.sn-cuenta { position: relative; }
.sn-avatar {
  display: grid;
  place-items: center;
  width: var(--sn-avatar);
  height: var(--sn-avatar);
  padding: 0;
  border-radius: var(--sn-radio-circulo);
  border: 1px solid var(--sn-borde-fuerte);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-menor);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
/* El círculo se ve del tamaño del avatar; el dedo lo alcanza en todo el objetivo táctil. */
.sn-avatar { position: relative; min-height: 0; min-width: 0; }
.sn-avatar::after { content: ""; position: absolute; inset: calc((var(--sn-tactil) - var(--sn-avatar)) / -2); }
.sn-avatar:hover, .sn-avatar[aria-expanded="true"] { border-color: var(--sn-acento); background: var(--sn-superficie-hover); }
.sn-cuenta__menu {
  position: absolute;
  top: calc(100% + var(--sn-espacio-8));
  right: 0;
  z-index: 50;
  display: grid;
  min-width: 200px;
  padding: var(--sn-espacio-4);
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde-fuerte);
  background: var(--sn-superficie);
}
.sn-cuenta__menu[hidden] { display: none; }
.sn-cuenta__opcion {
  display: flex;
  align-items: center;
  gap: var(--sn-espacio-10);
  min-height: var(--sn-tactil);
  padding: 0 var(--sn-espacio-12);
  border: 0;
  border-radius: var(--sn-radio-control);
  background: transparent;
  color: var(--sn-texto);
  font-size: var(--sn-tamano-nombre-fila);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sn-cuenta__opcion:hover { background: var(--sn-superficie-hover); }

/* ══ MARCO DE UNA PANTALLA INTERNA ═════════════════════════════════════════
   <div class="sn-marco">
     <header class="sn-barra">…</header>
     <div class="sn-marco__cuerpo">
       <aside class="sn-panel">…</aside>
       <main class="sn-principal">
         <header class="sn-encabezado">…</header>
         <div class="sn-trabajo">…</div>
       </main>
     </div>
   </div>
   Barra, panel y encabezado quedan quietos y solo el área de trabajo corre:
   la barra y el encabezado van pegados arriba y el panel tiene su propio
   desplazamiento. Hasta 768 px la página se desplaza normal.
   ══════════════════════════════════════════════════════════════════════════ */
.sn-marco { min-height: 100vh; background: var(--sn-fondo); }
.sn-marco__cuerpo {
  display: grid;
  grid-template-columns: var(--sn-ancho-panel) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--sn-alto-barra));
}
.sn-marco__cuerpo--sin-panel { grid-template-columns: minmax(0, 1fr); }
.sn-principal { min-width: 0; }

/* ══ PANEL LATERAL ═════════════════════════════════════════════════════════ */
.sn-panel {
  position: sticky;
  top: var(--sn-alto-barra);
  display: flex;
  flex-direction: column;
  gap: var(--sn-espacio-12);
  height: calc(100vh - var(--sn-alto-barra));
  padding: var(--sn-espacio-16);
  overflow-y: auto;
  background: var(--sn-barra);
  border-right: 1px solid var(--sn-borde);
}
.sn-panel__encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-espacio-8); }
.sn-panel__titulo {
  margin: 0;
  color: var(--sn-texto);
  font-size: var(--sn-tamano-titulo-grupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-panel__descripcion { margin: 0; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); }
.sn-panel__grupos { display: grid; gap: var(--sn-espacio-12); }
.sn-panel__subgrupo { display: grid; gap: var(--sn-espacio-8); }
.sn-panel__subtitulo {
  margin: var(--sn-espacio-4) 0 0;
  color: var(--sn-texto-terciario);
  font-size: var(--sn-tamano-subgrupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-panel__lista { display: grid; gap: var(--sn-espacio-8); margin: 0; padding: 0; list-style: none; }

/* Píldora de conteo: «3 de 9». */
.sn-conteo {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--sn-radio-pildora);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-menor);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ══ FILA DE HERRAMIENTA O DE MENÚ ═════════════════════════════════════════ */
.sn-fila {
  display: flex;
  align-items: center;
  gap: var(--sn-espacio-10);
  width: 100%;
  min-height: var(--sn-tactil);
  padding: var(--sn-espacio-8) var(--sn-espacio-8) var(--sn-espacio-8) var(--sn-espacio-10);
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
button.sn-fila, a.sn-fila { cursor: pointer; }
.sn-fila:hover { border-color: var(--sn-borde-fuerte); background: var(--sn-superficie-hover); }
.sn-fila[aria-current="page"] { border-color: var(--sn-acento); background: var(--sn-superficie-hover); }
.sn-fila[draggable="true"] { cursor: grab; }
.sn-fila.is-arrastrando { opacity: 0.5; }

.sn-caja-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--sn-radio-icono);
  border: 1px solid var(--sn-borde);
  background: var(--sn-fondo);
  color: var(--sn-texto-secundario);
}
.sn-caja-icono--40 { width: 40px; height: 40px; border-radius: var(--sn-radio-control); color: var(--sn-acento); }
.sn-caja-icono--40 .sn-icono { width: 22px; height: 22px; }

.sn-fila__textos { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.sn-fila__nombre, .sn-fila__descripcion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-fila__nombre { font-size: var(--sn-tamano-nombre-fila); font-weight: 600; }
.sn-fila__descripcion { color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); }
.sn-fila__cuentas { display: inline-flex; align-items: center; gap: var(--sn-espacio-4); flex: 0 0 auto; }
.sn-fila__accion {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--sn-tactil);
  height: var(--sn-tactil);
  padding: 0;
  border-radius: var(--sn-radio-control);
  border: 1px solid var(--sn-acento);
  background: transparent;
  color: var(--sn-acento);
  cursor: pointer;
  transition: background-color var(--sn-transicion);
}
.sn-fila__accion:hover:not(:disabled) { background: var(--sn-superficie-hover); }
.sn-fila__accion:disabled { border-color: var(--sn-borde); color: var(--sn-texto-terciario); cursor: not-allowed; }

/* ══ ENCABEZADO DE SECCIÓN ═════════════════════════════════════════════════ */
.sn-encabezado {
  position: sticky;
  top: var(--sn-alto-barra);
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sn-espacio-16);
  flex-wrap: wrap;
  padding: var(--sn-espacio-24) var(--sn-espacio-24) var(--sn-espacio-8);
  background: var(--sn-fondo);
}
.sn-encabezado__textos { min-width: 0; }
.sn-encabezado__titulo {
  margin: 0;
  color: var(--sn-texto);
  font-size: var(--sn-tamano-titulo-seccion);
  font-weight: 700;
  letter-spacing: var(--sn-espaciado-titulo);
  line-height: 1.2;
}
/* El antetítulo (25-10-2026): de qué módulo y de qué negocio es la sección, sobre su título. */
.sn-encabezado__antetitulo {
  margin: 0 0 var(--sn-espacio-4);
  color: var(--sn-texto-terciario);
  font-size: var(--sn-tamano-subgrupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-encabezado__contexto { margin: 2px 0 0; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); }
.sn-encabezado__ayuda { color: var(--sn-texto-secundario); }
.sn-encabezado__ayuda.es-aviso { color: var(--sn-advertencia-texto); }
.sn-encabezado__acciones { display: flex; align-items: center; gap: var(--sn-espacio-8); flex-wrap: wrap; }

/* ══ PESTAÑAS ══════════════════════════════════════════════════════════════
   Las vistas de una misma sección, bajo su encabezado (23-10-2026). No son la
   navegación del módulo: esa va en el panel.
     <div class="sn-pestanas" role="tablist" aria-label="…">
       <button class="sn-pestana" role="tab" aria-selected="true" tabindex="0">Órdenes</button>
       <button class="sn-pestana" role="tab" aria-selected="false" tabindex="-1">Crear orden</button>
     </div>
   Las flechas, Inicio y Fin mueven entre pestañas (lo cablea /js/supernova-marco.js). */
.sn-pestanas { display: flex; flex: 0 0 auto; gap: var(--sn-espacio-4); flex-wrap: wrap; border-bottom: 1px solid var(--sn-borde); }
.sn-pestana {
  min-height: var(--sn-tactil);
  padding: var(--sn-espacio-8) 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sn-texto-secundario);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-cuerpo);
  line-height: 1.3;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
}
.sn-pestana:hover { color: var(--sn-texto); }
.sn-pestana[aria-selected="true"] { color: var(--sn-texto); border-bottom-color: var(--sn-acento); font-weight: 600; }

/* ══ ÁREA DE TRABAJO ═══════════════════════════════════════════════════════ */
.sn-trabajo {
  display: flex;
  flex-direction: column;
  gap: var(--sn-espacio-24);
  min-width: 0;
  padding: var(--sn-espacio-16) var(--sn-espacio-24) var(--sn-espacio-48);
}

/* ══ GRUPO Y CUADRÍCULA ════════════════════════════════════════════════════ */
.sn-grupos { display: grid; gap: var(--sn-espacio-24); }
.sn-grupo { display: grid; gap: var(--sn-espacio-12); }
.sn-grupo__titulo {
  margin: 0;
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-titulo-grupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-grupo__descripcion { margin: 0; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); }
.sn-cuadricula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sn-espacio-16); }

/* ══ TARJETA DE MÓDULO ═════════════════════════════════════════════════════
   <article class="sn-tarjeta">
     <a class="sn-tarjeta__enlace" href="…">
       <span class="sn-tarjeta__arriba"><span class="sn-caja-icono sn-caja-icono--40">svg</span><span class="sn-estado sn-estado--advertencia">3</span></span>
       <span class="sn-tarjeta__nombre">…</span>
       <span class="sn-tarjeta__descripcion">…</span>
     </a>
     <button class="sn-tarjeta__devolver" aria-label="Devolver al panel">svg</button>
   </article>
   Toda la tarjeta es el enlace; el botón va encima, aparte (un botón dentro
   de un enlace no se puede pulsar solo).
   ══════════════════════════════════════════════════════════════════════════ */
.sn-tarjeta {
  position: relative;
  min-height: 132px;
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion), transform var(--sn-transicion);
}
.sn-tarjeta:hover, .sn-tarjeta:focus-within { border-color: var(--sn-acento); background: var(--sn-superficie-hover); transform: translateY(-2px); }
.sn-tarjeta.is-arrastrando { opacity: 0.5; }
.sn-tarjeta__enlace {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sn-espacio-12);
  height: 100%;
  min-height: 132px;
  padding: var(--sn-espacio-18);
  border-radius: inherit;
  color: var(--sn-texto);
  text-decoration: none;
}
.sn-tarjeta__enlace:focus-visible { outline-offset: -2px; }
.sn-tarjeta__arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-espacio-8); }
.sn-tarjeta__textos { display: grid; gap: var(--sn-espacio-4); min-width: 0; }
.sn-tarjeta__nombre { font-size: var(--sn-tamano-nombre-tarjeta); font-weight: 600; }
.sn-tarjeta__descripcion {
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-secundario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-tarjeta__devolver {
  position: absolute;
  top: var(--sn-espacio-10);
  right: var(--sn-espacio-10);
  display: grid;
  place-items: center;
  width: var(--sn-tactil);
  height: var(--sn-tactil);
  padding: 0;
  border-radius: var(--sn-radio-control);
  border: 1px solid var(--sn-borde-fuerte);
  background: var(--sn-fondo);
  color: var(--sn-texto-secundario);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--sn-transicion), border-color var(--sn-transicion);
}
.sn-tarjeta:hover .sn-tarjeta__devolver, .sn-tarjeta:focus-within .sn-tarjeta__devolver { opacity: 1; }
.sn-tarjeta__devolver:hover { border-color: var(--sn-acento); color: var(--sn-texto); }

/* La tarjeta de producto de la carta: mismo marco y mismo efecto al pasar. */
.sn-tarjeta--producto { overflow: hidden; min-height: 0; }

/* ══ ZONA VACÍA ════════════════════════════════════════════════════════════ */
.sn-vacio {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sn-espacio-12);
  min-height: 360px;
  padding: var(--sn-espacio-32);
  border-radius: var(--sn-radio-panel);
  border: 2px dashed var(--sn-borde-fuerte);
  background: var(--sn-fondo-vacio);
  text-align: center;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
.sn-vacio.is-destino, .sn-zona-destino.is-destino { border-color: var(--sn-acento); }
.sn-vacio__icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--sn-radio-panel);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-acento);
}
.sn-vacio__icono .sn-icono { width: 26px; height: 26px; }
.sn-vacio__titulo { margin: 0; color: var(--sn-texto); font-size: var(--sn-tamano-titulo-vacio); font-weight: 600; }
.sn-vacio__texto { max-width: 420px; margin: 0; color: var(--sn-texto-secundario); }

/* ══ BOTONES ═══════════════════════════════════════════════════════════════ */
.sn-boton-icono {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--sn-tactil);
  height: var(--sn-tactil);
  padding: 0;
  border-radius: var(--sn-radio-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sn-texto-secundario);
  cursor: pointer;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
.sn-boton-icono:hover { border-color: var(--sn-borde-fuerte); background: var(--sn-superficie); color: var(--sn-texto); }

.sn-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sn-espacio-8);
  min-height: var(--sn-tactil);
  padding: 0 var(--sn-espacio-18);
  border-radius: var(--sn-radio-control);
  border: 1px solid transparent;
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-cuerpo);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
.sn-boton:disabled { opacity: 0.55; cursor: not-allowed; }
.sn-boton--principal { background: var(--sn-acento); border-color: var(--sn-acento); color: var(--sn-texto-sobre-acento); }
.sn-boton--principal:hover:not(:disabled) { filter: brightness(1.08); }
.sn-boton--secundario { background: transparent; border-color: var(--sn-borde); color: var(--sn-texto); }
.sn-boton--secundario:hover:not(:disabled) { border-color: var(--sn-borde-fuerte); background: var(--sn-superficie); }
.sn-boton--compacto { min-height: var(--sn-tactil); padding: 0 14px; }
.sn-boton svg, .sn-campo svg, .sn-boton-icono svg, .sn-fila__accion svg, .sn-tarjeta__devolver svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Contador redondo dentro de un botón: «Mi pedido (3)». */
.sn-contador {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--sn-radio-pildora);
  background: var(--sn-texto-sobre-acento);
  color: var(--sn-acento);
  font-size: var(--sn-tamano-menor);
  font-weight: 700;
}

/* ══ PÍLDORAS ══════════════════════════════════════════════════════════════
   .sn-pildora: la que se elige (categorías de la carta, filtros).
   .sn-estado: la que informa (advertencia, correcto, revisar). */
.sn-pildora {
  display: inline-flex;
  align-items: center;
  min-height: var(--sn-tactil);
  padding: 0 var(--sn-espacio-12);
  border-radius: var(--sn-radio-pildora);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-nombre-fila);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion);
}
.sn-pildora:hover { border-color: var(--sn-borde-fuerte); }
.sn-pildora[aria-current="page"],
.sn-pildora[aria-pressed="true"],
.sn-pildora.is-active {
  background: var(--sn-acento);
  border-color: var(--sn-acento);
  color: var(--sn-texto-sobre-acento);
  font-weight: 600;
}

.sn-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--sn-espacio-4);
  padding: 3px 9px;
  border-radius: var(--sn-radio-pildora);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto-secundario);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-menor);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sn-estado--advertencia { background: var(--sn-advertencia-fondo); border-color: var(--sn-advertencia-borde); color: var(--sn-advertencia-texto); }
.sn-estado--advertencia .sn-estado__cifra, .sn-estado--cifra { color: var(--sn-advertencia-cifra); }
/* Lo que se destaca sin ser una advertencia —una oferta, una promoción— (23-10-2026): el acento, no el dorado. */
.sn-estado--acento { background: color-mix(in srgb, var(--sn-acento) 14%, transparent); border-color: color-mix(in srgb, var(--sn-acento) 40%, transparent); color: var(--sn-acento); }
.sn-estado--correcto { background: var(--sn-correcto-fondo); border-color: var(--sn-correcto-fondo); color: var(--sn-correcto-texto); }
.sn-estado--revisar { background: var(--sn-revisar-fondo); border-color: var(--sn-revisar-fondo); color: var(--sn-revisar-texto); }

/* ══ CAMPOS ════════════════════════════════════════════════════════════════ */
.sn-campo {
  display: flex;
  align-items: center;
  gap: var(--sn-espacio-8);
  min-height: var(--sn-tactil);
  padding: 0 var(--sn-espacio-12);
  border-radius: var(--sn-radio-control);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto-secundario);
  transition: border-color var(--sn-transicion);
}
.sn-campo:focus-within { border-color: var(--sn-acento); }
.sn-campo input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-cuerpo);
}
.sn-campo input::placeholder { color: var(--sn-texto-terciario); }

.sn-entrada {
  width: 100%;
  min-height: var(--sn-tactil);
  padding: var(--sn-espacio-8) var(--sn-espacio-12);
  border-radius: var(--sn-radio-control);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-cuerpo);
  transition: border-color var(--sn-transicion);
}
.sn-entrada:focus { outline: 0; border-color: var(--sn-acento); }
.sn-entrada::placeholder { color: var(--sn-texto-terciario); }
.sn-etiqueta { display: grid; gap: var(--sn-espacio-4); color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); }

/*
  CASILLA (24-10-2026): `<input type="checkbox" class="sn-casilla">`, o cualquier
  casilla dentro de un contenedor `.sn-casillas`. La dibuja la librería, no el
  navegador. Marcada (`:checked`, o `aria-checked="true"` en un `role="checkbox"`):
  fondo de acento con el visto en texto sobre acento. Deshabilitada: atenuada, y
  el visto se sigue viendo, porque una casilla bloqueada es un hecho ya decidido.
*/
.sn-casilla,
.sn-casillas input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--sn-borde-fuerte);
  border-radius: var(--sn-radio-icono);
  background: var(--sn-fondo);
  cursor: pointer;
  transition: border-color var(--sn-transicion), background var(--sn-transicion);
}
.sn-casilla::before,
.sn-casillas input[type="checkbox"]::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--sn-texto-sobre-acento);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--sn-transicion);
}
.sn-casilla:checked,
.sn-casilla[aria-checked="true"],
.sn-casillas input[type="checkbox"]:checked {
  border-color: var(--sn-acento);
  background: var(--sn-acento);
}
.sn-casilla:checked::before,
.sn-casilla[aria-checked="true"]::before,
.sn-casillas input[type="checkbox"]:checked::before { transform: scale(1); }
.sn-casilla:hover:not(:disabled),
.sn-casillas input[type="checkbox"]:hover:not(:disabled) { border-color: var(--sn-acento); }
.sn-casilla:focus-visible,
.sn-casillas input[type="checkbox"]:focus-visible { outline: 2px solid var(--sn-acento); outline-offset: 2px; }
.sn-casilla:disabled,
.sn-casilla[aria-disabled="true"],
.sn-casillas input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }

/*
  CAMPO DE SOLO LECTURA (23-10-2026): un dato que se muestra en un flujo que no
  lo puede cambiar —el del producto padre mientras se edita su variante—. Va
  deshabilitado y con `aria-readonly="true"`; se ve apagado y sin cursor de escritura.
*/
.sn-solo-lectura,
:is(input, select, textarea)[aria-readonly="true"] {
  background: var(--sn-barra);
  color: var(--sn-texto-secundario);
  border-style: dashed;
  cursor: not-allowed;
}

/*
  EL RESULTADO JUNTO AL BOTÓN (23-10-2026): lo que dice una acción de una ficha
  aparece al lado del botón que se tocó, no arriba de la página, donde quedaba
  detrás de la ficha o fuera de la vista.
*/
.sn-aviso-junto {
  flex-basis: 100%;
  margin: var(--sn-espacio-4) 0 0;
  padding: var(--sn-espacio-8) var(--sn-espacio-10);
  border-radius: var(--sn-radio-icono);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie-hover);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-secundario);
  line-height: 1.35;
}
.sn-aviso-junto--advertencia {
  border-color: var(--sn-advertencia-borde);
  background: var(--sn-advertencia-fondo);
  color: var(--sn-advertencia-texto);
}

/* ══ SECCIÓN DESPLEGABLE DE UNA FICHA ══════════════════════════════════════ */
/*
  `<details class="sn-seccion"><summary>Título</summary>…</details>` (23-10-2026).
  Nace plegada: se abre solo cuando la persona la toca y queda abierta hasta que
  la cierra o cierra la ficha. Quien la pinta conserva su estado al repintar.
*/
.sn-seccion {
  min-width: 0;
  padding: var(--sn-espacio-4) var(--sn-espacio-8);
  border-radius: var(--sn-radio-icono);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie-hover);
}
.sn-seccion > summary {
  display: flex;
  align-items: center;
  gap: var(--sn-espacio-8);
  min-height: var(--sn-tactil);
  cursor: pointer;
  color: var(--sn-texto);
  font-size: var(--sn-tamano-secundario);
  font-weight: 700;
}
.sn-seccion[open] > summary { color: var(--sn-acento); }
.sn-seccion > *:not(summary) { overflow: visible; }

/* ══ BLOQUE, RESUMEN, TABLA Y LISTA-DETALLE ════════════════════════════════ */
.sn-bloque {
  display: grid;
  gap: var(--sn-espacio-12);
  padding: var(--sn-espacio-18);
  border-radius: var(--sn-radio-panel);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
}

/* Título de bloque: mayúsculas pequeñas, con su conteo al lado. */
.sn-titulo-bloque {
  display: flex;
  align-items: baseline;
  gap: var(--sn-espacio-8);
  margin: 0 0 var(--sn-espacio-12);
  color: var(--sn-texto-secundario);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-titulo-grupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-titulo-bloque__conteo { color: var(--sn-texto-terciario); font-weight: 500; letter-spacing: 0; text-transform: none; }

.sn-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sn-espacio-12); }
.sn-resumen__tarjeta {
  display: grid;
  gap: var(--sn-espacio-4);
  padding: var(--sn-espacio-16);
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
}
.sn-resumen__etiqueta { color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); }
.sn-resumen__valor { color: var(--sn-texto); font-size: var(--sn-tamano-titulo-vacio); font-weight: 600; font-variant-numeric: tabular-nums; }

.sn-tabla-caja { overflow-x: auto; border-radius: var(--sn-radio-tarjeta); border: 1px solid var(--sn-borde); }
.sn-tabla { width: 100%; border-collapse: collapse; font-size: var(--sn-tamano-nombre-fila); }
.sn-tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sn-espacio-10) var(--sn-espacio-12);
  background: var(--sn-barra);
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-menor);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--sn-borde);
}
.sn-tabla td { padding: var(--sn-espacio-10) var(--sn-espacio-12); border-bottom: 1px solid var(--sn-borde); }
.sn-tabla tbody tr:hover { background: var(--sn-superficie-hover); }

.sn-lista-detalle { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: var(--sn-espacio-16); align-items: start; }

/* Una lista con varias columnas a la izquierda: la lista toma más ancho que el detalle (25-10-2026). */
.sn-lista-detalle--ancha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* Cuatro cifras en una fila; dos por fila al ancho de un teléfono (25-10-2026). */
.sn-resumen--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ══ LISTA DE FILAS (25-10-2026) ═══════════════════════════════════════════
   Una lista que se recorre y elige, con sus columnas, que corre dentro de su
   caja. Cada fila es un botón; la elegida lleva aria-current. Al ancho de un
   teléfono, la primera y la última columna van en la primera línea.
   <div class="sn-filas" style="--sn-filas-columnas: …">
     <div class="sn-filas__cabeza"><span>Plantilla</span>…</div>
     <div class="sn-filas__caja">
       <button class="sn-filas__fila" aria-current="true"><span class="sn-filas__principal">…</span>…<span class="sn-filas__final">…</span></button>
     </div>
   </div>
   ══════════════════════════════════════════════════════════════════════════ */
.sn-filas { min-width: 0; border-radius: var(--sn-radio-tarjeta); border: 1px solid var(--sn-borde); background: var(--sn-superficie); overflow: hidden; }
.sn-filas__cabeza,
.sn-filas__fila {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sn-espacio-12);
  align-items: center;
  padding: var(--sn-espacio-10) var(--sn-espacio-16);
}
.sn-filas__cabeza {
  background: var(--sn-barra);
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-menor);
  font-weight: 600;
  border-bottom: 1px solid var(--sn-borde);
}
.sn-filas__caja { max-height: 560px; overflow-y: auto; }
.sn-filas__fila {
  width: 100%;
  min-height: var(--sn-tactil);
  border: 0;
  border-bottom: 1px solid var(--sn-borde);
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-secundario);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sn-transicion);
}
.sn-filas__fila:hover { background: var(--sn-superficie-hover); }
.sn-filas__fila[aria-current="true"] { background: var(--sn-superficie-hover); border-left-color: var(--sn-acento); }
.sn-filas__principal { display: grid; gap: 2px; min-width: 0; }
.sn-filas__nombre { overflow: hidden; color: var(--sn-texto); font-size: var(--sn-tamano-nombre-fila); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sn-filas__nota { color: var(--sn-texto-terciario); font-size: var(--sn-tamano-menor); }
.sn-filas__final { justify-self: end; }
.sn-filas__vacio { padding: var(--sn-espacio-16); color: var(--sn-texto-secundario); }

/* ══ PARES (25-10-2026) ════════════════════════════════════════════════════
   Filas de un nombre y su estado, dentro de un bloque.
   <ul class="sn-pares"><li class="sn-par"><span>Nombre</span><span class="sn-estado">…</span></li></ul> */
.sn-pares { display: grid; margin: 0; padding: 0; list-style: none; }
.sn-par {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-espacio-12);
  min-height: var(--sn-tactil);
  border-bottom: 1px solid var(--sn-borde);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-secundario);
}
.sn-par:last-child { border-bottom: 0; }
.sn-par > .sn-estado { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ══ BURBUJA DE WHATSAPP (25-10-2026) ══════════════════════════════════════
   La vista previa de un mensaje tal como llega: encabezado, cuerpo, pie y sus
   botones debajo, cada uno en su fila.
   <div class="sn-burbuja"><p class="sn-burbuja__encabezado">…</p><p class="sn-burbuja__cuerpo">…</p><p class="sn-burbuja__pie">…</p></div>
   <div class="sn-burbuja__botones"><span class="sn-burbuja__boton">…</span></div> */
.sn-burbuja-caja { display: grid; gap: var(--sn-espacio-4); max-width: 420px; }
.sn-burbuja {
  display: grid;
  gap: var(--sn-espacio-8);
  padding: var(--sn-espacio-12) var(--sn-espacio-12) var(--sn-espacio-8);
  border-radius: var(--sn-radio-tarjeta);
  background: var(--sn-burbuja);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-cuerpo);
  overflow-wrap: anywhere;
}
.sn-burbuja p { margin: 0; white-space: pre-line; }
.sn-burbuja__encabezado { font-weight: 600; }
/* Sobre el verde de la burbuja, solo el texto principal llega a 4.5:1 (el secundario da 2.8 y el acento 4.4). */
.sn-burbuja__pie { color: var(--sn-texto); font-size: var(--sn-tamano-menor); }
.sn-burbuja__botones { display: grid; gap: var(--sn-espacio-4); }
.sn-burbuja__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sn-tactil);
  border-radius: var(--sn-radio-tarjeta);
  background: var(--sn-burbuja);
  color: var(--sn-texto);
  font-size: var(--sn-tamano-secundario);
  font-weight: 600;
}

/* ══ LA POLÍTICA DE DATOS EN EL PIE (24-10-2026) ════════════════════════════
   El botón «Política de tratamiento de datos» al pie de las páginas públicas de
   cada negocio (carta, ficha, Radar). Ver `/js/supernova-politica.js`. */
.sn-politica-pie { display: flex; justify-content: center; padding: var(--sn-espacio-16) 0; }

/* ══ FICHAS EN CUADRÍCULA (24-10-2026) ══════════════════════════════════════
   Una colección que se busca, se filtra y se agrupa por categorías plegables;
   cada ficha abre un flotante de direccionamiento. La usa «Recetas» de Fabricación.
   <div class="sn-fichas__barra">
     <label class="sn-campo sn-buscador">svg<input type="search" placeholder="…"></label>
     <div class="sn-filtros" role="group"><button class="sn-pildora" aria-pressed="true">Todas <span class="sn-pildora__conteo">9</span></button>…</div>
   </div>
   <section class="sn-fichas__tipo"><h2 class="sn-fichas__subgrupo">…</h2>
     <section class="sn-categoria">
       <button class="sn-categoria__titulo" aria-expanded="true">svg <span>…</span><span class="sn-estado">3</span></button>
       <div class="sn-fichas__cuadricula"><button class="sn-ficha" aria-haspopup="dialog">…</button></div>
     </section>
   </section>
   ══════════════════════════════════════════════════════════════════════════ */
.sn-fichas { display: grid; gap: var(--sn-espacio-24); min-width: 0; }
.sn-fichas__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-espacio-12); }
.sn-buscador { flex: 1 1 260px; max-width: 460px; }
.sn-filtros { display: flex; flex-wrap: wrap; gap: var(--sn-espacio-8); }
.sn-filtros .sn-pildora { min-height: var(--sn-tactil); gap: var(--sn-espacio-8); }
.sn-pildora__conteo { font-variant-numeric: tabular-nums; }
.sn-fichas__tipo { display: grid; gap: var(--sn-espacio-16); min-width: 0; }
.sn-fichas__subgrupo {
  margin: 0;
  color: var(--sn-texto-terciario);
  font-size: var(--sn-tamano-subgrupo);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-categoria { display: grid; gap: var(--sn-espacio-12); min-width: 0; }
.sn-categoria__titulo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--sn-espacio-8);
  min-height: var(--sn-tactil);
  max-width: 100%;
  padding: 0 var(--sn-espacio-8) 0 0;
  border: 0;
  background: transparent;
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  font-size: var(--sn-tamano-nombre-tarjeta);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sn-categoria__titulo svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--sn-texto-secundario); transform: rotate(90deg); transition: transform var(--sn-transicion); }
.sn-categoria__titulo[aria-expanded="false"] svg { transform: none; }
.sn-categoria__titulo:hover svg { color: var(--sn-texto); }
.sn-fichas__cuadricula { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sn-espacio-12); }

/* La ficha: el botón que abre su flotante. Mismo efecto al pasar que la tarjeta de módulo. */
.sn-ficha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sn-espacio-12);
  min-width: 0;
  min-height: 120px;
  padding: var(--sn-espacio-16);
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sn-transicion), background-color var(--sn-transicion), transform var(--sn-transicion);
}
.sn-ficha:hover, .sn-ficha:focus-visible { border-color: var(--sn-acento); background: var(--sn-superficie-hover); transform: translateY(-2px); }
.sn-ficha__arriba { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-espacio-8); min-width: 0; }
.sn-ficha__nombre {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sn-tamano-nombre-fila);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sn-ficha__abajo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sn-espacio-8); min-width: 0; }
.sn-ficha__dato { display: grid; gap: 2px; min-width: 0; }
.sn-ficha__etiqueta { color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); }
.sn-ficha__valor { font-size: var(--sn-tamano-cuerpo); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ══ FLOTANTE DE DIRECCIONAMIENTO (24-10-2026) ══════════════════════════════
   Un <dialog> modal que dice qué es lo elegido y lleva a donde se trabaja.
   <dialog class="sn-flotante" role="dialog" aria-modal="true" aria-labelledby="…">
     <div class="sn-flotante__cuerpo">
       <div class="sn-flotante__cabeza">
         <div><p class="sn-flotante__contexto">Tipo · Categoría</p><h2 class="sn-flotante__titulo">…</h2></div>
         <div class="sn-flotante__esquina"><span class="sn-estado">…</span><button class="sn-boton-icono" aria-label="Cerrar">×</button></div>
       </div>
       <div class="sn-flotante__datos"><div class="sn-flotante__dato"><span class="sn-flotante__etiqueta">…</span><strong class="sn-flotante__valor">…</strong></div>…</div>
       <h3 class="sn-fichas__subgrupo">…</h3><div class="sn-flotante__filas"><button class="sn-flotante__fila">…</button></div>
       <div class="sn-flotante__pie">botones</div>
     </div>
   </dialog>
   Esc y un clic fuera lo cierran; el foco vuelve a la ficha que lo abrió.
   ══════════════════════════════════════════════════════════════════════════ */
.sn-flotante {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 140px);
  margin: 120px auto auto;
  padding: 0;
  border: 1px solid var(--sn-borde-fuerte);
  border-radius: var(--sn-radio-panel);
  background: var(--sn-superficie);
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  overflow-y: auto;
}
.sn-flotante::backdrop { background: color-mix(in srgb, var(--sn-fondo) 72%, transparent); }
.sn-flotante__cuerpo { display: grid; gap: var(--sn-espacio-16); padding: 20px; }
.sn-flotante__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-espacio-12); min-width: 0; }
.sn-flotante__cabeza > div:first-child { display: grid; gap: var(--sn-espacio-4); min-width: 0; }
.sn-flotante__contexto {
  margin: 0;
  color: var(--sn-texto-secundario);
  font-size: var(--sn-tamano-menor);
  font-weight: 600;
  letter-spacing: var(--sn-espaciado-grupo);
  text-transform: uppercase;
}
.sn-flotante__titulo { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sn-flotante__esquina { display: flex; align-items: center; gap: var(--sn-espacio-4); flex: 0 0 auto; margin: -8px -10px 0 0; }
.sn-flotante__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-espacio-12); }
.sn-flotante__dato {
  display: grid;
  align-content: start;
  gap: var(--sn-espacio-4);
  min-width: 0;
  padding: var(--sn-espacio-12);
  border-radius: var(--sn-radio-tarjeta);
  border: 1px solid var(--sn-borde);
  background: var(--sn-fondo);
}
.sn-flotante__etiqueta { color: var(--sn-texto-secundario); font-size: var(--sn-tamano-menor); }
.sn-flotante__valor { font-size: var(--sn-tamano-cuerpo); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sn-flotante__valor--cifra { font-size: 20px; font-weight: 700; }
.sn-flotante__filas { display: grid; gap: var(--sn-espacio-8); }
.sn-flotante__fila {
  display: flex;
  align-items: center;
  gap: var(--sn-espacio-10);
  min-height: var(--sn-tactil);
  padding: var(--sn-espacio-8) var(--sn-espacio-12);
  border-radius: var(--sn-radio-control);
  border: 1px solid var(--sn-borde);
  background: transparent;
  color: var(--sn-texto);
  font-family: var(--sn-fuente);
  text-align: left;
}
button.sn-flotante__fila { cursor: pointer; transition: border-color var(--sn-transicion), background-color var(--sn-transicion); }
button.sn-flotante__fila:hover { border-color: var(--sn-acento); background: var(--sn-superficie-hover); }
.sn-flotante__fila .sn-codigo { flex: 0 0 auto; color: var(--sn-texto-terciario); }
.sn-flotante__fila-nombre { flex: 1 1 auto; min-width: 0; font-size: var(--sn-tamano-nombre-fila); font-weight: 600; overflow-wrap: anywhere; }
.sn-flotante__fila-valor { flex: 0 0 auto; color: var(--sn-texto-secundario); font-size: var(--sn-tamano-secundario); font-variant-numeric: tabular-nums; }
.sn-flotante__pie { display: flex; flex-wrap: wrap; gap: var(--sn-espacio-8); padding-top: var(--sn-espacio-16); border-top: 1px solid var(--sn-borde); }

/* ══ HASTA 1100 Y HASTA 768 PX ═════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sn-fichas__cuadricula { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sn-fichas__cuadricula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .sn-fichas__cuadricula { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .sn-cuadricula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-lista-detalle, .sn-lista-detalle--ancha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .sn-barra { padding: 0 var(--sn-espacio-16); }
  .sn-barra__quien { display: none; }
  .sn-marco__cuerpo { display: block; min-height: 0; }
  .sn-panel {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--sn-borde);
  }
  .sn-encabezado { position: static; padding: var(--sn-espacio-16) var(--sn-espacio-16) 0; }
  .sn-trabajo { padding: var(--sn-espacio-16) var(--sn-espacio-16) var(--sn-espacio-48); }
  .sn-cuadricula { grid-template-columns: minmax(0, 1fr); }
  .sn-tarjeta__devolver { opacity: 1; }
  .sn-resumen--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-filas__cabeza { display: none; }
  .sn-filas__fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sn-espacio-4); }
  .sn-filas__fila > .sn-filas__principal { grid-column: 1; grid-row: 1; }
  .sn-filas__fila > .sn-filas__final { grid-column: 2; grid-row: 1; }
  .sn-filas__fila > :not(.sn-filas__principal):not(.sn-filas__final) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-tarjeta, .sn-fila, .sn-boton, .sn-pildora, .sn-ficha { transition: none; }
  .sn-tarjeta:hover, .sn-tarjeta:focus-within, .sn-ficha:hover, .sn-ficha:focus-visible { transform: none; }
}