@media screen {
  :where(:root)[data-diseno="nuevo"] {
    --dn-crema-arriba: #f7edd9;
    --dn-crema-abajo: #ecf0e6;
    --dn-negro: #191b1a;
    --dn-sobre-negro: #ffffff;
    --dn-mostaza: #ebc04a;
    --dn-sobre-mostaza: #191b1a;
    --dn-verde: #23574a;
    --dn-ladrillo: #b8401b;
    --dn-mostaza-palida: #f6ebc8;
    --dn-esqueleto: #e3dccf;
    --dn-esqueleto-brillo: rgb(255 253 247 / 0.8);
    --acento: #191b1a;
    --acento-fuerte: #1d4f41;
    --acento-suave: #f6ebc8;
    --sobre-acento: #ffffff;
    --rol-proceso-fondo: #efe9dc;
    --rol-proceso-texto: #2b2d2a;
    --rol-proceso-borde: color-mix(in srgb, #191b1a 26%, transparent);
    --rol-proceso-marca: #191b1a;
    --rol-dimension-fondo: #191b1a;
    --rol-dimension-texto: #ffffff;
    --rol-dimension-borde: #191b1a;
    --rol-dimension-marca: #e6e2d8;
    --sb-globo-proceso-fondo: #f6ebc8;
    --sb-globo-proceso-texto: #191b1a;
    --avatar-de: #191b1a;
    --avatar-a: #23574a;
    --almacen-fondo: #f7f3ec;
    --almacen-suave: #f2ede4;
    --almacen-pastel: #e1eee7;
    --almacen-borde: #e8e2d6;
    --almacen-borde-fuerte: #d6cebf;
    --almacen-cobalto: #23574a;
    --almacen-cobalto-2: #3f6f61;
    --almacen-tinta: #191b1a;
    --almacen-parante-1: #5f8f80;
    --almacen-parante-2: #23574a;
    --almacen-parante-3: #2f6656;
    --almacen-bandeja-1: #ece6da;
    --almacen-bandeja-2: #ddd5c6;
    --almacen-bandeja-3: #cfc6b5;
    --almacen-elegida-1: #faedc4;
    --almacen-elegida-2: #f2dc94;
    --almacen-elegida-3: #ebcf73;
    --almacen-calor-0: #f4efe5;
    --almacen-calor-1: #e1eee7;
    --almacen-calor-2: #8fb8a8;
    --almacen-perforacion: #12352c;
    --almacen-arriostre: #3f6f61;
    --almacen-placa: #b9b2a3;
    --almacen-etiqueta-tinta: #191b1a;
    --almacen-zuncho: #d0c8b8;
    --almacen-canto-azul: #5f6f66;
    --almacen-lata-banda: #e6efe9;
    --almacen-bolsa-1: #f1ede5;
    --almacen-piso-1: #ece7dd;
    --almacen-sombra: #191b1a;
    --almacen-lata-2: #d3ccbd;
    --almacen-lata-3: #a89f8d;
    --almacen-perfil-1: #e8e3d8;
    --almacen-perfil-2: #c4bcab;
    --almacen-bolsa-2: #d0c9ba;
    --almacen-placa-2: #9a917f;
    --almacen-piso-2: #d8d0c1;
    --almacen-piso-3: #c6bcaa;
    --almacen-iso-linea: rgb(25 27 26 / 0.5);
    --dn-pildora-fondo: #191b1a;
    --dn-pildora-texto: #ffffff;
    --dn-radio-tarjeta: 22px;
    --dn-radio-control: 12px;
    --dn-curva: cubic-bezier(0.22, 1, 0.36, 1);
    --dn-curva-mueve: cubic-bezier(0.65, 0, 0.35, 1);
    --dn-curva-sale: cubic-bezier(0.4, 0, 1, 1);
    --dn-curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
    --dn-dur-entra: 520ms;
    --dn-paso: 60ms;
    --dn-dur-hover: 200ms;
    --dn-dur-presion: 120ms;
    --dn-dur-sale: 200ms;
    --dn-dur-mueve: 380ms;
    --dn-dur-flota: 440ms;
    --dn-dur-posa: 280ms;
    --dn-dur-pantalla: 440ms;
    --dn-sombra-elevada: 0 2px 4px rgb(52 44 28 / 0.05), 0 20px 44px -18px rgb(52 44 28 / 0.26);
    --fondo: #f5f1e8;
    --superficie: #ffffff;
    --borde: #e8e2d6;
    --borde-fuerte: #d6cebf;
    --grid-suave: #efe9de;
    --hover: #f2ede4;
    --fondo-suave: #f7f3ec;
    --pista: #ebe5d9;
    --lienzo-frio: transparent;
    --tarjeta-fondo: #ffffff;
    --tarjeta-borde: #efe9df;
    --sombra-tarjeta: 0 1px 2px rgb(52 44 28 / 0.04), 0 10px 28px -16px rgb(52 44 28 / 0.12);
    --sombra-flotante: 0 24px 60px -18px rgb(40 34 22 / 0.3), 0 2px 8px rgb(40 34 22 / 0.06);
    --velo: rgb(38 34 26 / 0.34);
    --tinta: #191b1a;
    --tinta-2: #4a4c47;
    --tinta-3: #63645c;
    --tinta-debil: #d6cfc2;
    --rol-accion-fondo: #191b1a;
    --rol-accion-texto: #ffffff;
    --rol-accion-borde: #191b1a;
    --rol-accion-hover: #3a3d3a;
    --rol-filtro-fondo: #191b1a;
    --rol-filtro-texto: var(--dn-sobre-negro); 
    --rol-filtro-borde: #191b1a;
    --rol-filtro-marca: var(--dn-sobre-negro);
    --rol-conforme-fondo: #e1eee7;
    --rol-conforme-texto: #1d4f41;
    --rol-conforme-borde: color-mix(in srgb, #23574a 32%, transparent);
    --rol-conforme-marca: #23574a;
    --rol-temprana-fondo: #fbf0cf;
    --rol-temprana-texto: #644d06;
    --rol-temprana-borde: color-mix(in srgb, #d9ae2c 45%, transparent);
    --rol-temprana-marca: #d9ae2c;
    --rol-media-fondo: #fbe6d6;
    --rol-media-texto: #8a3a10;
    --rol-media-borde: color-mix(in srgb, #d9692a 40%, transparent);
    --rol-media-marca: #d9692a;
    --rol-critico-fondo: #f8e0d6;
    --rol-critico-texto: #9c3216;
    --rol-critico-borde: color-mix(in srgb, #b8401b 38%, transparent);
    --rol-critico-marca: #b8401b;
    --rol-borrador-fondo: #f2ede4;
    --rol-borrador-texto: #63645c;
    --rol-borrador-borde: #e8e2d6;
    --rol-borrador-marca: #d6cfc2;
    --rol-cerrado-fondo: #f2ede4;
    --rol-cerrado-texto: var(--tinta);
    --rol-cerrado-borde: #d6cfc2;
    --rol-cerrado-marca: #4a4c47;
    --bloque-acento: #191b1a;
    --bloque-ok: #23574a;
    --bloque-alerta: #85650d;
    --bloque-peligro: #b03d19;
    --bloque-neutro: #3a3d3a;
    --inicio-marino: #191b1a;
    --inicio-acento: #191b1a;
    --inicio-acento-fuerte: #1d4f41;
    --ms-barra-medio: #191b1a;
    --sb-texto: #ffffff;
    --sb-texto-2: #d8dad3;
    --sb-rotulo: #a3a69d;
    --sb-activa-fondo: #ffffff;
    --sb-activa-texto: #191b1a;
    --sb-hover: rgb(255 255 255 / 0.09);
    --sb-bandeja: rgb(255 255 255 / 0.06);
    --sb-filete: rgb(255 255 255 / 0.12);
  }
  :root[data-diseno="nuevo"] [data-tema="oscuro"]:where(*) {
    --dn-pildora-fondo: #ece8e1;
    --dn-pildora-texto: #191b1a;
    --dn-sombra-elevada: 0 20px 44px -18px rgb(0 0 0 / 0.6);
    --dn-esqueleto: #2a2825;
    --dn-esqueleto-brillo: rgb(255 255 255 / 0.06);
    --dn-mostaza-palida: #2c2617;
    --acento: #ebc04a;
    --acento-fuerte: #f0d27a;
    --acento-suave: #2c2617;
    --sobre-acento: #191b1a;
    --rol-proceso-fondo: #2a2824;
    --rol-proceso-texto: #e9e4da;
    --rol-proceso-borde: color-mix(in srgb, #e9e4da 30%, transparent);
    --rol-proceso-marca: #d8d2c6;
    --rol-dimension-fondo: #e9e4da;
    --rol-dimension-texto: #191b1a;
    --rol-dimension-borde: #e9e4da;
    --rol-dimension-marca: #3a3d3a;
    --avatar-de: #3a3d3a;
    --avatar-a: #23574a;
    --lienzo-frio: #141312;
    --tarjeta-fondo: #1d1b19;
    --tarjeta-borde: #2e2b27;
    --inicio-marino: #232523;
    --inicio-acento: #ebc04a;
    --inicio-acento-fuerte: #f0d27a;
    --ms-barra-medio: #232523;
    --sb-texto: #f0eeeb;
    --sb-texto-2: #d8dad3;
    --sb-rotulo: #a3a69d;
    --sb-activa-fondo: #ece8e1;
    --sb-activa-texto: #191b1a;
    --sb-globo-proceso-fondo: #f6ebc8;
    --sb-globo-proceso-texto: #191b1a;
  }
  :where(:root)[data-diseno="nuevo"] {
    accent-color: var(--acento);
  }
  :root[data-diseno="nuevo"] ::selection {
    background: #f3dd94;
    color: #191b1a;
  }
  :root[data-diseno="nuevo"] .sb-raiz:not([data-tema="oscuro"]) {
    isolation: isolate;
  }
  :root[data-diseno="nuevo"] .sb-raiz:not([data-tema="oscuro"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(120% 60% at 0% 0%, var(--dn-crema-arriba) 0%, transparent 60%),
      linear-gradient(180deg, var(--fondo) 30%, var(--dn-crema-abajo) 100%);
  }
  :root[data-diseno="nuevo"] .sb-raiz:not([data-tema="oscuro"]) {
    background: transparent;
  }
  :root[data-diseno="nuevo"] .sb-barra {
    background: var(--fondo);
    border-bottom-color: transparent;
  }
  :root[data-diseno="nuevo"] .sb-raiz div.sticky.z-30.shrink-0.border-b.backdrop-blur {
    background: var(--fondo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  :root[data-diseno="nuevo"] .sb-buscar,
  :root[data-diseno="nuevo"] .sb-tienda,
  :root[data-diseno="nuevo"] .sb-crear,
  :root[data-diseno="nuevo"] .sb-mgw,
  :root[data-diseno="nuevo"] .sb-icono,
  :root[data-diseno="nuevo"] .sb-kbd {
    border-radius: 999px;
  }
  @media (min-width: 1024px) {
    :root[data-diseno="nuevo"] .sb-buscar {
      background: var(--superficie);
      border-color: transparent;
      box-shadow: var(--sombra-tarjeta);
    }
    :root[data-diseno="nuevo"] .sb-buscar:hover {
      background: var(--superficie);
      border-color: var(--borde);
    }
  }
  :root[data-diseno="nuevo"] .sb-tienda {
    border-color: transparent;
    box-shadow: var(--sombra-tarjeta);
  }
  :root[data-diseno="nuevo"] .sb-pop,
  :root[data-diseno="nuevo"] .sb-panel {
    border-color: transparent;
    border-radius: 20px;
    padding: 8px;
  }
  :root[data-diseno="nuevo"] .sb-panel {
    padding: 0;
  }
  :root[data-diseno="nuevo"] .sb-item,
  :root[data-diseno="nuevo"] .sb-aviso,
  :root[data-diseno="nuevo"] .sb-panel-fila {
    border-radius: 12px;
  }
  @media (min-width: 1024px) {
    :root[data-diseno="nuevo"] .sb-lateral {
      top: calc(var(--sb-alto-barra) + 8px);
      height: calc(calc(100dvh / var(--escala-ui, 1)) - var(--sb-alto-barra) - 16px);
      margin: 8px 0 8px 12px;
      border-radius: 24px;
      box-shadow: 0 24px 48px -24px rgb(25 27 26 / 0.5);
    }
    :root[data-diseno="nuevo"] .sb-raiz[data-menu="colapsado"] .sb-lateral {
      width: 60px;
      margin-left: 10px;
      border-radius: 30px;
    }
  }
  :root[data-diseno="nuevo"] .sb-arbol {
    position: relative;
    padding: 10px 10px 12px;
    contain: layout;
  }
  :root[data-diseno="nuevo"] .sb-pie {
    padding: 8px 10px 10px;
  }
  :root[data-diseno="nuevo"] .sb-fila,
  :root[data-diseno="nuevo"] .sb-seccion,
  :root[data-diseno="nuevo"] .sb-riel-boton,
  :root[data-diseno="nuevo"] .sb-chincheta,
  :root[data-diseno="nuevo"] .sb-tienda-cajon {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] .sb-fila {
    position: relative;
    z-index: 1;
  }
  :root[data-diseno="nuevo"] .sb-seccion {
    z-index: 1;
  }
  :root[data-diseno="nuevo"] .sb-riel-boton {
    width: 44px;
  }
  :root[data-diseno="nuevo"] .sb-bandeja {
    border-radius: 22px;
    padding-bottom: 6px;
  }
  :root[data-diseno="nuevo"] .sb-fila,
  :root[data-diseno="nuevo"] .sb-seccion,
  :root[data-diseno="nuevo"] .sb-riel-boton,
  :root[data-diseno="nuevo"] .sb-panel-fila,
  :root[data-diseno="nuevo"] .sb-item {
    transition:
      background-color var(--dn-dur-hover) ease,
      color var(--dn-dur-hover) ease,
      scale var(--dn-dur-presion) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-flecha {
    transition: transform var(--dn-dur-hover) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-lista > li {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows var(--dn-dur-mueve) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-lista > li.sb-bandeja {
    grid-template-rows: auto 1fr;
  }
  :root[data-diseno="nuevo"] .sb-secciones {
    min-height: 0;
    overflow: hidden;
  }
  :root[data-diseno="nuevo"] .sb-chincheta {
    z-index: 2;
  }
  :root[data-diseno="nuevo"] .dn-indicador {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 999px;
    background: var(--sb-activa-fondo);
    pointer-events: none;
    transform-origin: 0 0;
  }
  :root[data-diseno="nuevo"] .sb-arbol[data-volando] [aria-current="page"]:not([data-bajo-pildora]) {
    background: transparent;
    color: var(--sb-texto-2);
    transition: color 140ms ease 110ms;
  }
  :root[data-diseno="nuevo"] .sb-arbol[data-volando] [aria-current="page"]:not([data-bajo-pildora]) .sb-ico,
  :root[data-diseno="nuevo"] .sb-arbol[data-volando] [aria-current="page"]:not([data-bajo-pildora]) .sb-punto {
    color: var(--sb-texto-2);
    opacity: 0;
  }
  :root[data-diseno="nuevo"] .sb-arbol[data-volando] [data-bajo-pildora] {
    background: transparent;
    color: var(--sb-activa-texto);
    transition: color 160ms ease 240ms;
  }
  :root[data-diseno="nuevo"] .sb-arbol[data-volando] [data-bajo-pildora] .sb-ico {
    color: var(--sb-activa-texto);
  }
  :root[data-diseno="nuevo"] .sb-arbol [data-bajo-pildora]:focus-visible {
    outline-color: var(--sb-activa-texto) !important;
    outline-offset: -3px;
  }
  :root[data-diseno="nuevo"] .sb-panel,
  :root[data-diseno="nuevo"] .sb-pop {
    transition:
      opacity 220ms ease-out,
      scale var(--dn-dur-posa) var(--dn-curva),
      translate var(--dn-dur-posa) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-panel { transform-origin: 0 24px; }
  :root[data-diseno="nuevo"] .sb-pop { transform-origin: 100% 0; }
  @starting-style {
    :root[data-diseno="nuevo"] .sb-panel {
      opacity: 0;
      translate: -6px 0;
      scale: 0.97;
    }
    :root[data-diseno="nuevo"] .sb-pop {
      opacity: 0;
      translate: 0 -4px;
      scale: 0.97;
    }
  }
  :root[data-diseno="nuevo"] .sb-cajon {
    border-radius: 0 28px 28px 0;
    animation: dn-cajon-entra var(--dn-dur-flota) var(--dn-curva-cajon);
  }
  :root[data-diseno="nuevo"] .sb-velo {
    animation: dn-aparece var(--dn-dur-posa) ease-out;
  }
  :root[data-diseno="nuevo"] .sb-inferior {
    background: var(--fondo);
    border-top-color: transparent;
  }
  :root[data-diseno="nuevo"] .sb-inferior-primaria .sb-inferior-ico {
    border-radius: 999px;
    width: 40px;
  }
  :root[data-diseno="nuevo"] .rounded-lg { border-radius: 12px; }
  :root[data-diseno="nuevo"] .rounded-xl { border-radius: 18px; }
  :root[data-diseno="nuevo"] .rounded-2xl { border-radius: 24px; }
  :root[data-diseno="nuevo"] .rounded-t-2xl { border-top-left-radius: 24px; border-top-right-radius: 24px; }
  :root[data-diseno="nuevo"] :is(.tarjeta, .tarjeta-tablero) {
    border-radius: var(--dn-radio-tarjeta);
  }
  :root[data-diseno="nuevo"] :is(
      .tarjeta,
      .tarjeta-tablero,
      section.rounded-xl.border,
      .rounded-xl.border.bg-\[var\(--superficie\)\],
      .rounded-2xl.border.bg-\[var\(--superficie\)\]
    ):not([class*="rol-"]) {
    border-color: transparent;
    box-shadow: var(--sombra-tarjeta);
  }
  :root[data-diseno="nuevo"] :is(.tarjeta, .tarjeta-tablero, section.rounded-xl.border, .rounded-xl.border.bg-\[var\(--superficie\)\])
    :is(.tarjeta, .tarjeta-tablero, section.rounded-xl.border, .rounded-xl.border.bg-\[var\(--superficie\)\]) {
    box-shadow: none;
  }
  :root[data-diseno="nuevo"] span.grid.h-10.w-10.rounded-xl:has(+ div > p.rotulo-seccion) {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] .avatar-ficha {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] .numero-hero {
    font-weight: 400;
    letter-spacing: -0.025em;
  }
  :root[data-diseno="nuevo"] .rotulo-seccion {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(
      a.tarjeta, a.tarjeta-tablero, a.rounded-xl.border, button.rounded-xl.border, a.rounded-2xl.border, .tarjeta-hover,
      :is(a, button) > :is(.tarjeta, .tarjeta-tablero, .rounded-xl.border, .rounded-2xl.border)
    ):not([data-papel] *) {
    position: relative;
    transition:
      translate var(--dn-dur-hover) var(--dn-curva),
      scale var(--dn-dur-presion) var(--dn-curva),
      border-color var(--dn-dur-hover) ease,
      background-color var(--dn-dur-hover) ease;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(
      a.tarjeta, a.tarjeta-tablero, a.rounded-xl.border, button.rounded-xl.border, a.rounded-2xl.border, .tarjeta-hover,
      :is(a, button) > :is(.tarjeta, .tarjeta-tablero, .rounded-xl.border, .rounded-2xl.border)
    ):not([data-papel] *)::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: var(--dn-sombra-elevada);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dn-dur-hover) var(--dn-curva);
  }
  @media (hover: hover) and (pointer: fine) {
    :root[data-diseno="nuevo"] .sb-raiz :is(
        a.tarjeta:hover, a.tarjeta-tablero:hover, a.rounded-xl.border:hover, button.rounded-xl.border:not(:disabled):hover, a.rounded-2xl.border:hover, .tarjeta-hover:hover,
        :is(a, button:not(:disabled)):hover > :is(.tarjeta, .tarjeta-tablero, .rounded-xl.border, .rounded-2xl.border)
      ):not([data-papel] *) {
      translate: 0 -4px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(
        a.tarjeta:hover, a.tarjeta-tablero:hover, a.rounded-xl.border:hover, button.rounded-xl.border:not(:disabled):hover, a.rounded-2xl.border:hover, .tarjeta-hover:hover,
        :is(a, button:not(:disabled)):hover > :is(.tarjeta, .tarjeta-tablero, .rounded-xl.border, .rounded-2xl.border)
      ):not([data-papel] *)::after {
      opacity: 1;
    }
  }
  :root[data-diseno="nuevo"] :is(button, a, span).rol-accion:not([data-fila-opcion]),
  :root[data-diseno="nuevo"] :is(button, a, span).rol-filtro:not([data-fila-opcion]),
  :root[data-diseno="nuevo"] :is(button, a).rounded-lg.border:not(.w-full, [data-fila-opcion]):is(
      .py-1, .py-1\.5, .py-2, .py-2\.5, .h-8, .h-9, .h-10, .h-11,
      .min-h-11, .min-h-\[32px\], .min-h-\[34px\], .min-h-\[36px\], .min-h-\[40px\], .min-h-\[44px\]
    ),
  :root[data-diseno="nuevo"] :is(button, a).rounded-md.border:not(.w-full, [data-fila-opcion]):is(.py-1, .py-1\.5, .py-2, .h-8, .h-9, .min-h-\[32px\], .min-h-\[36px\], .min-h-\[44px\]) {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] :is(button, a).rounded-lg.border.bg-\[var\(--superficie\)\] {
    border-color: var(--borde);
  }
  :root[data-diseno="nuevo"] [data-lista-opciones] {
    gap: 4px;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion] {
    min-height: 56px;
    padding: 6px 12px 6px 10px;
    gap: 12px;
    border-radius: var(--dn-radio-control);
    border-color: transparent;
    background: transparent;
    color: var(--tinta);
    position: relative;
    overflow: hidden;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion] [data-fo-miniatura] {
    width: 56px;
    height: 44px;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion] [data-sf="vertical"] {
    width: 30px !important;
    height: 42px !important;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion] [data-fo-nombre] {
    font-size: 14px;
    line-height: 20px;
    color: var(--tinta);
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion] [data-fo-detalle] {
    font-size: 12px;
    line-height: 16px;
    color: var(--tinta-2);
  }
  @media (hover: hover) and (pointer: fine) {
    :root[data-diseno="nuevo"] button[data-fila-opcion]:not(:disabled, [aria-pressed="true"]):hover {
      background: var(--hover);
    }
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion][aria-pressed="true"] {
    background: var(--acento-suave);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--dn-negro);
    color: var(--tinta);
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion][aria-pressed="true"] :is([data-fo-nombre], [data-fo-detalle]) {
    color: var(--tinta);
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion]:focus-visible {
    outline: 3px solid var(--dn-mostaza);
    outline-offset: 1px;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion]:disabled {
    order: 2;
    min-height: 44px;
    opacity: 0.55;
  }
  :root[data-diseno="nuevo"] button[data-fila-opcion]:disabled [data-fo-detalle] {
    display: none;
  }
  :root[data-diseno="nuevo"] [data-fo-separador] {
    display: block;
    order: 1;
    margin-top: 8px;
    padding: 8px 4px 4px;
    border-top: 1px solid var(--borde);
    font-size: 12px;
    line-height: 16px;
    color: var(--tinta-3);
  }
  :root[data-diseno="nuevo"] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea).border {
    border-radius: var(--dn-radio-control);
    border-color: var(--borde);
  }
  :root[data-diseno="nuevo"] input[type="search"].border {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] span[role="group"].bg-\[var\(--grid-suave\)\] {
    border-radius: 999px;
    padding: 3px;
  }
  :root[data-diseno="nuevo"] span[role="group"].bg-\[var\(--grid-suave\)\] > button {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] div.items-stretch.border-b:has(> nav[data-origen="pestana"]) {
    border-bottom-color: transparent;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a {
    border-bottom-color: transparent;
    border-radius: 999px;
  }
  @media (hover: hover) and (pointer: fine) {
    :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a:not([aria-current="page"], [data-bajo-pildora]):hover {
      background: color-mix(in srgb, var(--tinta) 6%, transparent);
    }
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > span[aria-hidden] {
    background: var(--dn-pildora-fondo);
    box-shadow: none;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > span[aria-hidden].h-9 {
    height: 32px;
    top: calc(50% - 16px);
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"]:has(> span[aria-hidden]) > a[data-bajo-pildora] {
    color: var(--dn-pildora-texto);
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"]:has(> span[aria-hidden]) > a[data-bajo-pildora]:not([aria-current="page"]) {
    transition: color 160ms ease 200ms;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"]:has(> span[aria-hidden]) > a[aria-current="page"]:not([data-bajo-pildora]) {
    transition: color 160ms ease 100ms;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"]:not(:has(> span[aria-hidden])) > a[aria-current="page"] {
    background: var(--dn-pildora-fondo);
    color: var(--dn-pildora-texto);
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] {
    align-items: center;
    padding-block: 4px;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a {
    align-self: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    margin-block: 0;
    padding-block: 0;
    padding-inline: 14px;
    border-width: 0;
    box-shadow: none;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a:focus:not(:focus-visible) {
    outline: none;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a:focus-visible {
    outline: 2px solid var(--dn-mostaza) !important;
    outline-offset: 2px;
  }
  :root[data-diseno="nuevo"] div[aria-live="polite"].pointer-events-none.fixed {
    align-items: center;
    padding-right: 1rem;
  }
  :root[data-diseno="nuevo"] div[aria-live="polite"].pointer-events-none.fixed > div[role="status"] {
    --superficie: #191b1a;
    --tinta: #ffffff;
    --tinta-2: #e2e4dd;
    --tinta-3: #c9cbc4;
    --borde: transparent;
    --hover: rgb(255 255 255 / 0.12);
    --rol-cerrado-texto: var(--tinta);
    --rol-conforme-marca: #5fc39c;
    --rol-temprana-marca: #ebc04a;
    --rol-media-marca: #f2a35e;
    --rol-critico-marca: #f08a6a;
    --ok: #5fc39c;
    --alerta: #ebc04a;
    --peligro: #f08a6a;
    border-radius: 22px;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
    animation: dn-aviso-sube var(--dn-dur-flota) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] div[aria-live="polite"].pointer-events-none.fixed > div[role="status"] > button:not([aria-label]) {
    background: var(--dn-mostaza);
    color: var(--dn-sobre-mostaza);
    border-color: transparent;
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, scale, translate;
  }
  :root[data-diseno="nuevo"] .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, scale, translate;
  }
  :root[data-diseno="nuevo"] .transition-transform {
    transition-property: transform, scale, translate;
  }
  :root[data-diseno="nuevo"] :is(.duration-75, .duration-100, .duration-150, .duration-200) {
    transition-duration: var(--dn-dur-hover);
  }
  :root[data-diseno="nuevo"] .transition-colors:is(:not([class*="duration-"]), .duration-75, .duration-100, .duration-150, .duration-200) {
    transition-duration: var(--dn-dur-hover), var(--dn-dur-hover), var(--dn-dur-hover), var(--dn-dur-hover), var(--dn-dur-hover), var(--dn-dur-hover), var(--dn-dur-presion), var(--dn-dur-hover);
    transition-timing-function: ease, ease, ease, ease, ease, ease, var(--dn-curva), var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .transition:is(:not([class*="duration-"]), .duration-75, .duration-100, .duration-150, .duration-200) {
    transition-timing-function: var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .transition-transform:is(:not([class*="duration-"]), .duration-75, .duration-100, .duration-150, .duration-200) {
    transition-duration: var(--dn-dur-hover), var(--dn-dur-presion), var(--dn-dur-hover);
    transition-timing-function: var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button, a[role="button"], summary):not([class*="transition"], [class*="sb-"]) {
    transition:
      scale var(--dn-dur-presion) var(--dn-curva),
      background-color var(--dn-dur-hover) ease,
      color var(--dn-dur-hover) ease,
      border-color var(--dn-dur-hover) ease;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button, a[role="button"], a.rol-accion, a.rounded-lg.border, summary):not(:disabled, [aria-disabled="true"]):active {
    scale: 0.97;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is([role="tab"], [role="menuitem"], [role="option"], [role="switch"], a.rounded-full):not([data-papel] *, [class*="transition"], [class*="sb-"]) {
    transition: scale var(--dn-dur-presion) var(--dn-curva), background-color var(--dn-dur-hover) ease, color var(--dn-dur-hover) ease;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is([role="tab"], [role="menuitem"], [role="option"], [role="switch"], a.rounded-full):not([aria-disabled="true"], :disabled, [data-papel] *):active {
    scale: 0.97;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button.w-full, a.tarjeta, a.tarjeta-tablero, a.rounded-xl, button.rounded-xl, a.rounded-2xl, :is(a, button):has(> .tarjeta), .sb-fila, .sb-seccion, .sb-panel-fila):not(:disabled):active {
    scale: 0.985;
  }
  :root[data-diseno="nuevo"] .drawer-sube {
    animation: dn-hoja-sube var(--dn-dur-flota) var(--dn-curva-cajon);
  }
  :root[data-diseno="nuevo"] .panel-entra {
    animation: dn-panel-entra var(--dn-dur-flota) var(--dn-curva-cajon);
  }
  :root[data-diseno="nuevo"] .paleta-entra {
    animation: dn-posa var(--dn-dur-posa) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .menu-entra {
    animation: dn-posa var(--dn-dur-posa) var(--dn-curva);
    transform-origin: top;
  }
  :root[data-diseno="nuevo"] .sb-raiz .fixed.inset-0 > .absolute.inset-0.bg-\[var\(--velo\)\],
  :root[data-diseno="nuevo"] .sb-raiz .fixed.inset-0.bg-\[var\(--velo\)\] {
    animation: dn-aparece var(--dn-dur-posa) ease-out;
  }
  :root[data-diseno="nuevo"] .panel-entra {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    border-left-color: transparent;
  }
  :root[data-diseno="nuevo"] .ruta-entra {
    animation: none;
  }
  :root[data-diseno="nuevo"] .skeleton:not(.absolute, .fixed, .sticky) {
    position: relative;
  }
  :root[data-diseno="nuevo"] .skeleton {
    overflow: hidden;
  }
  :root[data-diseno="nuevo"] .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--superficie) 70%, transparent), transparent);
    animation: dn-brillo 1.6s ease-in-out 3;
  }
  :root[data-diseno="nuevo"] .dn-carga {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: min(calc(60vh / var(--escala-ui, 1)), 520px);
    padding: 24px 16px;
  }
  :root[data-diseno="nuevo"] .dn-carga-tarjeta {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    padding: 24px 32px 24px 24px;
    border-radius: var(--dn-radio-tarjeta);
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
    font-family: inherit;
    animation: dn-carga-entra 240ms var(--dn-curva) 150ms both;
  }
  :root[data-diseno="nuevo"] .dn-carga-icono {
    position: relative;
    display: grid;
    flex: none;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    background: var(--fondo);
    color: var(--tinta);
  }
  :root[data-diseno="nuevo"] .dn-carga-arco {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid transparent;
    border-top-color: var(--tinta);
    border-right-color: color-mix(in srgb, var(--tinta) 28%, transparent);
    animation: dn-carga-gira 1s linear infinite;
  }
  :root[data-diseno="nuevo"] .dn-carga-texto {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  :root[data-diseno="nuevo"] .dn-carga-abriendo {
    font-size: 12px;
    color: var(--tinta-3);
  }
  :root[data-diseno="nuevo"] .dn-carga-nombre {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--tinta);
  }
  :root[data-diseno="nuevo"] .dn-esq-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  @media (min-width: 768px) {
    :root[data-diseno="nuevo"] .dn-esq-kpis {
      grid-template-columns: none;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    }
  }
  :root[data-diseno="nuevo"] .dn-esq-cuerpo {
    display: grid;
    align-content: start;
    gap: 12px;
  }
  :root[data-diseno="nuevo"] .dn-esq-b {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: var(--dn-esqueleto);
    opacity: 0;
    animation:
      dn-esq-entra var(--dn-dur-entra) var(--dn-curva) calc(100ms + min(var(--i, 0), 7) * var(--dn-paso)) forwards,
      dn-respira 2.4s ease-in-out calc(100ms + var(--dn-dur-entra) + min(var(--i, 0), 7) * var(--dn-paso)) 6;
  }
  :root[data-diseno="nuevo"] .dn-esq-b::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background: linear-gradient(90deg, transparent, var(--dn-esqueleto-brillo), transparent);
    animation: dn-brillo 1.8s cubic-bezier(0.45, 0, 0.55, 1) calc(300ms + min(var(--i, 0), 7) * var(--dn-paso)) 3;
  }
  :root[data-diseno="nuevo"] :is(.dn-esq-kpi, .dn-esq-fila, .dn-esq-tabla) {
    border-radius: var(--dn-radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    background-repeat: no-repeat;
    background-color: var(--superficie);
  }
  :root[data-diseno="nuevo"] .dn-esq-kpi {
    height: 100px;
    background-image: linear-gradient(var(--dn-esqueleto) 0 0), linear-gradient(var(--dn-esqueleto) 0 0);
    background-position: 20px 22px, 20px 48px;
    background-size: 44% 10px, 60% 28px;
  }
  :root[data-diseno="nuevo"] .dn-esq-fila {
    height: 60px;
    background-image:
      radial-gradient(circle at 38px 50%, var(--dn-esqueleto) 0 17px, transparent 18px),
      linear-gradient(var(--dn-esqueleto) 0 0),
      linear-gradient(var(--dn-esqueleto) 0 0),
      linear-gradient(var(--dn-esqueleto) 0 0);
    background-position: 0 0, 70px 18px, 70px 36px, calc(100% - 22px) 50%;
    background-size: 100% 100%, 32% 10px, 20% 8px, 76px 22px;
  }
  :root[data-diseno="nuevo"] .dn-esq-tabla {
    height: 380px;
    background-image: linear-gradient(var(--dn-esqueleto) 0 0), repeating-linear-gradient(180deg, var(--dn-esqueleto) 0 10px, transparent 10px 40px);
    background-position: 22px 24px, 22px 70px;
    background-size: 30% 12px, calc(100% - 44px) calc(100% - 94px);
  }
  :root[data-diseno="nuevo"] .dn-esq-bloque-vivo[data-forma="filas"] .dn-esq-cuerpo {
    gap: 8px;
  }
  :root[data-diseno="nuevo"] .dn-llega {
    animation: dn-aparece var(--dn-dur-entra) var(--dn-curva) both;
  }
  :root[data-diseno="nuevo"] .dn-transito {
    position: fixed;
    z-index: 20;
    display: flex;
    overflow: hidden;
    pointer-events: none;
  }
  :root[data-diseno="nuevo"] .dn-transito .dn-carga {
    min-height: 0;
  }
  :root[data-diseno="nuevo"] .dn-transito .dn-carga-tarjeta {
    animation-delay: 0ms;
  }
  :root[data-diseno="nuevo"][data-dn-transito] #contenido > * {
    opacity: 0;
    pointer-events: none;
  }
  :root[data-diseno="nuevo"]::view-transition-old(root),
  :root[data-diseno="nuevo"]::view-transition-old(dn-barra),
  :root[data-diseno="nuevo"]::view-transition-old(dn-lateral),
  :root[data-diseno="nuevo"]::view-transition-old(dn-cabecera) {
    display: none;
  }
  :root[data-diseno="nuevo"]::view-transition-new(root),
  :root[data-diseno="nuevo"]::view-transition-new(dn-barra),
  :root[data-diseno="nuevo"]::view-transition-new(dn-lateral),
  :root[data-diseno="nuevo"]::view-transition-new(dn-cabecera),
  :root[data-diseno="nuevo"]::view-transition-new(dn-contenido),
  :root[data-diseno="nuevo"]::view-transition-new(dn-transito),
  :root[data-diseno="nuevo"]::view-transition-group(*) {
    animation: none;
    mix-blend-mode: normal;
  }
  :root[data-diseno="nuevo"]::view-transition-old(dn-contenido) {
    animation: dn-vt-sale 300ms var(--dn-curva-sale) both;
    mix-blend-mode: normal;
  }
  :root[data-diseno="nuevo"] .carga-tarjeta {
    border-color: transparent;
    border-radius: var(--dn-radio-tarjeta);
  }
  :root[data-diseno="nuevo"] .carga-icono {
    border-radius: 999px;
  }
  :root[data-diseno="nuevo"] .sb-raiz #contenido a:not(.tarjeta, .tarjeta-tablero, [class*="rounded"], [class*="rol-"]):active {
    opacity: 0.6;
  }
  :root[data-diseno="nuevo"] .sb-raiz tbody tr {
    transition: background-color var(--dn-dur-hover) ease;
  }
  :root[data-diseno="nuevo"] .sb-raiz tbody tr:has(a, button):active,
  :root[data-diseno="nuevo"] .sb-raiz #contenido a[class*="hover:bg-"]:active {
    background-color: var(--acento-suave);
    transition-duration: 0ms;
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a {
    transition:
      color var(--dn-dur-hover) ease,
      background-color var(--dn-dur-hover) ease,
      scale var(--dn-dur-presion) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] nav[data-origen="pestana"] > a:active,
  :root[data-diseno="nuevo"] .sb-barra :is(.sb-icono, .sb-tienda, .sb-crear, .sb-mgw):active,
  :root[data-diseno="nuevo"] .sb-riel-boton:active {
    scale: 0.94;
  }
  :root[data-diseno="nuevo"] .sb-barra .sb-buscar:active {
    scale: 0.985;
  }
  :root[data-diseno="nuevo"] .sb-barra :is(.sb-icono, .sb-tienda, .sb-crear, .sb-mgw, .sb-buscar) {
    transition:
      background-color var(--dn-dur-hover) ease,
      color var(--dn-dur-hover) ease,
      border-color var(--dn-dur-hover) ease,
      scale var(--dn-dur-presion) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-raiz input:is([type="checkbox"], [type="radio"]) {
    transition: scale var(--dn-dur-presion) var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-raiz input:is([type="checkbox"], [type="radio"]):not(:disabled):active {
    scale: 0.86;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(#contenido, [role="dialog"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
    transition:
      border-color var(--dn-dur-hover) ease,
      box-shadow var(--dn-dur-hover) var(--dn-curva),
      background-color var(--dn-dur-hover) ease;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(#contenido, [role="dialog"]) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):focus-visible {
    outline: 2px solid transparent !important;
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-mostaza) 60%, transparent);
  }
  :root[data-diseno="nuevo"] :is(.sb-riel-boton, .sb-barra .sb-icono)[data-rotulo]::after {
    content: attr(data-rotulo);
    position: absolute;
    z-index: 60;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--dn-negro);
    color: var(--dn-sobre-negro);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgb(25 27 26 / 0.55);
    pointer-events: none;
    opacity: 0;
    transition:
      opacity 180ms ease-out,
      translate 240ms var(--dn-curva);
  }
  :root[data-diseno="nuevo"] .sb-riel-boton[data-rotulo]::after {
    left: calc(100% + 18px);
    top: 50%;
    translate: -6px -50%;
  }
  :root[data-diseno="nuevo"] .sb-barra .sb-icono[data-rotulo]::after {
    top: calc(100% + 8px);
    left: 50%;
    translate: -50% -4px;
  }
  @media (hover: hover) and (pointer: fine) {
    :root[data-diseno="nuevo"] :is(.sb-riel-boton, .sb-barra .sb-icono)[data-rotulo]:hover::after {
      opacity: 1;
      transition-delay: 80ms;
    }
    :root[data-diseno="nuevo"] .sb-riel-boton[data-rotulo]:hover::after {
      translate: 0 -50%;
    }
    :root[data-diseno="nuevo"] .sb-barra .sb-icono[data-rotulo]:hover::after {
      translate: -50% 0;
    }
  }
  :root[data-diseno="nuevo"] :is(.sb-riel-boton, .sb-barra .sb-icono)[data-rotulo]:focus-visible::after {
    opacity: 1;
  }
  :root[data-diseno="nuevo"] .sb-riel-boton[data-rotulo]:focus-visible::after {
    translate: 0 -50%;
  }
  :root[data-diseno="nuevo"] .sb-barra .sb-icono[data-rotulo]:focus-visible::after {
    translate: -50% 0;
  }
  :root[data-diseno="nuevo"] :is(.sb-riel-boton, .sb-barra .sb-icono)[aria-expanded="true"]::after {
    display: none;
  }
  :root[data-diseno="nuevo"] [role="dialog"].fixed.inset-0 > :not(.absolute, .fixed, .drawer-sube, .panel-entra, .paleta-entra),
  :root[data-diseno="nuevo"] [role="dialog"].fixed:not(.inset-0, .sb-cajon, .drawer-sube, .panel-entra, .paleta-entra),
  :root[data-diseno="nuevo"] dialog[open] {
    animation: dn-modal-entra 360ms var(--dn-curva);
  }
  :root[data-diseno="nuevo"] [role="dialog"]:not(.fixed, .sb-cajon, .sb-panel, .sb-pop, .drawer-sube, .panel-entra, .paleta-entra),
  :root[data-diseno="nuevo"] .sb-raiz #contenido details[open] > :not(summary) {
    animation: dn-posa var(--dn-dur-posa) var(--dn-curva);
  }
  @keyframes dn-aparece {
    from { opacity: 0; }
  }
  @keyframes dn-posa {
    from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  }
  @keyframes dn-hoja-sube {
    from { transform: translateY(100%); }
  }
  @keyframes dn-panel-entra {
    from { transform: translateX(48px); opacity: 0.4; }
  }
  @keyframes dn-cajon-entra {
    from { transform: translateX(-100%); }
  }
  @keyframes dn-aviso-sube {
    from { transform: translateY(16px) scale(0.97); opacity: 0; }
  }
  @keyframes dn-brillo {
    to { translate: 100% 0; }
  }
  @keyframes dn-esq-entra {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
  @keyframes dn-respira {
    50% { opacity: 0.62; }
  }
  @keyframes dn-carga-entra {
    from { opacity: 0; transform: translateY(8px); }
  }
  @keyframes dn-carga-gira {
    to { transform: rotate(360deg); }
  }
  @keyframes dn-vt-sale {
    to { opacity: 0; transform: translateY(-10px) scale(0.995); }
  }
  @keyframes dn-modal-entra {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
  }
  :where(:root)[data-diseno="nuevo"] {
    --sl-12: 12px;
    --sl-14: 14px;
    --sl-20: 20px;
    --sl-32: 32px;
    --sl-e1: 4px;
    --sl-e2: 8px;
    --sl-e3: 16px;
    --sl-e4: 24px;
    --sl-e5: 32px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-xs, .text-\[9px\], .text-\[9\.5px\], .text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[11\.5px\], .text-\[12px\], .text-\[12\.5px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-size: 12px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-sm, .text-base, .text-\[13px\], .text-\[13\.5px\], .text-\[14px\], .text-\[14\.5px\], .text-\[15px\], .text-\[16px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-size: 14px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-lg, .text-xl, .text-\[17px\], .text-\[18px\], .text-\[19px\], .text-\[20px\], .text-\[21px\], .text-\[22px\], .text-\[23px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-size: 20px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-2xl, .text-3xl, .text-4xl, .text-\[24px\], .text-\[25px\], .text-\[26px\], .text-\[28px\], .text-\[30px\], .text-\[31px\], .text-\[32px\], .text-\[34px\], .text-\[36px\], .text-\[40px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-size: 32px;
  }
  @media (min-width: 640px) {
    :root[data-diseno="nuevo"] .sb-raiz :is(.sm\:text-xs, .sm\:text-\[9px\], .sm\:text-\[9\.5px\], .sm\:text-\[10px\], .sm\:text-\[10\.5px\], .sm\:text-\[11px\], .sm\:text-\[11\.5px\], .sm\:text-\[12px\], .sm\:text-\[12\.5px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 12px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.sm\:text-sm, .sm\:text-base, .sm\:text-\[13px\], .sm\:text-\[13\.5px\], .sm\:text-\[14px\], .sm\:text-\[14\.5px\], .sm\:text-\[15px\], .sm\:text-\[16px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 14px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.sm\:text-lg, .sm\:text-xl, .sm\:text-\[17px\], .sm\:text-\[18px\], .sm\:text-\[19px\], .sm\:text-\[20px\], .sm\:text-\[21px\], .sm\:text-\[22px\], .sm\:text-\[23px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 20px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.sm\:text-2xl, .sm\:text-3xl, .sm\:text-4xl, .sm\:text-\[24px\], .sm\:text-\[25px\], .sm\:text-\[26px\], .sm\:text-\[28px\], .sm\:text-\[30px\], .sm\:text-\[31px\], .sm\:text-\[32px\], .sm\:text-\[34px\], .sm\:text-\[36px\], .sm\:text-\[40px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 32px;
    }
  }
  @media (min-width: 768px) {
    :root[data-diseno="nuevo"] .sb-raiz :is(.md\:text-xs, .md\:text-\[9px\], .md\:text-\[9\.5px\], .md\:text-\[10px\], .md\:text-\[10\.5px\], .md\:text-\[11px\], .md\:text-\[11\.5px\], .md\:text-\[12px\], .md\:text-\[12\.5px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 12px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.md\:text-sm, .md\:text-base, .md\:text-\[13px\], .md\:text-\[13\.5px\], .md\:text-\[14px\], .md\:text-\[14\.5px\], .md\:text-\[15px\], .md\:text-\[16px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 14px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.md\:text-lg, .md\:text-xl, .md\:text-\[17px\], .md\:text-\[18px\], .md\:text-\[19px\], .md\:text-\[20px\], .md\:text-\[21px\], .md\:text-\[22px\], .md\:text-\[23px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 20px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.md\:text-2xl, .md\:text-3xl, .md\:text-4xl, .md\:text-\[24px\], .md\:text-\[25px\], .md\:text-\[26px\], .md\:text-\[28px\], .md\:text-\[30px\], .md\:text-\[31px\], .md\:text-\[32px\], .md\:text-\[34px\], .md\:text-\[36px\], .md\:text-\[40px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 32px;
    }
  }
  @media (min-width: 1024px) {
    :root[data-diseno="nuevo"] .sb-raiz :is(.lg\:text-xs, .lg\:text-\[9px\], .lg\:text-\[9\.5px\], .lg\:text-\[10px\], .lg\:text-\[10\.5px\], .lg\:text-\[11px\], .lg\:text-\[11\.5px\], .lg\:text-\[12px\], .lg\:text-\[12\.5px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 12px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.lg\:text-sm, .lg\:text-base, .lg\:text-\[13px\], .lg\:text-\[13\.5px\], .lg\:text-\[14px\], .lg\:text-\[14\.5px\], .lg\:text-\[15px\], .lg\:text-\[16px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 14px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.lg\:text-lg, .lg\:text-xl, .lg\:text-\[17px\], .lg\:text-\[18px\], .lg\:text-\[19px\], .lg\:text-\[20px\], .lg\:text-\[21px\], .lg\:text-\[22px\], .lg\:text-\[23px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 20px;
    }
    :root[data-diseno="nuevo"] .sb-raiz :is(.lg\:text-2xl, .lg\:text-3xl, .lg\:text-4xl, .lg\:text-\[24px\], .lg\:text-\[25px\], .lg\:text-\[26px\], .lg\:text-\[28px\], .lg\:text-\[30px\], .lg\:text-\[31px\], .lg\:text-\[32px\], .lg\:text-\[34px\], .lg\:text-\[36px\], .lg\:text-\[40px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 32px;
    }
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-xs):not([class*="leading-"]) {
    line-height: 16px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-sm, .text-base):not([class*="leading-"]) {
    line-height: 20px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-lg, .text-xl):not([class*="leading-"]) {
    line-height: 28px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.text-2xl, .text-3xl, .text-4xl):not([class*="leading-"]) {
    line-height: 40px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.font-bold, .font-extrabold, .font-black, b, strong):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-weight: 600;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.font-thin, .font-light) {
    font-weight: 400;
  }
  :root[data-diseno="nuevo"] .sb-raiz .font-medium:not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-weight: 400;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button, a, summary, th, label, [role="tab"], h1, h2, h3, h4).font-medium:not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-weight: 600;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(h1, [role="dialog"] h2, aside h2):is(.text-sm, .text-base, .text-\[15px\], .text-\[16px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-size: 20px;
    line-height: 28px;
  }
  :root[data-diseno="nuevo"] .sb-raiz .numero-hero {
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  @media (max-width: 600px) {
    :root[data-diseno="nuevo"] .sb-raiz :is(.text-2xl, .text-3xl, .text-4xl, .text-\[24px\], .text-\[25px\], .text-\[26px\], .text-\[28px\], .text-\[30px\], .text-\[31px\], .text-\[32px\], .text-\[34px\], .text-\[36px\], .text-\[40px\], .sm\:text-2xl, .sm\:text-\[40px\]):not([data-papel] *, [data-pantalla="en-vivo"] *) {
      font-size: 20px;
      line-height: 28px;
    }
  }
  @media (pointer: coarse) {
    :root[data-diseno="nuevo"] .sb-raiz :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"]):not([data-papel] *) {
      font-size: 16px;
    }
  }
  :root[data-diseno="nuevo"] .sb-raiz .rotulo-seccion {
    font-size: 12px;
    font-weight: 400;
    color: var(--tinta-2);
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.uppercase, .rotulo-seccion, .sb-rotulo, .sb-pop-rotulo, .sb-panel-titulo, .sb-empresa):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    text-transform: none;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.tracking-wide, .tracking-wider, .tracking-widest, .tracking-\[0\.06em\], .tracking-\[0\.08em\], .tracking-\[0\.12em\], .tracking-\[0\.14em\], .tracking-\[0\.18em\], .tracking-\[0\.22em\], .tracking-\[0\.3em\], [class*="tracking-[0."], [class*="tracking-[."], .rotulo-seccion, .sb-rotulo, .sb-pop-rotulo, .sb-panel-titulo, .sb-empresa):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    letter-spacing: 0;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.sb-rotulo, .sb-pop-rotulo, .sb-panel-titulo) {
    font-size: 12px;
    font-weight: 400;
  }
  :root[data-diseno="nuevo"] .sb-raiz .sb-empresa {
    font-size: 12px;
    font-weight: 600;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button, a).rol-accion {
    font-size: 14px;
    font-weight: 600;
  }
  :root[data-diseno="nuevo"] .sb-raiz .sb-crear {
    background: var(--superficie);
    color: var(--tinta);
    border: 1px solid var(--borde-fuerte);
    font-size: 14px;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.sb-crear:hover, .sb-crear[aria-expanded="true"]) {
    background: var(--hover);
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(button, a).border.bg-\[var\(--superficie\)\]:not([class*="rol-"], .rounded-xl, .rounded-2xl, .tarjeta) {
    border-color: var(--borde-fuerte);
    color: var(--tinta);
    font-weight: 600;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-1\.5, .gap-2\.5) { gap: 8px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-x-1\.5, .gap-x-2\.5) { column-gap: 8px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-y-1\.5, .gap-y-2\.5) { row-gap: 8px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-3, .gap-3\.5) { gap: 16px; }
  :root[data-diseno="nuevo"] .sb-raiz .flex:not(.flex-col):is(.gap-3) { gap: 8px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-x-3, .gap-x-3\.5) { column-gap: 16px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.gap-y-3, .gap-y-3\.5) { row-gap: 16px; }
  :root[data-diseno="nuevo"] .sb-raiz .gap-5 { gap: 24px; }
  :root[data-diseno="nuevo"] .sb-raiz .gap-x-5 { column-gap: 24px; }
  :root[data-diseno="nuevo"] .sb-raiz .gap-y-5 { row-gap: 24px; }
  :root[data-diseno="nuevo"] .sb-raiz .gap-7 { gap: 32px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.space-y-1\.5, .space-y-2\.5) > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.space-y-3, .space-y-3\.5) > :not([hidden]) ~ :not([hidden]) { margin-top: 16px; }
  :root[data-diseno="nuevo"] .sb-raiz .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
  :root[data-diseno="nuevo"] .sb-raiz :is(.tarjeta, .tarjeta-tablero, section.rounded-xl.border, div.rounded-xl.border.bg-\[var\(--superficie\)\], div.rounded-2xl.border.bg-\[var\(--superficie\)\]):is(.p-3, .p-3\.5, .p-4, .p-5, .sm\:p-4, .sm\:p-5):not([class*="rol-"], [data-papel] *) {
    padding: 16px;
  }
  @media (min-width: 640px) {
    :root[data-diseno="nuevo"] .sb-raiz :is(.tarjeta, .tarjeta-tablero, section.rounded-xl.border, div.rounded-xl.border.bg-\[var\(--superficie\)\], div.rounded-2xl.border.bg-\[var\(--superficie\)\]):is(.p-3, .p-3\.5, .p-4, .p-5, .sm\:p-4, .sm\:p-5):not([class*="rol-"], [data-papel] *) {
      padding: 24px;
    }
  }
  :root[data-diseno="nuevo"] .sb-raiz div.col-span-12.grid.items-stretch:is([class*="minmax(13rem,1fr)"], [class*="minmax(11.5rem,1fr)"]) > .tarjeta-tablero {
    padding: 16px 20px;
  }
  :root[data-diseno="nuevo"] .sb-raiz div.col-span-12.grid.items-stretch:is([class*="minmax(13rem,1fr)"], [class*="minmax(11.5rem,1fr)"]) {
    grid-template-columns: repeat(auto-fit, minmax(max(13rem, calc((100% - 48px) / 4)), 1fr));
    gap: 16px;
  }
  :root[data-diseno="nuevo"] .sb-raiz span.grid.h-10.w-10.rounded-xl:has(+ div > p.rotulo-seccion) {
    display: none;
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(.tarjeta, .tarjeta-tablero, section.rounded-xl.border, div.rounded-xl.border.bg-\[var\(--superficie\)\])
    :is(div, section, article, li):is(.tarjeta, .tarjeta-tablero, .rounded-lg.border, .rounded-xl.border):not([class*="rol-"], [class*="shadow"], .absolute, .fixed, .sticky, [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [popover], [data-papel] *) {
    border-color: transparent;
    border-top-color: var(--borde);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }
  :root[data-diseno="nuevo"] .sl-mas {
    animation: sl-mas-asoma var(--dn-dur-posa) var(--dn-curva);
    transform-origin: top right;
  }
  @keyframes sl-mas-asoma {
    from { opacity: 0.4; transform: translateY(-4px) scale(0.98); }
  }
  :root[data-diseno="nuevo"] [data-sl-tip] {
    position: relative;
  }
  :root[data-diseno="nuevo"] [data-sl-tip]::after {
    content: attr(data-sl-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 50;
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--dn-negro);
    color: var(--dn-sobre-negro);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 150ms ease, transform 150ms var(--dn-curva);
  }
  :root[data-diseno="nuevo"] :is([data-sl-tip]:hover, [data-sl-tip]:focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  :root[data-diseno="nuevo"] [data-sl-tip][data-sl-tip-pos]::after {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-4px);
  }
  :root[data-diseno="nuevo"] [data-sl-tip][data-sl-tip-pos="izq"]::after { left: 0; right: auto; }
  :root[data-diseno="nuevo"] [data-sl-tip][data-sl-tip-pos="der"]::after { left: auto; right: 0; }
  :root[data-diseno="nuevo"] :is([data-sl-tip][data-sl-tip-pos]:hover, [data-sl-tip][data-sl-tip-pos]:focus-visible)::after {
    transform: translateY(0);
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  :root[data-diseno="nuevo"] .sb-raiz *,
  :root[data-diseno="nuevo"] .sb-raiz *::before,
  :root[data-diseno="nuevo"] .sb-raiz *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  :root[data-diseno="nuevo"] .sb-raiz :active {
    scale: none !important;
  }
  :root[data-diseno="nuevo"] .sb-raiz :hover {
    translate: none !important;
  }
  :root[data-diseno="nuevo"] .skeleton::after,
  :root[data-diseno="nuevo"] .dn-esq-b::after,
  :root[data-diseno="nuevo"] .dn-indicador {
    display: none;
  }
  :root[data-diseno="nuevo"] .dn-esq-b,
  :root[data-diseno="nuevo"] .dn-carga-tarjeta,
  :root[data-diseno="nuevo"] .dn-carga-arco,
  :root[data-diseno="nuevo"] .dn-llega {
    animation: none !important;
    opacity: 1;
  }
  :root[data-diseno="nuevo"] :is(.sb-riel-boton, .sb-barra .sb-icono)[data-rotulo]::after {
    translate: none !important;
  }
  :root[data-diseno="nuevo"] .sl-mas {
    animation: none;
  }
  :root[data-diseno="nuevo"] [data-sl-tip]::after {
    transform: translate(-50%, 0);
  }
  :root[data-diseno="nuevo"] [data-sl-tip][data-sl-tip-pos]::after {
    transform: none;
  }
}
@media screen {
  @font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fuentes/onest/onest-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fuentes/onest/onest-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  :where(:root)[data-diseno="nuevo"] {
    --fuente-inter: var(--fuente);
  }
  :root[data-diseno="nuevo"] body {
    --fuente: "Onest", var(--fuente-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-sans: var(--fuente);
    --fuente-hero: var(--fuente);
    font-family: var(--fuente);
  }
  :root[data-diseno="nuevo"] .sb-raiz :is(table, th, td, [role="table"], [role="row"], [role="cell"], [role="gridcell"], [role="columnheader"], .numero-hero, .tarjeta-tablero, .tabular-nums):not([data-papel] *, [data-pantalla="en-vivo"] *) {
    font-variant-numeric: tabular-nums;
  }
}