/* =========================================================================
   ALCAM ERP · Hoja de estilos compartida
   =========================================================================
   Cubre el armazón de la aplicación: menú lateral, notificaciones, modales,
   botones, tablas y comportamiento en teléfono.

   El contenido de cada página sigue usando Tailwind. Esto es lo que Tailwind
   no puede dar: componentes propios, animaciones y las reglas que hacen que la
   app se sienta terminada en vez de armada a pedazos.

   Se mantiene la identidad que ya tenía el sistema —barra oscura, azul para
   instalaciones, esmeralda para mantenimiento— y se afina el resto.
   ========================================================================= */

:root {
  /* Superficies */
  --lienzo:        #f1f5f9;
  --superficie:    #ffffff;
  --hundido:       #f8fafc;
  --linea:         #e2e8f0;
  --linea-suave:   #f1f5f9;

  /* Texto */
  --tinta:         #0f172a;
  --tinta-2:       #334155;
  --tinta-3:       #64748b;
  --tinta-4:       #94a3b8;

  /* Barra lateral */
  --barra:         #0f172a;
  --barra-honda:   #060d1a;
  --barra-texto:   #94a3b8;
  --barra-linea:   #1e293b;

  /* Acentos */
  --azul:          #2563eb;
  --azul-fuerte:   #1d4ed8;
  --azul-suave:    #eff6ff;
  --esmeralda:     #059669;
  --esmeralda-suave:#ecfdf5;
  --morado:        #7c3aed;
  --ambar:         #d97706;
  --rojo:          #dc2626;
  --rojo-suave:    #fef2f2;

  /* Ritmo */
  --radio:         10px;
  --radio-chico:   7px;
  --sombra:        0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .05);
  --sombra-alta:   0 10px 30px -8px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);
  --curva:         cubic-bezier(.32, .72, 0, 1);
  --ancho-barra:   256px;
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   ARMAZÓN
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--lienzo);
  color: var(--tinta);
  overflow-x: hidden;                    /* nada de barras horizontales */
}

/* El contenido se corre para dejarle espacio a la barra en pantallas grandes. */
.contenido-principal,
body > main {
  min-height: 100vh;
  min-height: 100dvh;                    /* respeta la barra del navegador móvil */
}

@media (min-width: 1024px) {
  .contenido-principal,
  body > main { margin-left: var(--ancho-barra); }
}

/* Foco visible siempre: sin esto la app no se puede usar con teclado. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: #bfdbfe; color: var(--tinta); }

/* Barras de desplazamiento discretas */
.scroll-fino { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.scroll-fino::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-fino::-webkit-scrollbar-track { background: transparent; }
.scroll-fino::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.scroll-fino::-webkit-scrollbar-thumb:hover { background: #475569; }

/* =========================================================================
   BARRA LATERAL
   ========================================================================= */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ancho-barra);
  background: var(--barra);
  color: var(--barra-texto);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .34s var(--curva);
  box-shadow: 4px 0 24px -8px rgba(2, 6, 23, .4);
}
.sidebar.abierto { transform: translateX(0); }

@media (min-width: 1024px) {
  .sidebar { transform: translateX(0); box-shadow: none; }
  .sidebar__cerrar { display: none; }
}

.sidebar__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 76px;
  padding: 0 20px;
  background: var(--barra-honda);
  border-bottom: 1px solid var(--barra-linea);
  flex-shrink: 0;
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca__cuadro {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: #fff; color: var(--azul-fuerte);
  font-weight: 900; font-size: 19px;
  border-radius: var(--radio-chico);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
  flex-shrink: 0;
}
.marca__nombre {
  display: block; color: #fff; font-weight: 800;
  font-size: 18px; letter-spacing: .14em; line-height: 1.05;
}
.marca__oficio {
  display: block; color: #60a5fa; font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; margin-top: 2px;
}

.sidebar__cerrar {
  background: none; border: 0; color: #64748b; cursor: pointer;
  padding: 6px; border-radius: var(--radio-chico); transition: all .18s;
  display: grid; place-items: center;
}
.sidebar__cerrar:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar__cerrar svg { width: 22px; height: 22px; }

.sidebar__nav {
  flex: 1; overflow-y: auto; padding: 18px 14px;
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 5px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.nav-grupo {
  font-size: 9.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: .18em;
  padding: 0 10px; margin: 20px 0 8px;
}
.nav-grupo:first-child { margin-top: 0; }

.nav-enlace {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 3px;
  border-radius: var(--radio-chico);
  color: #94a3b8; text-decoration: none;
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s, color .18s, transform .18s var(--curva);
}
.nav-enlace:hover { background: rgba(255, 255, 255, .05); color: #fff; transform: translateX(2px); }
.nav-enlace:active { transform: translateX(0) scale(.985); }

.nav-icono { width: 19px; height: 19px; flex-shrink: 0; color: #64748b; transition: color .18s; }
.nav-enlace:hover .nav-icono { color: currentColor; }
.nav-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-enlace--azul.activo       { background: rgba(37,99,235,.14);  color: #60a5fa; border-color: rgba(37,99,235,.28); }
.nav-enlace--esmeralda.activo  { background: rgba(5,150,105,.14);  color: #34d399; border-color: rgba(5,150,105,.28); }
.nav-enlace--morado.activo     { background: rgba(124,58,237,.14); color: #a78bfa; border-color: rgba(124,58,237,.28); }
.nav-enlace--ambar.activo      { background: rgba(217,119,6,.14);  color: #fbbf24; border-color: rgba(217,119,6,.28); }
.nav-enlace.activo .nav-icono  { color: currentColor; }
.nav-enlace--ambar             { color: #f59e0b; }
.nav-enlace--ambar .nav-icono  { color: #f59e0b; }

.sidebar__pie {
  padding: 14px; border-top: 1px solid var(--barra-linea);
  background: var(--barra-honda); flex-shrink: 0;
}

.usuario-tarjeta {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--radio-chico);
}
.usuario-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azul), #4f46e5);
  color: #fff; font-weight: 700; font-size: 12px;
  border-radius: 50%; letter-spacing: .04em;
}
.usuario-datos { min-width: 0; }
.usuario-nombre {
  display: block; color: #e2e8f0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usuario-rol {
  display: block; color: #64748b; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-top: 1px;
}

.boton-salir {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; cursor: pointer;
  background: transparent; color: #f87171;
  border: 1px solid rgba(248, 113, 113, .22);
  border-radius: var(--radio-chico);
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: background .18s, border-color .18s;
}
.boton-salir:hover { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .4); }
.boton-salir svg { width: 15px; height: 15px; }

/* Velo del menú en teléfono */
.velo {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2, 6, 23, .6);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.velo.visible { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .velo { display: none; } }

/* Botón flotante para abrir el menú */
.boton-menu {
  position: fixed; top: 14px; left: 14px; z-index: 140;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--superficie); color: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra); cursor: pointer;
  transition: transform .18s var(--curva), box-shadow .18s;
}
.boton-menu:hover { box-shadow: var(--sombra-alta); }
.boton-menu:active { transform: scale(.94); }
.boton-menu svg { width: 21px; height: 21px; }
@media (min-width: 1024px) { .boton-menu { display: none; } }

/* =========================================================================
   NOTIFICACIONES
   ========================================================================= */

.alcam-avisos {
  position: fixed; z-index: 900;
  top: 16px; right: 16px; left: auto;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none; max-width: min(400px, calc(100vw - 32px));
}
/* En teléfono aparecen abajo, donde el pulgar puede descartarlas. */
@media (max-width: 640px) {
  .alcam-avisos { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

.alcam-aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-4);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--tinta-2);
  pointer-events: auto; cursor: pointer;
  opacity: 0; transform: translateY(-8px) scale(.97);
  transition: opacity .26s var(--curva), transform .26s var(--curva);
}
@media (max-width: 640px) { .alcam-aviso { transform: translateY(8px) scale(.97); } }

.alcam-aviso.entra { opacity: 1; transform: translateY(0) scale(1); }
.alcam-aviso.sale  { opacity: 0; transform: translateY(-8px) scale(.97); }
@media (max-width: 640px) { .alcam-aviso.sale { transform: translateY(8px) scale(.97); } }

.alcam-aviso__icono { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alcam-aviso__texto { min-width: 0; word-break: break-word; }

.alcam-aviso--exito    { border-left-color: var(--esmeralda); }
.alcam-aviso--exito    .alcam-aviso__icono { color: var(--esmeralda); }
.alcam-aviso--error    { border-left-color: var(--rojo); }
.alcam-aviso--error    .alcam-aviso__icono { color: var(--rojo); }
.alcam-aviso--aviso    { border-left-color: var(--ambar); }
.alcam-aviso--aviso    .alcam-aviso__icono { color: var(--ambar); }
.alcam-aviso--info     { border-left-color: var(--azul); }
.alcam-aviso--info     .alcam-aviso__icono { color: var(--azul); }
.alcam-aviso--cargando { border-left-color: var(--azul); }
.alcam-aviso--cargando .alcam-aviso__icono { color: var(--azul); }

@keyframes alcam-girar { to { transform: rotate(360deg); } }
.girando { animation: alcam-girar .8s linear infinite; transform-origin: center; }

/* =========================================================================
   MODALES
   ========================================================================= */

.alcam-modal-fondo {
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center; padding: 20px;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s var(--curva);
}
.alcam-modal-fondo.abierto { opacity: 1; }

.alcam-modal {
  width: 100%; max-width: 420px;
  background: var(--superficie);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(2, 6, 23, .4);
  padding: 26px;
  transform: scale(.95) translateY(8px);
  transition: transform .26s var(--curva);
}
.alcam-modal-fondo.abierto .alcam-modal { transform: scale(1) translateY(0); }

.alcam-modal__titulo {
  font-size: 18px; font-weight: 700; color: var(--tinta);
  margin: 0 0 8px; text-wrap: balance;
}
.alcam-modal__texto {
  font-size: 14.5px; color: var(--tinta-3); line-height: 1.6; margin: 0 0 22px;
}
.alcam-modal__botones { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 420px) {
  .alcam-modal__botones { flex-direction: column-reverse; }
  .alcam-modal__botones .alcam-btn { width: 100%; }
}

/* =========================================================================
   BOTONES
   ========================================================================= */

.alcam-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; min-height: 42px;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, box-shadow .18s, transform .12s var(--curva);
}
.alcam-btn:active:not(:disabled) { transform: scale(.97); }
.alcam-btn:disabled { opacity: .55; cursor: not-allowed; }

.alcam-btn--principal { background: var(--azul); color: #fff; }
.alcam-btn--principal:hover:not(:disabled) {
  background: var(--azul-fuerte); box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .5);
}
.alcam-btn--peligro { background: var(--rojo); color: #fff; }
.alcam-btn--peligro:hover:not(:disabled) {
  background: #b91c1c; box-shadow: 0 4px 14px -4px rgba(220, 38, 38, .5);
}
.alcam-btn--suave {
  background: var(--hundido); color: var(--tinta-2); border-color: var(--linea);
}
.alcam-btn--suave:hover:not(:disabled) { background: var(--linea-suave); border-color: #cbd5e1; }

/* En teléfono, todo lo tocable llega al mínimo cómodo de 44 px. */
@media (max-width: 640px) {
  button, .alcam-btn, a.boton, input[type="submit"] { min-height: 44px; }
}

/* =========================================================================
   PASTILLAS DE ESTADO
   ========================================================================= */

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.pastilla::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.pastilla--azul   { background: var(--azul-suave);      color: var(--azul-fuerte); }
.pastilla--indigo { background: #eef2ff;                color: #4338ca; }
.pastilla--verde  { background: var(--esmeralda-suave); color: #047857; }
.pastilla--gris   { background: var(--linea-suave);     color: var(--tinta-3); }
.pastilla--rojo   { background: var(--rojo-suave);      color: #b91c1c; }
.pastilla--ambar  { background: #fffbeb;                color: #b45309; }

/* =========================================================================
   TABLAS Y LISTAS
   ========================================================================= */

.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radio);
}

/*
   Tablas que se vuelven tarjetas en teléfono.

   Antes había tablas con min-width de 1000 px dentro de un contenedor con
   scroll: en una pantalla de 390 px eso significaba arrastrar de lado todo el
   tiempo. Marcando la tabla con .tabla-adaptable y cada celda con
   data-titulo="Nombre de la columna", en pantallas chicas cada fila se apila
   como una tarjeta legible.
*/
@media (max-width: 767px) {
  .tabla-adaptable,
  .tabla-adaptable thead,
  .tabla-adaptable tbody,
  .tabla-adaptable tr,
  .tabla-adaptable td { display: block; width: 100%; min-width: 0 !important; }

  .tabla-adaptable thead { display: none; }

  .tabla-adaptable tr {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 10px;
    padding: 6px 4px;
  }

  .tabla-adaptable td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 9px 13px; border: 0;
    border-bottom: 1px solid var(--linea-suave);
    text-align: right;
  }
  .tabla-adaptable td:last-child { border-bottom: 0; }

  .tabla-adaptable td::before {
    content: attr(data-titulo);
    flex-shrink: 0; text-align: left;
    font-size: 10.5px; font-weight: 700; color: var(--tinta-4);
    text-transform: uppercase; letter-spacing: .1em;
  }
  .tabla-adaptable td[data-titulo=""]::before,
  .tabla-adaptable td:not([data-titulo])::before { content: none; }

  .tabla-adaptable td.celda-acciones { justify-content: flex-end; }
}

.lista-vacia {
  padding: 34px 18px; text-align: center;
  color: var(--tinta-4); font-size: 14px; font-style: italic;
}

/* =========================================================================
   ESQUELETOS DE CARGA
   ========================================================================= */

.esqueleto {
  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%);
  background-size: 200% 100%;
  animation: alcam-brillo 1.4s ease-in-out infinite;
  border-radius: var(--radio-chico);
  color: transparent !important;
}
@keyframes alcam-brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.esqueleto-linea { height: 13px; margin-bottom: 9px; }
.esqueleto-linea:last-child { width: 62%; margin-bottom: 0; }

/* =========================================================================
   ENTRADAS DE FORMULARIO
   ========================================================================= */

.campo-alcam {
  width: 100%; padding: 11px 13px;
  font-family: inherit; font-size: 15px;   /* 15 px evita el zoom de iOS */
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
  transition: border-color .18s, box-shadow .18s;
}
.campo-alcam:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
.campo-alcam::placeholder { color: var(--tinta-4); }
.campo-alcam:disabled { background: var(--hundido); color: var(--tinta-3); cursor: not-allowed; }
.campo-alcam.invalido { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }

.etiqueta-alcam {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .1em;
}

.ayuda-campo { font-size: 12.5px; color: var(--tinta-4); margin-top: 5px; }
.error-campo { font-size: 12.5px; color: var(--rojo); margin-top: 5px; font-weight: 600; }

/* Cifras alineadas en columnas */
.cifras { font-variant-numeric: tabular-nums; }

/* =========================================================================
   ENTRADAS DE PÁGINA
   ========================================================================= */

@keyframes alcam-aparecer {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aparece { animation: alcam-aparecer .34s var(--curva) both; }
.aparece-1 { animation-delay: .04s; }
.aparece-2 { animation-delay: .09s; }
.aparece-3 { animation-delay: .14s; }
.aparece-4 { animation-delay: .19s; }

/* Tarjetas que responden al puntero sin exagerar */
.tarjeta-viva { transition: transform .2s var(--curva), box-shadow .2s; }
.tarjeta-viva:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }

/* =========================================================================
   IMPRESIÓN
   ========================================================================= */

@media print {
  .sidebar, .velo, .boton-menu, .alcam-avisos,
  .alcam-modal-fondo, .no-imprimir { display: none !important; }
  .contenido-principal, body > main { margin-left: 0 !important; }
  body { background: #fff; }
}

/* =========================================================================
   MARCAS DEL MENÚ
   =========================================================================
   Un punto en "Instalación" cuando hay un borrador sin terminar, y el número
   de cotizaciones que necesitan seguimiento junto a "Bitácora".

   Antes el menú no decía nada: había que entrar a cada sitio para descubrir si
   había algo pendiente.
   ========================================================================= */

.nav-enlace { position: relative; }
.nav-texto { flex: 1; }

.nav-marca {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nav-marca:empty { display: none; }

.nav-marca--punto {
  font-size: 20px;
  line-height: 0;
  color: #fbbf24;
  transform: translateY(-1px);
}

.nav-marca--numero {
  min-width: 19px;
  padding: 3px 6px;
  text-align: center;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 10px;
}

/* =========================================================================
   AVISO DE BORRADOR
   ========================================================================= */

.barra-borrador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 16px;
  margin-bottom: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio-chico);
  font-size: 14px;
  color: #78350f;
}
.barra-borrador__texto { min-width: 0; }
.barra-borrador__acciones { display: flex; gap: 8px; flex-shrink: 0; }

.estado-guardado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tinta-4);
  font-weight: 600;
}
.estado-guardado--ok { color: var(--esmeralda); }
.estado-guardado__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* =========================================================================
   SELECTOR DE CLIENTE EN LA PÁGINA DE COTIZACIÓN
   =========================================================================
   Antes, entrar a cotizar sin cliente seleccionado lo devolvía al inicio sin
   explicar nada. Ahora la página pregunta a quién se le va a cotizar.
   ========================================================================= */

.pedir-cliente {
  max-width: 560px;
  margin: 6vh auto;
  padding: 30px 28px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.pedir-cliente h2 {
  font-size: 21px; font-weight: 700; color: var(--tinta);
  margin: 0 0 6px; text-wrap: balance;
}
.pedir-cliente p { color: var(--tinta-3); font-size: 14.5px; margin: 0 0 20px; }

.lista-clientes {
  max-height: 46vh; overflow-y: auto; margin-top: 12px;
  border: 1px solid var(--linea); border-radius: var(--radio-chico);
}
.lista-clientes__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--linea-suave);
  font-family: inherit; font-size: 14.5px; text-align: left;
  color: var(--tinta); cursor: pointer;
  transition: background .15s;
}
.lista-clientes__item:last-child { border-bottom: 0; }
.lista-clientes__item:hover { background: var(--hundido); }
.lista-clientes__inicial {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--azul-suave); color: var(--azul-fuerte);
  font-weight: 700; font-size: 13px;
}
.lista-clientes__datos { min-width: 0; }
.lista-clientes__nombre {
  display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-clientes__detalle { display: block; font-size: 12.5px; color: var(--tinta-4); }