/* Ticksy Design System — reglas de los componentes. Todo valor sale de un token. */

.tds-slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.tds-slide *,
.tds-card * {
  box-sizing: border-box;
}

/* Fondos de marca (paint styles Background/* de Figma) */
.tds-bg-brand-dark-radial {
  background-image: radial-gradient(
    ellipse 96% 54% at 50% 50%,
    var(--color-navy-700) 0%,
    #073049 50%,
    var(--color-navy-950) 100%
  );
}

.tds-bg-brand-dark-linear {
  background-image: linear-gradient(180deg, var(--color-navy-700) 0%, var(--color-navy-900) 100%);
}

.tds-bg-brand-cyan {
  background-image: linear-gradient(180deg, rgba(16, 117, 149, 0) 0%, rgba(16, 117, 149, 0.22) 100%),
    linear-gradient(90deg, var(--color-cyan-400) 0%, var(--color-cyan-400) 100%);
}

.tds-bg-brand-light {
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-100) 100%);
}

.tds-bg-paper {
  background-image: radial-gradient(ellipse 58% 82% at 10% 6%, rgba(160, 242, 255, 0.28) 0%, rgba(160, 242, 255, 0) 100%),
    linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 100%);
}

.tds-bg-paper-warm {
  background-image: radial-gradient(ellipse 58% 82% at 95% 96%, rgba(250, 158, 0, 0.1) 0%, rgba(250, 158, 0, 0) 100%),
    radial-gradient(ellipse 58% 82% at 10% 6%, rgba(160, 242, 255, 0.28) 0%, rgba(160, 242, 255, 0) 100%),
    linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 100%);
}

/* Portada */
.tds-slide-cover__lockup {
  position: absolute;
  left: 50%;
  top: 416px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-96);
}

.tds-slide-cover__logo {
  width: 420px;
  height: auto;
  display: block;
}

.tds-logo-placeholder {
  width: 420px;
  height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-subtle);
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tds-slide-cover__eyebrow {
  color: var(--text-brand-accent);
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/* Cabecera y cuerpo de slide */
.tds-slide__header {
  position: absolute;
  left: 160px;
  top: 160px;
  width: 1600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tds-slide__title {
  margin: 0;
  color: var(--text-heading);
}

.tds-slide__subtitle {
  margin: 0;
  color: var(--text-subtle);
}

.tds-slide__lead {
  position: absolute;
  left: 160px;
  top: 388px;
  width: 600px;
  margin: 0;
  color: var(--text-subtle);
}

.tds-slide__bullets {
  position: absolute;
  left: 1000px;
  top: 388px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Vineta */
.tds-bullet {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  width: 700px;
}

.tds-bullet__dot {
  flex: 0 0 auto;
  width: 16px;
  height: 48px;
  display: flex;
  align-items: center;
}

.tds-bullet__dot::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-cyan-400);
}

.tds-bullet__text {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-subtle);
}

/* Tarjetas */
.tds-card {
  background: var(--bg-canvas);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.tds-kpi-card {
  width: 368px;
  height: 336px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  font-family: var(--font-sans);
}

.tds-kpi-card__value {
  display: flex;
  align-items: center;
  color: var(--text-brand-accent);
  white-space: nowrap;
}

.tds-kpi-card__label {
  width: 300px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-accent);
}

.tds-label-card {
  width: 340px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}

.tds-label-card__text {
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-accent);
}

.tds-card-grid {
  display: flex;
  gap: var(--space-24);
}

/* Lineas sueltas dentro de un bloque de texto */
.tds-line { display: block; }

/* Logo */
.tds-logo { display: block; height: auto; }

/* Statement */
.tds-statement {
  position: absolute;
  left: 50%;
  top: 523px;
  transform: translate(-50%, -50%);
  width: 1600px;
  margin: 0;
  text-align: center;
  color: var(--text-inverse);
}

/* Feature (imagen + columna de texto) */
.tds-feature__image {
  position: absolute;
  top: 180px;
  width: 1000px;
  height: 720px;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.tds-feature__image--empty {
  border: 2px dashed var(--border-default);
}

.tds-feature__column {
  position: absolute;
  top: 252px;
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.tds-feature__note {
  position: absolute;
  top: 888px;
  width: 600px;
  margin: 0;
  color: var(--text-subtle);
}

.tds-feature__title { margin: 0; color: var(--text-heading); }
.tds-feature__body { margin: 0; color: var(--text-subtle); }
.tds-feature__body .tds-line + .tds-line { margin-top: 48px; }

.tds-feature--image-left .tds-feature__image { left: 160px; }
.tds-feature--image-left .tds-feature__column,
.tds-feature--image-left .tds-feature__note { left: 1160px; }

.tds-feature--image-right .tds-feature__image { left: 760px; }
.tds-feature--image-right .tds-feature__column,
.tds-feature--image-right .tds-feature__note { left: 160px; }

/* Feature oscura */
.tds-dark__header {
  position: absolute;
  left: 360px;
  top: 160px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.tds-dark__title { margin: 0; width: 1200px; color: var(--text-primary); }
.tds-dark__subtitle { margin: 0; width: 1200px; color: var(--color-cyan-700); }

.tds-dark__aside {
  position: absolute;
  top: 540px;
  width: 320px;
  margin: 0;
  color: var(--color-cyan-700);
}

.tds-dark__aside--left { left: 180px; text-align: right; }
.tds-dark__aside--right { left: 1420px; }

.tds-dark__slot {
  position: absolute;
  top: 420px;
  width: 400px;
  height: 480px;
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-xl);
}

.tds-dark__slot--l { left: 548px; }
.tds-dark__slot--r { left: 972px; }

/* Slide de KPIs */
.tds-kpi-slide__header {
  position: absolute;
  left: 360px;
  top: 160px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.tds-kpi-slide__header .tds-slide__title,
.tds-kpi-slide__header .tds-slide__subtitle { width: 1200px; }

.tds-kpi-slide__lead {
  position: absolute;
  left: 50%;
  top: 372px;
  transform: translateX(-50%);
  width: 1000px;
  margin: 0;
  text-align: center;
  color: var(--text-subtle);
}

.tds-kpi-slide__cards {
  position: absolute;
  left: 412px;
  top: 446px;
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
}

.tds-kpi-slide__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Cierre */
.tds-closing__title {
  position: absolute;
  left: 50%;
  top: 260px;
  transform: translateX(-50%);
  width: 1600px;
  margin: 0;
  text-align: center;
  color: var(--text-primary);
}

.tds-closing__lockup {
  position: absolute;
  left: 50%;
  top: 480px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-48);
  align-items: center;
}

.tds-closing__divider {
  width: 1px;
  height: 112px;
  background: var(--border-default);
}

.tds-closing__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  white-space: nowrap;
}

.tds-closing__contact-title { margin: 0; color: var(--text-primary); }
.tds-closing__contact-lines { color: var(--text-brand-accent); }

.tds-closing__social {
  position: absolute;
  left: 50%;
  top: 720px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.tds-closing__social-label { margin: 0; color: var(--text-brand-accent); white-space: nowrap; }

.tds-closing__icons { display: flex; gap: var(--space-24); }

.tds-closing__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--action-primary);
}

.tds-closing__url {
  position: absolute;
  left: 50%;
  top: 952px;
  transform: translateX(-50%);
  width: 1600px;
  margin: 0;
  text-align: center;
  color: var(--text-subtle);
}

/* ===== Iconos ===== */

/* --- Icon --- */
/* Icon — set de linea del TDS (pagina Icons General V2 del documento de Sketch) */
.tds-icon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  color: inherit;
  fill: none;
}

/* Rejilla de muestra, para la preview y para cualquier catalogo */
.tds-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-16);
}

.tds-icon-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: center;
}

.tds-icon-grid__name {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 300;
  word-break: break-all;
}

.tds-icon-group__title {
  margin: var(--space-24) 0 var(--space-8);
  color: var(--text-accent);
}

/* ===== Buttons ===== */

/* --- Button --- */
/* Button — 5 estilos x 2 alturas. Figma: set 24:43 */
.tds-button {
  /* Anchos minimos sin token en la escala (Figma: 120 / 160) */
  --tds-button-min-width-m: 120px;
  --tds-button-min-width-l: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  margin: 0;
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tds-button__label {
  display: block;
  text-transform: uppercase;
  word-break: break-word;
}

/* Alturas. M usa el objetivo tactil minimo; L no tiene token de alto
     y la L de size-touch-reserve (96). */
.tds-button--m {
  height: var(--size-touch-min);
  min-width: var(--tds-button-min-width-m);
  padding-inline: var(--space-32);
  border-radius: var(--radius-sm);
  /* Texto "Button Small": Rubik Regular 20/24, sin clase de tipografia en el sistema */
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.tds-button--l {
  height: var(--size-touch-reserve);
  min-width: var(--tds-button-min-width-l);
  padding-inline: var(--space-40);
  border-radius: var(--radius-md);
  /* Texto "Label/Button": Rubik Regular 24/28, sin clase de tipografia en el sistema */
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Estilos */
.tds-button--primary {
  background: var(--action-primary);
  color: var(--text-on-accent);
}

.tds-button--primary:hover {
  background: var(--action-primary-hover);
}

.tds-button--secondary {
  background: var(--action-secondary);
  color: var(--text-on-secondary, var(--text-accent));
}

.tds-button--danger {
  background: var(--action-danger, var(--status-danger));
  color: var(--text-on-accent);
}

.tds-button--warning {
  background: var(--action-warning, var(--status-warning));
  color: var(--text-on-accent);
}

.tds-button--ghost {
  background: var(--action-ghost, var(--bg-surface-raised));
  color: var(--text-secondary);
}

.tds-button:disabled {
  cursor: default;
  opacity: 0.4;
}

/* --- IconButton --- */
/* IconButton — boton circular de 80 px sin etiqueta. Figma: set 24:56 */
.tds-icon-button {
  /* 80 px no esta en la escala: queda entre size-touch-min (64) y size-touch-reserve (96) */
  --tds-icon-button-size: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--tds-icon-button-size);
  height: var(--tds-icon-button-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--action-secondary);
  color: var(--color-white);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tds-icon-button__glyph {
  display: block;
  width: var(--space-40);
  height: var(--space-40);
}

.tds-icon-button--close .tds-icon-button__glyph {
  width: var(--space-48);
  height: var(--space-48);
}

.tds-icon-button:disabled {
  cursor: default;
  opacity: 0.4;
}

/* --- TileButton --- */
/* TileButton — tarjeta 160x144 con icono y etiqueta corta. Figma: set 24:69 */
.tds-tile-button {
  /* 160x144 y el hueco de icono de 64 no estan en la escala de espaciado */
  --tds-tile-button-width: 160px;
  --tds-tile-button-height: 144px;
  --tds-tile-button-icon-size: 64px;
  /* Figma separa icono y etiqueta 2 px, por debajo de space-4 */
  --tds-tile-button-gap: 2px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tds-tile-button-gap);
  box-sizing: border-box;
  width: var(--tds-tile-button-width);
  height: var(--tds-tile-button-height);
  padding: var(--space-16);
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tds-tile-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tds-tile-button-icon-size);
  height: var(--tds-tile-button-icon-size);
  color: inherit;
}

.tds-tile-button__icon > svg,
.tds-tile-button__icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.tds-tile-button__label {
  display: block;
  text-transform: uppercase;
  word-break: break-word;
}

.tds-tile-button--default {
  background: var(--action-ghost, var(--bg-surface-raised));
  color: var(--text-secondary);
}

.tds-tile-button--selected {
  background: var(--action-primary);
  color: var(--text-on-accent);
}

.tds-tile-button--secondary {
  background: var(--action-secondary);
  color: var(--text-on-secondary, var(--text-accent));
}

.tds-tile-button:disabled {
  cursor: default;
  opacity: 0.4;
}

/* --- Toggle --- */
/* Toggle — interruptor 72x40 con pomo de 28. Figma: set 24:76 */
.tds-toggle {
  /* Ninguna de estas medidas esta en la escala de espaciado */
  --tds-toggle-width: 72px;
  --tds-toggle-height: 40px;
  --tds-toggle-knob: 28px;
  --tds-toggle-inset: 6px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--tds-toggle-width);
  height: var(--tds-toggle-height);
  padding: 0;
  margin: 0;
  border: 0;
  /* radius-xl (20) equivale a la mitad del alto: pastilla completa */
  border-radius: var(--radius-xl);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease-out;
}

.tds-toggle__knob {
  position: absolute;
  top: var(--tds-toggle-inset);
  left: var(--tds-toggle-inset);
  width: var(--tds-toggle-knob);
  height: var(--tds-toggle-knob);
  border-radius: 50%;
  background: currentColor;
  transition: transform 120ms ease-out;
}

.tds-toggle--off {
  background: var(--action-secondary);
  color: var(--text-on-secondary, var(--text-accent));
}

.tds-toggle--on {
  background: var(--action-primary);
  color: var(--text-on-accent);
}

.tds-toggle--on .tds-toggle__knob {
  transform: translateX(calc(var(--tds-toggle-width) - var(--tds-toggle-knob) - var(--tds-toggle-inset) * 2));
}

.tds-toggle:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ===== Indicators & Data ===== */

/* --- Badge --- */
/* Badge — etiqueta de estado o de canal */
.tds-badge {
  display: inline-flex;
  align-items: flex-start;
  /* 6 px verticales: valor de Figma sin token en la escala de espaciado */
  padding: 6px var(--space-16);
  border-radius: var(--radius-sm);
}

.tds-badge__label {
  white-space: nowrap;
}

.tds-badge--success {
  background: var(--status-success);
  color: var(--text-on-status);
}

.tds-badge--info {
  background: var(--status-info);
  color: var(--text-on-accent);
}

.tds-badge--warning {
  background: var(--status-warning);
  color: var(--text-on-accent);
}

.tds-badge--danger {
  background: var(--status-danger);
  color: var(--text-on-status);
}

.tds-badge--navy {
  background: var(--action-secondary);
  color: var(--text-on-status);
}

.tds-badge--neutral {
  background: var(--action-ghost);
  color: var(--text-secondary);
}

/* --- StatusDot --- */
/* Status Dot — punto de 24 px que marca el estado de un pedido o de un filtro */
.tds-status-dot {
  display: inline-flex;
  align-items: center;
}

.tds-status-dot--with-label {
  gap: var(--space-8);
}

.tds-status-dot__dot {
  display: block;
  /* 24 px de diametro: la escala no tiene token de tamano, se usa el de espaciado */
  width: var(--space-24);
  height: var(--space-24);
  flex: 0 0 auto;
  border-radius: 50%;
}

.tds-status-dot__label {
  color: var(--text-primary);
  white-space: nowrap;
}

.tds-status-dot__dot--new {
  background: var(--status-info);
}

.tds-status-dot__dot--inprogress {
  background: var(--status-success);
}

.tds-status-dot__dot--pending {
  background: var(--status-warning);
}

.tds-status-dot__dot--alert {
  background: var(--status-danger);
}

.tds-status-dot__dot--accepted {
  background: var(--status-attention);
}

/* Urgent usa el morado del canal Uber Eats; no hay token de estado para el */
.tds-status-dot__dot--urgent {
  background: var(--channel-uber-eats);
}

/* --- Amount --- */
/* Amount — forma canonica de mostrar dinero: entero grande, decimales un paso menor */
.tds-amount {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.tds-amount__integer,
.tds-amount__decimals {
  flex: 0 0 auto;
}

.tds-amount--primary {
  color: var(--text-primary);
}

.tds-amount--accent {
  color: var(--text-accent);
}

.tds-amount--muted {
  color: var(--text-muted);
}

/* --- Kpi --- */
/* KPI — Amount con su rotulo debajo */
.tds-kpi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.tds-kpi__amount {
  flex: 0 0 auto;
}

/* Label/Caps: Rubik Regular 14 / 16, tracking 1.4. No hay clase de tipografia
   publicada para este estilo, por eso los valores van aqui. */
.tds-kpi__label {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

.tds-kpi--primary .tds-kpi__label {
  color: var(--text-accent);
}

.tds-kpi--accent .tds-kpi__label {
  color: var(--text-accent);
}

/* --- KeyValue --- */
/* Key Value — fila dato/valor de las tarjetas de repartidor */
.tds-key-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  color: var(--text-primary);
}

.tds-key-value__label,
.tds-key-value__value {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Varias filas apiladas se separan con space-8 */
.tds-key-value + .tds-key-value {
  margin-top: var(--space-8);
}

/* --- SectionHeader --- */
/* Section Header — separador de bloque dentro de una lista */
.tds-section-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--space-48);
  padding: 0 var(--space-24);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-raised);
  box-sizing: border-box;
}

/* Label/Caps: Rubik Regular 14 / 16, tracking 1.4. No hay clase de tipografia
   publicada para este estilo, por eso los valores van aqui. */
.tds-section-header__title {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Pagination --- */
/* Pagination — indicador de paginas de un carrusel horizontal */
.tds-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
}

.tds-pagination__dot {
  display: block;
  /* 16 px de diametro: la escala no tiene token de tamano, se usa el de espaciado */
  width: var(--space-16);
  height: var(--space-16);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--action-secondary);
}

.tds-pagination__dot--active {
  background: var(--action-primary);
}

/* --- PinIndicator --- */
/* PIN Indicator — casillas que se rellenan al teclear el PIN de empleado */
.tds-pin-indicator {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.tds-pin-indicator__box {
  display: block;
  /* 48 px de lado: la escala no tiene token de tamano, se usa el de espaciado */
  width: var(--space-48);
  height: var(--space-48);
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-raised);
}

.tds-pin-indicator__box--filled {
  background: var(--status-success);
}

/* --- OrderStep --- */
/* Order Step — un paso del estado del pedido */
.tds-order-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* 168 x 144: medidas de la tarjeta en Figma, fuera de la escala de espaciado */
  width: 168px;
  height: 144px;
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.tds-order-step__dot {
  display: block;
  /* 24 px de diametro: la escala no tiene token de tamano, se usa el de espaciado */
  width: var(--space-24);
  height: var(--space-24);
  flex: 0 0 auto;
  border-radius: 50%;
}

.tds-order-step__label {
  margin: 0;
  width: 100%;
  text-align: center;
}

.tds-order-step--default {
  background: var(--bg-surface);
}

.tds-order-step--default .tds-order-step__label {
  color: var(--text-muted);
}

.tds-order-step--active {
  background: var(--action-warning);
}

.tds-order-step--active .tds-order-step__dot {
  background: var(--text-on-status);
}

.tds-order-step--active .tds-order-step__label {
  color: var(--text-on-status);
}

/* Color de estado del punto en los pasos que no son el actual */
.tds-order-step__dot--new {
  background: var(--status-info);
}

.tds-order-step__dot--inprogress {
  background: var(--status-success);
}

.tds-order-step__dot--pending {
  background: var(--status-warning);
}

.tds-order-step__dot--alert {
  background: var(--status-danger);
}

.tds-order-step__dot--accepted {
  background: var(--status-attention);
}

/* ===== Keypad, Lists & Options ===== */

/* --- Key --- */
/* Key — tecla del teclado numerico. Figma: set 27:22 */
.tds-key {
  /* 112x104 es la medida propia de la tecla: no hay token de tamano para ella.
     Queda por encima de size-touch-min (64) en los dos ejes. */
  --tds-key-width: 112px;
  --tds-key-height: 104px;
  /* Punto de la coma decimal: cuadrado de 12 px con radio 2, fuera de la escala de radios. */
  --tds-key-dot-size: 12px;
  --tds-key-dot-radius: 2px;
  /* Glifo de borrar: 36x28 centrado en la tecla. */
  --tds-key-icon-width: 36px;
  --tds-key-icon-height: 28px;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tds-key-width);
  height: var(--tds-key-height);
  min-width: var(--size-touch-min);
  min-height: var(--size-touch-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-raised);
  /* La cifra usa color/gray-300: en tpv-dark ningun token semantico vale #b0c2c8. */
  color: var(--color-gray-300);
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.tds-key__digit {
  color: var(--color-gray-300);
  white-space: nowrap;
}

.tds-key__dot {
  width: var(--tds-key-dot-size);
  height: var(--tds-key-dot-size);
  border-radius: var(--tds-key-dot-radius);
  background: var(--color-gray-300);
}

.tds-key__icon {
  display: block;
  width: var(--tds-key-icon-width);
  height: var(--tds-key-icon-height);
  color: var(--color-gray-300);
}

/* Borrar no lleva placa: solo el glifo sobre el fondo del teclado. */
.tds-key--backspace {
  background: transparent;
  border-radius: var(--radius-sm);
}

/* Empty solo rellena el hueco: ni se pulsa ni se anuncia. */
.tds-key--empty {
  background: var(--bg-surface-raised);
  cursor: default;
  pointer-events: none;
}

.tds-key--digit:active,
.tds-key--dot:active {
  background: var(--bg-surface-highlight);
}

.tds-key--backspace:active .tds-key__icon {
  color: var(--text-primary);
}

.tds-key:disabled {
  color: var(--text-muted);
  cursor: default;
}

/* --- Keypad --- */
/* Keypad — teclado numerico 3x4 completo (416x512). Figma: 27:52 */
.tds-keypad {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

.tds-keypad__row {
  display: flex;
  gap: var(--space-16);
}

/* --- TicketLine --- */
/* TicketLine — linea de ticket o comanda. Figma: set 27:67 */
.tds-ticket-line {
  /* Columna de cantidad: 56 px fijos para que los importes queden alineados
     linea a linea. No hay token de 56 en la escala de espaciado. */
  --tds-ticket-line-qty-width: 56px;

  box-sizing: border-box;
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  width: 100%;
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
}

.tds-ticket-line__qty {
  flex: 0 0 auto;
  width: var(--tds-ticket-line-qty-width);
  color: var(--text-accent);
}

.tds-ticket-line__name {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.tds-ticket-line__product {
  color: var(--text-primary);
  text-transform: uppercase;
  word-break: break-word;
}

.tds-ticket-line__modifier {
  color: var(--text-muted);
  text-transform: uppercase;
  word-break: break-word;
}

.tds-ticket-line__price {
  flex: 0 0 auto;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Muted: la linea ya cobrada. La cantidad mantiene el acento. */
.tds-ticket-line--muted .tds-ticket-line__product,
.tds-ticket-line--muted .tds-ticket-line__price {
  color: var(--text-muted);
}

/* --- KdsLine --- */
/* KdsLine — linea de la pantalla de cocina. Figma: set 27:89 */
.tds-kds-line {
  /* Columna de cantidad: 40 px, y separacion de 2 px entre producto y
     modificadores (por debajo de space-4, sin token en la escala). */
  --tds-kds-line-qty-width: var(--space-40);
  --tds-kds-line-body-gap: 2px;

  box-sizing: border-box;
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-sans);
}

.tds-kds-line__qty {
  flex: 0 0 auto;
  width: var(--tds-kds-line-qty-width);
}

.tds-kds-line__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--tds-kds-line-body-gap);
  min-width: 0;
}

.tds-kds-line__product {
  word-break: break-word;
}

.tds-kds-line__modifiers {
  word-break: break-word;
}

.tds-kds-line__time {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Pending: texto normal. */
.tds-kds-line--pending .tds-kds-line__qty,
.tds-kds-line--pending .tds-kds-line__product {
  color: var(--text-primary);
}

.tds-kds-line--pending .tds-kds-line__modifiers {
  color: var(--text-secondary);
}

.tds-kds-line--pending .tds-kds-line__time {
  color: var(--text-muted);
}

/* Cooking: la linea entera en warning. */
.tds-kds-line--cooking {
  color: var(--status-warning);
}

/* Done: la linea entera en success, con producto y modificadores tachados. */
.tds-kds-line--done {
  color: var(--status-success);
}

.tds-kds-line--done .tds-kds-line__product,
.tds-kds-line--done .tds-kds-line__modifiers {
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}

/* --- OptionTile --- */
/* OptionTile — opcion de modificador. Figma: set 27:104 */
.tds-option-tile {
  /* 256x136 es la celda de la rejilla de 6 columnas del grupo de opciones:
     no hay tokens de tamano para esas dos medidas. */
  --tds-option-tile-width: 256px;
  --tds-option-tile-height: 136px;
  /* Seleccionada: gris/300 con texto blanco. En tpv-dark ningun token
     semantico vale #b0c2c8, asi que se usa el primitivo. */
  --tds-option-tile-selected-bg: var(--color-gray-300);
  --tds-option-tile-selected-text: var(--color-white);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: var(--tds-option-tile-width);
  height: var(--tds-option-tile-height);
  min-width: var(--size-touch-min);
  min-height: var(--size-touch-min);
  margin: 0;
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.tds-option-tile__label {
  width: 100%;
  color: var(--text-secondary);
  text-transform: uppercase;
  word-break: break-word;
}

.tds-option-tile__price {
  color: var(--text-muted);
  white-space: nowrap;
}

.tds-option-tile--selected {
  background: var(--tds-option-tile-selected-bg);
}

.tds-option-tile--selected .tds-option-tile__label,
.tds-option-tile--selected .tds-option-tile__price {
  color: var(--tds-option-tile-selected-text);
}

.tds-option-tile:disabled {
  cursor: default;
}

.tds-option-tile:disabled .tds-option-tile__label,
.tds-option-tile:disabled .tds-option-tile__price {
  color: var(--text-muted);
}

/* --- OptionGroupHeader --- */
/* OptionGroupHeader — cabecera de un grupo de opciones. Figma: set 27:121 */
.tds-option-group-header {
  /* Alto de 80 px: entre size-touch-min (64) y size-touch-reserve (96),
     sin token propio en la escala. */
  --tds-option-group-header-height: 80px;
  /* Morado del grupo: Figma lo trae como variable --group-purple = #c98cc9.
     No existe ningun token, primitivo ni semantico, con ese valor. */
  --tds-option-group-header-purple: var(--group-purple);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  height: var(--tds-option-group-header-height);
  padding-inline: var(--space-32);
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
  background: var(--tds-option-group-header-purple);
  color: var(--color-white);
  font-family: var(--font-sans);
}

.tds-option-group-header__title,
.tds-option-group-header__rule {
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
}

.tds-option-group-header--purple {
  background: var(--tds-option-group-header-purple);
}

.tds-option-group-header--warning {
  background: var(--status-warning);
}

.tds-option-group-header--info {
  background: var(--action-primary);
}

.tds-option-group-header--success {
  background: var(--status-success);
}

/* --- SearchBar --- */
/* SearchBar — campo de busqueda de la barra superior. Figma: 27:126 */
.tds-search-bar {
  /* Medidas propias de la pieza, fuera de la escala: alto 72 (entre space-64
     y size-touch-reserve), padding lateral 30, separacion 18 y radio de
     pastilla 36 (la mitad del alto). */
  --tds-search-bar-height: 72px;
  --tds-search-bar-padding-inline: 30px;
  --tds-search-bar-gap: 18px;
  --tds-search-bar-radius: 36px;
  --tds-search-bar-icon-size: 26px;
  --tds-search-bar-clear-glyph: 16px;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--tds-search-bar-gap);
  width: 100%;
  height: var(--tds-search-bar-height);
  padding-inline: var(--tds-search-bar-padding-inline);
  border-radius: var(--tds-search-bar-radius);
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

.tds-search-bar__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--tds-search-bar-icon-size);
  height: var(--tds-search-bar-icon-size);
  color: var(--text-accent);
}

.tds-search-bar__query,
.tds-search-bar__placeholder {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tds-search-bar__query {
  color: var(--text-primary);
}

.tds-search-bar__placeholder {
  color: var(--text-muted);
}

/* El glifo mide 16, pero el boton reserva size-touch-min (64x64) y se
   recorta con margenes negativos para no mover la geometria de la barra. */
.tds-search-bar__clear {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  margin-inline: calc((var(--tds-search-bar-clear-glyph) - var(--size-touch-min)) / 2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.tds-search-bar__clear-glyph {
  display: block;
  width: var(--tds-search-bar-clear-glyph);
  height: var(--tds-search-bar-clear-glyph);
}

/* ===== Navigation & Containers ===== */

/* --- AppBar --- */
/* AppBar — barra superior del TPV. Figma: set 29:59 (29:39 Default, 29:58 Search) */
.tds-app-bar {
  /* 104 px: alto fijo de la barra, no esta en la escala de espaciado. */
  --tds-app-bar-height: 104px;
  /* 80 px: lado del boton de menu, entre size-touch-min y size-touch-reserve. */
  --tds-app-bar-menu-size: 80px;
  /* Cian de la barra y navy de la pestana activa. Figma los sirve como
     --bg-app-bar y --bg-app-bar-tab, que no estan en la lista de tokens del
     sistema: se declaran con fallback al token equivalente. */
  --tds-app-bar-bg: var(--bg-app-bar, var(--action-primary));
  --tds-app-bar-tab-bg: var(--bg-app-bar-tab, var(--bg-surface));
  --tds-app-bar-fg: var(--text-on-app-bar, var(--color-white));

  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  height: var(--tds-app-bar-height);
  padding-inline: var(--space-40);
  background: var(--tds-app-bar-bg);
  color: var(--tds-app-bar-fg);
  font-family: var(--font-sans);
  overflow: hidden;
}

/* Menu */
.tds-app-bar__menu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--tds-app-bar-menu-size);
  height: var(--tds-app-bar-menu-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.tds-app-bar__menu-glyph {
  display: block;
  /* 34x32: caja del slice de menu en Figma, fuera de la escala. */
  width: 34px;
  height: 32px;
}

/* Empleado */
.tds-app-bar__user {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-16);
}

.tds-app-bar__avatar {
  display: block;
  flex: 0 0 auto;
  width: var(--space-48);
  height: var(--space-48);
  border-radius: 50%;
  overflow: hidden;
  color: inherit;
}

.tds-app-bar__avatar-glyph,
.tds-app-bar__avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tds-app-bar__user-name {
  color: inherit;
  white-space: nowrap;
}

/* Centro: hora + local, o buscador */
.tds-app-bar__center {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.tds-app-bar__time,
.tds-app-bar__venue {
  display: block;
  color: inherit;
  white-space: nowrap;
}

.tds-app-bar__center--search {
  flex-direction: row;
}

/* El buscador se sirve a su ancho de Figma (796) y nunca desborda el hueco. */
.tds-app-bar__search {
  /* 796 px: ancho del Search Bar en Figma, fuera de la escala. */
  width: 796px;
  max-width: 100%;
}

/* Pestanas de modulo */
.tds-app-bar__tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  align-self: stretch;
  gap: var(--space-24);
}

/* En Type=Search las pestanas se agrupan y su separacion baja a space-16. */
.tds-app-bar--search .tds-app-bar__tabs {
  gap: var(--space-16);
}

.tds-app-bar__tab {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-reserve);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* La pestana activa se funde con el lienzo: mismo relleno y solo las
   esquinas de arriba redondeadas. */
.tds-app-bar__tab--selected {
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  background: var(--tds-app-bar-tab-bg);
}

.tds-app-bar__tab-glyph {
  display: block;
  width: var(--space-48);
  height: var(--space-48);
}

/* --- BottomBar --- */
/* BottomBar — barra inferior de acciones del modulo. Figma: 29:70 */
.tds-bottom-bar {
  /* Figma sirve el relleno como --bg-bottom-bar; no esta en la lista de
     tokens del sistema y equivale a bg/surface en el modo TPV Dark. */
  --tds-bottom-bar-bg: var(--bg-bottom-bar, var(--bg-surface));

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  height: var(--size-touch-reserve);
  padding-inline: var(--space-32);
  background: var(--tds-bottom-bar-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.tds-bottom-bar__left,
.tds-bottom-bar__right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-16);
}

/* El selector central abre un Popover: se lee como titulo, no como boton. */
.tds-bottom-bar__label {
  /* Label/Button de Figma: Rubik Regular 24/28, sin espaciado. No existe
     todavia como clase de tipografia del sistema. */
  --tds-bottom-bar-label-size: 24px;
  --tds-bottom-bar-label-line: 28px;

  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--tds-bottom-bar-label-size);
  font-weight: 400;
  line-height: var(--tds-bottom-bar-label-line);
  text-align: center;
}

/* --- Modal --- */
/* Modal — popup centrado sobre el lienzo oscuro. Figma: set 29:92 (29:77 S, 29:84 M, 29:91 L) */
.tds-modal {
  /* Alto de la cabecera: 80 px, fuera de la escala de espaciado. */
  --tds-modal-header-height: 80px;
  /* Shadow/Modal de Figma: 0 12 32 #041E2E52. No es shadow-card. */
  --tds-modal-shadow: 0 12px 32px rgba(4, 30, 46, 0.32);
  /* Cian de cabecera y blanco encima. Figma los sirve como --bg-app-bar y
     --text-on-app-bar; no estan en la lista de tokens del sistema. */
  --tds-modal-header-bg: var(--bg-app-bar, var(--action-primary));
  --tds-modal-header-fg: var(--text-on-app-bar, var(--color-white));

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  box-shadow: var(--tds-modal-shadow);
  overflow: hidden;
}

/* Tamanos fijos de Figma. Ninguno cae en la escala de espaciado. */
.tds-modal--s { width: 1136px; height: 440px; }
.tds-modal--m { width: 800px; height: 680px; }
.tds-modal--l { width: 1536px; height: 1000px; }

.tds-modal__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--tds-modal-header-height);
  padding-inline: var(--space-24);
  background: var(--tds-modal-header-bg);
  color: var(--tds-modal-header-fg);
}

.tds-modal__title {
  margin: 0;
  color: inherit;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tds-modal__body {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-48);
}

.tds-modal__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  padding: 0 var(--space-48) var(--space-48);
}

/* Hueco de contenido: solo se pinta cuando el popup llega vacio. */
.tds-modal__slot {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tds-modal__slot-label {
  /* Label/Caps de Figma: Rubik Regular 14/16 con 1.4 de espaciado. Todavia
     no existe como clase de tipografia del sistema. */
  --tds-modal-caps-size: 14px;
  --tds-modal-caps-line: 16px;
  --tds-modal-caps-tracking: 1.4px;

  color: var(--text-muted);
  font-size: var(--tds-modal-caps-size);
  font-weight: 400;
  line-height: var(--tds-modal-caps-line);
  letter-spacing: var(--tds-modal-caps-tracking);
}

/* --- Panel --- */
/* Panel — columna con cabecera de color para comandas y listas. Figma: set 29:107 (29:99 Secondary, 29:106 Primary) */
.tds-panel {
  /* Alto de la cabecera: 72 px, entre space-64 y size-touch-reserve. */
  --tds-panel-header-height: 72px;
  /* Cian oscuro de la cabecera Secondary y blanco encima. Figma los sirve
     como --bg-panel-header y --text-on-status; no estan en la lista de
     tokens del sistema. */
  --tds-panel-header-bg: var(--bg-panel-header, var(--color-cyan-700));
  --tds-panel-header-fg: var(--text-on-status, var(--color-white));

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 560x780: medida de referencia en Figma, fuera de la escala. */
  width: 560px;
  height: 780px;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow: hidden;
}

.tds-panel__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--tds-panel-header-height);
  padding-inline: var(--space-16);
  background: var(--tds-panel-header-bg);
  color: var(--tds-panel-header-fg);
}

/* Primary: la columna de destino de la accion. */
.tds-panel--primary {
  --tds-panel-header-bg: var(--action-primary);
  --tds-panel-header-fg: var(--text-on-accent);
}

.tds-panel__title {
  margin: 0;
  color: inherit;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tds-panel__body {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-16);
  overflow-y: auto;
}

.tds-panel__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-16);
}

/* Hueco de lista: solo se pinta cuando el panel llega vacio. */
.tds-panel__slot {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tds-panel__slot-label {
  /* Label/Caps de Figma: Rubik Regular 14/16 con 1.4 de espaciado. Todavia
     no existe como clase de tipografia del sistema. */
  --tds-panel-caps-size: 14px;
  --tds-panel-caps-line: 16px;
  --tds-panel-caps-tracking: 1.4px;

  color: var(--text-muted);
  font-size: var(--tds-panel-caps-size);
  font-weight: 400;
  line-height: var(--tds-panel-caps-line);
  letter-spacing: var(--tds-panel-caps-tracking);
}

/* --- Popover --- */
/* Popover — menu flotante anclado a la barra inferior. Figma: 29:113 (728x352) */
.tds-popover {
  /* Sombra de popup de Figma (Shadow/Modal) escrita como drop-shadow para
     que la flecha recorte su propio contorno. El radio de drop-shadow es la
     mitad del de box-shadow: 16 aqui equivale a los 32 del estilo. */
  --tds-popover-shadow: drop-shadow(0 12px 16px rgba(4, 30, 46, 0.32));

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-primary);
  font-family: var(--font-sans);
  filter: var(--tds-popover-shadow);
}

.tds-popover__box {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* Flecha de 48x24, centrada y apuntando al elemento que abrio el menu. */
.tds-popover__arrow {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 24px;
  color: var(--bg-surface);
}

.tds-popover__arrow-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.tds-popover--arrow-top {
  flex-direction: column-reverse;
}

.tds-popover--arrow-top .tds-popover__arrow-glyph {
  transform: rotate(180deg);
}

/* Hueco de rejilla: solo se pinta cuando el menu llega vacio. */
.tds-popover__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 680x280: rejilla de referencia de Figma, fuera de la escala. */
  width: 680px;
  height: 280px;
  max-width: 100%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tds-popover__slot-label {
  /* Label/Caps de Figma: Rubik Regular 14/16 con 1.4 de espaciado. Todavia
     no existe como clase de tipografia del sistema. */
  --tds-popover-caps-size: 14px;
  --tds-popover-caps-line: 16px;
  --tds-popover-caps-tracking: 1.4px;

  color: var(--text-muted);
  font-size: var(--tds-popover-caps-size);
  font-weight: 400;
  line-height: var(--tds-popover-caps-line);
  letter-spacing: var(--tds-popover-caps-tracking);
}

/* ===== Cards ===== */

/* --- KdsOrderCard --- */
/* KDS Order Card — pedido en la pantalla de cocina. Figma: set 30:171 */
.tds-kds-order-card {
  /* Ancho de la tarjeta en la rejilla del KDS. La escala de espaciado no
     llega a 680 px, por eso va como propiedad local. */
  --tds-kds-order-card-width: 680px;

  /* Colores de canal. Figma los guarda en variables channel/*, que no tienen
     token semantico publicado en el TDS. Tres coinciden con un primitivo;
     el morado de Uber Eats no tiene ninguno. */
  --tds-channel-uber-eats: var(--channel-uber-eats);
  --tds-channel-just-eat: var(--channel-just-eat);
  --tds-channel-table: var(--channel-table);
  --tds-channel-web: var(--channel-web);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--tds-kds-order-card-width);
  padding-bottom: var(--space-12);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-sans);
}

/* El color de la cabecera es el canal, nunca el estado. */
.tds-kds-order-card--uber-eats {
  background: var(--tds-channel-uber-eats);
}

.tds-kds-order-card--just-eat {
  background: var(--tds-channel-just-eat);
}

.tds-kds-order-card--table {
  background: var(--tds-channel-table);
}

.tds-kds-order-card--web {
  background: var(--tds-channel-web);
}

.tds-kds-order-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24);
  /* text-on-status: variable de Figma (blanco en todos los modos legibles),
     sin token semantico en la lista publicada del TDS. */
  color: var(--text-on-status);
}

.tds-kds-order-card__number,
.tds-kds-order-card__channel,
.tds-kds-order-card__minutes {
  white-space: nowrap;
}

.tds-kds-order-card__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.tds-kds-order-card__icon {
  /* Icono Icon/Cards/timer de 32 px. La escala no tiene token de tamano de
     icono, se usa el de espaciado equivalente. */
  width: var(--space-32);
  height: var(--space-32);
  flex: 0 0 auto;
}

/* El cuerpo va siempre en claro para leerse desde lejos, aunque el TPV este
   en tpv-dark: se reescriben los tokens semanticos con los primitivos del
   modo Light, para que Section Header y KDS Line hereden el mismo modo. */
.tds-kds-order-card__content {
  --bg-surface: var(--color-white);
  --bg-surface-raised: var(--color-gray-100);
  --text-primary: var(--color-navy-900);
  --text-secondary: var(--color-gray-400);
  --text-muted: var(--color-gray-400);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: var(--bg-surface);
  overflow: hidden;
}

.tds-kds-order-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-24);
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}

.tds-kds-order-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-16);
}

.tds-kds-order-card__time,
.tds-kds-order-card__code {
  white-space: nowrap;
}

.tds-kds-order-card__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
}

/* La partida no dibuja caja: sus hijos entran en el gap de __lines. */
.tds-kds-order-card__group {
  display: contents;
}

/* --- DeliveryOrderCard --- */
/* Delivery Order Card — pedido a domicilio en la rejilla de Pedidos. Figma: set 30:210 */
.tds-delivery-order-card {
  /* Ancho de la tarjeta en la rejilla de Pedidos: fuera de la escala de espaciado. */
  --tds-delivery-order-card-width: 460px;
  /* Alto de la franja de estado. */
  --tds-delivery-order-card-stripe: var(--space-8);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--tds-delivery-order-card-width);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

/* La mitad de arriba va siempre en claro, tambien cuando el TPV esta en
   tpv-dark: se reescriben los tokens semanticos con los primitivos del modo
   Light para que Status Dot y Badge hereden el mismo modo. */
.tds-delivery-order-card__top {
  --bg-surface: var(--color-white);
  --text-primary: var(--color-navy-900);
  --text-accent: var(--color-cyan-700);
  --status-info: var(--color-cyan-700);
  --action-secondary: var(--color-gray-200);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--bg-surface);
}

.tds-delivery-order-card__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
}

.tds-delivery-order-card__state {
  color: var(--text-accent);
  white-space: nowrap;
}

.tds-delivery-order-card__code {
  color: var(--text-accent);
  white-space: nowrap;
}

.tds-delivery-order-card__customer {
  color: var(--text-primary);
  text-align: center;
}

/* Franja de color del estado: acompana siempre a la palabra del estado. */
.tds-delivery-order-card__stripe {
  height: var(--tds-delivery-order-card-stripe);
  width: 100%;
  flex: 0 0 auto;
}

.tds-delivery-order-card--new .tds-delivery-order-card__stripe {
  background: var(--status-attention);
}

.tds-delivery-order-card--inprogress .tds-delivery-order-card__stripe {
  background: var(--status-success);
}

.tds-delivery-order-card__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24);
  background: var(--bg-surface);
}

.tds-delivery-order-card__recipient {
  width: 100%;
  color: var(--text-primary);
  text-align: center;
}

.tds-delivery-order-card__address {
  width: 100%;
  color: var(--text-secondary);
  text-align: center;
}

.tds-delivery-order-card__divider {
  width: 100%;
  /* Filete de 1 px: la escala de espaciado no baja de 4, va literal. */
  height: 1px;
  flex: 0 0 auto;
  background: var(--border-default);
}

.tds-delivery-order-card__time {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  color: var(--text-primary);
}

.tds-delivery-order-card__icon {
  /* Icono Icon/Cards/timer de 32 px. La escala no tiene token de tamano de
     icono, se usa el de espaciado equivalente. */
  width: var(--space-32);
  height: var(--space-32);
  flex: 0 0 auto;
}

/* --- TableCard --- */
/* Table Card — mesa abierta en la vista de salon. Figma: set 30:245 */
.tds-table-card {
  /* Ancho de la tarjeta en la rejilla del salon: fuera de la escala de espaciado. */
  --tds-table-card-width: 360px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--tds-table-card-width);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

.tds-table-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-24) var(--space-16);
}

.tds-table-card__waiter {
  color: var(--text-accent);
  white-space: nowrap;
}

.tds-table-card__table {
  color: var(--text-primary);
  white-space: nowrap;
}

.tds-table-card__zone {
  color: var(--text-accent);
  text-align: center;
}

/* El badge de cobro ocupa todo el ancho de la tarjeta. */
.tds-table-card__badge {
  display: flex;
  width: 100%;
  justify-content: center;
}

.tds-table-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--bg-surface-raised);
}

.tds-table-card__stat {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-primary);
}

.tds-table-card__stat-value {
  white-space: nowrap;
}

.tds-table-card__icon {
  /* Iconos Icon/Cards/* de 40 px. La escala no tiene token de tamano de
     icono, se usa el de espaciado equivalente. */
  width: var(--space-40);
  height: var(--space-40);
  flex: 0 0 auto;
}

/* --- CourierCard --- */
/* Courier Card — repartidor en Control de reparto. Figma: set 30:298 */
.tds-courier-card {
  /* Ancho de la tarjeta en la rejilla de reparto: fuera de la escala de espaciado. */
  --tds-courier-card-width: 560px;
  /* Hueco reservado en el pie (Figma lo deja vacio en Active y lo ocupa el
     badge en Closed). 100 px no esta en la escala de espaciado. */
  --tds-courier-card-slot: 100px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--tds-courier-card-width);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

.tds-courier-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-32);
}

.tds-courier-card__name {
  color: var(--text-accent);
}

.tds-courier-card__deliveries {
  color: var(--text-secondary);
}

/* Respiro entre la cabecera y las filas dato-valor. */
.tds-courier-card__spacer {
  height: var(--space-16);
  flex: 0 0 auto;
}

/* Las filas no llevan gap propio: Key Value ya se separa con space-8. */
.tds-courier-card__rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tds-courier-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-32);
  background: var(--bg-surface-raised);
}

.tds-courier-card__slot {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* En Active el hueco se reserva vacio, para que el pie no cambie de alto
   al pasar a Closed. */
.tds-courier-card--active .tds-courier-card__slot {
  width: var(--tds-courier-card-slot);
  height: var(--tds-courier-card-slot);
}

.tds-courier-card__total {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  color: var(--text-primary);
}

/* Label/Caps: Rubik Regular 14 / 16, tracking 1.4. No hay clase de tipografia
   publicada para este estilo, por eso los valores van aqui. */
.tds-courier-card__total-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.4px;
  color: var(--text-accent);
  white-space: nowrap;
}

/* --- ReservationCard --- */
/* Reservation Card — reserva del dia. Figma: set 30:331 */
.tds-reservation-card {
  /* Ancho de la tarjeta en la rejilla de reservas: fuera de la escala de espaciado. */
  --tds-reservation-card-width: 300px;

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--tds-reservation-card-width);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  font-family: var(--font-sans);
}

/* Pendiente de asignar: borde de 4 px para que salte a la vista. Va como
   sombra interior, no como border, para que la tarjeta mida lo mismo que
   la asignada y el contenido no se desplace. */
.tds-reservation-card--pending {
  box-shadow: inset 0 0 0 var(--space-4) var(--status-success);
}

.tds-reservation-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24);
  background: var(--bg-surface-raised);
}

.tds-reservation-card__zone {
  color: var(--text-primary);
  text-align: center;
}

.tds-reservation-card__table {
  color: var(--text-accent);
  white-space: nowrap;
}

.tds-reservation-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24);
}

.tds-reservation-card__guest {
  color: var(--text-secondary);
  text-align: center;
}

.tds-reservation-card__phone {
  color: var(--text-primary);
  white-space: nowrap;
}

.tds-reservation-card__divider {
  width: 100%;
  /* Filete de 1 px: la escala de espaciado no baja de 4, va literal. */
  height: 1px;
  flex: 0 0 auto;
  background: var(--border-default);
}

.tds-reservation-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  color: var(--text-primary);
}

.tds-reservation-card__meta-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-8);
}

.tds-reservation-card__meta-value {
  white-space: nowrap;
}

.tds-reservation-card__icon {
  /* Iconos Icon/Cards/* de 28 px. Ni la escala de espaciado ni la de tamanos
     tienen ese valor, por eso va como propiedad local. */
  --tds-reservation-card-icon: 28px;

  width: var(--tds-reservation-card-icon);
  height: var(--tds-reservation-card-icon);
  flex: 0 0 auto;
}

/* ===== Documents ===== */

/* --- DocCover --- */
/* Doc / Cover — portada A4 sobre Background/Paper Warm */
.tds-doc-cover {
  /* A4 a 1 pt = 1 px. Ninguna de estas medidas tiene token en la escala. */
  --tds-doc-width: 595px;
  --tds-doc-height: 842px;
  --tds-doc-margin: 56px;
  --tds-doc-logo-width: 120px;
  --tds-doc-logo-height: 43.49px;
  /* 556 px: tapa del bloque de titulo en Figma */
  --tds-doc-cover-title-top: 556px;
  position: relative;
  width: var(--tds-doc-width);
  height: var(--tds-doc-height);
  overflow: hidden;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.tds-doc-cover * {
  box-sizing: border-box;
}

.tds-doc-cover__logo {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: auto;
  display: block;
}

.tds-doc-cover__logo-placeholder {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: var(--tds-doc-logo-height);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
}

.tds-doc-cover__title-block {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-cover-title-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  white-space: nowrap;
}

/* Doc/Cover Title — Rubik Regular 72/65, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-cover__title {
  margin: 0;
  font-weight: 400;
  font-size: 72px;
  line-height: 65px;
  letter-spacing: 0;
  color: var(--text-heading);
}

/* Doc/Cover Accent — Rubik Light 72/72, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-cover__accent {
  margin: 0;
  font-weight: 300;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: 0;
  color: var(--text-brand-accent);
}

/* Doc/Meta — Rubik Regular 10/14, letter-spacing 1. Estilo de Figma sin clase en el sistema. */
.tds-doc-cover__meta {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- DocSectionDivider --- */
/* Doc / Section Divider — separador de seccion o anexo, misma composicion que la portada */
.tds-doc-divider {
  /* A4 a 1 pt = 1 px. Ninguna de estas medidas tiene token en la escala. */
  --tds-doc-width: 595px;
  --tds-doc-height: 842px;
  --tds-doc-margin: 56px;
  --tds-doc-logo-width: 120px;
  --tds-doc-logo-height: 43.49px;
  /* 648 px: tapa del bloque de titulo en Figma */
  --tds-doc-divider-title-top: 648px;
  position: relative;
  width: var(--tds-doc-width);
  height: var(--tds-doc-height);
  overflow: hidden;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.tds-doc-divider * {
  box-sizing: border-box;
}

.tds-doc-divider__logo {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: auto;
  display: block;
}

.tds-doc-divider__logo-placeholder {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: var(--tds-doc-logo-height);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
}

.tds-doc-divider__title-block {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-divider-title-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  overflow: hidden;
  white-space: nowrap;
}

/* Doc/Meta — Rubik Regular 10/14, letter-spacing 1. Estilo de Figma sin clase en el sistema. */
.tds-doc-divider__eyebrow {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Doc/Title — Rubik Regular 40/38, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-divider__title {
  margin: 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 38px;
  letter-spacing: 0;
  color: var(--text-heading);
}

/* Doc/Lead — Rubik Light 20/28, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-divider__lead {
  margin: 0;
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--text-subtle);
}

/* --- DocPage --- */
/* Doc / Page — pagina interior A4 sobre bg/canvas */
.tds-doc-page {
  /* A4 a 1 pt = 1 px. Ninguna de estas medidas tiene token en la escala. */
  --tds-doc-width: 595px;
  --tds-doc-height: 842px;
  --tds-doc-margin: 56px;
  --tds-doc-content-width: 483px;
  /* Anclajes verticales de Figma: cabecera, contenido y pie */
  --tds-doc-page-tag-top: 70px;
  --tds-doc-page-subtitle-top: 104px;
  --tds-doc-page-content-top: 152px;
  --tds-doc-page-content-height: 604px;
  --tds-doc-page-number-top: 772px;
  /* Cajas de la etiqueta de seccion y del numero de pagina */
  --tds-doc-page-tag-width: 160px;
  --tds-doc-page-number-width: 40px;
  position: relative;
  width: var(--tds-doc-width);
  height: var(--tds-doc-height);
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg-canvas);
  font-family: var(--font-sans);
}

.tds-doc-page * {
  box-sizing: border-box;
}

/* Doc/Title — Rubik Regular 40/38, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__title {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  margin: 0;
  font-weight: 400;
  font-size: 40px;
  line-height: 38px;
  letter-spacing: 0;
  color: var(--text-heading);
  white-space: nowrap;
}

/* Doc/Section Tag — Rubik Regular 12/16, letter-spacing 1. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__section-tag {
  position: absolute;
  right: var(--tds-doc-margin);
  top: var(--tds-doc-page-tag-top);
  width: var(--tds-doc-page-tag-width);
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-align: right;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Doc/Subtitle — Rubik Light 12/16, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__subtitle {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-page-subtitle-top);
  margin: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--text-subtle);
}

.tds-doc-page__content {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-page-content-top);
  width: var(--tds-doc-content-width);
  height: var(--tds-doc-page-content-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* Doc/Page Number — Rubik Regular 10/14, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__number {
  position: absolute;
  right: var(--tds-doc-margin);
  top: var(--tds-doc-page-number-top);
  width: var(--tds-doc-page-number-width);
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  text-align: right;
  color: var(--text-muted);
}

/* Encabezado de bloque dentro del contenido */
/* Doc/Heading — Rubik Regular 12/16, letter-spacing 1. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__heading {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Parrafo de cuerpo dentro del contenido */
/* Doc/Body — Rubik Light 12/18, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-page__body {
  margin: 0;
  width: 100%;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--text-body, var(--color-gray-600));
  word-break: break-word;
}

/* Separador de 12 px que sube la distancia entre bloques de 12 a 24 */
.tds-doc-page__spacer {
  flex: 0 0 auto;
  width: 100%;
  height: var(--space-12);
}

/* Empuja lo que venga despues al fondo del area de contenido (notas al pie) */
.tds-doc-page__flex {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* --- DocLetterhead --- */
/* Doc / Letterhead — papel de carta A4 sobre Background/Paper */
.tds-doc-letterhead {
  /* A4 a 1 pt = 1 px. Ninguna de estas medidas tiene token en la escala. */
  --tds-doc-width: 595px;
  --tds-doc-height: 842px;
  --tds-doc-margin: 56px;
  --tds-doc-content-width: 483px;
  --tds-doc-logo-width: 120px;
  --tds-doc-logo-height: 43.49px;
  /* Anclajes verticales de Figma: contenido bajo el logo y numero de pagina al pie */
  --tds-doc-letterhead-content-top: 144px;
  --tds-doc-letterhead-content-height: 612px;
  --tds-doc-letterhead-number-top: 772px;
  --tds-doc-letterhead-number-width: 40px;
  position: relative;
  width: var(--tds-doc-width);
  height: var(--tds-doc-height);
  overflow: hidden;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.tds-doc-letterhead * {
  box-sizing: border-box;
}

.tds-doc-letterhead__logo {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: auto;
  display: block;
}

.tds-doc-letterhead__logo-placeholder {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-margin);
  width: var(--tds-doc-logo-width);
  height: var(--tds-doc-logo-height);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
}

.tds-doc-letterhead__content {
  position: absolute;
  left: var(--tds-doc-margin);
  top: var(--tds-doc-letterhead-content-top);
  width: var(--tds-doc-content-width);
  height: var(--tds-doc-letterhead-content-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* Doc/Page Number — Rubik Regular 10/14, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-letterhead__number {
  position: absolute;
  right: var(--tds-doc-margin);
  top: var(--tds-doc-letterhead-number-top);
  width: var(--tds-doc-letterhead-number-width);
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  text-align: right;
  color: var(--text-muted);
}

/* Doc/Heading — Rubik Regular 12/16, letter-spacing 1. Estilo de Figma sin clase en el sistema. */
.tds-doc-letterhead__heading {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Doc/Body — Rubik Light 12/18, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-letterhead__body {
  margin: 0;
  width: 100%;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--text-body, var(--color-gray-600));
  word-break: break-word;
}

/* Empuja lo que venga despues al fondo del area de contenido */
.tds-doc-letterhead__flex {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* --- DocListItem --- */
/* Doc / List Item — punto cian + etiqueta, para las columnas de Doc / Block / Device List */
.tds-doc-list-item {
  /* 6 px: diametro del punto en Figma, sin token en la escala de medidas */
  --tds-doc-dot-size: 6px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
}

.tds-doc-list-item__dot {
  flex: 0 0 auto;
  width: var(--tds-doc-dot-size);
  height: var(--tds-doc-dot-size);
  border-radius: 50%;
  background: var(--action-primary);
}

/* Doc/List Item — Rubik Regular 12/16, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-list-item__label {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--text-body, var(--color-gray-600));
  word-break: break-word;
}

/* --- DocBullet --- */
/* Doc / Bullet — vineta de cuerpo con sangria francesa */
.tds-doc-bullet {
  /* 12 px: ancho reservado al glifo en Figma, sin token en la escala */
  --tds-doc-bullet-glyph-w: 12px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  font-family: var(--font-sans);
  /* Doc/Body — Rubik Light 12/18, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
}

.tds-doc-bullet__glyph {
  flex: 0 0 auto;
  width: var(--tds-doc-bullet-glyph-w);
  color: var(--text-accent);
}

.tds-doc-bullet__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--text-body, var(--color-gray-600));
  word-break: break-word;
}

/* --- DocKeyValue --- */
/* Doc / Key Value — par clave/valor de las tablas de datos del documento */
.tds-doc-key-value {
  /* 2 px de separacion clave-valor: valor de Figma sin token en la escala */
  --tds-doc-kv-gap: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tds-doc-kv-gap);
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

/* Doc/Label — Rubik Light 12/16, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-key-value__label {
  margin: 0;
  width: 100%;
  font-weight: 300;
  color: var(--text-accent);
  word-break: break-word;
}

/* Doc/List Item — Rubik Regular 12/16, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-key-value__value {
  margin: 0;
  width: 100%;
  font-weight: 400;
  color: var(--text-body, var(--color-gray-600));
  word-break: break-word;
}

/* --- DocDeviceList --- */
/* Doc / Block / Device List — gama de dispositivos verificados en columnas */
.tds-doc-device-list {
  /* 12 px de sangria de las columnas y 6 px entre items: valores de Figma sin token propio */
  --tds-doc-device-indent: var(--space-12);
  --tds-doc-device-row-gap: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  font-family: var(--font-sans);
}

/* Doc/Label — Rubik Light 12/16, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-device-list__label {
  margin: 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--text-accent);
  word-break: break-word;
}

.tds-doc-device-list__columns {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  padding-left: var(--tds-doc-device-indent);
}

.tds-doc-device-list__column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tds-doc-device-row-gap);
}

/* --- DocKeyValueGrid --- */
/* Doc / Block / Key Value Grid — tabla de datos en 3 columnas x N filas */
.tds-doc-kv-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
  font-family: var(--font-sans);
}

.tds-doc-kv-grid__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}

.tds-doc-kv-grid__cell {
  flex: 1 1 0;
  min-width: 0;
}

/* --- DocFootnote --- */
/* Doc / Block / Footnote — nota al pie del area de contenido */
.tds-doc-footnote {
  /* 8 px: ancho reservado al asterisco en Figma, sin token en la escala */
  --tds-doc-footnote-marker-w: 8px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  font-family: var(--font-sans);
  /* Doc/Footnote — Rubik Light 10/14, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
  font-weight: 300;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  color: var(--text-accent);
}

.tds-doc-footnote__marker {
  flex: 0 0 auto;
  width: var(--tds-doc-footnote-marker-w);
}

.tds-doc-footnote__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  word-break: break-word;
}

/* --- DocFigure --- */
/* Doc / Block / Figure — imagen con pie centrado */
.tds-doc-figure {
  /* 160 x 240: caja de imagen por defecto en Figma, sin token en la escala */
  --tds-doc-figure-w: 160px;
  --tds-doc-figure-h: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font-family: var(--font-sans);
}

.tds-doc-figure__image {
  width: var(--tds-doc-figure-w);
  height: var(--tds-doc-figure-h);
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tds-doc-figure__image--empty {
  background: var(--bg-surface-raised);
}

/* Doc/Caption — Rubik Light 9/12, letter-spacing 0. Estilo de Figma sin clase en el sistema. */
.tds-doc-figure__caption {
  margin: 0;
  font-weight: 300;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  color: var(--text-muted);
  word-break: break-word;
}