/* =====================================================================
   Llamadas · marcador de fecha (js/vistas/llamadas.js) — 20-oct-2026
   Pedido del dueño: «que en las llamadas, en la sección de los registros, te salga un marcador de la fecha y que sea
   azul claro leve». Antes de cada día de la tabla de llamadas va una franja azul claro con «Hoy», «Ayer» o
   «lunes 19 de octubre» (el año solo si no es el actual; hora de la Ciudad de México) que se queda pegada debajo de la
   barra mientras bajas por ese día. .ll-dia-sep es el mismo marcador para listas que no son tabla.
   Se carga después de vistas.css (ahí sigue el resto de la vista de Llamadas).
   ===================================================================== */

/* Colores del marcador. El hub siempre es claro (tlc.css declara color-scheme: light, SPEC §8), así que hoy siempre
   se usan los primeros; light-dark() deja listos los oscuros por si algún día el hub declara también el modo oscuro
   (con el sistema en modo oscuro el hub y el marcador siguen claros, como todo lo demás).
   Contraste sobre el fondo --tlc-sky-claro (#EAF4FD): título 7.8:1, fecha 5.1:1 (AA). */
.ll-tab, .ll-dia-sep {
  --ll-dia-fondo: var(--tlc-sky-claro, #EAF4FD);
  --ll-dia-borde: #D6E8F8;
  --ll-dia-texto: #1F4C80;
  --ll-dia-fecha: #45698F;
  --ll-dia-icono: var(--tlc-sky, #5DA9E9);
}
@supports (color: light-dark(#000, #fff)) {
  .ll-tab, .ll-dia-sep {
    --ll-dia-fondo: light-dark(var(--tlc-sky-claro, #EAF4FD), #182A44);
    --ll-dia-borde: light-dark(#D6E8F8, #2B4568);
    --ll-dia-texto: light-dark(#1F4C80, #DCEBFB);
    --ll-dia-fecha: light-dark(#45698F, #A8C6E6);
    --ll-dia-icono: light-dark(var(--tlc-sky, #5DA9E9), #7DBCF0);
  }
}

/* ---------- la franja de cada día en la tabla ---------- */
/* (selector largo a propósito: le gana a .tabla th y a las esquinas redondeadas de la primera fila de tlc.css) */
.ll-tabla .tarjeta .tabla.ll-tab tr.ll-dia > th.ll-dia-celda {
  padding: 7px 20px;
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--ll-dia-texto);
  background: var(--ll-dia-fondo);
  /* Las rayas van como sombra interior y no como borde: con border-collapse, Firefox y Safari dejan los bordes en su
     lugar cuando la celda se pega arriba. */
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 var(--ll-dia-borde), inset 0 -1px 0 var(--ll-dia-borde);
  border-radius: 0;
}
/* El primer día va justo debajo de los títulos de las columnas, que ya traen su raya. */
.ll-tabla .tarjeta .tabla.ll-tab tbody.ll-grupo:first-of-type > tr.ll-dia > th.ll-dia-celda { box-shadow: inset 0 -1px 0 var(--ll-dia-borde); }
.tabla.clic.ll-tab tbody tr.ll-dia { cursor: default; }
.tabla.clic.ll-tab tbody tr.ll-dia:hover { background: transparent; }

/* Pegada debajo de la barra mientras bajas por ese día: solo cuando la tabla cabe a lo ancho (llamadas.js pone
   ll-cabe). Así la envoltura deja de deslizarse de lado y ya no es un contenedor con scroll; clip (y no visible) sigue
   recortando las esquinas redondeadas de la tarjeta. Sin ll-cabe la tabla se desliza de lado y la franja se queda en su
   lugar (pegada ahí se encimaría sobre las filas). En una tabla todas las franjas se pegan a la misma altura: cuando
   llega la del día siguiente, llamadas.js le baja el «top» a la pegada para que la nueva la empuje hacia arriba. */
.ll-tabla .tabla-envoltura.ll-cabe { overflow: visible; overflow: clip; }
.ll-tabla .tabla-envoltura.ll-cabe .tabla.ll-tab tr.ll-dia > th.ll-dia-celda {
  position: sticky;
  top: var(--barra-real, var(--alto-barra));
  z-index: 2;
}
/* Las franjas de días anteriores quedan pegadas debajo de la del día que estás viendo: transparentes (llamadas.js),
   para que su texto no se asome cuando la siguiente empuja a la pegada. El lector de pantalla las sigue encontrando. */
.ll-tabla .tabla-envoltura.ll-cabe .tabla.ll-tab tr.ll-dia > th.ll-dia-celda.ll-tapada { opacity: 0; }
/* Al recorrer las filas con el teclado, la fila con el foco no queda escondida debajo de la barra y de la franja. */
.ll-tabla .tabla-envoltura.ll-cabe .ll-tab tbody tr[data-id] { scroll-margin-top: calc(var(--barra-real, var(--alto-barra)) + 44px); }
/* Si la tabla se desliza de lado (tableta), el nombre del día no se va con las columnas. */
.ll-tab .ll-dia-enc { display: inline-block; position: sticky; left: 20px; max-width: 100%; }

/* Lo de adentro (igual en la tabla y en las listas) */
.ll-dia-marca { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; line-height: 1.35; }
.ll-dia-marca .ico { color: var(--ll-dia-icono); flex: none; }
.ll-dia-titulo { font-family: var(--tlc-titulo); font-weight: 800; font-size: 13px; color: var(--ll-dia-texto); }
.ll-dia-fecha { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tlc-sans); font-weight: 600; font-size: 12px; color: var(--ll-dia-fecha); }
/* Punto entre «Hoy» y la fecha: solo dibujo (sin texto); el lector de pantalla oye la coma escondida (.sr). */
.ll-dia-fecha::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }

/* ---------- el mismo marcador en una lista que no es tabla ---------- */
.ll-dia-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 13px; }
.ll-dia-sep:first-child { margin-top: 0; }
.ll-dia-sep .ll-dia-marca { padding: 4px 12px; border-radius: 999px; background: var(--ll-dia-fondo); border: 1px solid var(--ll-dia-borde); }
.ll-dia-sep::after { content: ''; flex: 1; height: 1px; background: var(--ll-dia-borde); }
/* Donde se reusa (ver INTEGRACION): la pestaña Llamadas de la ficha (.fi-lista, tarjetas con 10 px entre ellas) y
   «Últimas llamadas» del Panel (.lista, renglones con raya arriba y 20 px a los lados). */
.fi-lista > .ll-dia-sep { margin: 4px 0 0; }
.fi-lista > .ll-dia-sep:first-child { margin-top: 0; }
.lista > .ll-dia-sep { margin: 0; padding: 10px 20px 4px; }
.lista > .ll-dia-sep + .lista-item { border-top: 0; }

/* ---------- alto contraste (Windows): sin sombras, así que la franja lleva bordes; el punto, del color del texto ---------- */
@media (forced-colors: active) {
  .ll-tabla .tarjeta .tabla.ll-tab tr.ll-dia > th.ll-dia-celda { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .ll-dia-fecha::before { forced-color-adjust: none; background: CanvasText; }
  .ll-dia-sep::after { forced-color-adjust: none; background: CanvasText; }
}

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .ll-tabla .tarjeta .tabla.ll-tab tr.ll-dia > th.ll-dia-celda { padding: 7px 14px; }
  .ll-tab .ll-dia-enc { left: 14px; }
  .pn-lista > .ll-dia-sep { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   Llamadas · «Necesita a una persona» (ESPEC2 §5.9, 21-oct-2026): Sofía no cuelga y pasa a una persona.
   La tira roja arriba de la tabla (con el mismo aspecto que TLC.rojo.tira: .in-tira de intervencion.css) y su lista de
   pases; la fila roja con la píldora del motivo; los chips «→ WhatsApp» y «Llamada con asesor · jue 22 · 11:00»; la
   caja del pase en el cajón (roja con .in-banner, o la clara de lo que quedó). Además: el chip «Llamada con asesor» en
   el Calendario (calendario.js) y el interruptor «Pasar la llamada en vivo» de Sofía (sofia.js), que no tienen hoja
   propia. Nunca solo color: ícono + texto. Contrastes (WCAG AA): chip de WhatsApp #22603F sobre #E5F3EB 6.6:1 · chip de
   prueba #1A5F96 sobre #EAF4FD 6.3:1 · morado --tlc-llamada-texto sobre --tlc-llamada-fondo 8.1:1 (también el chip de la
   «Llamada con asesor», como en el Calendario: el dorado es el de «Sesión agendada» y una llamada con asesor no es
   una sesión).
   ===================================================================== */

/* ---------- tira roja y lista de pases ---------- */
.ll-persona .ll-tira { margin: 0 0 10px; }
.ll-persona .ll-tira[aria-expanded="true"] { margin-bottom: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.ll-persona .ll-tira-prueba { border-color: #C9DDF2; background: #EAF4FD; color: #1A5F96; }
.ll-persona .ll-tira-prueba > .ico, .ll-persona .ll-tira-prueba .in-tira-sep { color: #1A5F96; }
.ll-pases { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--tlc-persona-borde, #EFC2BF); border-radius: 12px; background: #fff; overflow: hidden; }
.ll-pase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 14px; }
.ll-pase + .ll-pase { border-top: 1px solid var(--tlc-border, #E7DCC3); }
.ll-pase-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.ll-pase-info b { font-weight: 800; color: var(--tlc-persona-texto, #8F2D29); }
.ll-pase-sep { color: var(--tlc-persona, #B83B36); }
.ll-pase-sit { font-weight: 600; }
.ll-pase-cuando { color: var(--tlc-tinta-3); font-size: 12px; }
.ll-pase-acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* ---------- la fila roja y los chips de lo que quedó ---------- */
.tabla.ll-tab tbody tr.ll-rojo > td { background: var(--tlc-persona-fondo, #FBE9E8); }
.tabla.ll-tab tbody tr.ll-rojo > td:first-child { box-shadow: inset 4px 0 0 var(--tlc-persona, #B83B36); }
.tabla.clic.ll-tab tbody tr.ll-rojo:hover > td { background: var(--tlc-persona-hover, #F8DFDD); }
.tabla.ll-tab tbody tr.ll-rojo .persona b { color: var(--tlc-persona-texto, #8F2D29); }
.ll-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
/* Una llamada que solo dejó la «Llamada con asesor»: su chip va en lugar de la píldora del resultado (llamadas.js). */
.ll-tab td > .ll-chips:first-child { margin-top: 0; }
.ll-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 22px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: normal; }
.ll-chip .ico { width: 12px; height: 12px; flex: none; }
a.ll-chip:hover { text-decoration: underline; text-underline-offset: 2px; }
a.ll-chip:focus-visible { outline: 2px solid var(--tlc-navy); outline-offset: 2px; }
.ll-chip-wa { background: #E5F3EB; color: #22603F; }
.ll-chip-cita { background: var(--tlc-llamada-fondo, #EFEAF8); color: var(--tlc-llamada-texto, #4E3391); }
.ll-chip-prueba { background: #EAF4FD; color: #1A5F96; }

/* ---------- la caja del pase en el cajón ---------- */
.ll-caja-rojo { margin: 0 0 16px; }
.ll-caja-sit { font-weight: 700; color: var(--tlc-persona-texto, #8F2D29); }
.ll-entendio { padding: 8px 10px; border-radius: 10px; background: var(--tlc-llamada-fondo, #EFEAF8); color: var(--tlc-llamada-texto, #4E3391); }
.ll-entendio small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tlc-llamada-texto, #4E3391); opacity: .9; }
.ll-caja-prueba { display: inline-flex; align-items: center; gap: 6px; color: #1A5F96; font-weight: 600; }
.ll-caja-pase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--tlc-border, #E7DCC3); border-left: 4px solid var(--tlc-llamada, #6D4BB8); border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.5; color: var(--tlc-tinta-2); }
.ll-caja-pase-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tlc-llamada, #6D4BB8); color: #fff; }
.ll-caja-pase-ic .ico { width: 16px; height: 16px; }
.ll-caja-pase-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.ll-caja-pase-cuerpo p { margin: 0; }
.ll-caja-pase-acc { display: flex; flex-direction: column; gap: 6px; }
.ll-caja-pase-acc:empty { padding: 0; }

/* ---------- Calendario: «Llamada con asesor» (citas tipo llamada_persona de calendario.js) ---------- */
.cl-chip-asesor { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-height: 17px; padding: 0 6px; border-radius: 999px;
  background: var(--tlc-llamada-fondo, #EFEAF8); color: var(--tlc-llamada-texto, #4E3391); font-size: 10.5px; font-weight: 800; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-chip-asesor .ico { width: 11px; height: 11px; flex: none; }
.cl-cita.llamada-persona { box-shadow: inset 0 0 0 1px rgba(109, 75, 184, .35); }
.cl-cita.llamada-persona .cl-cita-nombre .ico { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; color: var(--tlc-llamada, #6D4BB8); }
.cl-litem .info .cl-chip-asesor { margin: 2px 0 3px; }
.cl-ley-asesor { display: inline-flex; align-items: center; }
.cl-mini.asesor { background: var(--tlc-llamada-fondo, #EFEAF8); color: var(--tlc-llamada-texto, #4E3391); }
/* La cuenta del día en la lista del celular («2 sesiones y 1 llamada con asesor») baja entera de renglón si no cabe. */
.cl-ldia header { flex-wrap: wrap; row-gap: 2px; }
.cl-ldia header b, .cl-ldia header .gris { white-space: nowrap; }

/* ---------- Sofía: «Pasar la llamada en vivo» (Identidad y horario, junto al número de transferencia) ---------- */
.sf-en-vivo { align-items: flex-start; line-height: 1.45; color: var(--tlc-tinta-2); }
.sf-en-vivo .interruptor { margin-top: 1px; }
.sf-en-vivo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-en-vivo b { font-weight: 600; color: var(--tlc-navy); }
.sf-en-vivo small { font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }
.sf-en-vivo.no-disponible { cursor: default; }
.sf-en-vivo.no-disponible b { color: var(--tlc-tinta-3); }
.sf-en-vivo .interruptor:disabled { cursor: not-allowed; opacity: .55; }

/* ---------- alto contraste y celular ---------- */
@media (forced-colors: active) {
  .tabla.ll-tab tbody tr.ll-rojo > td:first-child { border-left: 4px solid CanvasText; }
  .ll-chip, .cl-chip-asesor { border: 1px solid CanvasText; }
}
@media (max-width: 640px) {
  /* En el celular la columna «Resultado» es angosta: la píldora roja muestra el ícono y su motivo («Factura»); «Necesita a
     una persona» se queda para el lector de pantalla (además del aria-label de la píldora), sin ocupar lugar. */
  .ll-tab .ll-chips .in-pildora { position: relative; }
  .ll-tab .ll-chips .in-pildora-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ll-pase { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .ll-pase-acc { justify-content: stretch; }
  .ll-pase-acc .btn { flex: 1 1 140px; justify-content: center; }
  .ll-caja-pase { grid-template-columns: auto minmax(0, 1fr); }
  .ll-caja-pase-acc { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ll-caja-pase-acc .btn { flex: 1 1 140px; justify-content: center; }
}