:root {
  --superficie-base:    #FAFAF8;
  --superficie:         #FFFFFF;
  --superficie-elevada: #F4F4F1;

  --texto-principal:    #1A1A17;
  --texto-medio:        #55554E;
  --texto-tenue:        #7A7A72;
  --borde-suave:        rgba(26, 26, 23, 0.08);
  --borde-fuerte:       rgba(26, 26, 23, 0.16);
  /* El canto de un campo (BRAND §3.6: 3:1). Al 16 % daba ~1,4:1; al 50 %, 3,4:1 sobre
     --superficie y 3,1:1 sobre --superficie-elevada (impeccable, 2026-10-29). */
  --borde-control:      rgba(26, 26, 23, 0.5);
  --borde-transparente: transparent;

  --acento:             #2E46D4;
  /* Origen cálido del fondo del acceso. Institucional de Numen, no white-label:
     el cliente cambia el acento, este se queda. */
  --naranja:            #E07B39;

  --acento-hover:  color-mix(in oklab, var(--acento) 86%, black);
  --acento-activo: color-mix(in oklab, var(--acento) 72%, black);
  --acento-suave:  color-mix(in oklab, var(--acento) 10%, transparent);
  --sobre-acento:  #FFFFFF;

  --estado-aprobado:  #1B7F4B;
  --estado-rechazado: #B4232B;
  --estado-pendiente: #A96A0C;

  /* Banda de avisos (Jose, 2026-10-21): del azul de Numen (el del logo y los botones)
     hacia un tono más claro del mismo azul. El texto es --sobre-acento, como en el botón
     primario: el motor de marca lo calcula por contraste para cada cliente. 88 % es el
     tope medido sobre píxeles con #2E46D4: blanco sobre una línea de la rejilla 4,68:1;
     al 85 % baja a 4,37:1. Sin texto atenuado: al 90 % de blanco daba 4,11:1. */
  --banda-fondo:       var(--acento);
  --banda-fondo-claro: color-mix(in oklab, var(--acento) 88%, white);
  --banda-texto:       var(--sobre-acento);
  --banda-texto-suave: var(--sobre-acento);
  --banda-rejilla:     color-mix(in oklab, var(--sobre-acento) 6%, transparent);
  --banda-borde:       color-mix(in oklab, var(--sobre-acento) 40%, transparent);
  --banda-hover:       color-mix(in oklab, var(--sobre-acento) 14%, transparent);
  /* Viñeta del mapa: oscurece los bordes en los dos temas (con --texto-principal, en
     oscuro los aclaraba). */
  --vineta-mapa:       rgba(26, 26, 23, 0.12);

  /* Paleta fija de las etiquetas de la tarjeta de lead: el operador elige entre
     estas ocho, nunca un hex libre, para que el contraste quede medido. */
  --etiqueta-verde:    #1B7F4B;
  --etiqueta-amarillo: #946200;
  --etiqueta-naranja:  #C2410C;
  --etiqueta-rojo:     #B4232B;
  --etiqueta-morado:   #7C3AED;
  --etiqueta-azul:     #1D4ED8;
  --etiqueta-cielo:    #0E7490;
  --etiqueta-gris:     #6B6B63;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(26,26,23,.04), 0 4px 12px rgba(26,26,23,.05);

  --fuente-titulo: 'Manrope', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;

  /* Sin esto, el oscurecimiento automático de páginas de Chrome para Android (y de
     otros navegadores móviles) pintaba de negro la tarjeta y los campos del acceso:
     esa página nunca recibe el tema guardado, así que siempre carga en claro y el
     navegador la «oscurecía» por su cuenta (2026-10-21). `only` le prohíbe hacerlo;
     el oscuro de Numen sigue siendo el de data-theme. */
  color-scheme: only light;
}

/* Blanco por defecto, sin importar el sistema operativo del visitante. El
   oscuro es opt-in explícito vía data-theme="dark" en <html> — no existe
   ningún interruptor todavía que lo active, así que hoy nunca se dispara.
   Antes disparaba solo con prefers-color-scheme, y el branding se veía
   oscuro para cualquiera con el sistema en modo oscuro. */
:root[data-theme="dark"] {
  --superficie-base:    #131312;
  --superficie:         #1A1A18;
  --superficie-elevada: #232320;
  --texto-principal:    #EDEDE8;
  --texto-medio:        #A8A8A0;
  --texto-tenue:        #78786F;
  /* 4 % y no el 8 % espejo del claro: medido sobre píxeles (2026-10-14), al 8 %
     el canto de una tarjeta daba 1,35:1 contra 1,05:1 en claro, donde lo pone la
     sombra, que en oscuro no se ve. Al 4 %: 1,20:1. */
  --borde-suave:        rgba(255, 255, 255, 0.04);
  --borde-fuerte:       rgba(255, 255, 255, 0.16);
  --borde-control:      rgba(255, 255, 255, 0.42);
  --acento:             #7A8DFF;
  --naranja:            #F0904A;
  --sobre-acento:       #12121A;
  --estado-aprobado:    #4FBE84;
  --estado-rechazado:   #F0656C;
  --estado-pendiente:   #E0A143;
  /* En oscuro el acento ya es claro y el texto oscuro: aclarar más solo sube el contraste
     (texto #12121A sobre una línea de la rejilla: 5,57:1 en #7A8DFF, 7,1:1 al 80 %). */
  --banda-fondo-claro: color-mix(in oklab, var(--acento) 80%, white);
  --vineta-mapa:       rgba(0, 0, 0, 0.4);
  --etiqueta-verde:    #4FBE84;
  --etiqueta-amarillo: #E0B43C;
  --etiqueta-naranja:  #F0904A;
  --etiqueta-rojo:     #F0656C;
  --etiqueta-morado:   #B794F6;
  --etiqueta-azul:     #7AA2FF;
  --etiqueta-cielo:    #38BDF8;
  --etiqueta-gris:     #A8A8A0;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

/* Barra de desplazamiento en el acento de la marca: el gris del navegador era
   genérico (Jose, 2026-10-28). `scrollbar-color` se hereda, así que cubre también
   listas, hilos y menús con scroll propio. Safari no la entiende y usa los
   ::-webkit-scrollbar de abajo. */
:root {
  scrollbar-color: var(--acento) transparent;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--acento) padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--acento-hover);
  }
}

body {
  margin: 0;
  background: var(--superficie-base);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo { font-family: var(--fuente-titulo); }

.dato, .monto, .contador, time { font-variant-numeric: tabular-nums; }

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-suave);
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
  color: var(--texto-principal);
}
.logo span { color: var(--acento); }

.negocio {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-medio);
  padding: 4px 10px;
  border: 1px solid var(--borde-suave);
  border-radius: 100px;
  background: var(--superficie-elevada);
}

/* En escritorio el contenido ocupa todo el ancho (Jose, 2026-10-21). El tope de 720px
   era el valor POR DEFECTO y cada página nueva nacía angosta: Ajustes y Perfil usaban
   el 61 % del espacio a 1440px y el 42 % a 1920px, y la página se alargaba. El largo de
   línea cómodo se limita en el texto (max-width en ch), nunca en el contenedor; un
   formulario se reparte en columnas en vez de estirar sus campos. */
main {
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.resumen h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}
.resumen p {
  margin: 0 0 4px;
  color: var(--texto-medio);
  max-width: 56ch;
}

.pestanas {
  display: flex;
  gap: 4px;
  margin: 24px 0 16px;
  border-bottom: 1px solid var(--borde-suave);
}
.pestana-activa {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--acento);
  padding: 10px 14px;
  border-bottom: 2px solid var(--acento);
  margin-bottom: -1px;
}

/* La navegacion es parte del armazon, no de una vista: la usan las cuatro
   paginas, asi que vive aqui y no en vistas.css. */
.pestanas a {
  text-decoration: none;
  font-family: var(--fuente-cuerpo);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-medio);
  padding: 10px 14px;
  border-bottom: 2px solid var(--borde-transparente);
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pestanas a:hover {
  color: var(--texto-principal);
}

.pestanas a.pestana-activa,
.pestanas a[aria-current="page"] {
  color: var(--acento);
  border-bottom-color: var(--acento);
  font-weight: 600;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.tarjeta header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 600;
  font-size: 0.8125rem;
}

.quien {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quien strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-principal);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.quien .meta {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  line-height: 1.3;
}

.canal {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--borde-suave);
  background: var(--superficie-elevada);
  color: var(--texto-medio);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--borde-suave);
  background: var(--superficie-elevada);
}

.estado.pending {
  color: var(--estado-pendiente);
  border-color: var(--estado-pendiente);
  background: color-mix(in srgb, var(--estado-pendiente) 10%, var(--superficie));
}

.estado.approved,
.estado.executed {
  color: var(--estado-aprobado);
  border-color: var(--estado-aprobado);
  background: color-mix(in srgb, var(--estado-aprobado) 10%, var(--superficie));
}

/* `bloqueada` comparte el tratamiento de rechazo a propósito: es un estado
   terminal no exitoso, y darle un token propio obligaría a tocar el brand
   sheet para no ganar nada — el motivo ya se lee en el texto de abajo. */
.estado.rejected,
.estado.bloqueada,
.estado.failed {
  color: var(--estado-rechazado);
  border-color: var(--estado-rechazado);
  background: color-mix(in srgb, var(--estado-rechazado) 10%, var(--superficie));
}

/* `.porque` es texto secundario en cinco páginas: desde "recarga la página"
   hasta el resultado de un envío. Neutro por defecto a propósito — el
   tratamiento de alerta se pide con `.advertencia`, nunca se hereda por la
   clase, o el ⚠ termina junto a mensajes de éxito. */
.porque {
  /* Largo de línea en el texto, no en el contenedor (main ya no tiene tope). */
  max-width: 72ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texto-medio);
  margin: 0 0 10px;
}

/* Solo para lo que el operador puede lamentar: hoy, reintentar un envío que
   quizá ya salió y duplicarle el mensaje a un cliente. */
.porque.advertencia {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--texto-principal);
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--estado-pendiente);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 10px 0;
}

.porque.advertencia::before {
  content: "⚠";
  color: var(--estado-pendiente);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* `display: flex` de arriba le gana a `hidden`, y el JS oculta estos avisos
   con el atributo. Sin esto, un aviso oculto se vería siempre. */
.porque.advertencia[hidden] {
  display: none !important;
}

.propuesta {
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--acento);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto-principal);
  font-weight: 500;
  margin: 10px 0 12px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px var(--borde-suave);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.acciones .btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
}

button.btn,
.btn {
  appearance: none;
  font-family: var(--fuente-cuerpo);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto-principal);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

button.btn:hover,
.btn:hover {
  background: var(--superficie-elevada);
  border-color: var(--texto-tenue);
}

button.btn:active,
.btn:active {
  background: var(--superficie-elevada);
  transform: scale(0.99);
}

button.btn.primario,
.btn.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 1px 2px var(--borde-suave);
}

button.btn.primario:hover,
.btn.primario:hover {
  background: var(--acento-hover);
  border-color: var(--acento-hover);
  box-shadow: 0 2px 4px var(--borde-suave);
}

button.btn.primario:active,
.btn.primario:active {
  background: var(--acento-activo);
  border-color: var(--acento-activo);
  box-shadow: none;
  transform: scale(0.99);
}

button.btn:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button.btn:disabled,
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.vacio,
.cargando,
.error {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: 0.875rem;
  padding: 22px 18px;
}

/* --texto-medio y no --texto-tenue: el tenue medía 3,91:1 en oscuro y 4,33:1 en
   claro sobre el fondo de la bandeja (Playwright, 2026-10-15). */
.vacio {
  text-align: center;
  color: var(--texto-medio);
}

.cargando {
  color: var(--texto-medio);
}

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

.error strong {
  display: block;
  color: var(--estado-rechazado);
  margin-bottom: 4px;
}

.payload {
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0 12px;
}

.payload-row {
  display: grid;
  gap: 3px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde-suave);
}

.payload-row:last-child {
  border-bottom: 0;
}

.payload-key {
  color: var(--texto-tenue);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.payload-value,
.payload-json {
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.hilo {
  border-top: 1px solid var(--borde-suave);
  margin-top: 14px;
  padding-top: 14px;
}

.mensaje {
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  margin: 8px 0;
  max-width: 86%;
  padding: 10px 12px;
}

.mensaje.outbound {
  margin-left: auto;
  border-color: var(--acento);
}

.mensaje .meta {
  color: var(--texto-tenue);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 6px;
  margin-bottom: 4px;
}

.compositor-manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
}

.campo-manual {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--fuente-cuerpo);
  font-size: max(16px, 0.875rem);
  line-height: 1.45;
  color: var(--texto-principal);
  background: var(--superficie);
  border: 1px solid var(--borde-control);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 80px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* --texto-medio y no --texto-tenue: el tenue medía 4,33:1 en claro y 3,91:1 en oscuro, bajo
   AA, y un placeholder puede decir un dato (el margen que se aplica; impeccable, 2026-10-29). */
.campo-manual::placeholder {
  color: var(--texto-medio);
  font-family: var(--fuente-cuerpo);
}

.campo-manual:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.campo-manual:disabled {
  background: var(--superficie-elevada);
  color: var(--texto-tenue);
  cursor: not-allowed;
  opacity: 0.7;
}

.compositor-manual .btn.primario {
  align-self: flex-end;
}

footer.nota {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 48px;
  font-size: 0.8125rem;
  color: var(--texto-tenue);
}

@media (max-width: 480px) {
  .tarjeta {
    padding: 12px;
  }

  .compositor-manual .btn.primario {
    align-self: stretch;
    width: 100%;
  }

  .acciones .btn {
    min-width: 100px;
  }
}

@media (pointer: coarse) {
  button, input, select, textarea { font-size: max(16px, 1em); }
}

/* ── Acceso de operador ─────────────────────────────────────── */

.pagina-entrar {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 20px;
}

.entrar {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.logo-entrar {
  display: block;
  width: 440px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 28px;
}

.formulario-entrar {
  text-align: left;
  padding: 24px;
}

.formulario-entrar h1 {
  margin: 0 0 20px;
  font-size: 1.25rem;
  font-weight: 600;
}

.formulario-entrar label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-medio);
  margin-bottom: 6px;
}

.formulario-entrar input {
  width: 100%;
  appearance: none;
  background: var(--superficie);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  /* 16px minimo: por debajo, iOS hace zoom al enfocar y no regresa. Se repite
     aqui porque este selector le gana en especificidad a la regla de
     @media (pointer: coarse), que las media queries no aportan especificidad. */
  font-size: max(16px, 0.9375rem);
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 16px;
}

.formulario-entrar input:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

.formulario-entrar button {
  width: 100%;
}

.error-entrar {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--estado-rechazado);
  background: var(--superficie-elevada);
  border: 1px solid var(--estado-rechazado);
  border-radius: 8px;
}

/* ── Interruptor accesible (Toggle Switch) ────────────────────────────────
   Compartido: el toggle de modo automático (ajustes.css) y el de tema
   oscuro (barra-lateral.css) usan este mismo componente. */

.interruptor {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  cursor: pointer;
  user-select: none;
}

.interruptor-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  opacity: 0;
}

.interruptor-deslizador {
  position: absolute;
  inset: 0;
  background: var(--superficie-elevada);
  /* WCAG 1.4.11: riel y perilla apagados ≥ 3:1. Con --borde-fuerte el riel
     medía 1,5:1 en claro y la perilla blanca 1,1:1 sobre el riel. */
  border: 1px solid var(--texto-tenue);
  border-radius: 100px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.interruptor-deslizador::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--texto-tenue);
  border: 1px solid var(--borde-transparente);
  border-radius: 50%;
  box-shadow: var(--sombra);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.interruptor-input:checked + .interruptor-deslizador {
  background: var(--acento);
  border-color: var(--acento);
}

.interruptor-input:checked + .interruptor-deslizador::after {
  transform: translateX(20px);
  background: var(--sobre-acento);
  border-color: var(--borde-transparente);
}

.interruptor-input:focus-visible + .interruptor-deslizador {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.interruptor-input:disabled + .interruptor-deslizador {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Buscador (contacto y responsables) ────────────────────────────────── */
/* Componente compartido (buscador.js): vive aquí desde 2026-10-22, cuando la
   cotización lo usó sin cargar mapa.css. */

.campo-buscador {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-buscador [hidden] {
  display: none;
}

.campo-buscador-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.campo-buscador-ficha {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 12px;
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  background: var(--superficie-elevada);
  font-size: 0.8125rem;
  font-weight: 500;
}

.campo-buscador-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-medio);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.campo-buscador-quitar:hover {
  background: var(--borde-fuerte);
  color: var(--texto-principal);
}

.campo-buscador-quitar:focus-visible,
.campo-buscador-opcion:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.campo-buscador-resultados {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  max-height: 240px;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.campo-buscador-opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto-principal);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.campo-buscador-opcion:hover,
.campo-buscador-opcion:focus-visible {
  background: var(--superficie-elevada);
}

.campo-buscador-detalle,
.campo-buscador-vacio {
  font-size: 0.75rem;
  color: var(--texto-medio);
}

.campo-buscador-vacio {
  padding: 8px 10px;
}