/* =====================================================================
   Rediseño de layout (2026-10): variables compartidas, menú lateral,
   barra superior, selector de contexto y área de contenido.
   Los colores salen de la paleta de MudBlazor (--mud-palette-*): así
   respetan el tema de la empresa y el modo oscuro.
   Referencia: .agents/RediseñoUI/rediseno-layout/ESPECIFICACION_VISUAL.md
   ===================================================================== */
:root {
  --drako-navy: var(--mud-palette-drawer-background);
  --drako-navy-deep: #071A3D;
  --drako-primary: var(--mud-palette-primary);
  --drako-primary-soft: color-mix(in srgb, var(--mud-palette-primary) 11%, var(--mud-palette-surface));
  --drako-surface: var(--mud-palette-surface);
  --drako-surface-alt: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
  --drako-border: var(--mud-palette-lines-default);
  --drako-field-border: var(--mud-palette-lines-inputs);
  --drako-text: var(--mud-palette-text-primary);
  --drako-text-2: var(--mud-palette-text-secondary);
  --drako-icon: var(--mud-palette-action-default);
  --drako-hover: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
  --drako-success: var(--mud-palette-success);
  --drako-warning: var(--mud-palette-warning);
  --drako-error: var(--mud-palette-error);
  --drako-radius: 10px;
  --drako-radius-card: 12px;

  /* Menú lateral (siempre oscuro) */
  --drako-nav-text: var(--mud-palette-drawer-text);
  --drako-nav-child: #AFBCD6;
  --drako-nav-label: #8EA3C9;
  --drako-nav-hover: rgba(255, 255, 255, .08);
  --drako-nav-open: rgba(255, 255, 255, .06);
  --drako-nav-line: rgba(255, 255, 255, .08);
  --drako-nav-guide: rgba(255, 255, 255, .12);
}

.fsh-card {
  border: 1px solid var(--drako-border);
}

/* ---------- Menú lateral ---------- */
#nav-drawer {
  border-right: 0 !important;
}

#nav-drawer .mud-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.drako-brand {
  flex: 0 0 64px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--drako-nav-line);
  color: #FFFFFF;
  text-decoration: none;
}

.drako-brand--mini {
  justify-content: center;
  padding: 0;
}

.drako-brand__logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--drako-navy-deep);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.drako-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo de la empresa: puede ser rectangular o de fondo claro; va completo sobre blanco, sin recorte circular. */
.drako-brand__logo--company {
  border-radius: 8px;
  background: #fff;
  padding: 2px;
}

.drako-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
}

.drako-brand__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.drako-brand__tagline {
  font-size: 11px;
  color: var(--drako-nav-label);
}

.drako-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.drako-nav {
  padding: 8px 12px 12px;
}

#nav-drawer .drako-nav .mud-navmenu {
  padding: 0;
  margin: 0;
}

/* Etiquetas de sección; si una sección queda sin opciones (por permisos) su etiqueta no se muestra. */
.drako-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--drako-nav-label);
  padding: 16px 12px 6px;
}

.drako-nav-label:has(+ .drako-nav-label),
.drako-nav-label:last-child {
  display: none;
}

/* Ítem de primer nivel (opción o grupo) */
#nav-drawer .drako-nav .mud-nav-link {
  min-height: 40px;
  padding: 0 12px;
  gap: 12px;
  border-radius: 8px;
  margin: 1px 0;
  color: var(--drako-nav-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  background: transparent;
  display: flex;
  align-items: center;
}

#nav-drawer .drako-nav .mud-nav-link .mud-nav-link-icon {
  font-size: 19px;
  width: 19px;
  height: 19px;
  margin: 0;
  color: inherit;
  fill: currentColor;
}

#nav-drawer .drako-nav .mud-nav-link .mud-nav-link-text {
  margin: 0;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nav-drawer .drako-nav .mud-nav-link .mud-nav-link-expand-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: currentColor !important;
  color: inherit;
  opacity: .8;
}

#nav-drawer .drako-nav .mud-nav-link:hover:not(.active) {
  background: var(--drako-nav-hover);
  color: #FFFFFF;
}

/* Grupo abierto: texto blanco y fondo tenue */
#nav-drawer .drako-nav .mud-nav-group > .mud-nav-link:has(.mud-nav-link-expand-icon.mud-transform) {
  background: var(--drako-nav-open);
  color: #FFFFFF;
}

/* Opción activa: solo la hoja lleva el relleno */
#nav-drawer .drako-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background: var(--drako-primary);
  color: #FFFFFF;
  font-weight: 600;
}

/* Hijos de un grupo: guía vertical a la izquierda y sin íconos */
#nav-drawer .drako-nav .mud-nav-group .mud-navmenu {
  margin: 2px 0 6px 21px;
  padding-left: 9px;
  border-left: 1px solid var(--drako-nav-guide);
}

#nav-drawer .drako-nav .mud-nav-group .mud-navmenu .mud-nav-link {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--drako-nav-child);
}

#nav-drawer .drako-nav .mud-nav-group .mud-navmenu .mud-nav-link .mud-nav-link-icon {
  display: none;
}

#nav-drawer .drako-nav .mud-nav-group .mud-navmenu .mud-nav-group > .mud-nav-link:has(.mud-nav-link-expand-icon.mud-transform) {
  color: #FFFFFF;
}

/* Menú contraído (modo mini): solo íconos centrados; separadores en lugar de etiquetas */
.drako-nav--mini {
  padding: 8px 16px 12px;
}

/* Contraído, la barra de desplazamiento correría los íconos del centro: se oculta y se sigue desplazando con la rueda. */
.drako-nav-scroll:has(> .drako-nav--mini) {
  scrollbar-width: none;
}

.drako-nav-scroll:has(> .drako-nav--mini)::-webkit-scrollbar {
  display: none;
}

.drako-nav--mini .drako-nav-label {
  height: 1px;
  padding: 0;
  margin: 10px 0;
  font-size: 0;
  background: var(--drako-nav-line);
}

.drako-nav--mini .drako-nav-label:first-child {
  display: none;
}

#nav-drawer .drako-nav--mini .mud-nav-link {
  width: 44px;
  justify-content: center;
  padding: 0;
}

#nav-drawer .drako-nav--mini .mud-nav-link .mud-nav-link-text,
#nav-drawer .drako-nav--mini .mud-nav-link .mud-nav-link-expand-icon,
#nav-drawer .drako-nav--mini .mud-nav-link .mud-icon-root:not(.mud-nav-link-icon),
#nav-drawer .drako-nav--mini .mud-nav-group .mud-collapse-container {
  display: none !important;
}

#nav-drawer .drako-nav--mini .mud-nav-group > .mud-nav-link:has(.mud-nav-link-expand-icon.mud-transform) {
  background: transparent;
}

#nav-drawer .drako-nav--mini .mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link {
  background: var(--drako-primary);
  color: #FFFFFF;
}

/* Pie del menú: contraer / expandir */
.drako-nav-footer {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--drako-nav-line);
}

.drako-nav-footer__btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--drako-nav-open);
  color: var(--drako-nav-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.drako-nav-footer__btn:hover {
  background: var(--drako-nav-hover);
  color: #FFFFFF;
}

.drako-nav-footer__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

.drako-nav-footer__btn--mini {
  justify-content: center;
  padding: 0;
}

.drako-nav-footer__btn--mini .mud-icon-root {
  transform: scaleX(-1);
}

/* ---------- Barra superior ---------- */
.drako-appbar.mud-appbar {
  border-bottom: 1px solid var(--drako-border);
}

.drako-appbar .mud-toolbar {
  gap: 12px;
  padding: 0 24px;
  min-height: 64px;
}

.drako-appbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* Pantallas medianas: el buscador cede espacio; sin nombre de usuario ni atajo. */
@media (max-width: 959.98px) {
  .drako-user__identity,
  .drako-menu-search__kbd {
    display: none !important;
  }
}

.drako-icon-btn.mud-icon-button {
  width: 40px;
  height: 40px;
  border-radius: var(--drako-radius);
  color: var(--drako-icon);
}

.drako-icon-btn.mud-icon-button:hover {
  background: var(--drako-hover);
}

.drako-appbar__sep {
  width: 1px;
  height: 28px;
  background: var(--drako-border);
  margin: 0 8px;
  flex: 0 0 1px;
}

/* Selector de contexto: Empresa + Sucursal en un solo botón */
.drako-context {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius);
  background: var(--drako-surface);
  color: var(--drako-text);
  font: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

.drako-context:hover {
  background: var(--drako-hover);
}

.drako-context:focus-visible {
  outline: 2px solid var(--drako-primary);
  outline-offset: 2px;
}

.drako-context__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--drako-primary-soft);
  color: var(--drako-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drako-context__part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

.drako-context__label {
  font-size: 11px;
  color: var(--drako-text-2);
}

.drako-context__value {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drako-context__value--tenant {
  text-transform: uppercase;
}

.drako-context__sep {
  width: 1px;
  height: 24px;
  background: var(--drako-border);
  margin: 0 4px;
}

.drako-context__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--drako-success);
}

.drako-context__dot--missing {
  background: var(--drako-warning);
}

.drako-context__chevron {
  color: var(--drako-text-2);
  margin-left: 4px;
}

/* Buscador del menú en la barra superior */
.drako-menu-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 0;
}

.drako-menu-search__field {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--mud-palette-background);
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius);
  color: var(--drako-text-2);
  box-sizing: border-box;
  cursor: text;
}

.drako-menu-search__field:focus-within {
  border-color: var(--drako-primary);
  background: var(--drako-surface);
}

.drako-menu-search__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--drako-text);
}

.drako-menu-search__field input::-webkit-search-cancel-button {
  cursor: pointer;
}

.drako-menu-search__kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--drako-text-2);
  background: var(--drako-surface);
  border: 1px solid var(--drako-field-border);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}

.drako-menu-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 360px);
  max-width: calc(100vw - 32px);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 6px;
  background: var(--drako-surface);
  color: var(--drako-text);
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius-card);
  box-shadow: 0 12px 32px rgba(15, 27, 51, .16);
  z-index: calc(var(--mud-zindex-appbar) + 10);
}

.drako-menu-search__results .mud-nav-link {
  border-radius: 8px;
}

.drako-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Franja de contexto en móvil, debajo de la barra superior */
.drako-context-strip {
  position: sticky;
  top: 60px;
  z-index: 999;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--drako-surface);
  border: 0;
  border-bottom: 1px solid var(--drako-border);
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--drako-text);
  cursor: pointer;
  text-align: left;
}

.drako-context-strip__tenant {
  font-weight: 600;
  text-transform: uppercase;
}

/* Chip de usuario */
.drako-user .fsh-account-trigger {
  height: 44px;
  padding: 0 8px 0 4px !important;
  border-radius: var(--drako-radius) !important;
  text-transform: none;
}

.drako-user .fsh-account-trigger:hover {
  background: var(--drako-hover);
}

.drako-user .fsh-trigger-avatar {
  width: 34px !important;
  height: 34px !important;
  background: var(--drako-navy) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600;
}

.drako-user__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  margin: 0 4px 0 10px;
  text-align: left;
}

.drako-user__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--drako-text);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drako-user__role {
  font-size: 12px;
  color: var(--drako-text-2);
}

/* Marca en la barra superior (solo móvil) */
.drako-appbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.drako-appbar__brand .drako-brand__logo {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

@media (max-width: 599.98px) {
  .drako-appbar.mud-appbar {
    background: var(--drako-navy);
    color: #FFFFFF;
    border-bottom: 0;
  }

  .drako-appbar .mud-toolbar {
    min-height: 60px;
    height: 60px;
    padding: 0 8px;
    gap: 4px;
  }

  .drako-appbar .drako-icon-btn.mud-icon-button {
    color: #FFFFFF;
    width: 44px;
    height: 44px;
  }

  .drako-appbar .drako-icon-btn.mud-icon-button:hover {
    background: rgba(255, 255, 255, .08);
  }

  .drako-user .fsh-trigger-avatar {
    background: rgba(255, 255, 255, .16) !important;
  }

  .drako-user .fsh-trigger-arrow,
  .drako-user__identity {
    display: none !important;
  }
}

/* ---------- Área de contenido ---------- */
.drako-main.mud-main-content {
  background: var(--mud-palette-background);
  /* clip (no hidden): hidden lo volvería contenedor de desplazamiento y rompería la barra de pestañas fija. */
  overflow-x: clip;
}

.drako-content.page-shell {
  padding: 24px 32px 40px;
}

@media (max-width: 599.98px) {
  .drako-main.mud-main-content {
    padding-top: 60px;
  }

  .drako-content.page-shell {
    padding: 16px 16px 32px;
  }
}

.drako-tnum {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Componentes estandarizados (§4): barra de acciones del documento,
   chips de estado, pasos, menús ⋯, diálogo de generar y acciones por fila.
   ===================================================================== */
:root {
  --drako-amber: #B45309;
  --drako-red: #B91C1C;
}

/* Botones con texto: capitalización normal (no MAYÚSCULAS), alto 40 */
.drako-docbar__btn.mud-button-root,
.drako-split .mud-button-root,
.drako-gen__footer .mud-button-root {
  height: 40px;
  border-radius: var(--drako-radius);
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
}

.drako-docbar__btn.mud-button-outlined,
.drako-gen__footer .mud-button-outlined {
  border-color: var(--drako-field-border);
  color: var(--drako-text);
}

.drako-docbar__primary.mud-button-root,
.drako-gen__primary.mud-button-root {
  font-weight: 600;
  padding: 0 18px;
}

/* Botón dividido Imprimir | ▾ */
.drako-split {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--drako-field-border);
  border-radius: var(--drako-radius);
  overflow: hidden;
  background: var(--drako-surface);
}

.drako-split .drako-split__main.mud-button-root {
  border: 0;
  border-radius: 0;
  height: 38px;
  color: var(--drako-text);
  padding: 0 14px;
}

.drako-split .drako-split__arrow .mud-icon-button {
  width: 34px;
  height: 38px;
  border-radius: 0;
  border-left: 1px solid var(--drako-field-border);
  color: var(--drako-icon);
}

/* Barra de acciones del documento */
.drako-docbar {
  background: var(--drako-surface);
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius-card);
  box-shadow: 0 1px 2px rgba(15, 27, 51, .04);
  margin-bottom: 20px;
}

.drako-docbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
}

.drako-docbar__back.mud-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius);
  color: var(--drako-icon);
}

.drako-docbar__heading {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drako-docbar__crumbs {
  font-size: 13px;
  color: var(--drako-text-2);
}

.drako-docbar__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.drako-docbar__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--drako-text);
  font-variant-numeric: tabular-nums;
}

.drako-docbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drako-docbar__more .mud-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--drako-field-border);
  border-radius: var(--drako-radius);
  color: var(--drako-icon);
}

.drako-docbar__sep {
  width: 1px;
  height: 28px;
  background: var(--drako-border);
  margin: 0 4px;
}

/* Bajo ~900 px las secundarias pasan al menú ⋯ */
.drako-only-narrow {
  display: none !important;
}

@media (max-width: 899.98px) {
  .drako-docbar__secondary {
    display: none !important;
  }

  .drako-only-narrow {
    display: revert !important;
  }

  .drako-docbar__main {
    padding: 14px 16px;
  }

  .drako-docbar__title {
    font-size: 20px;
  }
}

/* Chip de estado (píldora con punto) */
.drako-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #EEF1F6;
  color: #475569;
}

.drako-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94A3B8;
}

.drako-status--info { background: #E0F2FE; color: #075985; }
.drako-status--info .drako-status__dot { background: #0284C7; }
.drako-status--warning { background: #FEF3C7; color: #92400E; }
.drako-status--warning .drako-status__dot { background: #D97706; }
.drako-status--success { background: #E4F5EA; color: #166534; }
.drako-status--success .drako-status__dot { background: #16A34A; }
.drako-status--error { background: #FDECEC; color: #B91C1C; }
.drako-status--error .drako-status__dot { background: #DC2626; }

/* Pasos del documento */
.drako-steps {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 24px;
  border-top: 1px solid var(--mud-palette-table-lines);
}

/* Franja inferior del encabezado: pasos a la izquierda y cadena del documento (DocumentChain) a la derecha. */
.drako-docbar__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 8px 24px;
  border-top: 1px solid var(--mud-palette-table-lines);
}

.drako-docbar__bottom:not(:has(*)) {
  display: none;
}

.drako-docbar__bottom > .drako-steps {
  padding: 4px 0;
  border-top: 0;
}

.drako-chain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
}

.drako-chain__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}

.drako-chain__label {
  min-width: 56px;
  color: var(--mud-palette-text-secondary);
  font-size: 11px;
}

.drako-chain__doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mud-palette-primary);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.drako-chain__doc:hover {
  text-decoration: underline;
}

.drako-chain__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mud-palette-success);
  flex: 0 0 auto;
}

.drako-chain__doc--draft .drako-chain__dot {
  background: var(--mud-palette-text-disabled);
}

.drako-chain__doc--void {
  color: var(--mud-palette-text-secondary);
  text-decoration: line-through;
}

.drako-chain__doc--void .drako-chain__dot {
  background: var(--mud-palette-error);
}

.drako-chain__sep {
  color: var(--mud-palette-text-disabled);
}

.drako-chain__more {
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--mud-palette-primary);
  font: inherit;
  cursor: pointer;
}

.drako-steps__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--drako-text-2);
}

.drako-steps__bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
  border: 1.5px solid #C5CEDC;
  color: var(--drako-text-2);
}

.drako-steps__step--done {
  color: var(--drako-text);
}

.drako-steps__step--done .drako-steps__bullet {
  border: 0;
  background: var(--drako-primary-soft);
  color: var(--drako-primary);
}

.drako-steps__step--current {
  color: var(--drako-primary);
  font-weight: 600;
}

.drako-steps__step--current .drako-steps__bullet {
  border: 0;
  background: var(--drako-primary);
  color: #FFFFFF;
}

.drako-steps__line {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--drako-field-border);
}

.drako-steps__line--done {
  background: var(--drako-primary);
}

@media (max-width: 599.98px) {
  .drako-steps {
    padding: 10px 16px;
  }

  .drako-docbar__bottom {
    padding: 6px 16px;
  }

  .drako-chain {
    margin-left: 0;
  }

  .drako-steps__line {
    width: 16px;
  }
}

/* Menús ⋯ (documento y filas) */
.drako-menu.mud-popover {
  min-width: 248px;
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius-card);
  box-shadow: 0 12px 32px rgba(15, 27, 51, .14);
}

.drako-menu .mud-list {
  padding: 6px;
}

.drako-menu .mud-menu-item {
  border-radius: 8px;
  min-height: 38px;
  font-size: 14px;
}

.drako-menu-group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--drako-text-2);
  padding: 6px 10px 4px;
}

.mud-menu-item.drako-menu-item--warning,
.mud-menu-item.drako-menu-item--warning .mud-icon-root {
  color: var(--drako-amber);
}

.mud-menu-item.drako-menu-item--danger,
.mud-menu-item.drako-menu-item--danger .mud-icon-root {
  color: var(--drako-red);
}

/* Acciones por fila: columna de 96 px, una acción visible + menú ⋮ */
.drako-row-actions-col {
  width: 96px;
  min-width: 96px;
  text-align: right !important;
}

.drako-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.drako-row-actions .drako-row-actions__btn.mud-icon-button,
.drako-row-actions .drako-row-actions__more .mud-icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  color: var(--drako-icon);
}

.drako-row-actions__spacer {
  flex: 0 0 34px;
  width: 34px;
}

.drako-row-actions .drako-row-actions__btn .mud-icon-root,
.drako-row-actions .drako-row-actions__more .mud-icon-root {
  font-size: 18px;
}

.drako-row-actions .drako-row-actions__more.is-open .mud-icon-button {
  background: var(--drako-primary-soft);
  color: var(--drako-primary);
}

.drako-menu--row.mud-popover {
  min-width: 260px;
}

/* Correlativo como enlace que abre el documento */
.drako-doc-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--drako-primary);
  cursor: pointer;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.drako-doc-link:hover {
  text-decoration: underline;
}

/* Listados de Ventas y Compras: los filtros (DocumentListFilters) ocupan el espacio y bajan de línea entre ellos;
   «Nuevo» y el menú ⋯ (ListActions) quedan juntos arriba a la derecha y nunca se separan ni cambian de lugar. */
.mud-toolbar:has(.drako-list-filters) {
  height: auto;
  min-height: 64px;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 8px;
}

.mud-toolbar:has(.drako-list-filters) > .drako-list-filters {
  min-width: 0;
}

.drako-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.drako-list-filters-partner {
  min-width: 240px;
  max-width: 320px;
}

/* Encabezado de página (DrakoAppPageHeader): título, descripción y acciones sobre el fondo */
.drako-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.drako-pagehead__text {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.drako-pagehead__crumbs {
  font-size: 13px;
  color: var(--drako-text-2);
}

.drako-pagehead__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--drako-text);
}

.drako-pagehead__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Mismo botón Volver que la barra de documento (.drako-docbar__back). */
.drako-pagehead__back.mud-icon-button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius);
  color: var(--drako-icon);
}

.drako-pagehead__desc {
  margin: 0;
  font-size: 14px;
  color: var(--drako-text-2);
}

.drako-pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.drako-pagehead__actions .mud-button-root {
  height: 40px;
  border-radius: var(--drako-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
}

.drako-pagehead__actions .mud-button-filled {
  font-weight: 600;
}

.drako-pagehead__actions .mud-button-root.ml-2,
.drako-pagehead__actions .mud-button-root.mr-2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Botones con borde: borde neutro; el texto conserva su color (anular en rojo o ámbar). */
.drako-pagehead__actions .mud-button-outlined {
  border-color: var(--drako-field-border);
  background: var(--drako-surface);
}

.drako-pagehead__actions .mud-button-outlined.mud-button-outlined-default,
.drako-pagehead__actions .mud-button-outlined.mud-button-outlined-primary,
.drako-pagehead__actions .mud-button-outlined.mud-button-outlined-success,
.drako-pagehead__actions .mud-button-outlined.mud-button-outlined-info {
  color: var(--drako-text);
}

/* Una sola acción principal: el último botón relleno, en el color primario.
   Los rellenos anteriores se ven como secundarios (con borde). */
.drako-pagehead__actions .mud-button-filled {
  background-color: var(--drako-primary);
  color: #FFFFFF;
}

.drako-pagehead__actions .mud-button-filled:has(~ .mud-button-filled),
.drako-pagehead__actions .mud-button-filled:has(~ * .mud-button-filled) {
  background-color: var(--drako-surface);
  color: var(--drako-text);
  border: 1px solid var(--drako-field-border);
  font-weight: 500;
}

@media (max-width: 599.98px) {
  .drako-pagehead__title {
    font-size: 22px;
  }
}

/* Botón con aspecto de enlace */
.drako-link-btn {
  border: 0;
  background: transparent;
  color: var(--drako-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.drako-link-btn:hover:not(:disabled) {
  background: var(--drako-primary-soft);
}

.drako-link-btn:disabled {
  color: var(--drako-text-2);
  cursor: default;
  opacity: .6;
}

/* Diálogo de generar / exportar a otro proceso */
.drako-gen.mud-dialog {
  max-width: 1080px;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 27, 51, .32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drako-gen .mud-dialog-title {
  padding: 0;
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

.drako-gen__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
}

.drako-gen__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--drako-radius);
  background: var(--drako-primary-soft);
  color: var(--drako-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drako-gen__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drako-gen__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--drako-text);
}

.drako-gen__context {
  font-size: 13px;
  color: var(--drako-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.drako-gen__context strong {
  color: var(--drako-text);
  font-weight: 600;
}

.drako-gen__close.mud-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--drako-icon);
}

.drako-gen .drako-gen__content.mud-dialog-content {
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drako-gen__selbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--drako-surface-alt);
  border-bottom: 1px solid var(--mud-palette-table-lines);
  font-size: 13px;
}

.drako-gen__selcount {
  font-weight: 600;
}

/* Scroll solo en el cuerpo de la tabla; si hace falta horizontal, es de este contenedor y no del diálogo. */
.drako-gen__table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.drako-gen__table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--drako-text);
}

.drako-gen__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--drako-surface);
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--drako-text-2);
  border-bottom: 1px solid var(--drako-border);
  white-space: nowrap;
}

.drako-gen__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mud-palette-table-lines);
  vertical-align: middle;
}

.drako-gen__table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.drako-gen__table tr.is-selected td {
  background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--drako-surface));
}

.drako-gen__table .drako-gen__check {
  width: 52px;
  padding-left: 18px;
  padding-right: 0;
}

.drako-gen__code {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Producto: máximo 2 líneas; el nombre completo en el title */
.drako-gen__name {
  max-width: 320px;
}

.drako-gen__name span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drako-gen__unit,
.drako-gen__muted {
  color: var(--drako-text-2);
}

.drako-gen__pending {
  font-weight: 600;
}

.drako-gen__table .drako-gen__qty-col {
  width: 140px;
  padding-right: 24px;
}

.drako-gen__qty {
  width: 96px;
  margin-left: auto;
}

.drako-gen__qty input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.drako-gen .drako-gen__footer.mud-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--drako-border);
}

.drako-gen__total {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.drako-gen__total-label {
  font-size: 12px;
  color: var(--drako-text-2);
}

.drako-gen__total-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Móvil: pantalla completa */
@media (max-width: 599.98px) {
  .drako-gen.mud-dialog {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .drako-gen__header,
  .drako-gen__selbar,
  .drako-gen .drako-gen__footer.mud-dialog-actions {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =====================================================================
   Formularios de documentos (DocumentFormLayout): tarjetas con título,
   resumen a la derecha y campos con la etiqueta encima (.drako-form).
   ===================================================================== */
.drako-docform-host {
  container-type: inline-size;
}

.drako-docform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.drako-docform__general { grid-column: 1; grid-row: 1; align-self: stretch; }
.drako-docform__aside { grid-column: 2; grid-row: 1; min-width: 0; }
.drako-docform__lines,
.drako-docform__extra { grid-column: 1 / -1; min-width: 0; }

.drako-docform--no-summary .drako-docform__general { grid-column: 1 / -1; }

/* Formulario angosto (tableta, móvil): todo en una columna, el resumen al final. */
@container (max-width: 899.98px) {
  .drako-docform {
    grid-template-columns: minmax(0, 1fr);
  }

  .drako-docform__general,
  .drako-docform__lines,
  .drako-docform__extra { grid-column: 1; grid-row: auto; }

  .drako-docform__aside {
    grid-column: 1;
    grid-row: auto;
    order: 10;
  }
}

/* Tarjeta con título */
.drako-card {
  background: var(--drako-surface);
  border: 1px solid var(--drako-border);
  border-radius: var(--drako-radius-card);
  box-shadow: 0 1px 2px rgba(15, 27, 51, .04);
  min-width: 0;
}

.drako-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 52px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

.drako-card__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--drako-text);
}

.drako-card__tools {
  flex: 0 1 380px;
  min-width: 220px;
}

.drako-card__body {
  padding: 20px 24px 24px;
}

.drako-card__body--flush {
  padding: 0;
}

@media (max-width: 599.98px) {
  .drako-card__header,
  .drako-card__body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .drako-card__body--flush {
    padding: 0;
  }

  .drako-card__tools {
    flex-basis: 100%;
  }
}

/* Campos con la etiqueta encima: el label pasa arriba y el borde pierde la muesca */
/* Mismo alto y alineación para campos normales y densos (Margin.Dense agrega margen arriba y abajo). */
.drako-form .mud-input-control.mud-input-outlined-with-label,
.drako-form .mud-input-control.mud-input-outlined-with-label.mud-input-control-margin-dense,
.drako-form .mud-input-control.mud-input-outlined-with-label.mud-input-control-margin-normal {
  margin-top: 0;
  margin-bottom: 0;
}

.drako-form .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container {
  display: flex;
  flex-direction: column;
}

.drako-form .mud-input-control.mud-input-outlined-with-label .mud-input-label-outlined {
  order: -1;
  position: static;
  transform: none !important;
  max-width: none;
  padding: 0 !important;
  margin: 0 0 6px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--drako-text);
  pointer-events: auto;
}

.drako-form .mud-input-control.mud-input-outlined-with-label .mud-input-label-outlined.mud-disabled {
  color: var(--drako-text-2);
}

.drako-form .mud-input.mud-input-outlined {
  background: color-mix(in srgb, var(--mud-palette-background) 45%, var(--drako-surface));
  border-radius: var(--drako-radius);
}

.drako-form .mud-input.mud-input-outlined.mud-disabled {
  background: color-mix(in srgb, var(--mud-palette-background) 90%, var(--drako-surface));
}

.drako-form .mud-input-outlined-border {
  top: 0;
  border-radius: var(--drako-radius);
  border-color: var(--drako-field-border);
}

.drako-form .mud-input-outlined-border legend {
  display: none;
}

.drako-form .mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--drako-field-border) 50%, var(--drako-text-2));
}

.drako-form .mud-input.mud-input-outlined input.mud-input-root,
.drako-form .mud-input.mud-input-outlined textarea.mud-input-root {
  font-size: 14px;
}

.drako-form .mud-input.mud-input-outlined input.mud-input-root {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* MudSelect dibuja el valor en un div (no un input): mismo alto y alineación que los demás campos. */
.drako-form .mud-input.mud-input-outlined div.mud-input-slot.mud-input-root {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  line-height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.drako-form .mud-input.mud-input-outlined input.mud-input-root::placeholder,
.drako-form .mud-input.mud-input-outlined textarea.mud-input-root::placeholder {
  opacity: 1 !important;
  color: var(--drako-text-2);
}

/* Los campos dentro de la tabla de líneas mantienen su tamaño compacto */
.drako-form .drako-lines .mud-input.mud-input-outlined input.mud-input-root {
  height: auto;
}

/* Resumen (totales) */
.drako-sum {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.drako-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--drako-text-2);
}

.drako-sum__row > span:last-child {
  color: var(--drako-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.drako-sum__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: -4px;
}

.drako-form .drako-sum .mud-input.mud-input-outlined input.mud-input-root {
  height: 36px;
  text-align: right;
}

/* Vista de moneda (Base / Otra / Ambas) en una línea compacta */
.drako-sum .currency-view-toggle {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

.drako-sum .currency-view-toggle .mud-input-control {
  margin: 0;
}

.drako-sum__sep {
  border-top: 1px dashed var(--drako-border);
  margin: 6px 0 4px;
}

.drako-sum__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--drako-text);
}

.drako-sum__total-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.drako-sum__note {
  font-size: 12px;
  color: var(--drako-text-2);
}

/* Tabla de líneas del documento */
.drako-lines.mud-table {
  background: transparent;
  box-shadow: none;
  border-radius: 0 0 var(--drako-radius-card) var(--drako-radius-card);
}

.drako-lines .mud-table-head .mud-table-cell {
  background: var(--drako-surface-alt);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--drako-text-2);
  border-bottom: 1px solid var(--mud-palette-table-lines);
  white-space: nowrap;
}

.drako-lines .mud-table-head .mud-table-cell:first-child,
.drako-lines .mud-table-body .mud-table-cell:first-child {
  padding-left: 24px;
}

.drako-lines .mud-table-head .mud-table-cell:last-child,
.drako-lines .mud-table-body .mud-table-cell:last-child {
  padding-right: 24px;
}

.drako-lines .mud-table-body .mud-table-cell {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Columnas algo más compactas que el detalle clásico para que entren todas en la tarjeta. */
@media (min-width: 600px) {
  .drako-lines.doc-lines th.col-money {
    min-width: 96px;
  }

  .drako-lines.doc-lines th.col-product {
    min-width: 180px;
  }

  .drako-lines.doc-lines th.col-qty {
    width: 96px;
    min-width: 80px;
  }

  .drako-lines .mud-table-head .mud-table-cell,
  .drako-lines .mud-table-body .mud-table-cell {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Sin líneas */
.drako-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 16px 44px;
  text-align: center;
}

.drako-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--drako-radius);
  background: var(--drako-primary-soft);
  color: var(--drako-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.drako-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--drako-text);
}

.drako-empty__text {
  font-size: 13px;
  color: var(--drako-text-2);
}

/* Calendarios de fecha: MudBlazor copia el Style del campo (por ejemplo max-width:260px en los filtros de las listas)
   al papel del calendario desplegado, que se cortaba: no se veían el sábado ni la flecha para avanzar. */
.mud-picker-popover .mud-picker-inline-paper > .mud-paper {
  max-width: none !important;
}