@charset "UTF-8";
:root {
  --fuente: europa, "Segoe UI", system-ui, -apple-system, sans-serif;
  --texto-2xs: 0.75rem;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 1.875rem;
  --peso-normal: 400;
  --peso-fuerte: 600;
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --radio: 0.5rem;
  --radio-medio: 0.75rem;
  --radio-grande: 1rem;
  --radio-pildora: 999px;
  --objetivo-tactil: 3rem;
  --ancho-lateral: 15rem;
  --ancho-lateral-corto: 4.5rem;
  --ancho-contenido: 80rem;
  --alto-barra: 3.5rem;
  --alto-barra-inferior: 0px;
  --sombra-1: 0 1px 2px rgb(32 41 81 / 0.08), 0 6px 16px -8px rgb(32 41 81 / 0.22);
  --sombra-suave: rgb(32 41 81 / 0.22);
  --sombra-2: 0 2px 4px rgb(32 41 81 / 0.1), 0 18px 40px -16px rgb(32 41 81 / 0.4);
  --duracion-rapida: 150ms;
  --duracion: 220ms;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --capa-barra: 20;
  --capa-hoja: 30;
  --capa-toasts: 40;
}

:root,
[data-theme=light] {
  color-scheme: light;
  --color-fondo: #F7F3E9;
  --color-superficie: #FCFAF5;
  --color-superficie-2: #F0EADD;
  --color-campo: #EFE8DA;
  --color-texto: #202951;
  --color-atenuado: #5A6285;
  --color-borde: #DDD5C4;
  --color-borde-campo: #77809A;
  --color-cta: #B83E5E;
  --color-cta-texto: #FFFFFF;
  --color-cta-hover: #9F3350;
  --color-acento: #3D6B64;
  --color-exito: #176B42;
  --color-atencion: #8A5A00;
  --color-atencion-relleno: #F2C94C;
  --color-error: #B3261E;
  --color-foco: #202951;
  --color-barra: #202951;
  --color-barra-texto: #F7F3E9;
  --color-serie-1: #3D6B64;
  --color-serie-2: #3A4FE0;
  --color-serie-3: #7B3FA0;
  --color-serie-4: #8A5A00;
  --forma-arena: #EFE6D3;
  --forma-salvia: #D9E2D2;
  --resalte: rgb(255 255 255 / 0.9);
  --borde-ancho: 1px;
  --claro-fondo: #F7F3E9;
  --claro-superficie: #FCFAF5;
  --claro-superficie-2: #F0EADD;
  --claro-campo: #EFE8DA;
  --claro-texto: #202951;
  --claro-atenuado: #5A6285;
  --claro-borde: #DDD5C4;
  --claro-borde-campo: #77809A;
  --claro-cta: #B83E5E;
  --claro-cta-texto: #FFFFFF;
  --claro-cta-hover: #9F3350;
  --claro-acento: #3D6B64;
  --claro-exito: #176B42;
  --claro-atencion: #8A5A00;
  --claro-error: #B3261E;
  --claro-foco: #202951;
}

[data-theme=dark] {
  color-scheme: dark;
  --color-fondo: #343B6B;
  --color-superficie: #414981;
  --color-superficie-2: #383F72;
  --color-campo: #262C58;
  --color-texto: #F7F3E9;
  --color-atenuado: #C3C9E3;
  --color-borde: #555E96;
  --color-borde-campo: #99A2D6;
  --color-cta: #C34B68;
  --color-cta-texto: #FFFFFF;
  --color-cta-hover: #AD3F5B;
  --color-acento: #9ED6C9;
  --color-exito: #5FD39A;
  --color-atencion: #F2C94C;
  --color-atencion-relleno: #F2C94C;
  --color-error: #FFAA8A;
  --color-foco: #F7F3E9;
  --color-barra: #2B3263;
  --color-barra-texto: #F7F3E9;
  --color-serie-1: #9ED6C9;
  --color-serie-2: #8C9BFF;
  --color-serie-3: #C79BFF;
  --color-serie-4: #F2C94C;
  --forma-arena: #474F88;
  --forma-salvia: #2E5878;
  --resalte: rgb(255 255 255 / 0.1);
  --borde-ancho: 1px;
}

[data-theme=contrast] {
  color-scheme: light;
  --color-fondo: #FFFFFF;
  --color-superficie: #FFFFFF;
  --color-superficie-2: #FFFFFF;
  --color-campo: #FFFFFF;
  --color-texto: #000000;
  --color-atenuado: #1F1F1F;
  --color-borde: #000000;
  --color-borde-campo: #000000;
  --color-cta: #8F0D45;
  --color-cta-texto: #FFFFFF;
  --color-cta-hover: #6E0A35;
  --color-acento: #004D47;
  --color-exito: #0B5D2E;
  --color-atencion: #5C3B00;
  --color-atencion-relleno: #F2C94C;
  --color-error: #8B0000;
  --color-foco: #000000;
  --color-barra: #000000;
  --color-barra-texto: #FFFFFF;
  --color-serie-1: #004D47;
  --color-serie-2: #1A2BA0;
  --color-serie-3: #4A1A70;
  --color-serie-4: #5C3B00;
  --forma-arena: #FFFFFF;
  --forma-salvia: #FFFFFF;
  --resalte: rgb(255 255 255 / 0);
  --borde-ancho: 2px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-borde-campo) var(--color-fondo);
  accent-color: var(--color-cta);
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  caret-color: var(--color-cta);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
}

h1 {
  font-size: var(--texto-xl);
}

h2 {
  font-size: var(--texto-lg);
}

h3 {
  font-size: var(--texto-md);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg {
  max-width: 100%;
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--color-cta);
  color: var(--color-cta-texto);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--espacio-4);
  top: -4rem;
  z-index: 100;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--color-superficie);
  border: 2px solid var(--color-foco);
  border-radius: var(--radio);
}
.saltar:focus {
  top: var(--espacio-2);
}

.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.atenuado {
  color: var(--color-atenuado);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.app {
  min-height: 100dvh;
}

.app__columna {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app__contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--espacio-4) var(--espacio-4) var(--espacio-8);
}

.acciones-pagina {
  display: flex;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-4);
}
.acciones-pagina:empty {
  display: none;
}

.subtitulo {
  color: var(--color-atenuado);
  font-size: var(--texto-sm);
}

.barra-app {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-barra);
  padding: 0 var(--espacio-3);
  background: var(--color-barra);
  color: var(--color-barra-texto);
  box-shadow: var(--sombra-1);
}
.barra-app :focus-visible {
  outline-color: var(--color-barra-texto);
}
.barra-app h1 {
  flex: 1;
  min-width: 0;
  font-size: var(--texto-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-app__menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radio-medio);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.barra-app__menu i {
  font-size: 1.5rem;
  line-height: 1;
}
.barra-app__menu:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.barra-app__menu:active {
  background: color-mix(in srgb, currentColor 24%, transparent);
}

.barra-app__extra {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
}

.chip-barra {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 0.25rem var(--espacio-3);
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--color-barra-texto) 16%, transparent);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.app__lateral {
  display: none;
}

@media (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  }
  .barra-app__menu {
    display: none;
  }
  .barra-app {
    padding-inline: var(--espacio-6);
  }
  .app__lateral {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    background: var(--color-superficie-2);
    border-right: var(--borde-ancho) solid var(--color-borde);
  }
  .app__contenido {
    padding: var(--espacio-6) var(--espacio-8) var(--espacio-12);
  }
}
.menu-panel {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-height: 100%;
  padding: var(--espacio-4);
}

.menu-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.app__marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  text-decoration: none;
  line-height: 1.2;
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-md);
}
.app__marca small {
  display: block;
  font-weight: var(--peso-normal);
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.app__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio-medio);
  background: var(--color-barra);
  color: var(--color-barra-texto);
  font-size: 1.25rem;
}

.menu {
  display: grid;
  gap: var(--espacio-1);
}

.menu__enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 3rem;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-medio);
  text-decoration: none;
  transition: background var(--duracion-rapida) var(--salida), box-shadow var(--duracion-rapida) var(--salida);
}
.menu__enlace i {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-atenuado);
}
.menu__enlace:hover {
  background: color-mix(in srgb, var(--color-superficie) 70%, transparent);
}
.menu__enlace[aria-current=page] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.menu__enlace[aria-current=page] i {
  color: var(--color-cta);
}

.menu__etiqueta {
  padding: 0 var(--espacio-3);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-atenuado);
}

.menu-panel__pie {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-3);
  padding-top: var(--espacio-4);
  border-top: var(--borde-ancho) solid var(--color-borde);
}

.persona {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
}

.persona__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-fondo);
  font-weight: var(--peso-fuerte);
}

.persona__nombre {
  font-weight: var(--peso-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona__rol {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.selector-tema {
  display: flex;
  gap: var(--espacio-1);
  padding: var(--espacio-1);
  background: var(--color-fondo);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-pildora);
}
.selector-tema button {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--espacio-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  border: 0;
  border-radius: var(--radio-pildora);
  background: transparent;
  cursor: pointer;
  font-size: var(--texto-xs);
  transition: background var(--duracion-rapida) var(--salida);
}
.selector-tema button:hover {
  background: var(--color-superficie-2);
}
.selector-tema button[aria-pressed=true] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.selector-tema button[aria-pressed=true] i {
  color: var(--color-cta);
}

.cajon {
  margin: 0;
  padding: 0;
  border: 0;
  inset: 0 auto 0 0;
  width: min(21rem, 90vw);
  height: 100dvh;
  max-height: none;
  background: var(--color-superficie-2);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
  overflow-y: auto;
}
.cajon:not(:popover-open) {
  display: none;
}
.cajon:popover-open {
  display: block;
  animation: cajon-entra var(--duracion) var(--salida);
}
.cajon::backdrop {
  background: rgba(15, 19, 48, 0.55);
}

@keyframes cajon-entra {
  from {
    transform: translateX(-100%);
  }
}
.cajon__cerrar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radio-medio);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cajon__cerrar i {
  font-size: 1.25rem;
}
.cajon__cerrar:hover {
  background: var(--color-superficie);
}

.app__lateral .selector-tema button i {
  display: none;
}

.menu--grupo {
  padding: var(--espacio-1) 0 var(--espacio-2) var(--espacio-4);
}

.menu-grupo[open] > .menu-grupo__titulo .menu-grupo__flecha {
  transform: rotate(180deg);
}

.menu-grupo__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 3rem;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-medio);
  list-style: none;
  cursor: pointer;
  font-weight: var(--peso-fuerte);
}
.menu-grupo__titulo::-webkit-details-marker {
  display: none;
}
.menu-grupo__titulo > i:first-child {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-atenuado);
}
.menu-grupo__titulo > span {
  flex: 1;
}
.menu-grupo__titulo:hover {
  background: color-mix(in srgb, var(--color-superficie) 70%, transparent);
}
.menu-grupo__titulo:focus-visible {
  outline: var(--borde-ancho-foco, 3px) solid var(--color-cta);
  outline-offset: 2px;
}

.menu-grupo__flecha {
  transition: transform var(--duracion-rapida) var(--salida);
  color: var(--color-atenuado);
}

.menu-conmutador {
  display: none;
}

.js-menu .menu-conmutador {
  display: flex;
  gap: var(--espacio-1);
  margin-bottom: var(--espacio-3);
  padding: var(--espacio-1);
  background: var(--color-fondo);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-pildora);
}
.js-menu .menu-conmutador button {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--espacio-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  border: 0;
  border-radius: var(--radio-pildora);
  background: transparent;
  cursor: pointer;
  font-size: var(--texto-xs);
  white-space: nowrap;
}
.js-menu .menu-conmutador button:hover {
  background: var(--color-superficie-2);
}
.js-menu .menu-conmutador button[aria-pressed=true] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.js-menu .menu-conmutador button[aria-pressed=true] i {
  color: var(--color-cta);
}

.app__lateral .menu-conmutador button i {
  display: none;
}

.menu__ayuda {
  margin: 0 var(--espacio-3) var(--espacio-3);
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.proceso {
  display: grid;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.proceso__etapa {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 3rem;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-medio);
  text-decoration: none;
}
.proceso__etapa:is(a):hover {
  background: color-mix(in srgb, var(--color-superficie) 70%, transparent);
}
.proceso__etapa[aria-current=page] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}

.proceso__etapa--sin-pantalla {
  color: var(--color-atenuado);
}

.proceso__numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: var(--borde-ancho) solid var(--color-borde);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.proceso__etapa[aria-current=page] .proceso__numero {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-barra-texto);
}

.btn {
  --btn-borde: var(--color-borde-campo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-2) var(--espacio-6);
  border: 2px solid var(--btn-borde);
  border-radius: var(--radio-pildora);
  background: transparent;
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-base);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duracion-rapida) var(--salida), box-shadow var(--duracion-rapida) var(--salida), background var(--duracion-rapida) var(--salida);
}
.btn:hover {
  background: var(--color-superficie-2);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled, .btn[aria-disabled=true] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn[aria-busy=true] {
  cursor: progress;
}
.btn[aria-busy=true]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

.btn--primario {
  --edge: color-mix(in srgb, var(--color-cta) 74%, #000);
  border-color: transparent;
  background: var(--color-cta);
  color: var(--color-cta-texto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 var(--edge), 0 6px 12px -6px var(--sombra-suave);
}
.btn--primario:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
}
.btn--primario:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 var(--edge), 0 2px 4px -2px var(--sombra-suave);
}

.btn--terciario {
  --btn-borde: transparent;
  padding-inline: var(--espacio-3);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.btn--terciario:hover {
  background: var(--color-superficie-2);
}

.btn--peligro {
  --btn-borde: var(--color-error);
  color: var(--color-error);
}

.btn--chico {
  min-height: 2.5rem;
  padding: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-sm);
}

.btn--bloque {
  width: 100%;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}
.campo {
  display: grid;
  gap: var(--espacio-1);
  margin-bottom: var(--espacio-4);
}
.campo > label, .campo .campo__etiqueta {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
}
.campo input[type=text], .campo input[type=password], .campo input[type=search], .campo input[type=date],
.campo input[type=number], .campo input[type=tel], .campo select, .campo textarea {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-campo);
  box-shadow: inset 0 -1px 0 var(--resalte);
  transition: border-color var(--duracion-rapida) var(--salida);
}
.campo input[type=text]:hover, .campo input[type=password]:hover, .campo input[type=search]:hover, .campo input[type=date]:hover,
.campo input[type=number]:hover, .campo input[type=tel]:hover, .campo select:hover, .campo textarea:hover {
  border-color: var(--color-texto);
}
.campo input[type=text]:focus-visible, .campo input[type=password]:focus-visible, .campo input[type=search]:focus-visible, .campo input[type=date]:focus-visible,
.campo input[type=number]:focus-visible, .campo input[type=tel]:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--color-foco);
}
.campo input[type=text]:disabled, .campo input[type=password]:disabled, .campo input[type=search]:disabled, .campo input[type=date]:disabled,
.campo input[type=number]:disabled, .campo input[type=tel]:disabled, .campo select:disabled, .campo textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.campo textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.campo__ayuda {
  color: var(--color-atenuado);
  font-size: var(--texto-xs);
}

.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  color: var(--color-error);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.campo__error::before {
  content: "\f333";
  font-family: "bootstrap-icons";
  font-weight: 400;
}

.campo--error input, .campo--error select, .campo--error textarea {
  border-color: var(--color-error);
  border-width: 2px;
}

.stepper {
  display: inline-grid;
  grid-template-columns: var(--objetivo-tactil) 4rem var(--objetivo-tactil);
  justify-self: start;
  align-items: stretch;
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-campo);
  box-shadow: inset 0 -1px 0 var(--resalte);
  overflow: hidden;
}
.stepper button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  min-height: var(--objetivo-tactil);
  transition: background var(--duracion-rapida) var(--salida);
}
.stepper button:hover:not(:disabled) {
  background: var(--color-superficie-2);
}
.stepper button:active:not(:disabled) {
  background: var(--color-borde);
}
.stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stepper input {
  width: 100%;
  min-height: var(--objetivo-tactil);
  border: 0;
  text-align: center;
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  background: transparent;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil);
}

.casilla input {
  width: 1.25rem;
  height: 1.25rem;
}

.pliegue {
  border-top: var(--borde-ancho) solid var(--color-borde);
  padding-block: var(--espacio-3);
}
.pliegue > summary {
  cursor: pointer;
  font-weight: var(--peso-fuerte);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.pliegue > summary::after {
  content: "\f282";
  font-family: "bootstrap-icons";
  font-weight: 400;
  transition: transform var(--duracion-rapida) var(--salida);
}
.pliegue[open] > summary::after {
  transform: rotate(180deg);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: 2.25rem;
  padding: 0 var(--espacio-3);
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--color-superficie);
  font-size: var(--texto-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duracion-rapida) var(--salida);
}
.chip:hover {
  background: var(--color-superficie-2);
}
.chip[aria-pressed=true], .chip[aria-current=true] {
  border-color: var(--color-cta);
  box-shadow: inset 0 0 0 1px var(--color-cta);
  font-weight: var(--peso-fuerte);
}

.buscar-direccion {
  display: grid;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
  justify-items: start;
}

.buscar-direccion__estado, .buscar-direccion__fijada {
  margin: 0;
  font-size: var(--texto-sm);
}

.buscar-direccion__fijada {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-exito);
}

.buscar-direccion__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-2);
  width: 100%;
}

.buscar-direccion__opcion {
  display: grid;
  gap: var(--espacio-1);
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: var(--espacio-3);
  min-height: var(--objetivo-tactil);
  font: inherit;
  color: inherit;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-medio);
  background: var(--color-superficie);
}
.buscar-direccion__opcion span {
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}
.buscar-direccion__opcion:hover {
  border-color: var(--color-acento);
}

.tabla-envoltura {
  overflow-x: auto;
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}
.tabla th, .tabla td {
  padding: var(--espacio-3) var(--espacio-4);
  text-align: left;
  vertical-align: middle;
}
.tabla th {
  position: sticky;
  top: 0;
  background: var(--color-superficie-2);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}
.tabla th a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
.tabla td {
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}
.tabla tbody tr:last-child td {
  border-bottom: 0;
}
.tabla tbody tr:hover {
  background: var(--color-superficie-2);
}
.tabla .numero {
  text-align: right;
}

.tabla--nowrap th, .tabla--nowrap td {
  white-space: nowrap;
}

.pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-3);
  border: var(--borde-ancho) solid currentColor;
  border-radius: var(--radio-pildora);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  color: var(--color-atenuado);
}

.pildora--exito {
  color: var(--color-exito);
}

.pildora--atencion {
  color: var(--color-atencion);
}

.pildora--error {
  color: var(--color-error);
}

.pildora--acento {
  color: var(--color-acento);
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-atencion);
}

.toasts {
  position: fixed;
  z-index: var(--capa-toasts);
  inset: calc(var(--alto-barra) + var(--espacio-2)) var(--espacio-4) auto var(--espacio-4);
  display: grid;
  gap: var(--espacio-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 2px solid var(--toast-color, var(--color-acento));
  border-radius: var(--radio);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  animation: toast-entra var(--duracion) var(--salida);
}
.toast.toast--saliendo {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duracion) var(--salida), transform var(--duracion) var(--salida);
}

.toast--success {
  --toast-color: var(--color-exito);
}

.toast--error {
  --toast-color: var(--color-error);
}

.toast--warning {
  --toast-color: var(--color-atencion);
}

.toast--info {
  --toast-color: var(--color-acento);
}

.toast__icono {
  font-size: 1.25rem;
  color: var(--toast-color);
}

.toast__texto {
  flex: 1;
  font-size: var(--texto-sm);
}

.toast__acciones {
  display: flex;
  gap: var(--espacio-1);
}

.toast__acciones form {
  margin: 0;
}

.toast__cerrar {
  background: none;
  border: 0;
  cursor: pointer;
  min-width: 2.5rem;
  min-height: 2.5rem;
  font-size: 1.125rem;
}

@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (min-width: 768px) {
  .toasts {
    inset: calc(var(--alto-barra) + var(--espacio-4)) var(--espacio-6) auto auto;
    width: min(26rem, 100vw - 2rem);
  }
}
.dialogo {
  width: min(28rem, 100vw - 2rem);
  padding: var(--espacio-6);
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
}
.dialogo::backdrop {
  background: rgba(15, 19, 48, 0.6);
}
.dialogo h2 {
  margin-bottom: var(--espacio-2);
}
.dialogo form {
  display: grid;
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
}

.dialogo__acciones {
  display: flex;
  gap: var(--espacio-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vacio {
  display: grid;
  justify-items: start;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--espacio-6);
  border: var(--borde-ancho) dashed var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-superficie);
  max-width: 40rem;
}
.vacio p {
  color: var(--color-atenuado);
}

.esqueleto {
  display: block;
  min-height: 1rem;
  border-radius: var(--radio);
  background: linear-gradient(90deg, var(--color-superficie-2), var(--color-borde), var(--color-superficie-2));
  background-size: 200% 100%;
  animation: esqueleto 1.4s linear infinite;
}

@keyframes esqueleto {
  to {
    background-position: -200% 0;
  }
}
.acceso {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--espacio-4);
}
.acceso::before, .acceso::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.acceso::before {
  inset-block-start: -22%;
  inset-inline-end: -12%;
  width: min(44rem, 90vw);
  aspect-ratio: 1;
  background: var(--forma-arena);
}
.acceso::after {
  inset-block-end: -30%;
  inset-inline-start: -14%;
  width: min(30rem, 70vw);
  aspect-ratio: 1;
  background: var(--forma-salvia);
}

.acceso__panel {
  width: min(24rem, 100%);
  padding: var(--espacio-8) var(--espacio-6);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}
.acceso__panel h1 {
  font-size: var(--texto-2xl);
}
.acceso__panel > p {
  color: var(--color-atenuado);
  margin: var(--espacio-1) 0 var(--espacio-6);
}
.acceso__panel .campo__error {
  margin-bottom: var(--espacio-3);
}
.acceso__panel .btn {
  width: 100%;
}

.filtros {
  display: grid;
  margin-bottom: var(--espacio-2);
}

.filtros__panel {
  margin-bottom: var(--espacio-3);
}
.filtros__panel > summary {
  cursor: pointer;
  min-height: var(--objetivo-tactil);
  display: flex;
  align-items: center;
  font-weight: var(--peso-fuerte);
}

.filtros__campos {
  display: grid;
  gap: 0 var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
}

.filtros__casilla {
  margin-bottom: var(--espacio-4);
}

.filtros__acciones {
  display: flex;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
  flex-wrap: wrap;
}

.contador {
  margin-bottom: var(--espacio-3);
  color: var(--color-atenuado);
  font-size: var(--texto-sm);
}

.directorio__tarjetas {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.directorio__tabla {
  display: block;
}

.tarjeta {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}

.tarjeta__enlace {
  text-decoration: none;
}

.tarjeta__cabecera {
  display: grid;
  gap: 2px;
}

.tarjeta__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-2);
  margin: 0;
}
.tarjeta__datos dt {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}
.tarjeta__datos dd {
  margin: 0;
  font-weight: var(--peso-fuerte);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
  font-size: var(--texto-sm);
}

@media (min-width: 768px) {
  .filtros__buscar {
    max-width: 28rem;
  }
  .filtros__panel > summary {
    display: none;
  }
  .filtros__acciones {
    margin-top: calc(-1 * var(--espacio-2));
  }
}
.ficha__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin: calc(-1 * var(--espacio-3)) 0 var(--espacio-6);
}

.ficha__resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}
.ficha__resumen > div {
  display: grid;
  gap: 2px;
  align-content: start;
}

.dato__etiqueta {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.dato__valor {
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
}

.ficha__seccion {
  margin-top: var(--espacio-8);
  display: grid;
  gap: var(--espacio-3);
}

.contactos {
  display: grid;
  gap: var(--espacio-2);
}

.contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.fila--anulada td {
  color: var(--color-atenuado);
}

.fila--anulada td:not(:last-child) {
  text-decoration: line-through;
}

.grafica {
  position: relative;
  height: 16rem;
  padding: var(--espacio-3);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}

.bitacora {
  display: grid;
  gap: var(--espacio-3);
}

.bitacora li {
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}

@media (min-width: 768px) {
  .ficha__resumen {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ficha__datos {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .ficha__datos {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
.datos {
  margin: 0;
  display: grid;
  gap: var(--espacio-3);
}
.datos dt {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.datos dd {
  margin: 0;
}

.mapa-ficha {
  height: 16rem;
  border-radius: var(--radio-medio);
  border: var(--borde-ancho) solid var(--color-borde);
  background: var(--color-superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-atenuado);
}

.solo-js {
  display: none;
}

.js-buscador .solo-js {
  display: block;
}
.js-buscador .sin-js {
  display: none;
}

.registrar {
  max-width: 40rem;
  display: grid;
  gap: var(--espacio-6);
  padding-bottom: calc(var(--alto-barra-inferior) + 5rem);
}

.registrar__bloque {
  display: grid;
  gap: var(--espacio-3);
}
.registrar__bloque h2 {
  font-size: var(--texto-md);
}

.registrar__steppers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4) var(--espacio-8);
}

.registrar .campo {
  margin-bottom: 0;
}

.buscador {
  display: grid;
  gap: var(--espacio-3);
}

.recientes {
  display: grid;
  gap: var(--espacio-2);
}

.campo__etiqueta {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
}

.resultados {
  display: grid;
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-superficie);
  overflow: hidden;
}
.resultados[hidden] {
  display: none;
}
.resultados li {
  display: grid;
  gap: 2px;
  padding: var(--espacio-3) var(--espacio-4);
  min-height: var(--objetivo-tactil);
  cursor: pointer;
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}
.resultados li:last-child {
  border-bottom: 0;
}
.resultados li:hover, .resultados li[aria-selected=true] {
  background: var(--color-superficie-2);
  box-shadow: inset 3px 0 0 var(--color-cta);
}

.local-elegido {
  display: grid;
  gap: 2px;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border: 2px solid var(--color-cta);
  border-radius: var(--radio);
}
.local-elegido[hidden] {
  display: none;
}

.peso__calculado {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}

.registrar__pie {
  position: fixed;
  inset: auto 0 var(--alto-barra-inferior) 0;
  z-index: calc(var(--capa-barra) - 1);
  padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom));
  background: var(--color-fondo);
  border-top: var(--borde-ancho) solid var(--color-borde);
}

@media (min-width: 768px) {
  .registrar {
    padding-bottom: var(--espacio-8);
  }
  .registrar__pie {
    position: static;
    padding: 0;
    z-index: auto;
    background: none;
    border: 0;
  }
  .registrar__pie .btn {
    width: auto;
    min-width: 16rem;
  }
}
.captura__ayuda {
  margin: calc(-1 * var(--espacio-3)) 0 var(--espacio-4);
  max-width: 46rem;
}

.captura__fecha {
  display: flex;
  align-items: flex-end;
  gap: var(--espacio-3);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-4);
}
.captura__fecha .campo {
  margin-bottom: 0;
}
.captura__fecha .btn {
  margin-bottom: 0;
}

.captura {
  display: grid;
  gap: var(--espacio-4);
  padding-bottom: calc(var(--alto-barra-inferior) + 6rem);
}

.captura__encabezado {
  display: none;
}

.captura__filas {
  display: grid;
  gap: var(--espacio-3);
}

.captura__fila {
  display: grid;
  gap: var(--espacio-2);
  grid-template-columns: 1fr 1fr;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
}
.captura__fila .captura__local, .captura__fila .captura__kg {
  grid-column: 1/-1;
}
.captura__fila .captura__visita {
  text-align: right;
}
.captura__fila.captura__fila--error {
  border-color: var(--color-error);
  border-width: 2px;
}
.captura__fila .campo {
  margin-bottom: 0;
}

.captura__local {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}

.captura__zona, .captura__visita {
  font-size: var(--texto-sm);
}

.captura__kg input[type=text] {
  max-width: 10rem;
  text-align: right;
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}

.captura__otra {
  min-height: 2.5rem;
  font-size: var(--texto-sm);
}

.captura__pie {
  position: fixed;
  inset: auto 0 var(--alto-barra-inferior) 0;
  z-index: calc(var(--capa-barra) - 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-3) + env(safe-area-inset-bottom));
  background: var(--color-fondo);
  border-top: var(--borde-ancho) solid var(--color-borde);
}

.captura__resumen {
  font-weight: var(--peso-fuerte);
}

@media (min-width: 768px) {
  .captura {
    padding-bottom: var(--espacio-8);
  }
  .captura__encabezado, .captura__fila {
    grid-template-columns: minmax(0, 1fr) 7rem 7rem 9rem;
    align-items: center;
    column-gap: var(--espacio-4);
  }
  .captura__encabezado .captura__local, .captura__encabezado .captura__kg, .captura__fila .captura__local, .captura__fila .captura__kg {
    grid-column: auto;
  }
  .captura__encabezado .captura__visita, .captura__fila .captura__visita {
    text-align: left;
  }
  .captura__encabezado {
    display: grid;
    padding: 0 var(--espacio-4);
    font-size: var(--texto-xs);
    font-weight: var(--peso-fuerte);
    color: var(--color-atenuado);
  }
  .captura__filas {
    gap: var(--espacio-2);
  }
  .captura__kg {
    justify-items: end;
  }
  .captura__pie {
    position: sticky;
    bottom: 0;
    inset: auto;
    z-index: auto;
    padding: var(--espacio-3) 0;
    border-radius: 0;
  }
}
@media (min-width: 1024px) {
  .captura__encabezado, .captura__fila {
    grid-template-columns: minmax(14rem, 1fr) 9rem 8rem 11rem;
  }
}
.app__contenido:has(.jornada) {
  padding: 0;
  max-width: none;
}

.jornada {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--alto-barra));
}

.jornada__principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jornada__lista {
  display: none;
}

.segmentos {
  display: flex;
  gap: 3px;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-barra);
}

.segmento {
  flex: 1;
  height: 0.375rem;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--color-barra-texto) 22%, transparent);
  transition: background var(--duracion) var(--salida);
}
.segmento.segmento--visitada {
  background: #9ED6C9;
}
.segmento.segmento--omitida {
  background: #F2C94C;
}
.segmento.segmento--actual {
  background: var(--color-cta);
  box-shadow: 0 0 0 1px var(--color-barra-texto);
}

.mapa {
  position: relative;
  flex: 1 1 9rem;
  min-height: 9rem;
  max-height: 20rem;
  background: var(--color-superficie-2);
  overflow: hidden;
}

.mapa__lienzo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mapa__abrir {
  position: absolute;
  inset: 0 0 1.5rem 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--espacio-3);
  text-decoration: none;
}

.mapa__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 2.5rem;
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-pildora);
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.mapa__cta i {
  color: var(--color-cta);
  font-size: 1.125rem;
}

.mapa--vacio {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  text-align: center;
  background: linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--color-borde) 60%, transparent) 48% 52%, transparent 52% 100%) 0 0/2.5rem 2.5rem, var(--color-superficie-2);
}
.mapa--vacio .mapa__pin {
  font-size: 2rem;
  color: var(--color-atenuado);
}

[data-theme=dark] .mapa .leaflet-tile-pane {
  filter: brightness(0.78) saturate(0.85);
}

.leaflet-container {
  font: inherit;
  background: var(--color-superficie-2);
}

.marcador-parada {
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--color-acento);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.marcador-parada.marcador-parada--actual {
  background: var(--color-cta);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-cta) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.marcador-parada.marcador-parada--pendiente {
  background: #fff;
  border-color: var(--color-atenuado);
}
.marcador-parada.marcador-parada--omitida {
  background: #F2C94C;
}

.parada {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--espacio-3);
  margin-top: calc(-1 * var(--espacio-4));
  padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-4) + env(safe-area-inset-bottom));
  background: var(--color-superficie);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  box-shadow: var(--sombra-2);
  animation: parada-entra var(--duracion) var(--salida);
}

@keyframes parada-entra {
  from {
    opacity: 0.6;
    transform: translateY(0.75rem);
  }
}
.parada__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.parada__nombre {
  display: grid;
  gap: var(--espacio-1);
  min-width: 0;
  justify-items: start;
}

.parada__nombre h2 {
  font-size: var(--texto-xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.codigo {
  padding: 0.125rem var(--espacio-2);
  border-radius: var(--radio);
  background: var(--color-superficie-2);
  color: var(--color-acento);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
}

.parada__contacto {
  display: flex;
  gap: var(--espacio-2);
  flex: none;
}

.icono-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: var(--borde-ancho) solid var(--color-borde-campo);
  background: var(--color-superficie);
  color: var(--color-texto);
  text-decoration: none;
  transition: background var(--duracion-rapida) var(--salida), transform var(--duracion-rapida) var(--salida);
}
.icono-btn i {
  font-size: 1.125rem;
  line-height: 1;
}
.icono-btn:hover {
  background: var(--color-superficie-2);
}
.icono-btn:active {
  transform: scale(0.94);
}
.icono-btn.icono-btn--apagado {
  opacity: 0.45;
  border-style: dashed;
}

.parada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}
.parada__datos span {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}
.parada__datos .dato--aviso {
  color: var(--color-atencion);
  font-weight: var(--peso-fuerte);
}

.parada__form {
  display: grid;
  gap: var(--espacio-3);
}

.parada__steppers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3);
}
.parada__steppers .campo {
  margin: 0;
}
.parada__steppers .stepper {
  width: 100%;
  grid-template-columns: var(--objetivo-tactil) 1fr var(--objetivo-tactil);
}

.peso {
  border-radius: var(--radio-medio);
  background: var(--color-superficie-2);
}
.peso > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: 3rem;
  padding: 0 var(--espacio-3);
  cursor: pointer;
  list-style: none;
}
.peso > summary::-webkit-details-marker {
  display: none;
}
.peso .peso__texto {
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.peso .peso__editar {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-sm);
  color: var(--color-acento);
  font-weight: var(--peso-fuerte);
}
.peso[open] .peso__editar i::before {
  content: "\f62a";
}
.peso .peso__campos {
  padding: 0 var(--espacio-3) var(--espacio-3);
  display: grid;
  gap: var(--espacio-2);
}
.peso .peso__campos .campo {
  margin: 0;
}

.parada__pie {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--espacio-3);
}
.parada__pie .btn {
  min-height: 3.25rem;
}

.hoja {
  margin: 0;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-6) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  box-shadow: var(--sombra-2);
}
.hoja:not(:popover-open) {
  display: none;
}
.hoja:popover-open {
  display: grid;
  gap: var(--espacio-4);
  animation: hoja-entra var(--duracion) var(--salida);
}
.hoja::backdrop {
  background: rgba(15, 19, 48, 0.55);
}
.hoja h2 {
  font-size: var(--texto-lg);
}

@keyframes hoja-entra {
  from {
    transform: translateY(100%);
  }
}
.hoja__motivos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.hoja__motivos .chip {
  min-height: 3rem;
  padding: 0 var(--espacio-4);
  font-size: var(--texto-base);
}

.hoja__otro {
  display: grid;
  gap: var(--espacio-3);
}
.hoja__otro .campo {
  margin: 0;
}

.ruta-lista {
  display: grid;
  gap: var(--espacio-2);
}

.ruta-lista__titulo {
  font-size: var(--texto-md);
}

.ruta-lista__resumen {
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}
.ruta-lista__resumen strong {
  color: var(--color-texto);
}

.cajon .barra-avance, .jornada__lista .barra-avance {
  margin-block: var(--espacio-1);
}

.barra-avance {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: var(--radio-pildora);
  background: var(--color-borde);
  overflow: hidden;
}
.barra-avance::-webkit-progress-bar {
  background: var(--color-borde);
}
.barra-avance::-webkit-progress-value {
  background: var(--color-acento);
  transition: width var(--duracion) var(--salida);
}
.barra-avance::-moz-progress-bar {
  background: var(--color-acento);
}

.ruta-lista__paradas {
  display: grid;
  gap: 2px;
  margin: var(--espacio-2) 0 0;
  padding: 0;
  list-style: none;
}

.cajon .ruta-lista__paradas {
  max-height: 36dvh;
  overflow-y: auto;
}

.parada-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 2.75rem;
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-medio);
  font-size: var(--texto-sm);
}
.parada-item .parada-item__estado i {
  font-size: 1.125rem;
  color: var(--color-atenuado);
}
.parada-item .parada-item__nota {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
  text-align: right;
  max-width: 8rem;
}
.parada-item.parada-item--visitada .parada-item__estado i {
  color: var(--color-exito);
}
.parada-item.parada-item--omitida .parada-item__estado i {
  color: var(--color-atencion);
}
.parada-item.parada-item--actual {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.parada-item.parada-item--actual .parada-item__estado i {
  color: var(--color-cta);
}
.parada-item.parada-item--visitada .parada-item__texto, .parada-item.parada-item--omitida .parada-item__texto {
  color: var(--color-atenuado);
}

.jornada__estado {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--espacio-3);
  flex: 1;
  padding: var(--espacio-8) var(--espacio-6);
  text-align: center;
  min-height: calc(100dvh - var(--alto-barra) - 3rem);
}
.jornada__estado p {
  max-width: 28rem;
  color: var(--color-atenuado);
}
.jornada__estado .estado__icono {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  color: var(--color-acento);
  font-size: 2rem;
}
.jornada__estado.jornada__estado--fin .estado__icono {
  color: var(--color-exito);
}

@media (min-width: 1024px) {
  .jornada {
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    gap: var(--espacio-6);
    padding: var(--espacio-6) var(--espacio-8);
    align-items: start;
    min-height: 0;
  }
  .jornada__principal {
    border-radius: var(--radio-grande);
    overflow: hidden;
    box-shadow: var(--sombra-1);
    background: var(--color-superficie);
  }
  .segmentos {
    background: var(--color-barra);
  }
  .parada {
    margin-top: 0;
    box-shadow: none;
    border-radius: 0;
    animation: none;
  }
  .mapa {
    flex-basis: 16rem;
    max-height: none;
  }
  .jornada__lista {
    display: block;
    padding: var(--espacio-4);
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra-1);
    position: sticky;
    top: calc(var(--alto-barra) + var(--espacio-6));
  }
  .jornada__estado {
    grid-column: 1/-1;
  }
}
.aviso-cambios {
  position: sticky;
  top: var(--alto-barra);
  z-index: calc(var(--capa-barra) - 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-atencion-relleno);
  color: #202951;
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.aviso-cambios[hidden] {
  display: none;
}
.aviso-cambios i {
  margin-right: var(--espacio-2);
}

.jornada__companero {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
  margin: 0 0 var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}

.parada__lleva {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-3);
  align-items: center;
  margin: 0 0 var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-medio);
  background: var(--color-superficie-2);
  font-size: var(--texto-sm);
}
.parada__lleva p {
  margin: 0;
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
}

.en-linea {
  display: inline;
  margin: 0;
}

.parada-item--de_otro {
  opacity: 0.75;
}

.parte {
  grid-column: 1/-1;
  margin-top: var(--espacio-1);
}
.parte summary {
  cursor: pointer;
  font-size: var(--texto-sm);
  color: var(--color-acento);
  min-height: 2rem;
  display: flex;
  align-items: center;
}

.parte__form {
  display: grid;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
}
.parte__form label {
  display: grid;
  gap: var(--espacio-1);
  font-size: var(--texto-sm);
}

.semana, .rutinas {
  display: grid;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-8);
}

.semana__dias {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.dia {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.dia h3 {
  font-size: var(--texto-base);
  text-transform: capitalize;
}
.dia.dia--hoy {
  outline: 2px solid var(--color-acento);
}

.entrada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  padding: var(--espacio-2) 0;
  border-top: var(--borde-ancho) solid var(--color-borde);
}
.entrada:first-of-type {
  border-top: 0;
}

.entrada__texto {
  display: grid;
  gap: var(--espacio-1);
  justify-items: start;
  min-width: 0;
}

.form-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
  padding-top: var(--espacio-3);
}
.form-linea .campo {
  margin: 0;
}

.rutinas__lista {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.rutina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.rutina h3 {
  font-size: var(--texto-md);
}

.dias {
  border: 0;
  padding: 0;
  margin: 0 0 var(--espacio-4);
}
.dias legend {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
  margin-bottom: var(--espacio-2);
  padding: 0;
}

.dias-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.dia-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.dia-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}
.dia-chip span {
  display: grid;
  place-items: center;
  min-width: 3rem;
  min-height: var(--objetivo-tactil);
  padding: 0 var(--espacio-3);
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio-pildora);
  background: var(--color-superficie);
  font-weight: var(--peso-fuerte);
  transition: background var(--duracion-rapida) var(--salida);
}
.dia-chip:hover span {
  background: var(--color-superficie-2);
}
.dia-chip input:checked + span {
  background: var(--color-barra);
  color: var(--color-barra-texto);
  border-color: var(--color-barra);
}
.dia-chip input:focus-visible + span {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.detalles {
  margin-bottom: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.detalles > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: 3.25rem;
  padding: 0 var(--espacio-4);
  cursor: pointer;
  list-style: none;
}
.detalles > summary::-webkit-details-marker {
  display: none;
}
.detalles.detalles--info {
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-3) var(--espacio-4);
}

.detalles .peso__editar {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  color: var(--color-acento);
}

.detalles__form {
  display: grid;
  gap: var(--espacio-3);
  padding: 0 var(--espacio-4) var(--espacio-4);
  max-width: 40rem;
}
.detalles__form .campo {
  margin: 0;
}

.detalles__fila {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.editor__resumen {
  margin-bottom: var(--espacio-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.editor[aria-busy=true] .editor__resumen::after {
  content: " · guardando…";
  font-weight: var(--peso-normal);
  color: var(--color-atenuado);
}

.editor__cuerpo {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}

.panel {
  display: grid;
  gap: var(--espacio-3);
  align-content: start;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.panel h2 {
  font-size: var(--texto-md);
}
.panel .campo {
  margin: 0;
}

.panel--ruta {
  order: 1;
}

.panel--disponibles {
  order: 2;
}

.panel--mapa {
  order: 3;
  padding: 0;
  overflow: hidden;
}

.lista {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista--ordenable {
  min-height: 5rem;
  padding: var(--espacio-1);
  border: 2px dashed transparent;
  border-radius: var(--radio-medio);
  counter-reset: paso;
}

.panel--ruta:has(.item--fantasma) .lista--ordenable {
  border-color: var(--color-cta);
}

.lista--disponibles {
  max-height: 32rem;
  overflow-y: auto;
}

.lista-vacia {
  padding: var(--espacio-4);
  border: 2px dashed var(--color-borde-campo);
  border-radius: var(--radio-medio);
  color: var(--color-atenuado);
  font-size: var(--texto-sm);
  text-align: center;
}

.lista--ordenable:has(li[data-id]) .lista-vacia {
  display: none;
}

.item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-1);
  background: var(--color-superficie-2);
  border-radius: var(--radio-medio);
  transition: background var(--duracion-rapida) var(--salida);
}
.item.item--disponible {
  grid-template-columns: auto 1fr auto;
}
.item.item--cerrada {
  grid-template-columns: auto 1fr;
  opacity: 0.8;
}
.item:hover {
  background: color-mix(in srgb, var(--color-superficie-2) 70%, var(--color-borde));
}
.item[hidden] {
  display: none;
}

.item--fantasma {
  opacity: 0.35;
}

.item__asa {
  display: grid;
  place-items: center;
  width: 1.75rem;
  min-height: 2.5rem;
  cursor: grab;
  color: var(--color-atenuado);
  touch-action: none;
}
.item__asa i {
  font-size: 1.25rem;
}
.item__asa:active {
  cursor: grabbing;
}

.item__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-barra);
  color: var(--color-barra-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}
.item__num::before {
  counter-increment: paso;
  content: counter(paso);
}

.item__estado {
  padding-left: var(--espacio-2);
}
.item__estado i {
  font-size: 1.25rem;
}

.item--cerrada .item__estado i {
  color: var(--color-exito);
}

.item__texto {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.item__meta {
  display: block;
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.item__acciones {
  display: flex;
  gap: 2px;
}

.icono-btn--chico {
  width: 2.25rem;
  height: 2.25rem;
  border-color: transparent;
  background: transparent;
}
.icono-btn--chico i {
  font-size: 1rem;
}
.icono-btn--chico:hover {
  background: var(--color-superficie);
}

.sugerido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: color-mix(in srgb, var(--color-acento) 14%, var(--color-superficie));
  border-radius: var(--radio-medio);
}
.sugerido p {
  margin: 0;
}
.sugerido .sugerido__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-acento);
}
.sugerido .atenuado {
  font-size: var(--texto-xs);
}

.mapa-editor {
  position: relative;
  height: 22rem;
  background: var(--color-superficie-2);
}

.mapa-editor--vacio::after {
  content: attr(data-vacio);
  position: absolute;
  inset: auto var(--espacio-4) var(--espacio-4) var(--espacio-4);
  z-index: 500;
  padding: var(--espacio-3);
  border-radius: var(--radio-medio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-size: var(--texto-sm);
  text-align: center;
}

.marcador-num span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-cta-texto);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font: 600 12px/1 var(--fuente);
}
.marcador-num.marcador-num--cerrada span {
  background: var(--color-exito);
}

@media (min-width: 1024px) {
  .editor__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .panel--disponibles {
    order: 1;
  }
  .panel--ruta {
    order: 2;
  }
  .panel--mapa {
    order: 3;
    grid-column: 1/-1;
  }
  .mapa-editor {
    height: 26rem;
  }
  .lista--disponibles {
    max-height: 34rem;
  }
}
@media (min-width: 1360px) {
  .editor__cuerpo {
    grid-template-columns: minmax(22rem, 1fr) minmax(22rem, 1fr) minmax(24rem, 1.1fr);
  }
  .panel--mapa {
    grid-column: auto;
    position: sticky;
    top: calc(var(--alto-barra) + var(--espacio-4));
  }
  .mapa-editor {
    height: calc(100dvh - var(--alto-barra) - 8rem);
    min-height: 24rem;
  }
}
.rutina__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: flex-end;
}

.editor__guardado {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}
.editor__guardado i {
  color: var(--color-exito);
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-3);
  border: var(--borde-ancho) solid currentColor;
  border-radius: var(--radio-pildora);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  color: var(--color-atenuado);
}

.estado--completo {
  color: var(--color-exito);
}

.estado--parcial {
  color: var(--color-atencion);
}

.estado--no_hecho {
  color: var(--color-error);
}

.estado--proximo {
  color: var(--color-serie-2);
}

.estado--sin_ruta {
  color: var(--color-atenuado);
}

.calendario {
  display: grid;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-8);
}

.calendario__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.calendario__navegar {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.calendario__navegar h2 {
  font-size: var(--texto-md);
  min-width: 11rem;
  text-align: center;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendario__totales {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
}
.calendario__totales > div {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.calendario__totales dt {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}
.calendario__totales dd {
  margin: 0;
  font-size: var(--texto-lg, 1.5rem);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.calendario__totales dd small {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: var(--color-atenuado);
}
.calendario__totales .cambio {
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--color-atenuado);
}

.semana__dias--calendario {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.dia__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.dia {
  border: var(--borde-ancho) solid var(--color-borde);
}

.dia--completo {
  border-color: var(--color-exito);
}

.dia--parcial {
  border-color: var(--color-atencion);
}

.dia--no_hecho {
  border-color: var(--color-error);
}

.dia--proximo {
  border-color: var(--color-serie-2);
}

.mes {
  display: grid;
  gap: var(--espacio-1);
}

.mes__cabecera, .mes__semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--espacio-1);
}

.mes__cabecera span {
  padding: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-atenuado);
  text-align: center;
}

.mes__dia {
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 5.5rem;
  padding: var(--espacio-2);
  background: var(--color-superficie);
  border-radius: var(--radio);
  border: var(--borde-ancho) solid var(--color-borde);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.mes__dia:hover {
  box-shadow: var(--sombra-1);
}
.mes__dia.dia--hoy {
  outline: 2px solid var(--color-acento);
}

.mes__dia--fuera {
  opacity: 0.55;
}

.mes__numero {
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.mes__detalle {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.mes__dia .estado {
  padding: 0 var(--espacio-1);
}

@media (max-width: 767px) {
  .mes__texto {
    display: none;
  }
  .mes__dia {
    min-height: 4rem;
    padding: var(--espacio-1);
  }
  .mes__detalle {
    display: none;
  }
}
.tipica {
  display: grid;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-8);
}

.tipica__filas {
  display: grid;
  gap: var(--espacio-3);
}

.tipica__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.tipica__fila .campo {
  margin: 0;
  min-width: 12rem;
}

.tipica__nombre {
  display: grid;
  gap: 2px;
  min-width: 10rem;
  font-size: var(--texto-sm);
}

.tipica .dias-chips {
  border: 0;
  margin: 0;
  padding: 0;
}

.por-asignar {
  display: grid;
  gap: var(--espacio-2);
  justify-items: start;
  margin-bottom: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio);
  border: var(--borde-ancho) solid var(--color-atencion);
}
.por-asignar h2 {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-md);
}
.por-asignar h2 i {
  color: var(--color-atencion);
}
.por-asignar ul {
  margin: 0;
  padding-left: var(--espacio-5, 1.25rem);
}

.dia__agregar {
  justify-self: start;
}

.entrada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.dialogo--ancho {
  width: min(34rem, 92vw);
}

.dialogo__separador {
  border: 0;
  border-top: var(--borde-ancho) solid var(--color-borde);
  margin: var(--espacio-4) 0;
}

.chip-barra--aviso {
  background: var(--color-atencion-relleno);
  color: #202951;
}

.vivo__resumen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
}

.chip-dato {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 2.5rem;
  padding: 0 var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-pildora);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.chip-dato i {
  color: var(--color-acento);
}

.vivo__cuerpo {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}

.vivo__tarjetas {
  display: grid;
  gap: var(--espacio-3);
  align-content: start;
}

.vivo__tarjetas.vivo--cambio .rutaviva {
  animation: vivo-cambio 900ms var(--salida);
}

@keyframes vivo-cambio {
  from {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--serie, var(--color-acento)) 45%, transparent), var(--sombra-1);
  }
}
.rutaviva {
  --serie: var(--color-serie-1);
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.rutaviva[data-serie="1"] {
  --serie: var(--color-serie-2);
}
.rutaviva[data-serie="2"] {
  --serie: var(--color-serie-3);
}
.rutaviva[data-serie="3"] {
  --serie: var(--color-serie-4);
}

.rutaviva__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.rutaviva__quien {
  flex: 1;
  min-width: 0;
}
.rutaviva__quien h3 {
  font-size: var(--texto-md);
}
.rutaviva__quien p {
  font-size: var(--texto-sm);
}

.rutaviva__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--serie);
  color: var(--color-fondo);
  font-weight: var(--peso-fuerte);
}

.segmentos--tarjeta {
  padding: 0;
  background: none;
}
.segmentos--tarjeta .segmento {
  background: var(--color-borde);
  height: 0.5rem;
}
.segmentos--tarjeta .segmento--visitada {
  background: var(--serie);
}
.segmentos--tarjeta .segmento--omitida {
  background: var(--color-atencion-relleno);
}
.segmentos--tarjeta .segmento--actual {
  background: var(--color-cta);
  box-shadow: none;
}

.rutaviva__ahora {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}
.rutaviva__ahora i {
  color: var(--color-cta);
}

.rutaviva__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
  font-variant-numeric: tabular-nums;
}

.rutaviva__lista {
  display: grid;
  gap: var(--espacio-1);
  margin: var(--espacio-2) 0 0;
  padding: 0 0 0 var(--espacio-4);
  font-size: var(--texto-sm);
}

.rutaviva__pie {
  display: flex;
  justify-content: flex-end;
}

.etiqueta-extra {
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pildora);
  background: var(--color-atencion-relleno);
  color: #202951;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.marcador-vivo span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta) 55%, transparent), 0 1px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 600 12px/1 var(--fuente);
}

.vivo__mapa .mapa-editor {
  height: 24rem;
}

.hoja--ancha {
  max-width: 40rem;
}

.urgencia__resultados {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio-medio);
}
.urgencia__resultados[hidden] {
  display: none;
}

.urgencia__resultado {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--espacio-4);
  text-align: left;
  border: 0;
  background: var(--color-superficie);
  cursor: pointer;
}
.urgencia__resultado:hover {
  background: var(--color-superficie-2);
}

.urgencia__local {
  font-size: var(--texto-md);
  margin-top: var(--espacio-2);
}

.urgencia__aviso {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
  color: var(--color-atencion);
  font-weight: var(--peso-fuerte);
}

.urgencia__opciones {
  display: grid;
  gap: var(--espacio-2);
  margin: var(--espacio-2) 0 0;
  padding: 0;
  list-style: none;
}

.urgencia__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  flex-wrap: wrap;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie-2);
  border-radius: var(--radio-medio);
}
.urgencia__opcion p {
  margin: 0;
}
.urgencia__opcion.urgencia__opcion--mejor {
  background: color-mix(in srgb, var(--color-acento) 14%, var(--color-superficie));
  outline: 2px solid var(--color-acento);
}

.urgencia__botones {
  display: flex;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .vivo__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .vivo__mapa {
    position: sticky;
    top: calc(var(--alto-barra) + var(--espacio-4));
  }
  .vivo__mapa .mapa-editor {
    height: calc(100dvh - var(--alto-barra) - 8rem);
    min-height: 24rem;
  }
}
.kpis {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: 1fr;
}

.kpi {
  --serie: var(--color-serie-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-1);
  align-content: start;
  min-width: 0;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.kpi[data-serie="1"] {
  --serie: var(--color-serie-2);
}
.kpi[data-serie="2"] {
  --serie: var(--color-serie-3);
}
.kpi[data-serie="3"] {
  --serie: var(--color-serie-4);
}

.kpi__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  color: var(--color-atenuado);
}

.kpi__punto {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--serie);
}

.kpi__cifra {
  margin: 0;
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.kpi__unidad {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: var(--color-atenuado);
}

.kpi__cambio {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}

.kpi__cambio--sube {
  color: var(--color-exito);
}

.kpi__cambio--baja {
  color: var(--color-atencion);
}

.kpi__spark {
  position: relative;
  min-width: 0;
  height: 3.5rem;
  margin-top: var(--espacio-2);
}

@media (min-width: 640px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.filtros-resultados {
  display: grid;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}

.filtro-grupo {
  display: grid;
  gap: var(--espacio-2);
  align-items: start;
}

.filtro-grupo__titulo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-atenuado);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filtro-grupo__cuerpo {
  display: grid;
  gap: var(--espacio-3);
  min-width: 0;
}

@media (min-width: 900px) {
  .filtro-grupo {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--espacio-4);
  }
  .filtro-grupo__titulo {
    padding-top: var(--espacio-3);
  }
}
.resultados__periodo {
  margin: 0 0 var(--espacio-4);
  color: var(--color-atenuado);
  font-variant-numeric: tabular-nums;
}

.resultados__seccion {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-8);
  align-content: start;
}

.resultados__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.grafica--alta {
  height: 20rem;
}

.chip--dato {
  cursor: default;
}
.chip--dato:hover {
  background: var(--color-superficie);
}

.resultados__desglose {
  display: grid;
  gap: var(--espacio-4);
}

@media (min-width: 1100px) {
  .resultados__desglose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-6);
  }
}
@media print {
  .app__lateral, .barra-app__menu, .acciones-pagina, .filtros-resultados, .cajon, .toasts, .pliegue > summary {
    display: none !important;
  }
  .pliegue:not([open]) > :not(summary) {
    display: block;
  }
  .app__columna {
    margin: 0;
  }
  .kpi, .grafica, .resultados__seccion {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #999;
  }
}
.embudo {
  display: grid;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-4);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  align-items: start;
}

.embudo__etapa {
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}
.embudo__etapa summary, .embudo__etapa.embudo__etapa--vacia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.embudo__etapa summary {
  cursor: pointer;
  list-style: none;
}
.embudo__etapa summary::-webkit-details-marker {
  display: none;
}

.embudo__etapa--vacia {
  color: var(--color-atenuado);
}

.embudo__nombre {
  font-weight: var(--peso-fuerte);
}

.embudo__total {
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.embudo__lista {
  margin: var(--espacio-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--espacio-1);
  font-size: var(--texto-sm);
}

.rango {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}

.rango__texto {
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}

.rango__campo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}
.rango__campo input[type=date] {
  min-height: 2.5rem;
  padding: 0 var(--espacio-2);
  border: var(--borde-ancho) solid var(--color-borde-campo);
  border-radius: var(--radio);
  background: var(--color-campo);
}

.objetivos {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

.objetivo {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}

.objetivo__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.objetivo__cabecera h3 {
  font-size: var(--texto-md);
}

.objetivo__meta {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
  font-variant-numeric: tabular-nums;
}

.objetivo__cifra {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.objetivo__de {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: var(--color-atenuado);
}

.objetivo__barras {
  display: grid;
  gap: var(--espacio-2);
}

.objetivo__barras label {
  display: grid;
  grid-template-columns: 9rem 1fr 3rem;
  align-items: center;
  gap: var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}

.objetivo__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

.objetivo__ritmo {
  margin: 0;
  font-size: var(--texto-sm);
}

progress {
  appearance: none;
  width: 100%;
  height: 0.75rem;
  border: 0;
  border-radius: var(--radio-pildora);
  background: var(--color-borde);
  overflow: hidden;
}
progress::-webkit-progress-bar {
  background: var(--color-borde);
}
progress::-webkit-progress-value {
  background: var(--color-acento);
  border-radius: var(--radio-pildora);
}
progress::-moz-progress-bar {
  background: var(--color-acento);
  border-radius: var(--radio-pildora);
}
progress.barra-tiempo {
  height: 0.375rem;
}
progress.barra-tiempo::-webkit-progress-value {
  background: var(--color-atenuado);
}
progress.barra-tiempo::-moz-progress-bar {
  background: var(--color-atenuado);
}

[data-theme=contrast] progress {
  background: var(--color-fondo);
  outline: 2px solid var(--color-borde-campo);
}
[data-theme=contrast] progress::-webkit-progress-bar {
  background: var(--color-fondo);
}

.objetivo-detalle {
  display: grid;
  gap: var(--espacio-4);
  max-width: 60rem;
}

.formulario-objetivo {
  display: grid;
  gap: var(--espacio-4);
  max-width: 36rem;
}

.acciones-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

@media (min-width: 1100px) {
  .objetivos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .objetivo__barras label {
    grid-template-columns: 1fr 3rem;
  }
  .objetivo__barras label > progress {
    grid-column: 1/-1;
    grid-row: 2;
  }
}
.inicio__seccion {
  display: grid;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-8);
  align-content: start;
}

.cola {
  display: grid;
  gap: var(--espacio-3);
}

.cola__bloque {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.cola__bloque h3 {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-md);
}
.cola__bloque h3 i {
  color: var(--color-acento);
}

.cola__total {
  margin-left: auto;
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-pildora);
  background: var(--color-superficie-2);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

.cola__lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cola__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0;
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}
.cola__item:last-child {
  border-bottom: 0;
}

.cola__texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--texto-sm);
}
.cola__texto a {
  font-weight: var(--peso-fuerte);
}

.cola__cifra {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.cola__todos {
  font-size: var(--texto-sm);
}

.cola__vacia {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.cola__vacia > i {
  font-size: var(--texto-2xl);
  color: var(--color-exito);
}
.cola__vacia p {
  margin: 0 0 var(--espacio-2);
}

@media (min-width: 1100px) {
  .cola {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.proceso-tarjetas {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapa {
  display: grid;
  gap: 2px;
  align-content: start;
  height: 100%;
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
  border: var(--borde-ancho) solid var(--color-borde);
  text-decoration: none;
  color: inherit;
}
.etapa:hover {
  box-shadow: var(--sombra-2);
}

.etapa--ok {
  border-color: var(--color-exito);
}

.etapa--falta {
  border-color: var(--color-atencion);
}

.etapa__numero {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: var(--borde-ancho) solid var(--color-borde);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.etapa__nombre {
  font-weight: var(--peso-fuerte);
}

.etapa__conteo {
  font-size: var(--texto-xl, 1.75rem);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.etapa__mensaje {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
  min-height: 2.2em;
}

.etapa__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.etapa--ok .etapa__estado {
  color: var(--color-exito);
}

.etapa--falta .etapa__estado {
  color: var(--color-atencion);
}

.etapa--vacio .etapa__estado {
  color: var(--color-atenuado);
}

.faltantes {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faltante {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio);
  border: var(--borde-ancho) solid var(--color-atencion);
  box-shadow: var(--sombra-1);
}
.faltante > span {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.faltante > span i {
  color: var(--color-atencion);
}

.cola__acciones, .acciones-enlace {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

@media (min-width: 1100px) {
  .proceso-tarjetas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.totalizador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--color-barra);
  color: var(--color-barra-texto);
  border-radius: var(--radio-grande);
  overflow: hidden;
  margin: var(--espacio-4) 0 var(--espacio-6);
}

.totalizador__item {
  padding: var(--espacio-4) var(--espacio-4);
  border-right: var(--borde-ancho) solid rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  display: block;
}
.totalizador__item p {
  margin: 0;
}
.totalizador__item:last-child {
  border-right: 0;
}

a.totalizador__item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.totalizador__valor {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
}
.totalizador__valor small {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  opacity: 0.8;
}

.totalizador__etiqueta {
  font-size: var(--texto-xs);
  opacity: 0.85;
  margin-top: 2px;
}

.totalizador__nota {
  font-size: var(--texto-xs);
  opacity: 0.8;
  margin-top: var(--espacio-1);
}

.totalizador .variacion {
  font-size: var(--texto-xs);
  margin-top: var(--espacio-1);
  color: inherit;
}

.variacion {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-weight: var(--peso-fuerte);
  margin: 0;
}

.variacion--sube {
  color: var(--color-exito);
}

.variacion--baja {
  color: var(--color-error);
}

.selector-periodo {
  display: grid;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.selector-periodo__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}

.selector-periodo__titulo {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
  min-width: 4rem;
}

.filtros-programa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  margin: var(--espacio-3) 0 var(--espacio-4);
}

.filtros-programa__buscar {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
}

.arbol__nombre {
  font-weight: var(--peso-normal);
}

.arbol__fila--n0 .arbol__nombre {
  font-weight: var(--peso-fuerte);
}

.arbol__fila--n1 {
  background: var(--color-superficie-2);
}

.arbol__fila--n2 {
  background: var(--color-campo);
}

.arbol__fila--n3 {
  background: var(--color-campo);
}

.arbol__fila--n1 .arbol__nombre {
  padding-left: var(--espacio-8);
}

.arbol__fila--n2 .arbol__nombre {
  padding-left: var(--espacio-12);
}

.arbol__fila--n3 .arbol__nombre {
  padding-left: 4.5rem;
}

.arbol__abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: inherit;
  text-decoration: none;
  min-height: 2rem;
}
.arbol__abrir:hover {
  text-decoration: underline;
}

.arbol__barra {
  width: 100%;
  min-width: 4rem;
  height: 0.5rem;
  accent-color: var(--color-acento);
  appearance: none;
  border: 0;
  border-radius: 0.25rem;
  background: var(--color-borde);
  overflow: hidden;
}
.arbol__barra::-webkit-progress-bar {
  background: var(--color-borde);
}
.arbol__barra::-webkit-progress-value {
  background: var(--color-acento);
}
.arbol__barra::-moz-progress-bar {
  background: var(--color-acento);
}

.arbol__ficha {
  margin-left: var(--espacio-2);
  color: var(--color-atenuado);
  text-decoration: none;
}
.arbol__ficha:hover {
  color: var(--color-texto);
}

.meses-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espacio-3);
}

.mes-tarjeta {
  display: grid;
  gap: var(--espacio-1);
  align-content: start;
  padding: var(--espacio-4);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
  color: inherit;
  text-decoration: none;
}
.mes-tarjeta:hover {
  border-color: var(--color-acento);
}

.mes-tarjeta__mes {
  font-weight: var(--peso-fuerte);
}

.mes-tarjeta__kg {
  font-size: var(--texto-xl);
  font-weight: var(--peso-fuerte);
}
.mes-tarjeta__kg small {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
}

.comparativo__selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.comparativo__aliados {
  margin-top: var(--espacio-3);
}
.comparativo__aliados summary {
  cursor: pointer;
  font-weight: var(--peso-fuerte);
  margin-bottom: var(--espacio-2);
}

.calendario__cuerpo {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1100px) {
  .calendario__cuerpo {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}
.mes__kilos {
  display: block;
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm);
}

.mes__entrega {
  color: var(--color-atencion);
}

.mes__dia--elegido {
  outline: 3px solid var(--color-cta);
  outline-offset: -2px;
}

.dia__kilos {
  margin: 0;
  font-size: var(--texto-sm);
}

.dia__entrega {
  color: var(--color-atencion);
  font-weight: var(--peso-fuerte);
}

.dia-panel {
  padding: var(--espacio-4);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
}
.dia-panel h3 {
  margin: 0 0 var(--espacio-2);
}

.dia-panel__total, .dia-panel__entrega {
  margin: 0 0 var(--espacio-3);
}

.dia-panel__entrega {
  display: flex;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--color-atencion);
}

.dia-aliado {
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-medio);
  margin-bottom: var(--espacio-2);
  background: var(--color-fondo);
}
.dia-aliado summary {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  cursor: pointer;
  min-height: var(--objetivo-tactil);
  align-items: center;
}
.dia-aliado[open] summary {
  border-bottom: var(--borde-ancho) solid var(--color-borde);
}

.dia-aliado__nombre {
  font-weight: var(--peso-fuerte);
}

.dia-aliado__cifras {
  white-space: nowrap;
  color: var(--color-atenuado);
}

.dia-aliado__detalle {
  padding: var(--espacio-3);
  display: grid;
  gap: var(--espacio-2);
}
.dia-aliado__detalle p {
  margin: 0;
}

.dia-aliado__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  align-items: center;
}

.entregas__pendientes {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-4);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
.entregas__pendientes i {
  color: var(--color-acento);
}

.entregas__tabla {
  margin-top: var(--espacio-4);
}

.entrega-form {
  display: grid;
  gap: var(--espacio-4);
  max-width: 60rem;
}

.entrega-form__datos {
  display: grid;
  gap: var(--espacio-3);
}

.entrega-form__resumen {
  margin: 0;
}

.aviso-error {
  padding: var(--espacio-3) var(--espacio-4);
  border: 2px solid var(--color-error);
  border-radius: var(--radio);
  color: var(--color-error);
  font-weight: var(--peso-fuerte);
}
.aviso-error p {
  display: flex;
  gap: var(--espacio-2);
  margin: 0;
}

#tabla-pendientes input[type=checkbox] {
  width: 1.25rem;
  height: 1.25rem;
}

.conciliacion {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.conciliacion h2 {
  font-size: var(--texto-md);
}

.conciliacion__datos {
  display: grid;
  gap: var(--espacio-3) var(--espacio-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.conciliacion__datos > div {
  display: grid;
  gap: 2px;
  align-content: start;
}
.conciliacion__datos dt {
  font-size: var(--texto-xs);
  color: var(--color-atenuado);
}
.conciliacion__datos dd {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.conciliacion__estado [hidden] {
  display: none;
}

.entrega-detalle {
  display: grid;
  gap: var(--espacio-4);
  max-width: 60rem;
}

.entrega-detalle__estado {
  margin: 0;
}

.entrega-resumen {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}

@media (min-width: 768px) {
  .conciliacion__datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .entrega-form .conciliacion {
    position: sticky;
    bottom: var(--espacio-3);
    z-index: 2;
    box-shadow: var(--sombra-2);
  }
}
.entrega-form h2 {
  font-size: var(--texto-md);
}

.campo-con-accion {
  display: grid;
  gap: var(--espacio-1);
  align-content: start;
}
.campo-con-accion > .btn {
  justify-self: start;
  margin-top: calc(-1 * var(--espacio-2));
}

.entrega-form__salidas {
  display: grid;
  gap: var(--espacio-3);
}

.salidas {
  display: grid;
  gap: var(--espacio-2);
}

.salida {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.salida:hover {
  border-color: var(--color-texto);
}
.salida:has(input:checked) {
  border-color: var(--color-cta);
  box-shadow: inset 0 0 0 1px var(--color-cta);
}
.salida[hidden] {
  display: none;
}
.salida input[type=checkbox] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
}

.salida__cuerpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.salida__detalle {
  font-size: var(--texto-sm);
  color: var(--color-atenuado);
}

.filtros-lista {
  display: grid;
  gap: var(--espacio-2) var(--espacio-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  margin: var(--espacio-4) 0;
}
.filtros-lista .campo {
  margin-bottom: 0;
}

.filtros-lista__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  grid-column: 1/-1;
}

.entregas__nota {
  margin-top: var(--espacio-3);
  font-size: var(--texto-sm);
}

@media (min-width: 768px) {
  .filtros-lista {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .filtros-lista__acciones {
    grid-column: auto;
  }
}
.revision {
  display: grid;
  gap: var(--espacio-3);
  max-width: 60rem;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border: var(--borde-ancho) solid var(--color-acento);
  border-radius: var(--radio-grande);
}
.revision h2 {
  font-size: var(--texto-md);
}

.comprobantes {
  display: grid;
  gap: var(--espacio-6);
  max-width: 48rem;
}

.comprobante {
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-6, 2rem);
  background: #fff;
  color: #202951;
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-grande);
}
.comprobante h2 {
  font-size: var(--texto-lg, 1.5rem);
}

.comprobante__programa {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comprobante__datos {
  display: grid;
  gap: var(--espacio-3) var(--espacio-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.comprobante__datos > div {
  display: grid;
  gap: 2px;
}
.comprobante__datos dt {
  font-size: var(--texto-xs);
  color: #5A6285;
}
.comprobante__datos dd {
  margin: 0;
  font-weight: var(--peso-fuerte);
}

.comprobante__total {
  font-size: var(--texto-md);
  font-variant-numeric: tabular-nums;
}

.comprobante__tabla tfoot th, .comprobante__tabla tfoot td {
  font-weight: var(--peso-fuerte);
}

.comprobante__pie {
  margin: 0;
  font-size: var(--texto-xs);
}

@media print {
  .comprobante {
    break-after: page;
    border: 0;
    padding: 0;
  }
  .comprobante:last-child {
    break-after: auto;
  }
}
.personas {
  display: grid;
  gap: var(--espacio-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  margin-bottom: var(--espacio-6);
}

.persona-tarjeta {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.persona-tarjeta h2, .persona-tarjeta h3 {
  font-size: var(--texto-md);
}
.persona-tarjeta p {
  margin: 0;
}
.persona-tarjeta .btn {
  justify-self: start;
}

.persona-tarjeta--inactiva {
  opacity: 0.75;
}

.formulario-simple {
  display: grid;
  gap: var(--espacio-1);
  max-width: 40rem;
}

.clave-unica {
  display: grid;
  gap: var(--espacio-4);
  max-width: 40rem;
  padding: var(--espacio-5, 1.5rem);
  background: var(--color-superficie);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
}
.clave-unica h2 {
  font-size: var(--texto-md);
}

.clave-unica__clave {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  user-select: all;
}

[data-coleccion] [data-panel] {
  display: none;
}

[data-coleccion]:not([data-vista]) [data-panel=tarjetas] {
  display: grid;
}

@media (min-width: 768px) {
  [data-coleccion]:not([data-vista]) [data-panel=tarjetas] {
    display: none;
  }
  [data-coleccion]:not([data-vista]) [data-panel=lista] {
    display: block;
  }
}
[data-coleccion][data-vista=tarjetas] [data-panel=tarjetas] {
  display: grid;
}

[data-coleccion][data-vista=lista] [data-panel=lista] {
  display: block;
}

.conmutador-coleccion {
  display: flex;
  gap: var(--espacio-1);
  width: max-content;
  margin: 0 0 var(--espacio-3) auto;
  padding: var(--espacio-1);
  background: var(--color-fondo);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-pildora);
}
.conmutador-coleccion[hidden] {
  display: none;
}
.conmutador-coleccion button {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: 2.5rem;
  padding: 0 var(--espacio-3);
  border: 0;
  border-radius: var(--radio-pildora);
  background: transparent;
  cursor: pointer;
  font-size: var(--texto-sm);
}
.conmutador-coleccion button:hover {
  background: var(--color-superficie-2);
}
.conmutador-coleccion button[aria-pressed=true] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.conmutador-coleccion button[aria-pressed=true] i {
  color: var(--color-cta);
}

.acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  align-items: center;
}
.acciones-fila form {
  margin: 0;
}

.btn--peligroso {
  color: var(--color-error);
}

.fila--atenuada {
  opacity: 0.7;
}

.persona-tarjeta .tarjeta__datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-theme=dark] :is(.cajon, .hoja, .dialogo) {
  color-scheme: light;
  --color-fondo: var(--claro-fondo);
  --color-superficie: var(--claro-superficie);
  --color-superficie-2: var(--claro-superficie-2);
  --color-campo: var(--claro-campo);
  --color-texto: var(--claro-texto);
  --color-atenuado: var(--claro-atenuado);
  --color-borde: var(--claro-borde);
  --color-borde-campo: var(--claro-borde-campo);
  --color-cta: var(--claro-cta);
  --color-cta-texto: var(--claro-cta-texto);
  --color-cta-hover: var(--claro-cta-hover);
  --color-acento: var(--claro-acento);
  --color-exito: var(--claro-exito);
  --color-atencion: var(--claro-atencion);
  --color-error: var(--claro-error);
  --color-foco: var(--claro-foco);
  --resalte: rgb(255 255 255 / 0.9);
  color: var(--color-texto);
}

.hoy {
  margin-bottom: var(--espacio-4);
}
.hoy h2 {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-md);
  margin: 0 0 var(--espacio-3);
}

.hoy__accion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  align-items: center;
  padding: var(--espacio-2) 0;
  border-top: var(--borde-ancho) solid var(--color-borde);
}
.hoy__accion:first-of-type {
  border-top: 0;
}

.hoy__texto {
  display: grid;
  gap: var(--espacio-1);
  justify-items: start;
  min-width: 0;
}

.hoy__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.vistas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0 0 var(--espacio-3);
}
.vistas > a {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: 2.5rem;
  padding: 0 var(--espacio-3);
  border: var(--borde-ancho) solid var(--color-borde);
  border-radius: var(--radio-pildora);
  text-decoration: none;
  font-size: var(--texto-sm);
}
.vistas > a:hover {
  background: var(--color-superficie-2);
}
.vistas > a[aria-current=page] {
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  font-weight: var(--peso-fuerte);
}
.vistas > a[aria-current=page] i {
  color: var(--color-cta);
}

.vistas__buscar {
  margin: 0 0 0 auto;
}
.vistas__buscar input {
  min-height: 2.5rem;
}

.embudo {
  display: grid;
  gap: var(--espacio-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
}

.embudo__columna {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  background: var(--color-superficie-2);
  border-radius: var(--radio-grande);
}
.embudo__columna h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--texto-md);
  margin: 0;
}
.embudo__columna p {
  margin: 0;
  font-size: var(--texto-sm);
}

.embudo__lista {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prospecto {
  display: grid;
  gap: var(--espacio-1);
  padding: var(--espacio-3);
  background: var(--color-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  font-size: var(--texto-sm);
}

.prospecto__nombre {
  font-weight: var(--peso-fuerte);
}

.prospecto__accion {
  display: flex;
  gap: var(--espacio-1);
  align-items: baseline;
}
.prospecto__accion--atrasada {
  color: var(--color-error);
}

.prospecto__convertir {
  font-size: var(--texto-sm);
}

.prospecto__sin {
  color: var(--color-atencion);
  font-weight: var(--peso-fuerte);
}

.programar summary {
  cursor: pointer;
  color: var(--color-acento);
  min-height: 2rem;
  display: flex;
  align-items: center;
}

.programar__form {
  display: grid;
  gap: var(--espacio-2);
}
.programar__form label {
  display: grid;
  gap: var(--espacio-1);
}

.prosp-dia--acciones {
  border-color: var(--color-serie-2);
}

.prosp-dia--atrasado {
  border-color: var(--color-error);
}

.prosp-dia__dato {
  display: inline-flex;
  gap: var(--espacio-1);
  align-items: center;
  font-size: var(--texto-xs);
}
.prosp-dia__dato--hecho {
  color: var(--color-exito);
}

.calendario__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}
.calendario__nav h2 {
  margin: 0 auto 0 0;
  font-size: var(--texto-lg);
}

.detalle__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-2);
  align-items: baseline;
  margin: 0 0 var(--espacio-2);
}