/* ==========================================================================
   BUZÓN COSAPI · Componentes reutilizables (§31)
   Button · Input · Select · DatePicker · Modal · Dialog · Tooltip · Badge
   Table · Dropdown · ContextMenu · EmptyState · Toast · Loading · ErrorState
   --------------------------------------------------------------------------
   Reglas de forma: sin tarjetas dentro de tarjetas, sin pills enormes,
   sin gradientes decorativos, sin blur pesado.
   ========================================================================== */

/* ================================================================= BOTÓN == */

.btn {
  --btn-alto: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--btn-alto);
  padding: 0 var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);   /* Times New Roman, como todo */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing);
}

.btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.btn:active:not(:disabled) { background: var(--color-surface-active); }
.btn:disabled { opacity: 0.48; }

.btn--primario {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primario:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--primario:active:not(:disabled) { background: var(--color-primary-active); }

.btn--sutil { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn--sutil:hover:not(:disabled) { background: var(--color-surface-hover); border-color: transparent; color: var(--color-text); }

.btn--peligro { color: var(--color-danger); border-color: var(--color-danger-border); }
.btn--peligro:hover:not(:disabled) { background: var(--color-danger-soft); border-color: var(--color-danger); }

.btn--grande { --btn-alto: 42px; padding: 0 var(--space-lg); font-size: var(--text-md); }
/* 32 px y 13 px. A 28 px con texto de 12 px en Times New Roman —una serif, que
   pierde mucho más que una palo seco al reducirse— el botón más repetido de la
   aplicación quedaba por debajo del objetivo de clic cómodo. */
.btn--pequeno { --btn-alto: 32px; padding: 0 var(--space-sm); font-size: var(--text-sm); }

.btn--icono { padding: 0; width: var(--btn-alto); }

.btn__icono { width: 15px; height: 15px; flex: none; }
.btn--grande .btn__icono { width: 17px; height: 17px; }

/* ============================================================ FORMULARIO == */

.campo { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }

.campo__etiqueta {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.campo__pista { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: var(--leading-snug); }
.campo__error { font-size: var(--text-xs); color: var(--color-danger); }

.entrada,
.selector,
.area {
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  transition: border-color var(--motion-fast) var(--easing);
}

.entrada::placeholder, .area::placeholder { color: var(--color-text-tertiary); }
.entrada:hover, .selector:hover, .area:hover { border-color: var(--color-border-strong); }
.entrada:focus, .selector:focus, .area:focus { border-color: var(--color-focus); }
.entrada:disabled, .selector:disabled, .area:disabled { background: var(--color-bg-sunken); color: var(--color-text-tertiary); }
.entrada[aria-invalid="true"] { border-color: var(--color-danger); }

.area { min-height: 76px; padding: var(--space-xs) var(--space-sm); line-height: var(--leading-normal); resize: vertical; }

.selector {
  appearance: none;
  padding-right: var(--space-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238d8a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
}

.entrada--busqueda {
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238d8a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-xs) center;
}

/* Casilla y conmutador */

.casilla { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-size: var(--text-sm); }
.casilla input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

.conmutador { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.conmutador input { position: absolute; opacity: 0; width: 0; height: 0; }
.conmutador__pista {
  position: relative;
  width: 38px; height: 21px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background var(--motion-base) var(--easing);
  flex: none;
}
.conmutador__pista::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--easing);
}
.conmutador input:checked + .conmutador__pista { background: var(--color-primary); }
.conmutador input:checked + .conmutador__pista::after { transform: translateX(17px); }
.conmutador input:focus-visible + .conmutador__pista { box-shadow: var(--ring-focus); }

/* ============================================================== INSIGNIA == */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 1px var(--space-xs);
  border: var(--border-width) solid var(--color-neutral-border);
  border-radius: var(--radius-sm);      /* rectángulo discreto, no pill enorme */
  background: var(--color-neutral-soft);
  color: var(--color-text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.insignia--exito { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.insignia--aviso { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning); }
.insignia--peligro { background: var(--color-danger-soft); border-color: var(--color-danger-border); color: var(--color-danger); }
.insignia--info { background: var(--color-primary-soft); border-color: var(--color-primary-border); color: var(--color-primary); }

.punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ================================================================ TABLA == */
/* Sin líneas verticales, sin fondo fuerte, filas compactas, hover sutil. */

/* Sin recorte a partir de 1180 px. `overflow-x:auto` obliga a `overflow-y` a
   valer `auto` también, y eso convertía la envoltura en contenedor de
   desplazamiento: el menú «⋯» de cada fila, que es `position:absolute`, se
   cortaba en los últimos registros. Las tablas caben de sobra en el ancho de
   trabajo, así que el desplazamiento lateral sólo hace falta en pantallas
   estrechas, donde el menú tiene sitio para abrirse hacia arriba. */
.tabla-envoltura { overflow: visible; }

@media (max-width: 1180px) {
  .tabla-envoltura { overflow-x: auto; }
}

.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.tabla thead th {
  position: sticky;
  /* Con la envoltura ya sin recorte, el ancestro de desplazamiento pasa a ser
     la página: la cabecera de la tabla puede pegarse de verdad. Se detiene
     justo debajo de la barra de título y de la cabecera de sección, que también
     son fijas; con top:0 se habría metido debajo de ellas. */
  top: calc(var(--titlebar-height) + var(--header-height));
  z-index: 1;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: left;
  white-space: nowrap;
}

.tabla tbody td {
  padding: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  vertical-align: top;
}

.tabla tbody tr { transition: background var(--motion-fast) var(--easing); }
.tabla tbody tr:hover { background: var(--color-surface-hover); }
.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla__acciones { display: flex; align-items: center; gap: var(--space-2xs); justify-content: flex-end; }
.tabla__principal { font-weight: var(--weight-medium); }
.tabla__meta { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.tabla td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabla__seleccion { width: 34px; }

/* ============================================================ DESPLEGABLE == */

.desplegable { position: relative; display: inline-flex; }

.desplegable__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 190px;
  padding: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  animation: aparecer var(--motion-fast) var(--easing);
}

.desplegable__menu[hidden] { display: none; }

.desplegable__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
}
.desplegable__item:hover { background: var(--color-surface-hover); }
.desplegable__item--peligro { color: var(--color-danger); }
.desplegable__item--peligro:hover { background: var(--color-danger-soft); }
.desplegable__separador { height: 1px; margin: var(--space-2xs) 0; background: var(--color-border-subtle); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================ MODAL == */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  /* Velo sólido y suave: sin blur pesado. */
  background: var(--color-overlay);
  animation: velo var(--motion-base) var(--easing);
}
.modal-fondo[hidden] { display: none; }

@keyframes velo { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - var(--space-2xl));
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  animation: subir var(--motion-slow) var(--easing);
}

.modal--ancho { max-width: 860px; }
.modal--extra { max-width: 1080px; }

@keyframes subir {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}
.modal__titulo { font-family: var(--font-editorial); font-size: var(--text-xl); }
.modal__descripcion { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text-secondary); }
.modal__cuerpo { padding: var(--space-sm) var(--space-lg); overflow-y: auto; flex: 1 1 auto; }
.modal__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.modal__pie--entre { justify-content: space-between; }

/* ============================================================== TOOLTIP == */

.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-dropdown);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: var(--text-2xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--easing);
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* ================================================== ESTADOS DE CONTENIDO == */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.vacio__icono { width: 26px; height: 26px; color: var(--color-text-tertiary); }
.vacio__titulo { font-family: var(--font-editorial); font-size: var(--text-lg); }
.vacio__texto { max-width: 42ch; font-size: var(--text-sm); color: var(--color-text-secondary); }

.cargando { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text-secondary); font-size: var(--text-sm); }
.girador {
  width: 14px; height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

.barra-progreso { height: 2px; background: var(--color-border-subtle); overflow: hidden; border-radius: var(--radius-pill); }
.barra-progreso__valor { height: 100%; background: var(--color-primary); transition: width var(--motion-slow) var(--easing); }

/* Aviso en línea: el rojo se usa como señal moderada, no como fondo total. */
.aviso {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-neutral-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-neutral-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.aviso--exito { border-left-color: var(--color-success); background: var(--color-success-soft); }
.aviso--aviso { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.aviso--peligro { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.aviso--info { border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.aviso__icono { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.aviso__titulo { font-weight: var(--weight-semibold); }

/* Detalles técnicos plegables: la frase clara arriba, el detalle abajo (§49). */
.detalle-tecnico { margin-top: var(--space-xs); }
.detalle-tecnico > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  list-style: none;
}
.detalle-tecnico > summary::-webkit-details-marker { display: none; }
.detalle-tecnico > summary::before { content: "▸ "; }
.detalle-tecnico[open] > summary::before { content: "▾ "; }
.detalle-tecnico__cuerpo {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}

/* ================================================================ TOAST == */

.torre-toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  animation: entrar-toast var(--motion-slow) var(--easing);
}
.toast--exito { border-left-color: var(--color-success); }
.toast--aviso { border-left-color: var(--color-warning); }
.toast--peligro { border-left-color: var(--color-danger); }
.toast--info { border-left-color: var(--color-primary); }
.toast__titulo { font-weight: var(--weight-semibold); }
.toast__cerrar { flex: none; color: var(--color-text-tertiary); }
.toast.saliendo { animation: salir-toast var(--motion-base) var(--easing) forwards; }

@keyframes entrar-toast {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes salir-toast {
  to { opacity: 0; transform: translateX(12px); }
}

/* ============================================================ DATEPICKER == */

.fecha { position: relative; }

.fecha__control {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 38px;
  padding-right: var(--space-2xs);
  transition: border-color var(--motion-fast) var(--easing);
}
.fecha__control:focus-within { border-color: var(--color-focus); }

.fecha__entrada {
  width: 104px;
  border: 0;
  background: none;
  padding: 0 var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.fecha__entrada:focus { outline: none; box-shadow: none; }

.fecha__boton { display: inline-flex; padding: var(--space-2xs); border-radius: var(--radius-sm); color: var(--color-text-tertiary); }
.fecha__boton:hover { background: var(--color-surface-hover); color: var(--color-text); }

.calendario {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown);
  width: 268px;
  padding: var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  animation: aparecer var(--motion-fast) var(--easing);
}
.calendario[hidden] { display: none; }

.calendario__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.calendario__selectores { display: flex; gap: var(--space-2xs); flex: 1; }
.calendario__selectores .selector { min-height: 28px; font-size: var(--text-xs); padding: 0 var(--space-md) 0 var(--space-xs); }

.calendario__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calendario__dia-semana {
  padding: var(--space-2xs) 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-align: center;
  text-transform: uppercase;
}
.calendario__dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.calendario__dia:hover:not(:disabled) { background: var(--color-surface-hover); }
.calendario__dia--fuera { color: var(--color-text-tertiary); opacity: 0.55; }
.calendario__dia--hoy { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--color-primary-border); }
.calendario__dia--activo { background: var(--color-primary); color: var(--color-text-inverse); }
.calendario__dia--rango { background: var(--color-primary-soft); color: var(--color-primary-active); border-radius: 0; }
.calendario__dia:disabled { opacity: 0.3; cursor: not-allowed; }

.calendario__atajos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border-subtle); }
.calendario__atajo { padding: 3px var(--space-xs); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-primary); }
.calendario__atajo:hover { background: var(--color-primary-soft); }

/* ========================================================== SEGMENTADO == */

.segmentado {
  display: inline-flex;
  padding: 2px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-sunken);
  gap: 2px;
}
.segmentado__opcion {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.segmentado__opcion:hover { color: var(--color-text); }
.segmentado__opcion[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ============================================================== PESTAÑAS == */

.pestanas { display: flex; gap: var(--space-lg); border-bottom: var(--border-width) solid var(--color-border); }
.pestana {
  position: relative;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--motion-fast) var(--easing);
}
.pestana:hover { color: var(--color-text); }
.pestana[aria-selected="true"] { color: var(--color-text); }
.pestana[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--color-primary);
}

/* ============================================================== LISTA ==== */
/* Filas separadas por líneas horizontales: nada de tarjetas anidadas. */

.lista { border-top: var(--border-width) solid var(--color-border-subtle); }
.lista__fila {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  transition: background var(--motion-fast) var(--easing);
}
.lista__fila:hover { background: var(--color-surface-hover); }
.lista__titulo { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.lista__meta { font-size: var(--text-xs); color: var(--color-text-tertiary); }


/* ==========================================================================
   V1.1.0 DESIGN · Command palette (Ctrl+K)
   --------------------------------------------------------------------------
   Navega por las secciones reales y por las empresas reales de /api/empresas.
   Sin datos de demostración y sin dependencias externas.
   ========================================================================== */

.paleta { position: fixed; inset: 0; z-index: var(--z-paleta); }
.paleta[hidden] { display: none; }
.paleta__fondo { position: absolute; inset: 0; background: rgba(27, 25, 23, 0.2); }
.paleta__caja {
  position: absolute;
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
  width: 604px;
  max-width: calc(100% - 48px);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.paleta__campo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.paleta__lupa { width: 14px; height: 14px; flex: none; color: var(--color-text-faint); }
.paleta__entrada {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--text-lg);
  color: var(--color-text);
}
.paleta__esc {
  font-size: 10.5px;
  color: var(--color-text-faint);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  flex: none;
}
.paleta__lista { max-height: 352px; overflow-y: auto; }
.paleta__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.paleta__item:hover, .paleta__item--activo { background: var(--color-neutral-soft); }
.paleta__sigla {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}
.paleta__nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-md);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paleta__grupo { flex: none; font-size: var(--text-2xs); color: var(--color-text-faint); white-space: nowrap; }
.paleta__vacio { padding: 34px 20px; text-align: center; font-size: var(--text-sm); color: var(--color-text-tertiary); }


/* Visor de comprobantes dentro de la aplicacion.
   El motor sirve el archivo inline (`GET /api/archivo`), asi que el PDF se
   muestra aqui en vez de abrirse con el programa del sistema: salir de COSAPI
   para mirar una factura es justo lo que la unificacion venia a evitar. */
.visor-archivo {
  width: 100%;
  height: 68vh;
  min-height: 380px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.visor-texto {
  max-height: 68vh;
  overflow: auto;
  margin: 0;
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-sunken);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
}