/* ==========================================================================
   LeadSync — LA TABLA. Una sola, y todas las demás son esta (item A34).

   POR QUÉ EXISTE, con sus palabras:

     "había pedido que las tablas fueran como el de metricas, que es bonito"
     "No entiendo qué has esperado para hacer esto, debió ser lo primero, siempre lo he
      dicho, primero tener la base de comportamiento y diseño y luego se replica"

   Había CUATRO tablas —métricas, consumo, la agenda y las cotizaciones de la ficha— con
   cuatro definiciones casi iguales y cuatro resultados distintos: tipografías de cabecera
   que no coincidían, rellenos de 4, 6, 8 y 9 px, unas con hover y otras no, y solo una con
   la cabecera pegajosa. Nada de eso era una decisión: era copiar y pegar envejeciendo.

   EL MODELO ES LA DE MÉTRICAS porque es la que él señaló. Lo que trae:
     · caja con borde, esquinas redondeadas y fondo propio, y scroll horizontal SUYO
     · cabecera con su tono, en mayúsculas pequeñas, que se lee como referencia y no como fila
     · filas con su línea de separación, la última sin ella, y hover
     · números a la derecha y con cifras de ancho fijo, para poder compararlos de un vistazo

   LO QUE NO SE PONE AQUÍ: los anchos de columna, los colores de estado y las píldoras. Eso
   es de cada pantalla y se queda en su hoja.
   ========================================================================== */

/* LA CAJA. Va por fuera de la tabla porque es quien redondea, pone el borde y se lleva el
   scroll horizontal: una tabla ancha se desplaza DENTRO de su caja y nunca moviendo la
   página entera de lado, que es lo que rompe la sensación de app. */
.tabla-caja {
  overflow-x: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tabla {
  width: 100%;
  /* `separate` Y NO `collapse`, Y NO ES COSMÉTICO: con los bordes colapsados, Chrome NO
     respeta el `z-index` de una celda, así que una cabecera pegajosa se queda pegada pero
     las filas le pasan POR ENCIMA —y ni una sombra exterior ni un `::after` del `<th>` llegan
     a taparlas; se comprobó pintándolos de magenta—. Con `border-spacing: 0` se ve igual: no
     hay bordes verticales que puedan duplicarse. */
  border-collapse: separate;
  border-spacing: 0;
  /* EL ANCHO DE CADA COLUMNA SE FIJA UNA VEZ y no lo decide el contenido de la pagina que
     toque. Peticion suya: *"La tabla no deberia cambiar el ancho de sus columnas cada que
     cambie su contenido [...] cuando cambio de pagina, o ajusto el orden en una columna me
     mueve todo y es incomodo y molesto"*. Con table-layout auto el navegador vuelve a medir
     en cada repintado y las columnas bailan; con fixed manda lo que digan la cabecera y las
     reglas de cada pantalla.
     Efecto de lado que conviene saber: lo que no cabe se RECORTA en vez de ensanchar la
     columna, asi que las celdas largas necesitan su text-overflow. */
  table-layout: fixed;
  font-size: 13px;
}

/* La cabecera se distingue del cuerpo con su propio tono: es la referencia fija mientras se
   leen las filas, y sin separación se lee como una fila más. */
.tabla thead th {
  background: var(--bg-hover);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-dim);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* El redondeo de la caja se repite en las esquinas de la cabecera: sin esto, el tono del
   encabezado asoma por fuera del borde redondeado y se ve un pico cuadrado. */
.tabla thead th:first-child { border-top-left-radius: 11px; }
.tabla thead th:last-child { border-top-right-radius: 11px; }

.tabla td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}
/* La última fila no lleva línea: pegada al borde de la caja se ve como un borde doble. */
.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla tbody tr { transition: background-color 120ms ease; }
.tabla tbody tr:hover { background: var(--bg-hover); }

/* --- Modificadores de celda ------------------------------------------------
   Son los tres que se repetían en las cuatro tablas, con nombres distintos en cada una
   (met-num, cns-num, ficha-monto…). */

/* UN NÚMERO SE ALINEA A LA DERECHA Y CON CIFRAS DE ANCHO FIJO: así las unidades quedan
   debajo de las unidades y se comparan de un vistazo. Un teléfono NO es un número en este
   sentido —es un identificador que se lee dígito a dígito— y va a la izquierda. */
.tabla-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabla-nombre { font-weight: 600; }
.tabla-dim { color: var(--text-dim); }

/* --- Cabecera pegajosa (opcional) -------------------------------------------
   Se pide con `.tabla--pegajosa` porque no toda tabla la quiere: en una de cuatro filas
   dentro de una tarjeta no hay nada de donde despegarse.

   DOS PIEZAS, y las dos hacen falta:

   1. DÓNDE SE PEGA. Un sticky se cuelga de su scrollport y se pega al borde de su RELLENO,
      no al del contenedor. El panel tiene `--pane-pad-t` arriba, así que con `top: 0` la
      cabecera se queda ahí abajo y por ese hueco se ven pasar las filas. Se resta el relleno
      y se deja `--tabla-aire`, que es el espacio que él pidió: *"como estaba antes era mejor
      que tenía como un espacio, pero igual que no se vea lo de atrás"*.

   2. LA TAPA DE ESE AIRE. El hueco tiene que ser OPACO o el aire es una ventana. La cubre
      `.tabla-tapa`, un DIV hermano —no un pseudo-elemento de la celda, que no funciona: ver
      arriba lo del z-index— que no ocupa sitio y es del color del suelo del panel, así que
      cuando no hay nada desplazándose debajo no se ve. */
.tabla--pegajosa thead th {
  position: sticky;
  top: calc(var(--tabla-aire, 10px) - var(--pane-pad-t, 0px));
  z-index: 1;
}
/* DENTRO DE UNA MODAL: las mismas dos piezas, medidas contra SU contenedor de scroll
   (el cuerpo de la modal) y no contra el panel. La cabecera deja su aire arriba y la tapa lo
   cubre para que no asome lo que pasa por detrás de las esquinas redondeadas; la tapa va del
   color de la MODAL, que no es el del panel: con el del panel se veía como una franja gris. */
.modal-body .tabla--pegajosa thead th { top: calc(var(--tabla-aire, 10px) - var(--modal-body-pad-t, 0px)); }
.modal-body .tabla-tapa { top: calc(-1 * var(--modal-body-pad-t, 0px)); background: var(--bg-panel); }
/* Y LA CAJA NO PUEDE SER SCROLLER, como en Contactos (.ag-tabla-caja): con `overflow-x: auto`
   la cabecera se pegaba a la caja, que no se mueve en vertical, y no se quedaba fija. */
.modal-body .tabla-caja:has(> .tabla--pegajosa) { overflow: visible; }
.tabla-tapa {
  position: sticky;
  top: calc(-1 * var(--pane-pad-t, 0px));
  z-index: 3;
  height: var(--tabla-aire, 10px);
  margin-top: calc(-1 * var(--tabla-aire, 10px));
  background: var(--bg);
}

/* --- LA PAGINACIÓN: el intervalo, escribible (estilo Odoo) ------------------
   Va ARRIBA, a la derecha de los filtros. Una flecha a cada lado de lo que cambia:
       [‹]  [desde] – [hasta] de 9.393  [›]                                    */
.tabla-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.tabla-pag-rango {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tabla-pag-campo {
  display: inline-flex;
  /* ANCLA PARA SU `.sr-only`. El rotulo que solo oye el lector de pantalla es un
     `position: absolute` de 1px, y sin un padre posicionado se cuelga de la PAGINA: con la
     tabla entera pintada se queda a dos mil pixeles de altura, estira el documento hasta
     ahi y saca una segunda barra de scroll. Ya paso una vez con este mismo rotulo. */
  position: relative;
}
.tabla-pag-campo input {
  /* El campo se ve como texto hasta que se toca: un recuadro por cada número convierte el
     pie en un formulario, y esto se lee mucho más de lo que se escribe. */
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 3px 6px;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color .12s ease, background-color .12s ease;
}
.tabla-pag-campo input:hover { border-color: var(--border); }
.tabla-pag-campo input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
}
.tabla-pag-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.tabla-pag-guion { opacity: .7; }

.tabla-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  /* Redondo, como el resto de los botones de icono de la consola. */
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.tabla-pag-btn .ic { width: 16px; height: 16px; }
.tabla-pag-btn:hover:not(:disabled) { background: var(--bg-hover); }
/* Apagado se VE apagado: sin esto, el botón de "anteriores" en la primera página parece
   pulsable y no responde, que se lee como que la consola está rota. */
.tabla-pag-btn:disabled { opacity: .45; cursor: default; }

/* ==========================================================================
   LA TABLA ENTERA (crearTabla, components/tabla.js)
   Buscador, chips de filtro, PAGINACIÓN ARRIBA, aviso y estados vacíos. Lo usan la agenda,
   los mensajes rápidos y el registro de llamadas de Integraciones. Venía de la agenda
   (contacts.css), que era la única que lo tenía; allí queda solo lo suyo.
   ========================================================================== */

.tabla-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tabla-buscar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-panel);
  transition: border-color var(--dur-hover, .12s) ease;
}
.tabla-buscar:focus-within { border-color: var(--accent); }
.tabla-buscar-ic {
  display: flex;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.tabla-buscar-ic .ic { width: 15px; height: 15px; }
.tabla-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}
/* La X nativa del type=search no se puede estilar y en oscuro se ve como un borrón. */
.tabla-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* FILTROS Y PAGINACIÓN, ENCIMA de la tabla: EN UNA FILA SI CABEN, EN DOS SI NO. Lo decide el
   sitio que hay, no un corte de pantalla: los filtros toman su ancho natural y la paginación se va a la derecha;
   cuando no cabe al lado, baja a su propia fila, también a la derecha (donde se busca, como en
   Odoo). Los chips son el `.filter-tab` de la bandeja. */
.tabla-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.tabla-controles:has(> :not(:empty)) { margin-bottom: 10px; }
.tabla-filtros {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tabla-filtros:empty { display: none; }
/* LOS CHIPS VAN SOBRE EL FONDO DE LA PÁGINA, NO SOBRE UNA TARJETA (NO_REPETIR 67):
   el `.filter-tab` de la bandeja es transparente porque allí el suelo es blanco. Aquí el suelo
   es el gris de la página y el chip transparente quedaba con contraste 0: se le da el fondo
   elevado, como al buscador y a las flechas de la paginación que tiene al lado. */
.tabla-filtros .filter-tab:not(.active):not(.negado) { background: var(--bg-elev); }
.tabla-filtros .filter-tab:not(.active):not(.negado):hover { border-color: var(--text-dim); }
.tabla-pag-hueco {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.tabla-pag-hueco:empty { display: none; }
.tabla-pag-hueco .tabla-pag { margin-top: 0; }

/* --- El filtro con desplegable (components/filtromenu.js) -------------------
   «Resultado: Todos ▾». La pregunta va atenuada y la respuesta en su peso normal: lo que
   cambia es lo que se lee. Elegido, se enciende como cualquier chip activo. */
.filtro-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filtro-menu-titulo { color: var(--text-dim); font-weight: 500; }
.filtro-menu.active .filtro-menu-titulo { color: inherit; opacity: .8; }
.filtro-menu > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--dur-hover, .12s) ease;
}
.filtro-menu[aria-expanded="true"] > svg { transform: rotate(180deg); }
.filtro-menu-pop .msg-menu { min-width: 200px; max-height: 60vh; overflow-y: auto; }
/* Las opciones no llevan icono: la marca de la elegida va a la derecha. */
.filtro-menu-pop .msg-menu-ic:empty { display: none; }
.filtro-menu-pop .msg-menu-item > span:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.filtro-menu-op { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* El icono propio de una opción (el avatar de una persona en el filtro por operador). */
.filtro-menu-ic { display: inline-flex; flex: 0 0 auto; }
.filtro-menu-ic .avatar { width: 20px; height: 20px; font-size: 8px; }
.filtro-menu-ic > .ic { width: 16px; height: 16px; color: var(--text-dim); }
.filtro-menu-n {
  color: var(--text-dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
/* LA MARCA DE CADA OPCIÓN. En el de varias es una CASILLA (se ve que se pueden marcar más);
   en el de una sola, solo el ✓ de la elegida. */
.filtro-menu-caja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.filtro-menu-caja svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-hover, .12s) ease; }
.filtro-menu-caja.on svg { opacity: 1; }
.filtro-menu-pop--multiple .filtro-menu-caja {
  border: 1.5px solid var(--border);
  border-radius: 4px;
  transition: background-color var(--dur-hover, .12s) ease, border-color var(--dur-hover, .12s) ease;
}
.filtro-menu-pop--multiple .filtro-menu-caja.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {
  .filtro-menu > svg,
  .filtro-menu-caja,
  .filtro-menu-caja svg { transition: none; }
}

/* El aviso solo aparece cuando hay algo que advertir. Va ARRIBA: abajo, quien no baja no se
   entera de que está viendo una parte. */
.tabla-aviso {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.4;
}
.tabla-aviso.hidden { display: none; }

.tabla-cuerpo {
  /* EL AIRE QUE QUEDA SOBRE LA CABECERA PEGADA: lo leen la cabecera -para saber a qué altura
     pegarse- y la tapa que cubre ese hueco. */
  --tabla-aire: 10px;
}
.tabla-estado {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* LA CABECERA LLEVA UN BOTÓN QUE ORDENA, así que el relleno lo pone el botón y toda la celda
   es pulsable. La columna que no ordena lleva el mismo rótulo como texto, para que todas
   las cabeceras midan y se lean igual. */
.tabla-comp-t thead th { padding: 0; overflow: hidden; }
.tabla-th {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* 44px de alto: es el mínimo táctil, y aquí el encabezado ES un botón (ordena). */
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
}
button.tabla-th {
  cursor: pointer;
  transition: color var(--dur-hover, .12s) ease, background-color var(--dur-hover, .12s) ease;
}
button.tabla-th:hover { color: var(--text); background: var(--bg-hover); }
button.tabla-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabla-th.activa { color: var(--accent); }
/* La flecha SOLO se ve en la columna que ordena. En todas a la vez, ninguna destaca. */
.tabla-th-ic {
  display: inline-flex;
  opacity: 0;
  transition: opacity var(--dur-hover, .12s) ease;
}
.tabla-th-ic svg { width: 14px; height: 14px; }
.tabla-th.activa .tabla-th-ic,
button.tabla-th:hover .tabla-th-ic { opacity: 1; }

.tabla-comp-t td {
  padding: 8px 12px;
  vertical-align: middle;
}
/* Con los anchos fijos, lo que no cabe se recorta: hay que decir DÓNDE cortar o la celda
   enseña media palabra pegada al borde. */
.tabla-comp-t td { overflow: hidden; text-overflow: ellipsis; }

/* LAS FILAS ENTRAN, no aparecen de golpe (mandato de movimiento): al filtrar, buscar o
   cambiar de tramo se nota que la lista cambió. Empieza legible y solo se atenúa un instante:
   si la animación no corre —pestaña de fondo— la fila se queda visible igual. */
.tabla-fila { animation: tabla-fila-entra .16s ease both; }
@keyframes tabla-fila-entra {
  from { opacity: .45; }
  to   { opacity: 1; }
}
.tabla-fila[role="button"] { cursor: pointer; }
.tabla-fila:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* SIN CABECERA (los mensajes rápidos): la primera fila hereda el redondeo de la caja. */
.tabla--sin-cabecera tbody tr:first-child td:first-child { border-top-left-radius: 11px; }
.tabla--sin-cabecera tbody tr:first-child td:last-child { border-top-right-radius: 11px; }

/* --- Selección por casillas ------------------------------------------------ */
.tabla-col-sel,
.tabla-td-sel {
  width: 44px;
  text-align: center;
}
/* La casilla de la cabecera, CENTRADA como las de las filas. Hace falta el selector largo:
   la regla general de la cabecera (`.tabla thead th`, texto a la izquierda) pesa más. */
.tabla thead th.tabla-col-sel { text-align: center; vertical-align: middle; }
.tabla-col-sel input[type="checkbox"],
.tabla-td-sel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.tabla-td-sel input[type="checkbox"]:disabled { cursor: not-allowed; }
/* Marcar una fila se ve en la fila entera, con transición corta (micro-estado). */
.tabla--seleccion .tabla-fila td { transition: background-color var(--dur-hover, .12s) ease; }
.tabla-fila--elegida td { background: color-mix(in srgb, var(--accent) 10%, transparent); }

@media (max-width: 600px) {
  .tabla-barra { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tabla-fila { animation: none; }
  button.tabla-th,
  .tabla-th-ic,
  .tabla--seleccion .tabla-fila td { transition: none; }
}