/* KliniApp — la aplicación en /crm
   Mismo sistema visual de la presentación: negro, hueso y el dorado de la marca. */

:root{
  /* ─────────────────────────────────────────────────────────────
     Blanco y negro. Sin colores de marca inventados.
     El acento no es un color: es el contraste. Lo que manda va en
     negro sobre blanco (o al revés de noche), y lo secundario se
     apaga bajando el contraste, nunca cambiando de tinte.
     La única excepción es el rojo, y no es decoración: avisa de
     quien pidió que no se le escriba. Si el rojo se usara para
     otra cosa, ese aviso dejaría de verse.
     ───────────────────────────────────────────────────────────── */
  --alerta:#C0392B; --alerta-f:#FBEAE7; --alerta-b:#E8C3BD;

  --blanco:#fff; --negro:#000;

  /* Los papeles: esto es lo único que cambia al pasar de día a noche. */
  --fondo:#F2F1EF;      /* el papel de la página */
  --sup:#fff;           /* la tarjeta */
  --sup2:#F7F6F4;       /* la tarjeta apagada: campos, filas alternas */
  --sup3:#EDECEA;       /* la tarjeta marcada: lo que pide atención */
  --sinleer:#E5E3DF;    /* la conversación sin leer: un escalón más que sup3 */
  --sup4:#FAF9F8;       /* la fila de lista */
  --lateral:#0A0A0A;    /* la barra lateral */
  --lateral-t:#F2F1EF;  /* su texto */

  --tinta:#111; --sec:#4A4A4A; --tenue:#8A8A8A; --apagado:#B4B4B4;
  --linea:#DCDBD8; --linea2:#E7E6E3; --linea3:#EDECEA; --pista:#E7E6E3;
  --chip:#E9E8E5;
  /* El papel de la cotización: blanco siempre, de día y de noche, porque no es
     una superficie de la aplicación sino la hoja que le llega a la paciente. */
  --papel:#FFFFFF; --papel-t:#111111; --papel-t2:#4A4A4A; --papel-t3:#8A8A8A;
  --papel-linea:#E4E3E0; --papel-suave:#F4F3F1;

  /* El acento: lo que se pulsa. De día, negro. */
  --acento:#111; --acento-t:#fff; --acento-b:#111; --acento-suave:#E9E8E5;

  /* Nombres viejos, conservados para no romper nada: ahora son grises. */
  --oro:#111; --oro-d:#111; --oro-m:#8A8A8A; --oro-l:#E9E8E5;
  --hueso:#F2F1EF;
  --ok:#3B3B3B; --ok-l:#E9E8E5; --warn:#3B3B3B; --warn-l:#E9E8E5;
  /* Solo para el botón de turno. No usar en ninguna otra parte: el sistema es
     monocromo y estos dos existen para que un estado se lea sin leer. */
  --dentro:#2E7D4F; --dentro-l:#E8F2EC; --dentro-b:rgba(46,125,79,.32);
  --fuera:#B0413A;  --fuera-l:#F8EAE9;  --fuera-b:rgba(176,65,58,.30);
  --alert:#C0392B; --alert-l:#FBEAE7; --info:#3B3B3B; --info-l:#E9E8E5;

  --sh-s:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --sh-m:0 2px 8px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.08);
  color-scheme:light;
}

/* ───────────── modo noche ─────────────
   El negro sube a ser el papel y el blanco pasa a ser el acento. Gris neutro,
   sin tinte cálido ni frío: la marca es blanco y negro. */
[data-tema="oscuro"]{
  --fondo:#0B0B0B;
  --sup:#151515;
  --sup2:#1C1C1C;
  --sup3:#242424;
  --sinleer:#2B2B2B;
  --sup4:#181818;
  --lateral:#000;
  --lateral-t:#F2F1EF;

  --tinta:#F2F1EF; --sec:#B4B4B4; --tenue:#8A8A8A; --apagado:#5E5E5E;
  --linea:#2E2E2E; --linea2:#262626; --linea3:#2E2E2E; --pista:#262626;
  --chip:#262626;

  /* De noche el acento se invierte: blanco sobre negro. */
  --acento:#F2F1EF; --acento-t:#0B0B0B; --acento-b:#F2F1EF; --acento-suave:#262626;

  --oro:#F2F1EF; --oro-d:#F2F1EF; --oro-m:#8A8A8A; --oro-l:#262626;
  --ok:#C9C9C9; --ok-l:#1F1F1F; --warn:#C9C9C9; --warn-l:#1F1F1F;
  --dentro:#7CC79A; --dentro-l:#15241A; --dentro-b:rgba(124,199,154,.30);
  --fuera:#E08E86;  --fuera-l:#261817;  --fuera-b:rgba(224,142,134,.28);
  --alert:#E8867A; --alert-l:#2A1614; --info:#C9C9C9; --info-l:#1F1F1F;
  --alerta:#E8867A; --alerta-f:#2A1614; --alerta-b:#5A2E29;

  --sh-s:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
  --sh-m:0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body.kaapp{
  background:var(--fondo); color:var(--tinta); min-height:100vh; min-height:100dvh; display:flex;
  font-family:var(--fuente); font-weight:400; -webkit-font-smoothing:antialiased;
}
/* Los títulos son la MISMA familia, solo con otro peso. Ver la nota de --fuente. */
h1,h2,h3{font-family:var(--fuente);font-weight:500;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit}

/* ───────────── barra lateral ───────────── */
.ka-side{
  width:var(--ancho-panel); flex:none; background:var(--lateral); color:var(--lateral-t);
  display:flex; flex-direction:column; padding:26px 16px 18px; position:sticky; top:0; height:100vh; height:100dvh;
}
/* Solo el isotipo, con aire alrededor. El nombre escrito al lado se quitó:
   la H ya ES la marca, y ponerla dos veces —dibujada y escrita, en dos
   tipografías y dos tamaños— se leía como un encabezado, no como un logotipo. */
.ka-marca{display:flex;align-items:center;padding:0 8px 26px}
.ka-logo{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.ka-side .ka-logo{width:46px;height:46px}
.ka-logo svg{width:auto;height:100%;display:block}
.ka-logo.grande{width:56px;height:56px;margin:0 auto 20px;color:var(--tinta)}
.ka-marca-t{font-family:var(--fuente);font-weight:500;font-size:19px;letter-spacing:.06em}
/* 🔴 El menú se lleva el alto que sobra y se desliza POR DENTRO.
   `min-height:0` no sobra: sin él, un hijo de un flex en columna no encoge por
   debajo de su contenido y el `overflow` nunca se activa. Y el `contain` evita
   que al llegar al final del menú el empujón siga de largo y se lleve la
   página —que con diez mil conversaciones detrás te manda al fondo de todo—. */
.ka-nav{
  display:flex; flex-direction:column; gap:2px;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
  /* Aire abajo para que la última entrada no quede pegada a la línea del pie. */
  padding-bottom:6px;
}
/* 🔴 3.120.0 · «Hay más abajo». Mientras quede menú por ver, una luz suave
   al final lo dice; al llegar al fondo se apaga sola. Sin esto, Reportes,
   Procedimientos, Tutoriales y Ajustes quedaban escondidos y nadie sabía que
   había que bajar POR DENTRO del menú (en Mac la barra ni se ve).
   La primera capa tapa la luz cuando ya no queda nada (se mueve con el
   contenido: `local`); la segunda es la luz, quieta abajo (`scroll`). */
.ka-nav{
  background:
    linear-gradient(rgba(0,0,0,0), var(--lateral) 70%) bottom / 100% 34px no-repeat local,
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.16)) bottom / 100% 26px no-repeat scroll;
}
.ka-nav::-webkit-scrollbar{width:6px}
.ka-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:99px}
.ka-nav::-webkit-scrollbar-track{background:transparent}

/* Submenús: Equipo → Chat del equipo · Reportes → Medición. */
.ka-nav-fam{display:flex; flex-direction:column; gap:2px}
.ka-nav-fam > summary{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  font-size:14px; color:rgba(246,243,240,.62); cursor:pointer; list-style:none;
  transition:background-color .15s ease,color .15s ease;
}
.ka-nav-fam > summary::-webkit-details-marker{display:none}
.ka-nav-fam > summary.dentro{color:#fff}
@media (hover:hover) and (pointer:fine){.ka-nav-fam > summary:hover{color:#fff;background:rgba(255,255,255,.05)}}
/* La flechita. Gira al abrir, en 160 ms: es la única pista de que el renglón
   esconde algo, y sin el giro no se sabe si se abrió o si no pasó nada. */
.ka-nav-v{
  margin-left:auto; width:8px; height:8px; flex:none; border:0 solid currentColor;
  border-right-width:1.6px; border-bottom-width:1.6px; opacity:.6;
  transform:rotate(-45deg); transition:transform .16s var(--ease-out);
}
.ka-nav-fam[open] > summary .ka-nav-v{transform:rotate(45deg)}
.ka-nav-fam > summary .ka-pill{margin-left:0}
/* Los hijos van indentados y con una guía a la izquierda: sin ella, abierto no
   se distingue de una entrada más del menú principal. */
.ka-nav-fam > a{
  margin-left:14px; padding-left:16px; font-size:13.5px;
  border-left:1px solid rgba(255,255,255,.12);
  border-top-left-radius:0; border-bottom-left-radius:0;
}
.ka-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  font-size:14px;color:rgba(246,243,240,.62);transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ka-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}}
.ka-nav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:500}
.ka-pill{margin-left:auto;background:var(--lateral-t);color:var(--lateral);font-size:10.5px;font-weight:500;
  padding:2px 8px;border-radius:99px}
/* El pie de la barra: sonido, modo día/noche y salir. Nada más.
   El nombre y el cargo vivían aquí repetidos y se quitaron — están arriba,
   en .ka-quien, que es donde se mira para saber con qué cuenta se entró. */
/* `flex:none` y no `margin-top:auto`: ahora el que se estira es el menú, y con
   el empujón automático el pie se iba a pelear con él por el mismo espacio. */
.ka-yo{flex:none;margin-top:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.ka-marca,.ka-quien{flex:none}
/* Aquí vivía `.ka-av`, el círculo de las iniciales del panel. Se quitó con el
   propio círculo: una regla sin nadie que la use es una que dentro de un mes
   alguien copia creyendo que hace falta. Las iniciales de las PACIENTES son
   `.ka-av-conv`, que sí siguen y están más abajo. */
.ka-yo-ajustes{
  display:flex; align-items:center; gap:10px; width:100%; margin:0 0 8px;
  padding:8px 10px; border-radius:10px; font-size:12.5px;
  color:rgba(241,237,233,.75); border:1px solid rgba(255,255,255,.18);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.ka-yo-ajustes .kao-ico{width:17px; height:17px}
.ka-yo-ajustes.on{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08)}
@media (hover:hover) and (pointer:fine){.ka-yo-ajustes:hover{color:#fff; border-color:rgba(255,255,255,.32)}}
.ka-salir{width:100%;padding:9px;border-radius:9px;font-size:12.5px;color:rgba(246,243,240,.5);
  border:1px solid rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){.ka-salir:hover{color:#fff;border-color:rgba(255,255,255,.3)}}

/* ───────────── zona principal ───────────── */
.ka-main{flex:1;min-width:0;padding:34px 38px 60px;max-width:1500px}
.ka-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.ka-top h1{font-size:38px;line-height:1.1;margin-top:4px}
.ka-sub{color:var(--tenue);font-size:13.5px;font-weight:300;margin-top:6px}
.ka-tenue{color:var(--tenue);font-size:12px;font-weight:300}
.ka-link{color:var(--oro-d);font-size:13px}
.ka-vacio{color:var(--tenue);font-size:13.5px;font-weight:300;padding:18px 0}
.ka-n{font-size:14px;font-weight:500}
@media (hover:hover) and (pointer:fine){.ka-n:hover{color:var(--oro-d)}}
.ka-acciones{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.ka-aviso{background:var(--ok-l);border:1px solid rgba(78,122,94,.28);color:var(--ok);
  border-radius:11px;padding:12px 18px;margin-bottom:20px;font-size:13.5px}

/* aviso de modo pruebas */
.ka-pruebas{background:var(--sup3);border:1px dashed var(--oro);border-radius:12px;
  padding:12px 18px;margin-bottom:20px;font-size:13px;color:var(--sec)}
.ka-pruebas b{color:var(--oro-d);font-weight:500}

/* botón de turno
   ─────────────────────────────────────────────────────────────
   La ÚNICA excepción de color de todo el sistema, y es a propósito.

   El resto del CRM es negro, blanco y el dorado de la marca. Este botón no:
   va verde cuando está en turno y rojo cuando no. Es lo que pidió Manoroz y
   tiene razón — «para que sepa que está en línea». Un turno apagado sin darse
   cuenta significa una mañana entera sin que le entre una sola paciente, y eso
   no se puede confiar a dos grises que se parecen. Se lee de reojo desde el
   otro lado del escritorio, que es justamente para lo que sirve el color. */
.ka-turno{display:flex;align-items:center;gap:9px;border-radius:11px;padding:10px 18px;
  font-size:13.5px;font-weight:600;background:var(--fuera-l);border:1px solid var(--fuera-b);color:var(--fuera)}
.ka-turno i{width:9px;height:9px;border-radius:50%;background:var(--fuera);display:block;flex:none}
.ka-turno.on{background:var(--dentro-l);border-color:var(--dentro-b);color:var(--dentro)}
.ka-turno.on i{background:var(--dentro);
  /* El punto verde respira, como el de «en línea» de cualquier chat. */
  animation:ka-turno-respira 2.4s ease-in-out 3}
@keyframes ka-turno-respira{0%,100%{box-shadow:0 0 0 0 rgba(46,125,79,.45)}50%{box-shadow:0 0 0 5px rgba(46,125,79,0)}}
@media (prefers-reduced-motion: reduce){ .ka-turno.on i{animation:none} }

/* métricas */
.ka-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.ka-kpi{background:var(--sup);border:1px solid var(--linea2);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-s)}
.ka-kpi.alerta{border-color:rgba(178,74,69,.32);background:var(--sup3)}
.ka-kpi .ka-l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.ka-kpi .ka-v{font-family:var(--fuente);font-weight:500;font-size:34px;line-height:1.05;letter-spacing:-.02em;margin-top:4px}

/* paneles */
.ka-panel{background:var(--sup);border:1px solid var(--linea2);border-radius:18px;padding:20px 24px;
  margin-bottom:18px;box-shadow:var(--sh-s)}
.ka-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--linea2)}
.ka-ph h2{font-size:22px}
.ka-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:1080px){.ka-cols{grid-template-columns:1fr}}

/* filas */
.ka-fila{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--linea3);
  border-radius:12px;background:var(--sup4);margin-bottom:9px}
.ka-fila.hot{border-color:var(--alert-l);background:var(--sup3)}
.ka-fila>div:first-child{flex:1;min-width:0}
.ka-fila form{display:inline}

/* ───── «Las citas»: el día entero, en orden ─────
   La hora va en una columna fija de ancho tabular. Sin ancho fijo, «9:00 am» y
   «11:30 am» empiezan los nombres a dos alturas distintas y la lista deja de
   leerse como una agenda para leerse como un montón. */
.ka-cita-fila{align-items:flex-start}
/* 🔴 El bloque de texto se lleva el espacio, y los botones se van a la derecha.
   `.ka-fila>div:first-child{flex:1}` ya no aplica aquí: el primer hijo pasó a
   ser la hora, así que el texto se quedaba sin estirar y los botones salían
   pegados al nombre en vez de alineados al borde — con lo que dos renglones
   seguidos tenían los botones a dos alturas distintas. */
.ka-cita-fila>div{flex:1; min-width:0}
.ka-cita-h{
  flex:none; width:74px; padding-top:1px;
  font-family:var(--fuente-ui); font-size:12.5px; font-weight:600; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Un encabezado de grupo, no un título de panel: separa «de días anteriores»,
   «hoy» y «mañana» sin convertir cada uno en una sección aparte. */
.ka-citas-t{
  font-family:var(--fuente-ui); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--apagado); font-weight:600;
  margin:16px 0 8px;
}
.ka-citas-t:first-of-type{margin-top:4px}
.ka-citas-t b{color:var(--sec)}
.ka-citas-vacio{margin:0 0 4px}
/* La anotación de la cita. Es lo que hay que saber ANTES de que la paciente
   entre, así que no puede leerse como un dato más de la ficha. */
/* La anotación de la cita. `inline-block` para que la caja mida lo que dice:
   a lo ancho del renglón parecía un campo vacío con una raya suelta al lado. */
.ka-cita-nota{
  display:inline-block; max-width:100%;
  margin-top:5px; padding:4px 9px; border-radius:6px;
  background:var(--sup3); border-left:2px solid var(--tenue);
  font-family:var(--fuente-ui); font-size:12px; line-height:1.4; color:var(--sec);
}
/* Ya marcada: se queda en su sitio cronológico pero apagada. Sacarla de la
   lista dejaría huecos —«¿y la de las nueve?»— y obligaría a acordarse de a
   quién ya se revisó. */
.ka-cita-lista{opacity:.6}
.ka-cita-ya{
  flex:none; font-family:var(--fuente-ui); font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:99px; white-space:nowrap;
}
/* «Vino» va en neutro y «No vino» en rojo, no en verde y rojo. El CRM es blanco
   y negro, y lo que hay que ver de lejos es la que NO llegó: es la única de las
   dos que deja trabajo pendiente. */
.ka-cita-ya.si{background:var(--ok-l); color:var(--ok)}
.ka-cita-ya.no{background:var(--alert-l); color:var(--alerta)}
/* Cancelada: ni vino ni faltó. Neutra y tachada, para que no se lea como falta. */
.ka-cita-ya.cancelada{background:var(--sup3); color:var(--tenue); text-decoration:line-through}

/* La categoría de cada cita del día: la franja de su color a la izquierda, como
   el borde del bloque en el calendario, y su cuadrito numerado al lado del
   detalle. Lo que se ve en la agenda es lo que se ve aquí. */
.ka-cita-concat{box-shadow:inset 3px 0 0 var(--cat); padding-left:12px}
.ka-cat-linea{display:inline; margin-right:4px}
.ka-cat-linea .ka-cat-t{display:inline}
.ka-cat-linea .ka-cat-n{width:16px; height:16px; font-size:9.5px; border-radius:4px; vertical-align:middle; position:relative; top:-1px; margin-right:5px}
/* La hora de fin, debajo de la de inicio y más chica. */
.ka-cita-h small{display:block; margin-top:2px; font-size:11px; font-weight:400; color:var(--tenue)}
.ka-cat-linea .ka-cat-t > span{font-size:12px; color:var(--sec); font-weight:500}
.ka-cat-linea .ka-cat-t > span::after{content:' ·'; color:var(--tenue)}

/* 🔴 La señal de que se marcó, en el sitio.

   Manoroz: *«debería aparecer una animación de que ya se marcó y listo»* —en
   vez de lo que hacía, que era llevarlo a la conversación—. Marcar el día son
   veinte renglones seguidos: lo único que hace falta es que el renglón conteste
   que sí, ahí mismo.

   Dura menos de medio segundo a propósito. Una animación de un segundo se ve
   bonita la primera vez y estorba las diecinueve siguientes. */
@keyframes ka-marcada{
  0%{transform:scale(.72); opacity:0}
  62%{transform:scale(1.07); opacity:1}
  100%{transform:scale(1); opacity:1}
}
@keyframes ka-fila-marcada{
  0%{box-shadow:inset 0 0 0 1.5px var(--acento)}
  100%{box-shadow:inset 0 0 0 1.5px transparent}
}
.ka-cita-ya.ka-nueva{animation:ka-marcada .34s cubic-bezier(.2,.9,.3,1.25)}
/* Si no se pudo guardar, se dice en el renglón: una ventana del navegador tapa
   la lista y hay que cerrarla para seguir marcando. */
.ka-cita-mal{
  flex:none; font-family:var(--fuente-ui); font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:99px; white-space:nowrap;
  background:var(--alert-l); color:var(--alerta);
}
.ka-cita-marcando{animation:ka-fila-marcada .9s ease forwards}
/* Quien pidió menos movimiento recibe el cambio igual, sin el movimiento. */
@media (prefers-reduced-motion:reduce){
  .ka-cita-ya.ka-nueva,.ka-cita-marcando{animation:none}
}
/* El resumen del día: pequeño y al final, como él lo pidió. */
.ka-citas-resumen{
  margin:12px 0 2px; padding-top:11px; border-top:1px solid var(--linea3);
  font-family:var(--fuente-ui); font-size:12.5px; color:var(--tenue);
}
.ka-citas-resumen b{color:var(--tinta); font-size:13.5px}
.ka-citas-resumen b.ka-r-t{color:var(--alerta)}

/* ══════════════════════════════════════════════════════════════════
   EL RESUMEN DEL DÍA, EN REPORTES.

   Manoroz: *«debería haber un resumen por día, sobre todo para
   administradores, donde puedan ver porcentaje quién sí vino y quién no
   vino a la cita durante el día»*.

   Un número grande a la izquierda y una barra de dos tramos a la
   derecha. Nada de semáforo verde y rojo: «vino» va en el oro de la
   marca y «no vino» en rojo, que es la misma regla que ya siguen los
   chips de cada renglón —lo que hay que ver de lejos es la falta—.
   ══════════════════════════════════════════════════════════════════ */
.ka-asis{display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:6px 0 18px; border-bottom:1px solid var(--linea3); margin-bottom:6px}
.ka-asis-n{flex:none; text-align:center; min-width:104px}
.ka-asis-g{font-family:var(--fuente-ui); font-size:44px; font-weight:300;
  line-height:1; letter-spacing:-.02em; color:var(--tinta)}
.ka-asis-g small{font-size:20px; font-weight:300; color:var(--tenue); margin-left:2px}
.ka-asis-b{flex:1 1 260px; min-width:0}
.ka-asis-tr{display:flex; height:12px; border-radius:6px; overflow:hidden;
  background:var(--pista)}
.ka-asis-tr i{display:block; height:12px; transition:width .3s}
.ka-asis-tr i.si{background:var(--oro)}
.ka-asis-tr i.no{background:var(--alerta)}
.ka-asis-l{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:12px;
  font-family:var(--fuente-ui); font-size:12.5px; color:var(--tenue)}
.ka-asis-l b{color:var(--tinta); font-size:14px; font-weight:500}
.ka-asis-l span.ka-r-t,.ka-asis-l span.ka-r-t b{color:var(--alerta)}
.ka-asis-t{margin-top:4px}
/* Las dos tablas del panel son dos preguntas distintas —«¿cómo le fue a cada
   asesora?» y «¿quién exactamente?»— y pegadas se leen como una sola tabla de
   doce columnas. Un rótulo pequeño las separa sin meter otro panel. */
.ka-asis-h{font-family:var(--fuente-ui); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tenue);
  margin:26px 0 0}
/* Las flechas para moverse de día, al lado del título del panel. */
.ka-dias{display:flex; align-items:center; gap:6px; flex:none}
@media (max-width:560px){
  .ka-asis{gap:14px}
  .ka-asis-g{font-size:36px}
  /* Centrado, el número quedaba flotando a media sangría con todo lo demás
     alineado a la izquierda. */
  .ka-asis-n{text-align:left; min-width:0}
}

/* 🔴 En el teléfono los botones bajan a su propio renglón.
   A lo ancho, la hora y dos botones dejaban unos 120 px para el nombre: la
   paciente salía cortada y la anotación caía a una palabra por línea. La
   pregunta es la misma que en el computador —«¿quién es, y vino o no?»— pero
   no caben en la misma fila, y apretarlos hace que no se lea ninguno. */
@media (max-width:560px){
  .ka-cita-fila{flex-wrap:wrap; gap:10px 12px}
  .ka-cita-h{width:auto; flex:0 0 62px}
  .ka-cita-fila>div{flex:1 1 calc(100% - 78px)}
  .ka-cita-fila form{flex:1 1 42%}
  .ka-cita-fila form .ka-btn{width:100%}
  /* El resultado se queda arriba, junto al nombre: ahí no compite con nada. */
  .ka-cita-ya{margin-left:auto; align-self:flex-start}
}

/* tablas */
.ka-tabla{width:100%;border-collapse:collapse;font-size:13px}
.ka-tabla th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--apagado);font-weight:500;padding:0 12px 10px 0}
.ka-tabla td{padding:13px 12px 13px 0;border-top:1px solid #F4F1EC;color:var(--sec);vertical-align:middle}
.ka-datos td{padding:9px 12px 9px 0}

/* chips */
.ka-chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 12px;font-size:11.5px;
  font-weight:500;background:var(--chip);color:var(--sec);white-space:nowrap}
.ka-chip.ka-t{background:var(--oro-l);color:var(--oro-d)}
.ka-chip.ka-g{background:var(--ok-l);color:var(--ok)}
.ka-chip.ka-y{background:var(--warn-l);color:var(--warn)}
/* El "Nuevo lead" ya no va en rojo: el rojo es del aviso de no contactar y de
   nada más. Los estados se distinguen por peso y por borde, no por tinte. */
.ka-chip.ka-r{background:var(--chip);color:var(--tinta);font-weight:600;box-shadow:inset 0 0 0 1px var(--linea)}
.ka-chip.ka-b{background:var(--info-l);color:var(--info)}

/* botones */
.ka-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  padding:10px 18px;font-size:13.5px;font-weight:500;background:var(--sup);color:var(--sec);
  border:1px solid var(--linea);transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ka-btn:hover{border-color:var(--oro);color:var(--oro-d)}}
.ka-btn.ka-oro{background:var(--acento);border-color:var(--acento-b);color:var(--acento-t)}
@media (hover:hover) and (pointer:fine){.ka-btn.ka-oro:hover{background:var(--oro-d)}}
.ka-btn.ka-wa{background:var(--ok-l);border-color:rgba(78,122,94,.3);color:var(--ok)}
.ka-btn.ka-mini{padding:6px 12px;font-size:12px;border-radius:9px}
.ka-btn.ka-lg{padding:14px 22px;font-size:15px;width:100%}

/* formularios */
.ka-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:16px}
.ka-form label{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--tenue);
  letter-spacing:.04em;text-transform:uppercase}
input[type=text],input[type=search],input[type=password],input[type=date],select,textarea{
  width:100%;border:1px solid var(--linea);border-radius:11px;padding:11px 14px;font-size:14px;
  background:var(--sup2);color:var(--tinta);font-weight:400;text-transform:none;letter-spacing:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--oro);background:var(--sup);
  box-shadow:0 0 0 3px rgba(180,103,74,.12)}
textarea{margin-bottom:14px;line-height:1.55;resize:vertical}
.ka-filtros{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.ka-filtros input[type=search]{max-width:440px}
.ka-filtros select{max-width:250px}

/* kanban */
.ka-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
@media (max-width:1250px){.ka-kanban{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.ka-kanban{grid-template-columns:1fr}}
.ka-card{border:1px solid var(--linea3);border-radius:13px;padding:13px;background:var(--sup4);margin-bottom:11px}
.ka-card.hot{border-color:var(--alert-l);background:var(--sup3)}
.ka-card-btns{display:flex;gap:7px;margin-top:10px}
.ka-card-btns .ka-btn{width:100%;margin:0}
.ka-card-btns form{flex:1;display:block}
.ka-card form{display:block}

/* línea de tiempo */
.ka-tl{display:flex;flex-direction:column;max-height:520px;overflow:auto}
.ka-tli{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid #F4F1EC;font-size:13.5px}
.ka-tli b{font-weight:500}
.ka-punto{width:8px;height:8px;border-radius:50%;background:var(--oro);flex:none;margin-top:6px}

/* ───────────── pantalla de acceso ───────────── */
body.kaapp-acceso{background:var(--lateral);align-items:center;justify-content:center;padding:20px}
.ka-acceso{width:100%;max-width:400px;text-align:center}
.ka-acceso-caja{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:40px 34px;backdrop-filter:blur(6px)}
.ka-acceso h1{font-size:40px;color:var(--lateral-t)}
.ka-acceso p{color:rgba(246,243,240,.55);font-size:13.5px;font-weight:300;margin:8px 0 26px;line-height:1.5}
.ka-acceso label{display:flex;flex-direction:column;gap:7px;text-align:left;margin-bottom:14px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,240,.5)}
.ka-acceso input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.ka-acceso input:focus{background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(180,103,74,.25)}
.ka-acceso .ka-aviso{background:rgba(192,57,43,.16);border-color:rgba(192,57,43,.42);color:#E8867A}
.ka-olvido{display:inline-block;margin-top:18px;font-size:12.5px;color:rgba(246,243,240,.45)}
@media (hover:hover) and (pointer:fine){.ka-olvido:hover{color:var(--oro-m)}}
.ka-pie{margin-top:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,243,240,.28)}

/* móvil */

/* ---------- conversación ---------- */
.ka-listo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--ok-l);border:1px solid rgba(78,122,94,.28);border-radius:14px;
  padding:14px 18px;margin-bottom:20px;font-size:13.5px;color:var(--ok)}
.ka-chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;margin-bottom:16px;padding-right:4px}
.ka-burbuja{max-width:82%;border-radius:16px;padding:10px 14px;font-size:13.5px;line-height:1.55;
  border:1px solid var(--linea2);background:var(--sup2)}
.ka-burbuja span{display:block;margin-top:5px;font-size:11px}
.ka-burbuja.ka-entrada{align-self:flex-start;border-bottom-left-radius:5px}
.ka-burbuja.ka-salida{align-self:flex-end;background:var(--sup3);border-color:var(--linea);
  border-bottom-right-radius:5px}


/* ---------- embudo y barras ---------- */
.ka-barras{display:flex;flex-direction:column;gap:14px}
.ka-barra{display:grid;grid-template-columns:220px 1fr 52px;align-items:center;gap:16px;
  font-size:14px;color:var(--sec)}
.ka-barra .ka-tr{display:block;height:10px;border-radius:6px;background:var(--pista);overflow:hidden}
.ka-barra .ka-tr i{display:block;height:10px;border-radius:6px;background:var(--oro);
  min-width:2px;transition:width .3s}
.ka-barra b{text-align:right;color:var(--tinta);font-weight:500;font-size:15px}
@media (max-width:720px){
  .ka-barra{grid-template-columns:1fr 44px;gap:8px}
  .ka-barra .ka-tr{grid-column:1 / -1;order:3}
}

/* Aquí vivía una barra lateral que en pantalla chica se volvía una fila
   horizontal con desplazamiento. La reemplaza el cajón de más abajo: una fila
   de pestañas que se arrastra de lado esconde la mitad del menú y estiraba la
   página entera a 788 píxeles en un teléfono de 390. */

/* ══════════════════════════════════════════════════════════════════
   LEGIBILIDAD — pedido en la reunión del 12 de agosto de 2026.

   El equipo pasa el día leyendo nombres, teléfonos y estados en
   pantalla. La tipografía de la marca es preciosa para una portada,
   pero cansa cuando hay que leer cien filas seguidas.

   Regla que se aplica aquí: la fuente de la marca se queda en los
   títulos y en la identidad; todo lo que hay que LEER pasa a una
   fuente de sistema, más grande y con más aire.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ══════════════════════════════════════════════════════════════════
     🔴 UNA SOLA TIPOGRAFÍA, Y EN UN SOLO SITIO.
     ══════════════════════════════════════════════════════════════════
     Manoroz, mirando la pantalla: «me estás cambiando la tipografía…
     nosotros solamente tenemos una tipografía y tenemos una familia de
     esa dicha tipografía. Me está apareciendo Cormorant Garamond, pero
     esa tipografía no la estamos usando».

     Tenía razón, y de hecho había TRES mezcladas: Jost declarada en el
     body, una fuente de sistema que la pisaba dos bloques más abajo, y
     Cormorant Garamond en los títulos, el logotipo y los números
     grandes. Tres familias en una pantalla no son un estilo: son un
     descuido que se nota.

     Ahora hay una sola, aquí, y todo lo demás la hereda. Los títulos se
     distinguen por PESO y por tamaño, no por familia — que es como se
     hace cuando la marca tiene una sola tipografía con su familia de
     pesos. Cambiarla es cambiar este renglón.
     ══════════════════════════════════════════════════════════════════ */
  --fuente:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* El ancho del panel de la izquierda, en un solo sitio.
     El cajón de notificaciones se abre pegado a él, así que los dos números
     tienen que ser el mismo: escritos por separado, mover el panel un día
     dejaría el cajón flotando encima o despegado, y nadie relacionaría una cosa
     con la otra. */
  --ancho-panel:232px;

  /* Nombre viejo, conservado para no tener que tocar sesenta reglas: es
     la misma familia. */
  --fuente-ui:var(--fuente);
}

body.kaapp{
  font-family:var(--fuente);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* Los títulos de sección vuelven a la fuente de trabajo: son etiquetas,
   no portadas. El título grande de cada pantalla sí conserva la marca. */
.ka-ph h2{font-family:var(--fuente-ui);font-size:17px;font-weight:600;letter-spacing:0}
.ka-top h1{font-size:34px;letter-spacing:-.01em}

/* Texto corriente */
.ka-sub{font-size:15px;font-weight:400;line-height:1.5}
.ka-tenue{font-size:13.5px;font-weight:400}
.ka-vacio{font-size:15px;font-weight:400}
.ka-link{font-size:14.5px}
.ka-aviso,.ka-listo,.ka-pruebas{font-size:14.5px;line-height:1.5}

/* Las tablas son lo que más se lee: más grandes y con más aire entre filas */
.ka-tabla{font-size:15px}
.ka-tabla th{font-size:11.5px;letter-spacing:.08em;color:var(--tenue)}
.ka-tabla td{padding-top:15px;padding-bottom:15px;line-height:1.45}
.ka-tabla b{font-weight:600}

/* Etiquetas de formulario y de tarjeta: se leían demasiado pequeñas */
.ka-form label{font-size:12.5px;letter-spacing:.04em}
.ka-kpi .ka-l{font-size:12px;letter-spacing:.06em}
.ka-wrap input,.ka-wrap select,.ka-wrap textarea,
.kaapp input,.kaapp select,.kaapp textarea{font-size:16px}

/* Botones y chips */
.ka-btn{font-size:14.5px;padding:11px 19px}
.ka-btn.ka-mini{font-size:13px;padding:7px 13px}
.ka-chip{font-size:12.5px;padding:5px 13px}

/* Barra lateral */
.ka-nav a{font-size:15px}
/* El nombre y el cargo del pie ya no existen: no se repiten aquí abajo.
   Los de arriba (.ka-quien) llevan su propio tamaño, más adelante. */

/* Conversación y línea de tiempo */
.ka-tli{font-size:14.5px;line-height:1.5}
.ka-burbuja{font-size:14.5px}
.ka-barra{font-size:15px}

/* Los números grandes de las tarjetas iban en la tipografía de la marca, y ahí
   el 1 parece una I y el 0 parece una O. Justo lo que se pidió evitar: pasan a
   la fuente de trabajo, que no deja lugar a dudas. */
.ka-kpi .ka-v{
  font-family:var(--fuente-ui);
  font-size:38px; font-weight:300; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}

/* ============================================================ la bandeja
   Tres columnas: quién escribió, la conversación, y quién es esa persona.
   Es la pantalla donde las asesoras van a pasar el día, así que ocupa todo
   el alto de la ventana y solo se mueve el hilo del centro. */

.ka-bandeja{
  display:grid; grid-template-columns:300px minmax(0,1fr) 310px; gap:16px;
  height:calc(100vh - 190px); height:calc(100dvh - 190px); min-height:520px;
}
.ka-bandeja > *{
  background:var(--sup); border:1px solid var(--linea2); border-radius:18px;
  box-shadow:var(--sh-s); overflow:hidden; min-width:0;
}

/* --- columna 1: la lista --- */
.ka-lista-conv{overflow-y:auto}
.ka-conv{
  display:flex; gap:11px; padding:13px 15px; text-decoration:none; color:var(--tinta);
  border-bottom:1px solid var(--linea2); transition:background .12s;
}
/* 🔴 SIN ESTO EL BUSCADOR NO ESCONDE NADA.
   `[hidden]` del navegador es `display:none` con especificidad de atributo, y
   `.ka-conv{display:flex}` de aquí arriba le gana. El JavaScript ponía
   `fila.hidden = true` y la fila seguía ahí tan tranquila — o sea, exactamente
   el fallo que se estaba arreglando. Va con !important a propósito: es la
   regla que decide si una fila existe o no. */
.ka-conv[hidden]{display:none !important}
@media (hover:hover) and (pointer:fine){.ka-conv:hover{background:var(--sup2)}}
.ka-conv.on{background:var(--sup3); box-shadow:inset 3px 0 0 var(--oro)}

/* ══════════════════════════════════════════════════════════════════
   SIN LEER — lo que le remitieron y lo que acaba de entrar.

   Manoroz: *«cuando se remite el contacto necesito que aparezca como
   cuando no se ha leído una conversación… que le aparezcan de primeras
   y como que no ha leído hasta que ella la lea»*, y después *«hagámoslo
   con las remitidas y con las conversaciones nuevas»*.

   Las tres señales de WhatsApp a la vez, porque una sola no basta: la
   fila sube arriba (eso lo hace la consulta), el renglón se pone en
   negrita y aparece el punto a la derecha.

   🔴 El punto va en el ACENTO, jamás en rojo. En este CRM el rojo
   significa «pidió que no se le escriba» —está escrito en la cabecera
   de este archivo— y si se usara también para «sin leer», ese aviso
   dejaría de verse. WhatsApp usa verde porque su marca es verde; aquí
   el acento es el contraste.
   ══════════════════════════════════════════════════════════════════ */
/* «Que salgan subrayadas»: el fondo sube un escalón propio (--sinleer), más
   marcado que el de la fila abierta, y lleva una raya de acento a la
   izquierda. Así se distingue de reojo sin tener que leer nada. */
.ka-conv-sinleer{background:var(--sinleer); box-shadow:inset 3px 0 0 var(--acento)}
@media (hover:hover) and (pointer:fine){.ka-conv-sinleer:hover{background:var(--sinleer)}}
.ka-conv-sinleer .ka-conv-l1 b{font-weight:700}
.ka-conv-sinleer .ka-conv-l2{color:var(--tinta); font-weight:500}
/* La hora también, como WhatsApp la pinta del color del globo. */
.ka-conv-sinleer .ka-conv-hora{color:var(--tinta); font-weight:600}
.ka-conv-punto{
  flex:none; width:10px; height:10px; border-radius:99px;
  background:var(--acento); align-self:center; margin-left:8px;
}
/* Con número: el globo de WhatsApp. Crece a lo ancho para «12» o «99+»
   sin dejar de ser redondo con uno solo. */
.ka-conv-cuenta{
  width:auto; min-width:22px; height:22px; padding:0 7px; box-sizing:border-box;
  color:var(--acento-t); font-family:var(--fuente-ui); font-size:11.5px;
  font-weight:700; line-height:22px; text-align:center; letter-spacing:0;
}
/* La abierta manda sobre la marca: si las dos pintaran el fondo, no se
   sabría cuál se está leyendo. */
.ka-conv-sinleer.on{background:var(--sup3)}
/* 🔴 El punto se queda aunque la conversación esté abierta. Antes se
   escondía en la abierta, y al pulsar «Sin leer» la página volvía y abría
   SOLA esa misma conversación (es la primera de la lista): el punto
   desaparecía y parecía que el botón no había hecho nada. Si está marcada,
   se ve; abrirla de verdad (un clic) es lo que la quita. */
.ka-conv-c{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.ka-conv-l1{display:flex; align-items:baseline; gap:8px}
.ka-conv-l1 b{
  font-family:var(--fuente-ui); font-size:14.5px; font-weight:600; letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.ka-conv-l2{
  font-family:var(--fuente-ui); font-size:13px; font-weight:400; color:var(--sec);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-conv-l3{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ka-conv-l3 i{
  font-style:normal; font-size:11.5px; line-height:1.7; color:var(--tenue);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px;
}
.ka-conv-l3 .ka-chip{font-size:11px; padding:3px 9px}
.ka-espera{
  font-style:normal; font-size:11px; font-weight:500; color:var(--oro-d);
  background:var(--oro-l); border-radius:20px; padding:2px 8px; flex:none;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-idioma{
  font-style:normal !important; font-size:10px !important; font-weight:600;
  letter-spacing:.08em; color:#fff !important; background:var(--lateral);
  border-radius:4px; padding:2px 6px; flex:none;
}
/* De qué país escribe. Va con el borde marcado y sin relleno, para que se
   distinga del idioma sin competir con él: son dos datos distintos. */
.ka-pais{
  font-style:normal !important; font-size:10px !important; font-weight:600;
  letter-spacing:.08em; color:var(--sec) !important;
  border:1px solid var(--linea); border-radius:4px; padding:1px 5px; flex:none;
}
.ka-av-conv{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--oro-l); color:var(--oro-d);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fuente-ui); font-size:13.5px; font-weight:600; letter-spacing:.02em;
}
.ka-av-conv.grande{width:46px;height:46px;font-size:16px}

/* --- columna 2: el chat --- */
.ka-conversa,.ka-chat-vacio{display:flex; flex-direction:column}
.ka-chat-vacio{align-items:center; justify-content:center}
.ka-chat-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--linea2); flex:none;
}
.ka-chat-cab b{font-family:var(--fuente-ui); font-size:15.5px; font-weight:600; display:block}
.ka-chat-cab .ka-tenue{display:block; margin-top:3px}
/* Al revés a propósito: así la conversación arranca abajo, en el último
   mensaje, como cualquier chat, y sin necesidad de nada más que CSS.
   Los mensajes se pintan del más nuevo al más viejo y se ven al derecho. */
.ka-chat-hilo{
  flex:1; overflow-y:auto; padding:20px;
  display:flex; flex-direction:column-reverse; gap:10px;
  background:var(--sup2);
}
/* «Ver los mensajes anteriores»: va al final del marcado y el column-reverse
   lo deja arriba, que es donde uno lo busca al subir. */
.ka-hilo-antes{margin:4px 0 8px; text-align:center; font-size:12.5px}
.ka-chat-hilo .ka-burbuja{font-family:var(--fuente-ui); font-size:14px}
.ka-trad{
  margin-top:7px; padding-top:7px; border-top:1px dashed var(--linea);
  font-size:13px; color:var(--sec); font-style:italic;
}
.ka-trad b{font-style:normal; font-weight:600; color:var(--oro-d)}
.ka-chat-pie{flex:none; padding:12px 18px 16px; border-top:1px solid var(--linea2); background:var(--sup)}
/* El campo de escribir, como el de WhatsApp: una línea en reposo, y crece con
   el texto hasta un tope. Pasado el tope se desliza por dentro.

   `resize:none` a propósito: con el tirador de la esquina el campo se quedaba
   a la altura que alguien le dejó una vez, y a partir de ahí ya no crecía ni
   encogía solo. Dos maneras de cambiar el mismo alto siempre pelean.

   El tope es una FRACCIÓN de la pantalla, no un número de píxeles: en el
   computador caben siete renglones; en el teléfono, con el teclado subido, esos
   mismos píxeles no dejarían ver el chat. */
/* El alto del campo de escribir se decide en UN SOLO SITIO: `.ka-barra-msg
   textarea`, más abajo. Aquí solo se quita el margen que traen los campos
   normales del formulario.

   🔴 Estuvo escrito en los dos y ganaba el otro sin que se notara: subir el tope
   aquí no hacía absolutamente nada. Es el mismo enredo de siempre — dos reglas
   para la misma medida terminan diciendo cosas distintas, y la que manda es la
   que uno no está mirando. */
.ka-chat-pie textarea{margin-bottom:0}
.ka-chat-acciones{display:flex; gap:9px; margin-top:10px; flex-wrap:wrap}
.ka-aviso-trad{
  background:var(--sup3); border:1px solid var(--oro-l); border-radius:12px;
  padding:9px 13px; margin-bottom:11px;
  font-family:var(--fuente-ui); font-size:13px; color:var(--sec); line-height:1.5;
}
.ka-aviso-trad b{color:var(--oro-d); font-weight:600}

/* --- columna 3: la ficha rápida --- */
.ka-ficha-rapida{overflow-y:auto; padding:18px}
/* La barra con el título y la ✕ es solo del cajón del teléfono: en el
   escritorio la ficha es una columna fija y no se cierra. */
.ka-fr-barra{display:none}
.ka-solo-movil{display:none}

/* ─── los cajones del chat: agendar y la nota ───────────
   Entran por el costado derecho, encima del chat, en el teléfono Y en el
   computador. Antes colgaban de un botón como desplegable: cuatro campos —uno
   una fecha con hora— colgando de la esquina de una barra estrecha se salen de
   la pantalla en el teléfono y se leen mal en el computador. */
.ka-cajon{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(92vw, 400px); height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--sup); border-left:1px solid var(--linea);
  box-shadow:-18px 0 44px rgba(0,0,0,.34);
  transform:translateX(101%); visibility:hidden;
  transition:transform .24s ease, visibility .24s;
  padding:0 18px calc(24px + env(safe-area-inset-bottom));
  padding-top:env(safe-area-inset-top);
}
.ka-cajon.abierta{transform:none; visibility:visible}
@media (prefers-reduced-motion: reduce){ .ka-cajon{transition:none} }
.ka-cajon .ka-fr-barra{
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:2; margin:0 -18px 14px;
  padding:13px 18px; background:var(--sup);
  border-bottom:1px solid var(--linea2);
}
.ka-cajon-cuerpo label{display:block; margin-bottom:12px; font-size:12.5px; color:var(--tenue)}
.ka-cajon-cuerpo input[type="datetime-local"],
.ka-cajon-cuerpo input[type="text"],
.ka-cajon-cuerpo textarea{
  width:100%; margin-top:4px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
}
.ka-cajon-cuerpo .ka-btn{width:100%; justify-content:center; margin-top:4px}
.ka-campo-t{margin:0 0 6px; font-size:12.5px; color:var(--tenue); font-family:var(--fuente-ui)}

/* ─── elegir la clase de cita viendo el color ──────────
   El color es lo que después se lee en la rejilla de un vistazo, mucho antes
   que el texto. En una lista desplegable no se veía al elegirlo: había que
   acordarse de que cirugía era la roja. */
.ka-etiqs{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.ka-etiq{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px 7px 10px; border-radius:99px;
  border:1px solid var(--linea); background:var(--sup2);
  font-family:var(--fuente-ui); font-size:13px; color:var(--sec);
  margin:0 !important;
}
.ka-etiq input{position:absolute; opacity:0; width:0; height:0}
/* `display:block` no sobra: un <i> es en línea, y una caja en línea ignora el
   ancho y el alto. Sin esto el punto de color medía cero y las pastillas salían
   solo con el texto — justo lo que se quería arreglar. */
.ka-etiq i{
  display:block; width:11px; height:11px; border-radius:50%;
  background:var(--tinte); flex:none;
}
/* Elegida: se tiñe con su propio color, en suave, y se perfila con él. Así la
   respuesta de la pantalla es del color que se acaba de poner. */
.ka-etiq:has(input:checked){
  border-color:var(--tinte); color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--tinte);
}
.ka-etiq:has(input:focus-visible){outline:2px solid var(--oro); outline-offset:2px}

/* ─── las categorías de la agenda, numeradas ──────────────
   Manoroz: *«numerarlos… una palabra, máximo dos, y si hay que agregarle algún
   texto descriptivo que sea en una letra mucho más chiquita, que se vea
   organizada»*.

   El cuadrito lleva el NÚMERO sobre el COLOR exacto de la agenda: es la muestra
   y el número a la vez, y se lee igual en el formulario, en el filtro, en la
   franja de abajo y en la lista del día. La letra de encima la decide el
   servidor (`KLINIAPP_Agenda::tinta_sobre`): blanca, salvo en el amarillo. */
.ka-cat-n{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px;
  background:var(--tinte, var(--apagado)); color:var(--cat-t, #fff);
  font-family:var(--fuente-ui); font-size:11px; font-weight:600; font-style:normal;
  font-variant-numeric:lining-nums tabular-nums; line-height:1;
}
/* Sin número: la valoración y lo que va sin color. Un cuadrito vacío con el
   azul de la agenda, que es como se ve allá. */
.ka-cat-n:empty, .ka-cat-n-sin{background:#4285F4; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.ka-cat-t{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.ka-cat-t > span{font-family:var(--fuente-ui); font-size:12.5px; font-weight:500; color:var(--sec)}
.ka-cat-t small{
  display:block; margin-top:2px; font-size:10.5px; line-height:1.3;
  color:var(--tenue); font-weight:400;
}

/* El formulario: dos columnas de tarjetas, en vez de una ristra de pastillas.
   Con el detalle debajo ya no caben en una línea, y en dos columnas se leen de
   arriba abajo como la lista del consultorio. */
.ka-cats{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px}
.ka-cats .ka-cat{
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 9px; border-radius:10px; min-width:0;
}
.ka-cat-sin{--tinte:#4285F4}
.ka-cats .ka-cat:has(input:checked) .ka-cat-t > span{color:var(--tinta)}
/* La de antes («Otro») no se ofrece: solo se ve si la cita ya la tenía. */
.ka-etiq-vieja:not(:has(input:checked)){display:none}
@media (max-width:380px){.ka-cats{grid-template-columns:1fr}}
.ka-fr-cab{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.ka-fr-cab b{font-family:var(--fuente-ui); font-size:15px; font-weight:600; display:block}
.ka-fr-cab .ka-link{display:inline-block; margin-top:3px}
.ka-ficha-rapida .ka-datos td{font-size:13px; padding:8px 6px}

/* Quién es ella, antes que sus datos sueltos. Lo que necesita va marcado; su
   historia, en gris, para leerla de una pasada sin que compita con el chat. */
.ka-fr-humano{
  margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:var(--alerta-f); border:1px solid var(--alerta-b);
}
.ka-fr-humano b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--alerta)}
.ka-fr-humano span{display:block; font-size:13px; margin-top:4px; color:var(--tinta)}
.ka-fr-historia{margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--sec)}

/* Lo que se ha hecho, confirmado por una persona. Las combinadas van en un solo
   renglón: una mamoplastia con lipo el mismo día es una cirugía, no dos cosas. */
/* La vista previa de la ficha lateral: la nota del equipo y las cotizaciones
   que ya se le hicieron, cada una con su PDF. Dos desplegables chiquitos
   debajo de «Ver ficha completa», para saber de quién se trata antes de
   contestar. */
.ka-fr-previa{margin:0 0 14px; display:flex; flex-direction:column; gap:6px}
.ka-fr-previa > details{border:1px solid var(--linea); border-radius:10px; background:var(--sup); padding:8px 12px}
.ka-fr-previa > details > summary{list-style:none; cursor:pointer; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px}
.ka-fr-previa > details > summary::-webkit-details-marker{display:none}
.ka-fr-previa > details > summary::after{content:'▾'; margin-left:auto; color:var(--tenue); font-size:11px}
.ka-fr-previa > details[open] > summary::after{content:'▴'}
.ka-fr-previa summary i{font-style:normal; width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--acento-suave, var(--linea)); color:var(--acento, var(--tinta)); font-size:12px; font-weight:700; flex:none}
.ka-fr-nota p{margin:8px 0 2px; font-size:12.5px; line-height:1.5; color:var(--tinta); white-space:pre-line}
.ka-fr-cots ul{list-style:none; margin:8px 0 2px; padding:0; display:flex; flex-direction:column; gap:8px}
.ka-fr-cots li{display:flex; flex-direction:column; gap:3px; padding-top:8px; border-top:1px solid var(--linea)}
.ka-fr-cots li span{font-size:11px; color:var(--tenue)}
.ka-fr-cots li b{font-size:12.5px; font-weight:500; line-height:1.4}
.ka-fr-cots li .ka-btn{align-self:flex-start; margin-top:2px}

.ka-fr-hechos{margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--sup); border:1px solid var(--linea)}
.ka-fr-hechos > b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); margin-bottom:6px}
.ka-hecho{margin:0 0 5px; font-size:12.5px; line-height:1.4}
.ka-hecho span{display:block; color:var(--tinta)}
.ka-hecho i{font-style:normal; font-size:11px; color:var(--tenue)}
.ka-hecho-pensando span, .ka-hecho-perdido span{color:var(--tenue)}
.ka-hecho-total{margin:8px 0 0; padding-top:8px; border-top:1px solid var(--linea); font-size:12px; color:var(--sec)}
.ka-fr-botones{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.ka-fr-botones form{display:block}
.ka-fr-botones .ka-btn{width:100%; justify-content:center; font-size:13.5px; padding:10px 14px}
.ka-fr-botones .ka-btn[disabled]{opacity:.45; cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.ka-fr-botones .ka-btn[disabled]:hover{border-color:var(--linea); color:var(--tenue)}}

/* --- en pantalla pequeña se apilan: primero la lista, después el chat --- */
@media (max-width:1180px){
  .ka-bandeja{grid-template-columns:270px minmax(0,1fr); height:calc(100dvh - 170px)}
  .ka-ficha-rapida{grid-column:1 / -1; height:auto; max-height:420px}
}

/* ─── la ficha, en el teléfono: un cajón que entra por la derecha ───
   🔴 Antes caía al FINAL de la página. Para leer el teléfono de la paciente
   había que salir del chat y bajar hasta abajo del todo — y desde dentro de la
   conversación, que es donde uno está de verdad, no existía.

   Es la MISMA ficha, con los mismos botones de registrar y editar: se mueve de
   sitio, no se duplica. Una segunda versión «para el celular» se queda vieja a
   la primera semana. */
@media (max-width: 900px){
  .ka-solo-movil{display:inline-flex}

  .ka-ficha-rapida{
    position:fixed; top:0; right:0; bottom:0; z-index:60;
    width:min(88vw, 380px); max-height:none; height:100dvh;
    padding:0 18px 24px; border-radius:0;
    background:var(--sup); border-left:1px solid var(--linea);
    box-shadow:-18px 0 44px rgba(0,0,0,.34);
    transform:translateX(101%); visibility:hidden;
    transition:transform .24s ease, visibility .24s;
    overscroll-behavior:contain;
    padding-top:env(safe-area-inset-top);
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .ka-ficha-rapida.abierta{transform:none; visibility:visible}
  @media (prefers-reduced-motion: reduce){
    .ka-ficha-rapida{transition:none}
  }

  /* El título y la ✕ se quedan arriba mientras se desliza la ficha: con la
     ficha larga, la salida no puede estar a seis pantallazos de distancia. */
  .ka-fr-barra{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:2; margin:0 -18px 12px;
    padding:12px 18px; background:var(--sup);
    border-bottom:1px solid var(--linea2);
  }
  .ka-fr-barra b{font-family:var(--fuente-ui); font-size:14px}
  .ka-fr-x{
    border:0; background:transparent; color:var(--tenue); cursor:pointer;
    font-size:26px; line-height:1; padding:0 4px;
  }

  /* El telón: cierra tocando fuera, y tapa el chat para que se entienda que la
     ficha está encima y no al lado. */
  .ka-telon-cajon{
    position:fixed; inset:0; z-index:59; background:rgba(0,0,0,.45);
    opacity:0; transition:opacity .2s;
  }
  .ka-telon-cajon.abierto{opacity:1}
}
@media (max-width:860px){
  .ka-bandeja{grid-template-columns:1fr; height:auto}
  /* Aquí vivía un tope de alto para la lista: quedaba metida en una ventanita
     de trescientos y pico píxeles con su propio desplazamiento, dentro de una
     página que también se desplaza. Dos desplazamientos encajados en un
     teléfono es justo lo que nadie sabe usar. En el celular manda la regla de
     más abajo, sin tope, y la página entera es la que se desliza, como en
     WhatsApp. */
  .ka-conversa{min-height:60vh}
  .ka-chat-hilo{min-height:280px}
}

/* ============================================================ cotización */


.ka-cuentas td{font-family:var(--fuente-ui); font-size:15px; padding:11px 6px}
.ka-cuentas td:last-child{text-align:right; font-variant-numeric:lining-nums tabular-nums}
.ka-cuentas .ka-desc td{color:var(--oro-d)}
.ka-cuentas .ka-total td{
  font-size:19px; font-weight:600; border-top:2px solid var(--tinta);
  padding-top:14px; letter-spacing:-.01em;
}

/* El mensaje exacto que le va a llegar. Se lee antes de enviarlo. */
.ka-previo{
  background:var(--sup2); border:1px solid var(--linea); border-left:3px solid var(--oro);
  border-radius:12px; padding:15px 17px; margin-bottom:16px;
  font-family:var(--fuente-ui); font-size:14.5px; line-height:1.6; color:var(--tinta);
}

/* ── LA COTIZACIÓN ────────────────────────────────────────────────
   El cajón se ensancha solo para esta pantalla: a la izquierda se llena,
   a la derecha se ve la hoja tal como le va a llegar a la paciente. En el
   celular no caben las dos columnas, así que la hoja se va abajo. */
.ka-cotiza-dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:28px; align-items:start}
.ka-cotiza-izq{min-width:0}
.ka-cotiza-der{min-width:0; position:sticky; top:0}
@media (max-width:980px){
  .ka-cotiza-dos{grid-template-columns:minmax(0,1fr)}
  .ka-cotiza-der{position:static; order:-1}
}

/* La hoja: papel blanco, para que se lea como el documento y no como pantalla. */
.ka-hoja-caja{position:sticky; top:0}
.ka-hoja{
  background:var(--papel); color:var(--papel-t);
  border:1px solid var(--linea2); border-radius:10px;
  padding:26px 24px; box-shadow:0 18px 44px rgba(15,14,22,.10);
  font-size:12px; line-height:1.45;
}
.ka-hoja-vacia{opacity:.62}
.ka-hoja-cab{display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
  padding-bottom:16px; border-bottom:1px solid var(--papel-linea); margin-bottom:22px}
.ka-hoja-cab b{font-family:var(--fuente); font-weight:500; font-size:15px; color:var(--papel-t); display:block}
.ka-hoja-cab span{font-size:10.5px; color:var(--papel-t3); display:block; margin-top:2px}
.ka-hoja-der{text-align:right}
.ka-hoja-der i{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--papel-t); display:block}
.ka-hoja-para{margin-bottom:20px}
.ka-hoja-para i{font-style:normal; font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--papel-t3); display:block}
.ka-hoja-para b{font-family:var(--fuente); font-weight:500; font-size:20px; color:var(--papel-t); display:block; margin:6px 0 3px}
.ka-hoja-para span{font-size:11.5px; color:var(--papel-t2)}
.ka-hoja-grupo{border-top:1px solid var(--papel-linea); padding-top:14px; margin-top:16px; margin-bottom:8px}
.ka-hoja-grupo i{font-style:normal; font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--papel-t3)}
.ka-hoja-linea{display:flex; justify-content:space-between; gap:14px; padding:5px 0; align-items:baseline}
.ka-hoja-linea span{color:var(--papel-t); min-width:0}
.ka-hoja-linea span em{display:block; font-style:normal; font-size:9.5px; color:var(--papel-t3); margin-top:1px}
.ka-hoja-linea b{white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; font-weight:400; color:var(--papel-t)}
.ka-hoja-sub{border-top:1px solid var(--papel-linea); margin-top:6px; padding-top:9px}
.ka-hoja-sub span{color:var(--papel-t3)}
.ka-hoja-sub b{font-weight:700}
.ka-hoja-sincifra{color:var(--papel-t3) !important}
.ka-hoja-total{background:var(--papel-suave); border-top:2px solid var(--papel-t); padding:14px 16px; margin:20px 0 0}
.ka-hoja-total > i{font-style:normal; font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--papel-t2); display:block; margin-bottom:8px}
.ka-hoja-efectivo b{font-size:19px; font-weight:700}
.ka-hoja-tarjeta span, .ka-hoja-tarjeta b{color:var(--papel-t2); font-size:11px}
.ka-hoja-pie{border-top:1px solid var(--papel-linea); margin-top:20px; padding-top:12px; font-size:10px; color:var(--papel-t3); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
/* 3.73.1 · La hoja completa, como el PDF */
.ka-hoja-saludo,.ka-hoja-parrafo{font-size:12px; line-height:1.5; color:var(--papel-t2); margin:4px 0 6px}
.ka-hoja-condicion{margin:0 0 9px}
.ka-hoja-condicion b{display:block; font-size:11.5px; color:var(--papel-t)}
.ka-hoja-condicion p{margin:2px 0 0; font-size:11px; line-height:1.45; color:var(--papel-t2)}
.ka-hoja-valoracion{border-left:2px solid var(--papel-t); padding:2px 0 2px 12px; margin:16px 0 10px}
.ka-hoja-valoracion b{font-size:11.5px; color:var(--papel-t)}
.ka-hoja-valoracion p{margin:3px 0 0; font-size:11px; line-height:1.45; color:var(--papel-t2)}
.ka-hoja-vigencia{font-size:11px; color:var(--papel-t2); margin:6px 0 0}
.ka-hoja-nota{margin-top:12px; font-size:12px}

/* Los renglones de la cotización: concepto, valor y aclaración en una fila.
   En el celular se apilan, porque tres campos no caben de lado a lado. */
.ka-renglon{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.ka-renglon input[type=text]{
  flex:1 1 180px; min-width:0; padding:9px 12px; border-radius:10px;
  border:1px solid var(--linea); background:var(--sup); color:var(--tinta); font-size:13.5px;
}
/* Ojo con la especificidad: `.ka-renglon input[type=text]` pesa más que
   `.ka-renglon .ka-valor`, porque un selector de atributo cuenta como una
   clase. Por eso estas dos llevan el input delante: si no, la regla general
   gana y el valor y la aclaración se quedan con el ancho equivocado. */
.ka-renglon input[type=text].ka-valor{
  flex:0 0 130px; text-align:right;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-renglon input[type=text].ka-aclara{flex:1 1 200px; font-size:12.5px}
.ka-renglon input[type=text].ka-dto{flex:0 0 70px; text-align:center}
.ka-mas-concepto{margin:2px 0 6px}
.ka-btn-enter{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ka-hoja-dto span,.ka-hoja-dto b{font-size:11px; color:var(--papel-t2)}
.ka-hoja-dto span{padding-left:10px}
/* La casilla de «opcional» es una etiqueta, no un input: necesita su propia
   regla o se queda sin ancho y se sale por el borde. */
.ka-renglon label.ka-aclara{flex:1 1 150px; font-size:12.5px; margin:0; white-space:nowrap}
.ka-cotiza-form h3{margin-top:24px; margin-bottom:10px}
.ka-cotiza-form > .ka-tenue{margin:-2px 0 16px}
@media (max-width:760px){
  /* En el celular el concepto y su valor se quedan en la misma línea: apilar
     los tres campos triplicaba el alto de la pantalla. La aclaración baja. */
  .ka-renglon{gap:6px; margin-bottom:12px}
  /* base 0 y min-width 0: si no, un concepto largo empuja el valor al renglón
     siguiente y volvemos a tener tres líneas por concepto. */
  .ka-renglon input[type=text]{flex:1 1 0; min-width:0}
  .ka-renglon input[type=text].ka-valor{flex:0 0 112px}
  /* flex-shrink en 0: con 1 el navegador la encoge y la mete en la misma
     línea, dejando el concepto cortado a la mitad. Tiene que bajar. */
  .ka-renglon input[type=text].ka-aclara{flex:1 0 100%}
  .ka-renglon label.ka-aclara{flex:1 0 100%}
}
/* Los bloques de la cotización.

   Cada bloque es una caja con su nombre y su interruptor: o va incluido y suma
   al total, o es una alternativa y lleva el suyo. La alternativa se distingue a
   simple vista —borde marcado y su rótulo— porque confundir las dos es lo que
   hace que una cotización cobre dos veces el mismo procedimiento. */
.ka-bloque-cot{
  border:1px solid var(--linea); border-radius:14px;
  padding:14px 16px 6px; margin-top:18px; background:var(--sup);
}
.ka-bloque-alt{border-color:var(--oro-m); background:var(--sup3)}
.ka-bloque-cab{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.ka-bloque-cot input[type=text].ka-bloque-nombre{
  flex:1 1 220px; min-width:0; padding:8px 12px; border-radius:10px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--tinta);
  font-family:var(--fuente-ui); font-size:15px;
}
.ka-bloque-cot select.ka-bloque-modo{
  flex:0 1 auto; padding:7px 10px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--sec); font-size:12.5px;
}
.ka-bloque-alt .ka-bloque-modo{border-color:var(--oro-m); color:var(--tinta)}
.ka-opcion-ayuda{margin:16px 0 10px}
.ka-cotiza-form .ka-opcion-ayuda + .ka-btn{margin-bottom:6px}
@media (max-width:760px){
  .ka-bloque-cot{padding:12px 12px 4px}
  .ka-bloque-cot input[type=text].ka-bloque-nombre{flex:1 0 100%}
  .ka-bloque-cot select.ka-bloque-modo{flex:1 0 100%}
}

/* El total de una opción dentro de la hoja: se marca más que un subtotal,
   porque es el número con el que la paciente compara. */
.ka-hoja-opcion b{font-size:15px}

.ka-tope{
  background:var(--sup3); border:1px solid var(--oro-m); border-radius:12px;
  padding:12px 15px; margin-top:14px;
  font-family:var(--fuente-ui); font-size:13.5px; line-height:1.55; color:var(--sec);
}
.ka-tope b{display:block; color:var(--oro-d); font-weight:600; margin-bottom:3px}

/* Lo que se queda dentro de la clínica y no viaja en el mensaje */
.ka-interno{
  font-style:normal; text-transform:none; letter-spacing:0;
  color:var(--oro-d); font-size:11px; margin-left:6px;
}

/* ============================================================ antes y después */

.ka-galeria{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;
}
.ka-caso{
  background:var(--sup); border:1px solid var(--linea2); border-radius:18px;
  box-shadow:var(--sh-s); padding:14px; display:flex; flex-direction:column; gap:12px;
}
.ka-caso.sin-firma{opacity:.72; border-style:dashed}

.ka-caso-fotos{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ka-caso-fotos figure{margin:0; position:relative}
.ka-caso-fotos img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:12px; background:var(--fondo); display:block;
}
.ka-caso-fotos figcaption{
  position:absolute; left:8px; bottom:8px;
  background:rgba(0,0,0,.78); color:#fff; border-radius:20px;
  padding:3px 10px; font-family:var(--fuente-ui); font-size:11px;
  font-weight:500; letter-spacing:.04em;
}
/* La de después lleva el acento de la marca: es la que se mira. */
.ka-caso-fotos figure:last-child figcaption{background:var(--oro)}

.ka-caso-pie{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.ka-caso-pie b{font-family:var(--fuente-ui); font-size:14.5px; font-weight:600; display:block}
.ka-caso-pie .ka-tenue{display:block; margin-top:2px}
.ka-caso .ka-btn{width:100%; justify-content:center}

/* ============================================================ panel al costado
   Cotizar y elegir un antes y después no son otra pantalla: son un cajón que se
   abre encima de la conversación y se cierra donde estaba. */

.ka-fondo{
  position:fixed; inset:0; z-index:40;
  background:rgba(15,14,22,.34);
  animation:ka-aparece .18s ease-out;
}
.ka-lateral{
  position:fixed; top:0; right:0; bottom:0; z-index:41;
  width:min(560px,94vw); background:var(--sup);
  border-left:1px solid var(--linea2);
  box-shadow:-24px 0 60px rgba(15,14,22,.16);
  display:flex; flex-direction:column;
  animation:ka-entra .24s cubic-bezier(.22,.8,.3,1);
}
@keyframes ka-entra{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ka-aparece{from{opacity:0}to{opacity:1}}

.ka-lateral-cab{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 24px; border-bottom:1px solid var(--linea2);
}
.ka-lateral-cab b{font-family:var(--fuente-ui); font-size:17px; font-weight:600; display:block}
.ka-lateral-cab .ka-tenue{display:block; margin-top:3px}
.ka-cerrar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:var(--tenue); text-decoration:none;
  border:1px solid var(--linea); transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.ka-cerrar:hover{border-color:var(--oro); color:var(--oro-d)}}

.ka-lateral-cuerpo{flex:1; overflow-y:auto; padding:22px 24px 32px}
.ka-lateral-cuerpo > form{margin-bottom:18px}
.ka-lateral-t{
  font-family:var(--fuente-ui); font-size:13px; font-weight:600;
  letter-spacing:.02em; margin:24px 0 10px; color:var(--tinta);
}
/* En el cajón hay poco ancho: los campos van de a dos, o de a uno. */
.ka-lateral .ka-form{grid-template-columns:1fr 1fr}
.ka-lateral .ka-form-1{grid-template-columns:1fr}
.ka-lateral .ka-caso{margin-bottom:14px}
.ka-lateral .ka-cuentas{margin-top:6px}

.ka-check{
  display:flex; align-items:center; gap:9px; margin:14px 0;
  font-family:var(--fuente-ui); font-size:13.5px; color:var(--sec);
}
.ka-check input{width:auto; margin:0}

/* El cajón de la cotización necesita más sitio: dos columnas no caben en 560px.
   Va pegada a .ka-lateral —y no suelta— porque con la misma especificidad
   ganaría la que esté más abajo en el archivo, y esa es .ka-lateral. */
.ka-lateral.ka-lateral-ancho{width:min(1180px,96vw)}

/* La cabecera se queda arriba mientras se baja: en un formulario largo, la
   equis tiene que estar siempre a la mano. */
.ka-lateral-cab{position:sticky; top:0; z-index:2; background:var(--sup)}

@media (max-width:980px){
  /* En tableta y celular el cajón ocupa la pantalla entera. Media pantalla con
     un formulario de veinte campos no la usa nadie. */
  .ka-lateral, .ka-lateral.ka-lateral-ancho{width:100vw; border-left:0}
  .ka-lateral .ka-form{grid-template-columns:1fr}
}

@media (max-width:640px){
  .ka-lateral-cab{padding:16px 18px}
  .ka-lateral-cuerpo{padding:18px 18px 40px}
}

/* Y un cierre al final del todo: al terminar de llenar, el pulgar está abajo. */
.ka-cerrar-pie{
  display:block; width:100%; text-align:center; margin-top:26px;
  padding:12px; border-radius:12px; border:1px solid var(--linea);
  color:var(--tenue); text-decoration:none; font-size:14px;
}
@media (hover:hover) and (pointer:fine){.ka-cerrar-pie:hover{border-color:var(--acento-b); color:var(--tinta)}}

/* Marcar la autorización es una declaración, no una acción más: se ve distinta. */
.ka-firma{
  width:100%; background:none; border:1px dashed var(--oro-m); color:var(--oro-d);
  border-radius:11px; padding:9px 12px; cursor:pointer;
  font-family:var(--fuente-ui); font-size:12.5px; line-height:1.4; text-align:center;
  text-transform:none; letter-spacing:0; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.ka-firma:hover{background:var(--sup3); border-color:var(--oro)}}
.ka-firma.quitar{border-style:solid; border-color:var(--linea); color:var(--tenue)}
@media (hover:hover) and (pointer:fine){.ka-firma.quitar:hover{background:var(--sup2); border-color:var(--tenue); color:var(--sec)}}

/* La declaración de la clínica sobre sus fotos: se pregunta una vez. */
.ka-declara{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--sup3); border:1px solid var(--oro-l); border-radius:16px;
  padding:18px 22px; margin-bottom:22px;
}
.ka-declara b{font-family:var(--fuente-ui); font-size:15px; font-weight:600; display:block}
.ka-declara p{
  font-family:var(--fuente-ui); font-size:13px; line-height:1.55; color:var(--sec);
  margin-top:5px; max-width:56ch;
}
.ka-declara form{flex:none}

form.ka-enlinea{display:inline}
.ka-comolink{
  display:inline; background:none; border:0; padding:0; cursor:pointer;
  color:var(--oro-d); font-size:12px; text-decoration:underline;
  font-family:var(--fuente-ui); text-transform:none; letter-spacing:0;
}

/* La comparativa tal como le va a llegar a la paciente. */
.ka-comparativa{display:block; border-radius:12px; overflow:hidden; line-height:0}
.ka-comparativa img{width:100%; height:auto; display:block}
.ka-caso .ka-btn.ka-mini{width:100%; justify-content:center; margin-top:7px}
.ka-adjunto{display:block; border-radius:10px; overflow:hidden; margin-bottom:8px; line-height:0}
.ka-adjunto img{width:100%; max-width:340px; height:auto; display:block}

/* ============================================================ el equipo */

.ka-equipo{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; margin-bottom:22px}
.ka-asesora{
  background:var(--sup); border:1px solid var(--linea2); border-radius:18px;
  box-shadow:var(--sh-s); padding:18px 20px;
}
.ka-as-cab{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.ka-as-cab b{font-family:var(--fuente-ui); font-size:15.5px; font-weight:600; display:block}
.ka-as-cab .ka-tenue{display:block; margin-top:2px}
.ka-as-cab .ka-chip{margin-left:auto; flex:none}

.ka-as-nums{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px}
.ka-as-n .ka-l{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); display:block}
.ka-as-n b{
  font-family:var(--fuente-ui); font-size:24px; font-weight:300; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums; display:block; margin:2px 0 1px;
}
.ka-as-n i{font-size:11.5px; font-style:normal; display:block}
/* La barra compara a cada una contra el total del equipo: un número suelto no dice nada. */
.ka-as-barra{display:block; height:4px; border-radius:3px; background:var(--linea2); margin-top:7px; overflow:hidden}
.ka-as-barra i{display:block; height:100%; background:var(--oro); border-radius:3px}

.ka-as-pie{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--linea2);
  font-family:var(--fuente-ui); font-size:12.5px; color:var(--tenue);
}
.ka-as-pie b{color:var(--tinta); font-weight:600; font-variant-numeric:lining-nums tabular-nums}

/* La etiqueta arriba y el número debajo. Con un valor en pesos, en línea se
   encaballan y el número queda cortado. */
.ka-kpi{min-width:0}
.ka-kpi .ka-l{display:block; margin-bottom:5px}
.ka-kpi .ka-v{display:block; white-space:nowrap}
.ka-kpis-equipo .ka-kpi .ka-v{font-size:27px}

/* ============================================================ periodos */

.ka-periodos{
  display:flex; align-items:center; justify-content:space-between; gap:16px 20px;
  flex-wrap:wrap; margin:-6px 0 22px;
}
.ka-rango{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--sup); border:1px solid var(--linea2); border-radius:14px;
  padding:8px 12px; box-shadow:var(--sh-s);
}
.ka-rango label{
  display:flex; align-items:center; gap:7px;
  font-family:var(--fuente-ui); font-size:12.5px; color:var(--tenue);
  text-transform:none; letter-spacing:0;
}
.ka-rango input[type=date]{
  width:auto; padding:7px 10px; font-size:13.5px; border-radius:9px;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-rango .ka-btn{padding:8px 16px; font-size:13.5px}
@media (max-width:760px){
  .ka-periodos{flex-direction:column; align-items:stretch}
  .ka-rango{justify-content:space-between}
}

/* La fila del total, en la tabla del equipo del inicio. */
.ka-total-fila td{border-top:2px solid var(--tinta); padding-top:14px}
.ka-total-fila b{font-weight:600}

/* Leads nuevos contra pacientes que vuelven. Lo primero que hay que saber al
   abrir un chat, y hasta ahora las dos se veían exactamente igual. */
/* ─────────────── los chips de la bandeja, al estilo BAFIOTE ───────────────
   Van ENCIMA del buscador, envueltos en varias líneas, con su punto de color
   y su número. Primero se acota de qué montón se habla y después se busca
   dentro; al revés parece que el filtro se aplica a la búsqueda. */
/* 🔴 UNA SOLA FILA que se desliza, también en el computador.
   Visto en vivo en un portátil (1512 × 706): los siete chips se apilaban en
   siete renglones y la lista de chats dejaba ver UNA conversación. Es la
   pantalla donde las asesoras pasan el día: la lista manda, los filtros
   caben en una fila (la misma que ya tenía el teléfono). */
.ka-filtro-conv{
  display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto;
  padding:10px 12px 12px; border-bottom:none;
  scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.ka-filtro-conv::-webkit-scrollbar{display:none}
.ka-filtro-conv>*{flex:0 0 auto}
.ka-filtro-conv a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:7px 12px; border-radius:999px; text-decoration:none;
  color:var(--sec); background:var(--sup2); border:1px solid transparent; white-space:nowrap;
  transition:background .12s, color .12s;
}
@media (hover:hover) and (pointer:fine){.ka-filtro-conv a:hover{background:var(--sup3); color:var(--tinta)}}
.ka-filtro-conv a b{font-weight:700; color:inherit}
/* El punto de color: dice de qué va el filtro antes de leerlo. */
.ka-punto{width:7px; height:7px; border-radius:50%; flex:none; display:inline-block}
.ka-punto-rojo{background:var(--alerta)}
.ka-punto-ambar{background:#C9A227}
.ka-punto-verde{background:#3FA96A}
.ka-punto-pauta{background:#8A6BD1}
/* 3.112.0 · «Sin leer»: el mismo punto que el renglón sin leer (el acento,
   negro de día y blanco de noche). En el chip activo se invierte para verse. */
.ka-punto-sinleer{background:var(--acento)}
/* 3.112.3 · Pauta mira las conversaciones sin escribir: sin botones de hacer,
   sin formularios en el chat ni en la ficha, y la ficha completa no se abre. */
.ka-solo-mira .ka-chat-hacer>:not(.ka-solo-movil),
.ka-solo-mira .ka-conversa form,
.ka-solo-mira .ka-ficha-rapida form,
/* 3.112.4 · …menos sus notas: «el paciente y sus respectivas anotaciones». */
.ka-solo-mira .ka-ficha-rapida details:not(.ka-fr-nota),
.ka-solo-mira .ka-fr-cots,
.ka-solo-mira .ka-fr-pagos,.ka-solo-mira .ka-fr-botones,.ka-solo-mira .ka-fr-editar{display:none!important}
.ka-solo-mira .ka-chat-cab a.ka-av-conv,.ka-solo-mira .ka-chat-quien{pointer-events:none}
.ka-solo-mira .ka-ficha-rapida a[href*="/paciente/"],.ka-solo-mira .ka-ficha-rapida a[href*="con="]{display:none}
.ka-solo-mira-nota{margin:0;padding:14px 18px;border-top:1px solid var(--linea);color:var(--sec);font-size:13px;text-align:center}
.ka-filtro-conv a.on .ka-punto-sinleer{background:var(--acento-t)}
/* El activo se apoya en --acento, que SÍ se invierte de noche. Con --tinta y
   --hueso quedaba blanco sobre blanco: una barra blanca vacía. */
.ka-filtro-conv a.on{background:var(--acento); color:var(--acento-t); border-color:var(--acento)}
.ka-filtro-conv a.on .ka-punto{box-shadow:0 0 0 2px var(--acento-t)}
.ka-marca-nueva{font-style:normal; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; background:var(--alerta-f); color:var(--alerta); border:1px solid var(--alerta-b)}
.ka-marca-paciente{font-style:normal; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; background:var(--oro-l); color:var(--sec)}
/* Vino de un anuncio. Meta manda el rastro del clic pegado al mensaje: verlo
   aquí cambia la conversación, porque se sabe por qué escribió. */
.ka-marca-pauta{font-style:normal; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 6px; border-radius:999px; background:var(--acento); color:var(--acento-t)}

/* Es de una compañera a la que estoy cubriendo. Va en gris y no en color: es
   un dato de quién la lleva, no una alarma. */
.ka-marca-relevo{font-style:normal; font-size:10.5px; letter-spacing:.04em;
  padding:1px 6px; border-radius:999px; background:var(--sup2); color:var(--tenue); border:1px solid var(--linea)}

/* El aviso de arriba de la bandeja cuando hay relevo puesto. */
.ka-relevo-aviso{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid var(--linea); border-left:3px solid var(--acento);
  background:var(--sup); border-radius:12px; padding:11px 14px; margin:0 0 14px}
.ka-relevo-aviso b{display:block; font-size:13.5px}
.ka-relevo-aviso span{display:block; font-size:12.5px; color:var(--tenue); line-height:1.45; margin-top:2px}
.ka-relevo-aviso form{margin-left:auto}

/* La dueña de una tarea y el desplegable para pasársela a otra. */
.ka-card-duena{font-size:11px; color:var(--tenue); margin-top:6px}
.ka-card-pasar{margin-top:8px}
.ka-card-pasar > summary{list-style:none; cursor:pointer; font-size:11.5px; color:var(--tenue)}
.ka-card-pasar > summary::-webkit-details-marker{display:none}
.ka-card-pasar > summary:hover{color:var(--txt)}
.ka-card-pasar form{display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap}
.ka-card-pasar select{flex:1; min-width:0; font-size:12.5px; padding:5px 8px; border-radius:8px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt)}
.ka-card-pasar p{font-size:11px; line-height:1.4; margin-top:6px}

/* Dos fichas con el mismo teléfono —una pareja, una mamá y su hija—. Se dice
   a cuál de las dos le entran los WhatsApp, que es lo único que no se puede
   repartir. */
/* En la hoja del día —que es blanca siempre, se vea en pantalla o en papel— el
   enlace va en gris oscuro: es un dato para copiar, y en gris claro sobre
   blanco no se lee. */
.ka-hoja .ka-hoja-meet{display:block; font-size:11.5px; font-style:normal; color:#333; margin-top:2px; word-break:break-all}

/* El enlace de la videollamada en la ficha. Tranquilo cuando está —es un dato
   más— y con el botón para crearlo cuando falta. */
.ka-meet{border:1px solid var(--linea); border-radius:10px; padding:9px 12px; margin:10px 0 0; background:var(--sup)}
.ka-meet b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-meet a{display:block; font-size:13.5px; margin-top:3px; word-break:break-all}
.ka-meet span{display:block; font-size:11.5px; color:var(--tenue); margin-top:3px; line-height:1.45}
.ka-meet.falta{border-left:3px solid var(--oro)}
.ka-meet.falta b{color:var(--txt); text-transform:none; letter-spacing:0; font-size:13px}
.ka-meet.falta form{margin-top:8px}

.ka-compartido{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid var(--linea); border-left:3px solid var(--oro);
  background:var(--sup); border-radius:12px; padding:10px 14px; margin:0 0 14px}
.ka-compartido b{display:block; font-size:13px; font-weight:600}
.ka-compartido span{display:block; font-size:12.5px; color:var(--tenue); line-height:1.45; margin-top:2px}
.ka-compartido form{margin-left:auto}
.ka-comparte-check{display:flex; gap:9px; align-items:flex-start; font-size:13px}
.ka-comparte-check input{margin-top:3px; flex:none}
.ka-comparte-check small{display:block; color:var(--tenue); font-size:11.5px; line-height:1.45; margin-top:2px}

/* ------------------------------------------------------ equipo y medición */

/* Quién es quién: la tabla de roles. Los selectores van sin adorno para que
   la fila se lea de corrido y el ojo baje por la columna, no por los bordes. */
.ka-roles td{vertical-align:middle}
.ka-roles select{max-width:220px}
.ka-roles form{margin:0}
.ka-alta{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ka-traspaso{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.ka-traspaso label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--sec)}

/* Lo que hace cada rol, dicho una vez y a la vista: sin esto, repartir
   permisos es adivinar. */
.ka-roles-que{margin-top:14px; padding-top:12px; border-top:1px solid var(--linea)}
.ka-roles-que p{margin:0 0 6px; font-size:12px; line-height:1.55; color:var(--sec)}
.ka-roles-que b{color:var(--tinta)}

/* La comparación contra el periodo anterior. Va pegada a la cifra: una cifra
   sola no se puede interpretar, y separarlas obliga a buscar. */
.ka-var{display:block; font-style:normal; font-size:11.5px; margin-top:5px; line-height:1.4}
.ka-var span{display:block; color:var(--tenue); font-size:11px}
.ka-var-g{color:#2E7D5B}
.ka-var-r{color:var(--alerta)}
.ka-var-n{color:var(--tenue)}

.ka-aviso-dato{margin:-6px 0 18px; padding:10px 12px; border-radius:10px; background:var(--sup); border:1px solid var(--linea); font-size:12px; line-height:1.55}

/* Cuando el tablero NO puede dar una cifra, lo dice fuerte. Una advertencia en
   gris pequeño junto a un número grande no la lee nadie. */
.ka-panel-alerta{border-color:var(--alerta-b); background:var(--alerta-f)}
.ka-panel-alerta h2{color:var(--alerta)}
.ka-panel-alerta p{font-size:13px; line-height:1.6; margin:0 0 10px}
.ka-aviso-fuerte{padding:12px 14px; border-radius:10px; background:var(--alerta-f);
  border:1px solid var(--alerta-b); font-size:12.5px; line-height:1.6; margin:0 0 14px}
.ka-falta td{font-size:12px; line-height:1.5; vertical-align:top}
.ka-dos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:900px){ .ka-dos{grid-template-columns:1fr} }


/* El reloj de la cola. Una cola sin reloj es un montón: la que lleva cuarenta
   minutos se ve igual que la de hace dos, y nadie sabe por cuál empezar. */
.ka-espera{
  font-family:var(--fuente-ui); font-size:12px; color:var(--tenue);
  white-space:nowrap; padding:3px 9px; border-radius:20px;
  background:var(--chip); margin-right:10px;
}
.ka-espera-tarde{background:var(--alerta-f); color:var(--alerta); font-weight:600}
.ka-fila-tarde .ka-n{color:var(--alerta)}
.ka-cola-alerta{
  font-size:12.5px; line-height:1.5; color:var(--alerta);
  background:var(--alerta-f); border:1px solid var(--alerta-b);
  border-radius:10px; padding:9px 12px; margin:0 0 12px;
}

/* ───────────── la cola, deslizable ─────────────
   Antes traía diez filas y ahí se acababa: con noventa y ocho esperando, las
   otras ochenta y ocho no existían para quien miraba la pantalla. Ahora la caja
   se desliza y va pidiendo más, como la bandeja.

   El alto va en `vh` y no en píxeles: en un portátil de trece pulgadas un tope
   de 600 px se come la pantalla entera, y en el monitor grande deja media
   pantalla vacía. */
.ka-filas-cola{
  max-height:min(52vh, 620px); overflow-y:auto; overscroll-behavior:contain;
  margin:0 -4px; padding:0 4px;
}
/* El borde de la última fila se lo come el borde de la caja: se quita para que
   no se vean dos líneas pegadas. */
.ka-filas-cola > .ka-fila:last-of-type{border-bottom:none}

@media (max-width: 900px){
  /* En el celular manda la página: dos desplazamientos encajados es justo lo
     que nadie sabe usar —la misma lección de la bandeja—. */
  .ka-filas-cola{max-height:none; overflow:visible}
}

/* ============================================================ sin dueña

   Cuatro asesoras atienden desde el mismo número. Una conversación que nadie
   ha tomado no se puede contestar: si dos contestan la misma, la paciente
   recibe dos respuestas y nadie queda de responsable. El aviso va arriba, no
   en gris al pie, porque es una puerta y no una nota. */

.ka-sinduena{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--sup3); border-bottom:1px solid var(--linea2);
}
.ka-sinduena b{display:block; font-size:13.5px}
.ka-sinduena span{display:block; font-size:12px; color:var(--tenue); line-height:1.5; margin-top:2px}

.ka-compositor-cerrado{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border-top:1px solid var(--linea2); background:var(--sup2);
}
.ka-compositor-cerrado span{font-size:13px; color:var(--sec)}
/* La letra chica: el POR QUÉ de la regla de las 24 horas.

   Manoroz, 28 sep: «explicar en letra más chiquitita que es una regla de la API
   para no detectarnos como spam, pero eso en letra pequeñita debajo». Va debajo
   y no al lado: se lee una vez, se entiende, y desde ahí el ojo la salta.

   Sin cursiva a pesar de ir en `<i>`: en 11 px la cursiva se lee peor, y esto es
   justo lo que hace falta poder leer bien una vez. */
.ka-letra-chica{
  display:block; flex:1 1 100%; font-style:normal;
  font-size:11px; line-height:1.45; color:var(--tenue); margin-top:6px;
}

/* Remitir: vive en la cabecera del chat, que es donde uno se entera de que
   esta paciente ya no le toca a uno. Se despliega porque la nota es
   obligatoria: una transferencia sin contexto obliga a la paciente a repetir
   su historia, y ahí es donde se pierde. */
.ka-remitir{position:relative; margin:0 6px}
.ka-remitir > summary{list-style:none; cursor:pointer}
.ka-remitir > summary::-webkit-details-marker{display:none}
.ka-remitir-caja{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:310px;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  padding:14px; box-shadow:var(--sh-m, 0 12px 34px rgba(0,0,0,.16));
}
.ka-remitir-caja label{display:block; font-family:var(--fuente-ui); font-size:12px;
  color:var(--tenue); margin-bottom:10px}
.ka-remitir-caja select,.ka-remitir-caja textarea{
  display:block; width:100%; margin-top:5px; font-size:13px; color:var(--tinta);
  padding:8px 10px; border:1px solid var(--linea); border-radius:10px;
  background:var(--sup2); font-family:inherit; resize:vertical;
}
.ka-remitir-caja p{font-size:11.5px; line-height:1.5; margin:0 0 12px}

/* La nota que viaja con la paciente. Lo primero que ve quien la recibe. */
.ka-traspaso{
  padding:12px 16px; background:var(--sup3); border-bottom:1px solid var(--linea2);
}
.ka-traspaso b{display:block; font-size:12px; font-family:var(--fuente-ui);
  text-transform:uppercase; letter-spacing:.06em; color:var(--tenue)}
.ka-traspaso p{margin:5px 0 4px; font-size:13.5px; line-height:1.55; color:var(--tinta)}
.ka-traspaso span{font-size:11.5px}

/* «Te remitieron»: la bandeja de entrada del traspaso.
   Va marcada porque no es una lista automática: alguien decidió a mano que
   esta paciente es tuya y está esperando. */
.ka-panel-remitidas{border-color:var(--acento); border-width:1px}
.ka-fila-remitida{align-items:flex-start}
.ka-remitida-nota{
  margin-top:6px; font-size:13px; line-height:1.55; color:var(--tinta);
  padding-left:11px; border-left:2px solid var(--linea);
}
/* Un solo botón: «Tomar». Para abrirla sin tomarla está el nombre, que es
   enlace desde siempre. Dos botones ahí solo hacían dudar cuál pulsar. */
.ka-remitida-hacer{display:flex; align-items:center; gap:8px; flex-shrink:0}
.ka-remitida-hacer form{margin:0}

/* Lo que otra persona ya tomó se va, no se queda tachado.
   Se desvanece en vez de desaparecer de golpe: una fila que salta de la lista
   mientras se está leyendo hace perder el sitio y asusta. */
.ka-se-va{
  opacity:0; transform:translateY(-4px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .ka-se-va{transition:none}
}

/* El panelcito de lo que TÚ remitiste hoy.
   Discreto a propósito: no pide nada, solo deja ver si lo que soltaste llegó
   a alguien. Si tuviera el peso del panel de arriba competiría con él, y el
   que importa es el de arriba — ese sí es trabajo esperando. */
.ka-panel-chico{background:transparent; border-style:dashed; padding:14px 16px}
.ka-ph-chico{
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:9px; margin-bottom:4px; border-bottom:1px solid var(--linea3);
}
.ka-ph-chico h3{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tenue); margin:0;
}
.ka-fila-chica{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:7px 0; font-size:13px; border-bottom:1px solid var(--linea3);
}
.ka-fila-chica:last-child{border-bottom:0}
.ka-fila-chica .ka-n{font-size:13px}
.ka-fila-chica .ka-tenue{font-size:12px}
.ka-recogida,.ka-esperando-recoger{
  margin-left:auto; font-style:normal; font-size:11px; letter-spacing:.04em;
  padding:1px 8px; border-radius:99px; white-space:nowrap;
}
.ka-recogida{color:var(--tenue); border:1px solid var(--linea2)}
.ka-esperando-recoger{color:var(--acento); border:1px solid var(--acento); opacity:.8}

/* Su tarjeta flotante. No es «llegó un mensaje»: es «ahora es tuya».
   Se distingue por la pestaña de la izquierda, no por el color de la letra:
   teñir el texto con `--acento` lo dejaba del mismo color que el resto —y de
   noche, encima, ilegible. */
#ka-toast.ka-toast-remitida{border-left-color:var(--dentro)}
#ka-toast.ka-toast-remitida b{color:var(--dentro)}
#ka-toast.ka-toast-remitida u{text-decoration:none; display:block; margin-top:7px}
/* El aviso del chat del equipo: mismo formato, otra pestaña — «te escribió
   una compañera» no es lo mismo que «te pasaron una paciente». */
#ka-toast.ka-toast-interno{border-left-color:var(--tenue)}
#ka-toast.ka-toast-interno b{color:var(--sec)}
#ka-toast.ka-toast-interno span{display:block; margin-top:5px}

/* Los enlaces dentro de una burbuja: visibles pero sin gritar. */
.ka-burbuja a{color:inherit; text-decoration:underline; text-underline-offset:2px;
  word-break:break-all}
@media (hover:hover) and (pointer:fine){.ka-burbuja a:hover{opacity:.75}}

/* Editar los datos SIN salir de la conversación: es donde uno se entera. */
.ka-fr-editar{margin:0 0 14px; border:1px solid var(--linea2); border-radius:12px;
  background:var(--sup2); overflow:hidden}
.ka-fr-editar > summary{
  cursor:pointer; list-style:none; padding:10px 14px;
  font-family:var(--fuente-ui); font-size:12.5px; font-weight:600; color:var(--tinta);
}
.ka-fr-editar > summary::-webkit-details-marker{display:none}
.ka-fr-editar > summary::after{content:' ▾'; color:var(--tenue)}
.ka-fr-editar[open] > summary::after{content:' ▴'}
.ka-fr-editar form{padding:0 14px 14px}
.ka-fr-editar label{display:block; margin-bottom:9px;
  font-family:var(--fuente-ui); font-size:11.5px; color:var(--tenue)}
.ka-fr-editar input,.ka-fr-editar select{
  display:block; width:100%; margin-top:4px; font-size:13px; color:var(--tinta);
  padding:7px 9px; border:1px solid var(--linea); border-radius:9px;
  background:var(--sup); font-family:inherit;
}
.ka-fr-editar p{font-size:11.5px; line-height:1.5; margin:0 0 10px}

/* Corregir los datos de la paciente, desde su propia ficha. */
.ka-form-datos{margin-bottom:16px}
.ka-form-datos .ka-form{margin-bottom:12px}

/* Fichas de cuentas borradas. Va marcado porque hay pacientes de por medio y
   el botón hay que leerlo antes de pulsarlo. */
.ka-fantasmas{
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:var(--alerta-f); border:1px solid var(--alerta-b);
}
.ka-fantasmas p{font-size:13px; line-height:1.6; margin:0 0 10px}
.ka-fantasmas .ka-enlinea{display:inline-block; margin:0 8px 10px 0}

/* Las áreas que cubre cada persona, en la tabla del equipo. */
.ka-areas-form{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.ka-area-check{display:flex; align-items:center; gap:6px; font-size:12px;
  font-family:var(--fuente-ui); color:var(--sec); white-space:nowrap}
.ka-areas-form .ka-btn{margin-top:4px}

/* ============================================================ medición

   La medición llegó a tener dieciocho tarjetas apiladas, todas del mismo
   tamaño: sin jerarquía, la pantalla se lee como una lista de cosas y no como
   un informe. Estas tres piezas son la jerarquía.

   El índice de arriba salta a cada bloque; los títulos de bloque separan; y
   las columnas dibujan la curva que la tabla de meses solo enumeraba. */

/* Dar de alta a alguien del equipo: la acción vive donde se reparte el papel,
   no en una nota gris al pie que nadie lee. */
.ka-alta-gente{margin-top:18px; padding-top:16px; border-top:1px solid var(--linea2)}
.ka-alta-gente p{font-size:13px; line-height:1.6; margin:0 0 10px}
.ka-alta-gente p:last-child{margin-bottom:0}

.ka-indice{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 26px}
.ka-indice .ka-btn{font-size:12px; padding:7px 13px}

/* El título de bloque no es una tarjeta: es un rótulo sobre el papel, para que
   se lea como el capítulo de un informe y no como un panel más. */
.ka-bloque{
  font-family:var(--fuente-ui); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.10em; color:var(--tinta);
  margin:38px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--linea);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  scroll-margin-top:20px;
}
.ka-bloque span{
  font-size:12px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--tenue);
}
.ka-bloque:first-of-type{margin-top:4px}

/* La curva de los meses. Sin librerías: divs con una altura en porcentaje.
   Un gráfico que depende de un archivo externo es un gráfico que un día no carga.

   ⚠️ SE LLAMA ka-curva Y NO ka-cols POR UNA RAZÓN CARA: en la 1.56.0 se llamó
   «ka-cols», que ya existía arriba (línea ~156) como la rejilla de dos columnas
   que usan Mi día, tres paneles de Ajustes y la ficha del paciente. Esta regla
   la pisó con flex y 150px de alto, y esas seis pantallas quedaron con los
   paneles montados unos encima de otros. Un nombre de clase es un nombre
   global: antes de estrenar uno, buscarlo. */
.ka-curva-pie{font-size:12px; margin:0 0 12px}
.ka-curva{
  display:flex; align-items:flex-end; gap:6px; height:150px;
  margin:0 0 18px; padding-bottom:20px; border-bottom:1px solid var(--linea2);
}
.ka-curva-col{flex:1 1 0; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:stretch; position:relative; min-width:0}
.ka-curva-col i{display:block; background:var(--acento); border-radius:5px 5px 2px 2px;
  opacity:.82; transition:opacity .15s ease}
@media (hover:hover) and (pointer:fine){.ka-curva-col:hover i{opacity:1}}
.ka-curva-col span{
  position:absolute; bottom:-19px; left:0; right:0; text-align:center;
  font-family:var(--fuente-ui); font-size:10.5px; color:var(--tenue);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:700px){
  .ka-curva{height:110px; gap:3px}
  .ka-curva-col span{font-size:9px}
}

/* Confirmar procedimientos: una tarjeta por negocio, para revisar rápido sin
   perder de vista de quién es y qué decía la cotización original. */
.ka-proc{padding:14px 0; border-bottom:1px solid var(--linea)}
.ka-proc:last-of-type{border-bottom:0}
.ka-proc-cab{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.ka-proc-cab .ka-tenue{font-size:12px}
.ka-proc-campos{display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:10px; align-items:end}
.ka-proc-campos label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--sec)}
.ka-proc-campos textarea{min-height:44px; font-size:13px; line-height:1.4}
@media (max-width:900px){ .ka-proc-campos{grid-template-columns:1fr} }

/* ------------------------------------------------------- la bandeja viva */

/* La tarjeta que avisa que alguien escribió, abajo a la derecha.

   🔴 SE LEÍA EN BLANCO SOBRE BLANCO.

   El fondo era `var(--acento)` —que de noche es hueso, casi blanco— y las
   letras estaban escritas a mano en `#fff`, `#E4E3E0` y `#B4B4B4`. De día
   funcionaba de casualidad (acento negro) y de noche el aviso salía en blanco:
   se veía la tarjeta, no lo que decía. Justo el aviso que más urge, «NECESITA
   UNA PERSONA», era el que no se podía leer.

   Ahora es una tarjeta del sistema —papel, línea y tinta, los tres tokens que
   se invierten juntos— así que se lee igual de día que de noche. Más ancha y
   menos redonda a propósito: es un aviso, no una burbuja. */
/* El aviso de «ya quedó hecho» reutiliza la tarjeta; se va con un fundido. */
#ka-toast.ka-toast-aviso{font-size:13.5px; border-left-color:var(--oro); transition:opacity .24s var(--ease-out, ease), transform .24s var(--ease-out, ease)}
#ka-toast.ka-toast-se-va{opacity:0; transform:translateY(8px)}
#ka-toast{
  position:fixed; right:22px; bottom:64px; z-index:60;
  display:block; width:min(384px, calc(100vw - 44px));
  background:var(--sup); color:var(--tinta);
  border:1px solid var(--linea); border-left:3px solid var(--tinta);
  border-radius:10px; padding:15px 17px 13px;
  text-decoration:none; box-shadow:var(--sh-m);
  font-family:var(--fuente-ui);
  animation:ka-sube .25s ease;
}
#ka-toast b{display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta); line-height:1.35}
#ka-toast u{display:block; text-decoration:none; font-size:13.5px; font-weight:400;
  color:var(--tinta); margin:7px 0 0; line-height:1.45}
#ka-toast span{display:block; font-size:12px; font-weight:400; color:var(--tenue);
  margin:5px 0 0; line-height:1.45}
#ka-toast span[hidden]{display:none}
#ka-toast i{display:block; font-style:normal; font-size:12px; color:var(--sec);
  margin-top:11px; padding-top:9px; border-top:1px solid var(--linea3)}
@media (hover:hover) and (pointer:fine){
  #ka-toast:hover{border-color:var(--tinta)}
  #ka-toast:hover i{color:var(--tinta)}
}

/* Cuando hace falta una persona, el aviso deja de ser un aviso más. Es la
   diferencia entre «alguien escribió» y «alguien está esperando a que le
   contesten algo que el sistema no puede contestar». */
#ka-toast.ka-toast-humano{border-left-color:var(--alerta)}
#ka-toast.ka-toast-humano b{color:var(--alerta)}
@keyframes ka-sube{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* El botón para silenciar el tono. Lo que se elige queda guardado en el navegador. */
#ka-sonido{
  position:fixed; right:22px; bottom:18px; z-index:59;
  border:1px solid var(--linea); background:var(--sup); color:var(--sec);
  font-family:var(--fuente-ui); font-size:12px; font-weight:400;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  box-shadow:var(--sh-s);
}
#ka-sonido.off{opacity:.55}
@media (max-width:760px){
  /* En el celular ocupa el ancho: `width:auto` para que manden `left` y
     `right`, porque el `width` de arriba se impone a `max-width`. */
  #ka-toast{right:12px; left:12px; width:auto; max-width:none; bottom:58px}
  #ka-sonido{right:12px; bottom:14px}
}

/* --------------------------------------------- el chat completo (adjuntos) */

.ka-oculto{display:none !important}
.ka-enviando{opacity:.55; pointer-events:none}

.ka-ico{
  width:38px; height:38px; flex:0 0 38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linea); border-radius:50%;
  background:var(--sup); color:var(--sec); cursor:pointer;
}
.ka-ico svg{width:19px; height:19px}
@media (hover:hover) and (pointer:fine){.ka-ico:hover{border-color:var(--oro); color:var(--oro-d)}}

.ka-adjuntar{position:relative}
.ka-menu-adj{
  position:absolute; bottom:46px; left:0; z-index:40;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sh-m); padding:6px; min-width:190px;
}
/* El de los enlaces trae nombres largos («Ubicación del consultorio») y un
   aviso al lado: con 190 px cada renglón se partía en tres. */
#ka-menu-enlaces{min-width:300px; max-width:min(92vw, 360px)}
.ka-menu-adj button{
  display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--fuente-ui); font-size:13.5px; color:var(--tinta);
  padding:9px 12px; border-radius:9px; white-space:nowrap;
}
.ka-menu-adj button[disabled]{cursor:default; color:var(--tenue)}
.ka-menu-adj button i{
  margin-left:auto; font-style:normal; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tenue); white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){.ka-menu-adj button:hover{background:var(--sup3)}}
.ka-menu-adj svg{width:18px; height:18px; color:var(--sec); flex:0 0 18px}

/* La ventana de la nota de voz, como en WhatsApp: se abre encima del chat al
   tocar el microfonito. Eliminar a la izquierda, pausa en el medio, enviar a
   la derecha. Cerrada no ocupa nada. */
.ka-chat-pie{position:relative}
.ka-grabando{
  position:absolute; inset:10px; z-index:45;
  display:flex; align-items:center; gap:12px;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  padding:10px 14px; font-family:var(--fuente-ui);
  box-shadow:var(--sh-m);
}
.ka-grabando[hidden]{display:none !important}
.ka-rec-centro{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
}
.ka-punto-rec{
  width:10px; height:10px; border-radius:50%; background:#C0392B;
  animation:ka-late 1.1s ease infinite;
}
.ka-punto-rec.quieto{animation:none; opacity:.35}
@keyframes ka-late{0%,100%{opacity:1}50%{opacity:.25}}
.ka-grabando b{font-size:15px; font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-rec-estado{font-size:12.5px; color:var(--tenue)}
@media (hover:hover) and (pointer:fine){.ka-rec-borrar:hover{border-color:#C0392B; color:#C0392B}}
.ka-rec-send{
  width:44px; height:44px; flex:0 0 44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--acento); color:var(--acento-t); box-shadow:var(--sh-s);
}
.ka-rec-send svg{width:20px; height:20px}
@media (hover:hover) and (pointer:fine){.ka-rec-send:hover{opacity:.86}}
.ka-rec-send:disabled{opacity:.55; cursor:default}
@media (max-width:760px){
  .ka-rec-estado{display:none}
}

/* Lo que llega y lo que se manda: video, nota de voz y documento. */
.ka-video{max-width:280px; border-radius:12px; display:block; margin-bottom:6px}
.ka-audio{width:250px; height:36px; display:block; margin-bottom:4px}
.ka-nota-voz{
  display:block; font-family:var(--fuente-ui); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); margin-bottom:4px;
}
.ka-doc{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.6); border:1px solid var(--linea);
  border-radius:10px; padding:9px 12px; margin-bottom:6px;
  font-family:var(--fuente-ui); font-size:13px; color:var(--tinta); text-decoration:none;
}
.ka-doc svg{width:20px; height:20px; color:var(--oro-d); flex:0 0 20px}
@media (hover:hover) and (pointer:fine){.ka-doc:hover{border-color:var(--oro)}}

/* Los chulitos de los mensajes enviados. */
.ka-chulos{font-style:normal; letter-spacing:-2.5px; color:var(--tenue); font-size:12px}
.ka-chulos.ka-leido{color:var(--tinta)}

/* El panel de emojis, junto a la carita. */
.ka-menu-emoji{
  position:absolute; bottom:46px; left:0; z-index:40;
  width:296px; max-height:300px; overflow-y:auto;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sh-m); padding:10px 12px 12px;
}
.ka-menu-emoji b{
  display:block; font-family:var(--fuente-ui); font-size:10.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--tenue);
  margin:8px 2px 4px;
}
.ka-menu-emoji div{display:flex; flex-wrap:wrap; gap:2px}
.ka-menu-emoji button[data-emoji]{
  border:0; background:none; cursor:pointer;
  font-size:21px; line-height:1; padding:5px; border-radius:8px;
}
@media (hover:hover) and (pointer:fine){.ka-menu-emoji button[data-emoji]:hover{background:var(--sup3)}}

/* La vista previa antes de enviar: nada sale a ciegas. */
.ka-previa{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:46;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sh-m); padding:12px;
}
.ka-previa[hidden]{display:none !important}
.ka-previa-caja{display:flex; justify-content:center; margin-bottom:10px}
.ka-previa-caja img,.ka-previa-caja video{
  max-width:100%; max-height:240px; border-radius:10px; display:block;
}
.ka-previa-doc{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--fondo); border:1px solid var(--linea); border-radius:10px;
  padding:14px 16px; font-family:var(--fuente-ui);
}
.ka-previa-doc svg{width:26px; height:26px; color:var(--oro-d); flex:0 0 26px}
.ka-previa-doc b{font-size:13.5px; font-weight:500; word-break:break-all}
.ka-previa-doc span{margin-left:auto; font-size:12px; color:var(--tenue); white-space:nowrap}
.ka-previa-pie{display:flex; align-items:center; gap:10px}
.ka-previa-pie input{
  flex:1; border:1px solid var(--linea); border-radius:999px;
  font-family:var(--fuente-ui); font-size:13.5px; padding:10px 16px;
}

/* ───────────── el conmutador de tema ─────────────
   Vive al pie de la barra lateral, junto a la cuenta: es una preferencia de la
   persona, no una función del sistema, y ahí es donde se busca. */
.ka-tema-form{margin:0 0 12px}
.ka-tema{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:10px; font-size:12.5px;
  color:rgba(241,237,233,.6); border:1px solid rgba(255,255,255,.1);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.ka-tema:hover{color:var(--lateral-t); border-color:rgba(255,255,255,.26)}}
.ka-tema-p{
  width:32px; height:18px; flex:none; border-radius:99px; position:relative;
  background:rgba(255,255,255,.14); transition:background-color .2s ease;
}
.ka-tema-p i{
  position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%;
  background:#8A8A8A; transition:transform .2s var(--ease-out),background-color .2s ease;
}
[data-tema="claro"] .ka-tema-p{background:rgba(255,255,255,.24)}
[data-tema="claro"] .ka-tema-p i{left:17px; background:#F2F1EF}

/* ───────────── pestañas de la historia ─────────────
   Cada pestaña dice cuántos movimientos tiene de esa clase: leyendo solo los
   números ya se sabe si la paciente fue de muchas llamadas o de pocas y buenas. */
.ka-pestanas{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--linea2);
}
.ka-pestanas a{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:99px; font-size:12.5px;
  color:var(--sec); border:1px solid var(--linea2); background:var(--sup2);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out); white-space:nowrap;
}
.ka-pestanas a b{
  font-size:11px; font-weight:600; color:var(--tenue);
  background:var(--chip); border-radius:99px; padding:1px 7px;
}
@media (hover:hover) and (pointer:fine){.ka-pestanas a:hover{border-color:var(--oro-m); color:var(--tinta)}}
.ka-pestanas a.on{background:var(--acento); border-color:var(--acento-b); color:var(--acento-t)}
.ka-pestanas a.on b{background:rgba(127,127,127,.28); color:var(--acento-t)}

/* el punto de la línea de tiempo, pintado según la clase del movimiento */
.ka-punto.ka-g{background:var(--ok)}
.ka-punto.ka-y{background:var(--warn)}
.ka-punto.ka-r{background:var(--alert)}
.ka-punto.ka-b{background:var(--info)}
.ka-punto.ka-t{background:var(--oro-m)}
.ka-punto.ka-n{background:var(--tenue)}

/* ───────────── paginador ─────────────
   Dice qué se está viendo ("41–80 de 13.389"), no solo en qué página va: con
   trece mil fichas el número de página solo no le sirve a nadie. */
.ka-paginas{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--linea2);
}
.ka-paginas-b{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* De noche, el negro de la barra y el negro del papel se rozan: una línea de un
   pelo los separa sin meter un bloque de color que no pinta nada. */
[data-tema="oscuro"] .ka-side{border-right:1px solid var(--linea2)}
[data-tema="oscuro"] .ka-tabla th{color:var(--sec)}
[data-tema="oscuro"] .ka-btn{border-color:var(--linea)}
@media (hover:hover) and (pointer:fine){[data-tema="oscuro"] .ka-btn:hover{border-color:var(--oro-m)}}
[data-tema="oscuro"] input,[data-tema="oscuro"] select,[data-tema="oscuro"] textarea{border-color:var(--linea)}
[data-tema="oscuro"] input:focus,[data-tema="oscuro"] select:focus,[data-tema="oscuro"] textarea:focus{background:var(--sup3)}

/* ───────────── no contactar ─────────────
   El único rojo del sistema, y tiene un solo oficio: avisar de quien pidió que
   no se le escriba. Si el rojo se usara para otra cosa, este aviso se perdería
   entre el resto y alguien terminaría escribiéndole igual. */
.ka-nocontacto{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  color:var(--alerta); background:var(--alerta-f); border:1px solid var(--alerta-b);
}
.ka-nocontacto::before{content:'●'; font-size:8px; line-height:1}

/* La fila entera se marca: leyendo la lista de reojo no se puede pasar por alto. */
tr.ka-veto td{background:var(--alerta-f)}
tr.ka-veto .ka-n{color:var(--alerta)}
[data-tema="oscuro"] tr.ka-veto td{background:rgba(232,134,122,.07)}

/* En la ficha, el aviso ocupa su propia banda arriba del todo. */
.ka-veda{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--alerta-b); background:var(--alerta-f);
  border-left:4px solid var(--alerta);
  border-radius:12px; padding:14px 18px; margin-bottom:20px;
}
.ka-veda b{color:var(--alerta); font-size:14px; display:block}
.ka-veda span{color:var(--sec); font-size:12.5px; display:block; margin-top:3px}
.ka-veda form{margin-left:auto}
/* La salida de emergencia cuando pasaron las 24 h: visible pero sin gritar.
   No es un error, es la otra manera de hacerlo. */
/* 🔴 La barra de «pasaron más de 24 horas» ocupa el sitio del compositor.
   Antes era un bloque que crecía hacia arriba —texto + lista entera de
   plantillas con su previa + formulario de WhatsApp— y se comía la
   conversación: no se podía leer el mensaje ni ver el botón de enviar. Ahora
   es UN renglón, y lo que se elige flota encima, como el panel de emojis. */
.ka-fuera{
  position:relative;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--linea); border-radius:14px;
  padding:9px 10px 9px 14px; background:var(--sup);
}
/* `.ka-fuera` también la usa el aviso de «la agenda no está conectada», que
   trae un `<div>` suelto en vez de `.ka-fuera-t`. Las dos se llevan el espacio
   igual; sin esto, el texto se encoge y el botón se le sube encima. */
.ka-fuera-t,.ka-fuera > div{flex:1 1 220px; min-width:0}
.ka-fuera{margin-bottom:12px}
/* En el pie del chat NO lleva margen: ahí la barra ES el compositor. */
.ka-chat-pie .ka-fuera{margin-bottom:0}
.ka-fuera b{font-size:13px; display:block; line-height:1.3}
/* 🔴 Solo el TÍTULO de la barra va en bloque. Una negrita DENTRO de una frase
   —«le entra una <b>plantilla aprobada</b>. En cuanto…»— heredaba el bloque y
   partía la frase en tres renglones, con el punto solo al principio del
   tercero. Visto en la captura del 28 de septiembre: se leía roto. */
.ka-fuera span b,
.ka-fuera p b,
.ka-fuera-panel p b{display:inline; font-size:inherit; line-height:inherit}
.ka-fuera span{color:var(--tenue); font-size:12px; display:block; margin-top:1px; line-height:1.4}
/* En el teléfono el texto se lleva el renglón entero y los dos botones bajan
   debajo, a la misma altura: partidos por la mitad no se dejan tocar. */
.ka-fuera-op{position:relative; flex:none}
.ka-fuera-op > summary{list-style:none; cursor:pointer; white-space:nowrap}
.ka-fuera-op > summary::-webkit-details-marker{display:none}
/* Flota HACIA ARRIBA y anclado a su propio botón: el panel crece sobre la
   conversación en vez de empujarla, y nace donde está el dedo. */
.ka-fuera-panel{
  position:absolute; bottom:calc(100% + 9px); right:0; z-index:42;
  width:min(380px, calc(100vw - 32px));
  /* 🔴 Más alto que antes (52vh / 420px). Con las plantillas que hoy no se
     pueden mandar listadas debajo, el panel pasaba de ese alto y quedaba
     cortado ARRIBA —se veía la mitad de «Saludo corto»— sin ninguna pista
     de que había más: parecía roto. Con 70vh cabe entero en un portátil, y
     si aun así no cabe, el borde de arriba lo dice. */
  max-height:min(70vh, 640px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--sup); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sh-m); padding:12px 14px 14px;
  transform-origin:bottom right;
}
.ka-fuera-op[open] > .ka-fuera-panel{animation:ka-sube .18s var(--ease-out)}
/* La cabecera del panel, con su ✕. Queda pegada arriba al desplazar: por
   largo que sea el panel, cerrar está siempre a un toque. */
.ka-fuera-cab{
  position:sticky; top:-12px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:-12px -14px 10px; padding:10px 10px 10px 14px;
  background:var(--sup); border-bottom:1px solid var(--linea3);
}
.ka-fuera-cab b{font-size:13.5px; font-weight:600; color:var(--tinta); display:block}
.ka-fuera-cerrar{
  flex:none; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--linea); background:var(--sup2, var(--sup)); color:var(--tinta);
  font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* La cabecera ya dice qué es: el rótulo de dentro del menú sobra. */
.ka-fuera-panel .ka-plantillas-menu > b.ka-tenue:first-child{display:none}
.ka-fuera-telon{display:none}
/* Al abrir una plantilla el guion la trae a la vista; sin este margen su
   título quedaba debajo de la cabecera fija, y se veía solo el subtítulo. */
.ka-fuera-panel .ka-plantilla-op{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){.ka-fuera-op[open] > .ka-fuera-panel{animation:none}}
/* Dentro del panel el menú de plantillas ya no está dentro de un flex que lo
   comprima, así que puede dejar de reclamar el renglón entero. */
.ka-fuera-panel .ka-plantillas-menu{flex:1 1 auto; margin:0; padding-top:0; border-top:0}
.ka-fuera-panel > .ka-tenue{font-size:12px; line-height:1.5; margin:0 0 10px}
@media (max-width:620px){
  .ka-fuera{gap:9px; padding:10px 12px}
  .ka-fuera-t{flex:1 1 100%}
  .ka-fuera-op{flex:1 1 0}
  .ka-fuera-op > summary{width:100%; justify-content:center}
  /* 🔴 En el teléfono el panel se cuelga de la BARRA ENTERA, no del botón.
     Anclado al botón —que ocupa media pantalla— y con su ancho propio, se
     salía por el borde izquierdo y la mitad de las plantillas quedaba fuera.
     `position:static` en el botón devuelve el anclaje a `.ka-fuera`. */
  .ka-fuera-op{position:static}
  .ka-fuera-panel{left:12px; right:12px; width:auto}

  /* 🔴 EN EL TELÉFONO, UNA HOJA QUE SUBE DESDE ABAJO.
     Manoroz, desde el iPhone: «salen sobrepuestas, no tengo cómo cerrarlas».
     Flotando sobre el botón, el panel tapaba casi toda la pantalla y su parte
     de arriba quedaba debajo de la hora y la batería: justo donde estaba el
     título de la plantilla abierta, lo único que la plegaba. Ahora va pegada
     al borde de abajo, deja a la vista el borde de arriba de la pantalla, y
     el telón oscuro detrás cierra al tocarlo. */
  .ka-fuera-op > .ka-fuera-panel,
  .ka-fuera-ficha .ka-fuera-op > .ka-fuera-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; z-index:61;
    max-height:calc(86dvh - env(safe-area-inset-top));
    border-radius:18px 18px 0 0; border-bottom:none;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    transform-origin:bottom center;
  }
  .ka-fuera-op[open] > .ka-fuera-panel{animation:ka-hoja .22s var(--ease-out)}
  .ka-fuera-cab{margin:-12px -16px 12px; padding:12px 12px 12px 16px}
  .ka-fuera-cab b{font-size:15px}
  .ka-fuera-cerrar{width:38px; height:38px; font-size:16px}
  .ka-fuera-op[open] > .ka-fuera-telon{
    display:block; position:fixed; inset:0; z-index:60;
    background:rgba(0,0,0,.55); animation:ka-aparece .18s ease-out;
  }
}
@keyframes ka-hoja{from{transform:translateY(24px); opacity:.4} to{transform:none; opacity:1}}
@keyframes ka-aparece{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ka-fuera-op[open] > .ka-fuera-panel, .ka-fuera-op[open] > .ka-fuera-telon{animation:none}
}
.ka-fuera-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Cuánto dura: la lista y, si se elige «Otra…», el campo de minutos debajo.
   Una cirugía larga no cabe en ninguna lista, así que siempre hay una salida. */
.ka-dura{display:flex; flex-direction:column; gap:6px}
.ka-dura .ka-dura-otro{width:100%}

/* En la ficha completa la barra de «pasaron más de 24 horas» no tiene una
   conversación encima sobre la que flotar: el panel de plantillas cae hacia
   ABAJO, dentro de la propia sección. */
.ka-fuera-ficha .ka-fuera{margin:8px 0 0}
.ka-fuera-ficha .ka-fuera-panel{bottom:auto; top:calc(100% + 9px); transform-origin:top right}
.ka-fuera-ficha .ka-fuera-op[open]{margin-bottom:0}
.ka-fuera-ficha{position:relative; z-index:3}

.ka-fuera-form input[type=text]{
  min-width:200px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--linea); background:var(--fondo); color:var(--tinta); font-size:13.5px;
}
@media (max-width:760px){
  .ka-fuera-form{margin-left:0; width:100%}
  .ka-fuera-form input[type=text]{flex:1; min-width:0}
}
/* El mismo aviso, en tono bajo: no es una prohibición, es un "revísalo". */
.ka-veda-suave{border-color:var(--linea); border-left-color:var(--apagado); background:var(--sup)}
.ka-veda-suave b{color:var(--tinta)}

/* ═══════════════════════════════════════════════════════════════
   EL CELULAR
   Aquí se atiende de pie, entre paciente y paciente. Todo lo que
   sigue existe para que el CRM se use con una mano.
   ═══════════════════════════════════════════════════════════════ */

/* La barra de arriba no existe en el escritorio. */
.ka-movil{display:none}
.ka-telon{display:none}

/* El chat, día a día */
.ka-dia{display:flex; justify-content:center; margin:6px 0}
.ka-dia span{
  font-size:11px; letter-spacing:.04em; color:var(--tenue);
  background:var(--sup3); border:1px solid var(--linea2);
  padding:3px 12px; border-radius:99px;
}
.ka-conv-hora{font-size:11px; color:var(--tenue); font-style:normal; margin-left:auto; flex:none}
.ka-conv-veto .ka-conv-l1 b{color:var(--alerta)}
.ka-chat-cab .ka-av-conv{flex:none}
.ka-volver{
  display:none; width:38px; height:38px; flex:none; align-items:center; justify-content:center;
  font-size:20px; color:var(--tinta); border-radius:50%; margin-left:-6px;
}
@media (hover:hover) and (pointer:fine){.ka-volver:hover{background:var(--sup3)}}

@media (max-width: 900px){
  /* El bug que costó encontrar en BAFIOTE: los hijos de un grid traen
     min-width:auto, así que una tabla ancha estira toda la página y el
     teléfono aleja la vista — todo se ve diminuto. Se corta de raíz. */
  body.kaapp{display:block; overflow-x:hidden}
  /* No basta con los contenedores: los HIJOS de un grid traen min-width:auto,
     y es el hijo —no el grid— el que se niega a encogerse y estira la página.
     Medir window.innerWidth es la forma de cazarlo: si no da 390, el problema
     es de ancho, no de tipografía. */
  .ka-main,.ka-panel,.ka-kpis,.ka-cols,.ka-bandeja,.ka-top,
  .ka-cols > *,.ka-kpis > *,.ka-bandeja > *,.ka-main > *{min-width:0; max-width:100%}
  .ka-tabla,.ka-tabla td,.ka-tabla th{max-width:100%; word-break:break-word}

  /* El alto de la barra negra se escribe UNA vez y de aquí lo lee todo lo que
     tenga que abrir por debajo de ella. Se puso porque una ventana a pantalla
     completa arrancaba en cero y la barra le tapaba el título y el botón de
     volver. */
  :root{--cab-movil:calc(56px + env(safe-area-inset-top))}
  .ka-movil{
    display:flex; align-items:center; gap:8px;
    position:sticky; top:0; z-index:40;
    background:var(--lateral); color:var(--lateral-t);
    padding:0 8px; padding-top:env(safe-area-inset-top);
    height:var(--cab-movil);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .ka-hamburguesa{
    width:52px; height:52px; flex:none; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
  }
  .ka-hamburguesa span{display:block; width:20px; height:1.5px; background:var(--lateral-t); border-radius:2px}
  .ka-movil-marca{
    margin:0 auto; height:30px; display:flex; align-items:center; color:var(--lateral-t);
  }
  .ka-movil-marca svg{height:100%; width:auto; display:block}
  .ka-movil-conv{
    width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
    color:var(--lateral-t); position:relative;
  }
  .ka-movil-conv svg{width:22px; height:22px}
  .ka-movil-conv i{
    position:absolute; top:9px; right:8px; min-width:17px; height:17px; padding:0 4px;
    border-radius:99px; background:var(--alerta); color:#fff;
    font-size:10px; font-weight:700; font-style:normal;
    display:flex; align-items:center; justify-content:center;
  }

  /* La barra lateral se vuelve cajón. */
  .ka-side{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:min(280px,84vw); height:100dvh;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:var(--sh-m); padding-top:calc(20px + env(safe-area-inset-top));
  }
  body.ka-menu-abierto .ka-side{transform:none}
  body.ka-menu-abierto{overflow:hidden}
  .ka-telon{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .22s;
  }
  body.ka-menu-abierto .ka-telon{opacity:1; pointer-events:auto}
  .ka-nav a{padding:13px 14px; font-size:15px}

  .ka-main{padding:18px 16px calc(40px + env(safe-area-inset-bottom)); max-width:none}
  .ka-top{align-items:flex-start; flex-direction:column; gap:12px; padding-bottom:16px; margin-bottom:18px}
  .ka-top h1{font-size:28px}
  .ka-panel{padding:16px 14px; border-radius:14px}
  .ka-cols{grid-template-columns:1fr}

  /* Ningún campo baja de 16 píxeles: por debajo, el iPhone hace zoom solo
     al tocarlo y descoloca la pantalla entera. */
  input,select,textarea{font-size:16px}
  .ka-filtros{flex-direction:column}
  .ka-filtros input[type=search],.ka-filtros select{max-width:none; width:100%}

  /* Las tablas anchas se desplazan dentro de su tarjeta, nunca estiran la página. */
  .ka-panel > .ka-tabla,.ka-tabla{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ka-tabla thead,.ka-tabla tbody,.ka-tabla tr{min-width:0}

  .ka-paginas{flex-direction:column; align-items:flex-start; gap:10px}
  .ka-pestanas{flex-wrap:nowrap; overflow-x:auto; padding-bottom:12px; -webkit-overflow-scrolling:touch}
  .ka-pestanas a{flex:none}

  /* La bandeja pasa a ser dos pantallas, como WhatsApp: la lista, o el chat. */
  .ka-bandeja{display:block; height:auto}
  .ka-lista-conv{width:auto; max-height:none; border-radius:14px}
  .ka-conversa{
    position:fixed; inset:0; z-index:45; border-radius:0;
    height:100dvh; padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom); background:var(--sup);
  }
  .ka-volver{display:flex}
  /* Con el chat abierto no se ve la lista detrás: es una pantalla, no dos. */
  body.ka-chat-abierto{overflow:hidden}
  /* 🔴 EL SEGURO. Si el chat NO está encima —se abrió solo y está escondido—
     el cuerpo se desplaza pase lo que pase. El freno de arriba lo pone el
     JavaScript, y un JavaScript equivocado dejó la pantalla de Conversaciones
     congelada durante versiones enteras. Una pantalla que no se puede
     desplazar es una pantalla rota: prefiero que se cuele un fondo moviéndose
     detrás del chat a que nadie pueda bajar la lista. */
  body.ka-chat-abierto:has(.ka-bandeja.ka-sola){overflow:visible}
}

@media (max-width: 480px){
  .ka-top h1{font-size:25px}
  /* 12 píxeles de margen dejaban todo pegado al borde del teléfono: el texto
     empezaba donde acaba la pantalla y se leía apretado. 18 es el margen que
     usan las aplicaciones que la gente ya tiene en la mano. */
  .ka-main{padding:14px 18px calc(36px + env(safe-area-inset-bottom))}
  .ka-burbuja{max-width:88%}
}

/* ───────────── la lista de pacientes en el celular ─────────────
   Una tabla de seis columnas en 390 píxeles no se lee: o se desplaza de lado
   —y nadie desplaza— o se aprieta hasta romperse. Cada fila pasa a ser una
   tarjeta, con el nombre grande arriba y el resto como pares rótulo-valor.
   El rótulo lo pone la propia celda con data-r, así no hay que repetirlo en
   el HTML ni mantener dos listas de columnas. */
@media (max-width: 900px){
  .ka-tabla{display:block; overflow:visible}
  .ka-tabla thead{display:none}
  .ka-tabla tbody,.ka-tabla tr{display:block}
  .ka-tabla tr{
    border:1px solid var(--linea2); border-radius:14px;
    background:var(--sup4); padding:14px; margin-bottom:10px;
  }
  .ka-tabla td{display:flex; gap:12px; padding:5px 0; border:none; align-items:flex-start}
  .ka-tabla td:first-child{
    display:block; padding:0 0 10px; margin-bottom:8px;
    border-bottom:1px solid var(--linea2);
  }
  .ka-tabla td:first-child .ka-n{font-size:16px}
  .ka-tabla td[data-r]::before{
    content:attr(data-r); flex:none; width:112px;
    font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--tenue); padding-top:2px;
  }
  /* Una celda vacía no merece ocupar una línea entera. */
  .ka-tabla td[data-r]:empty{display:none}
  .ka-tabla.ka-datos td:first-child{display:flex; border:none; padding:5px 0; margin:0}
  /* En tarjeta, el rojo lo pone la tarjeta entera: si además lo pusiera cada
     celda quedarían dos tonos superpuestos. */
  tr.ka-veto td,[data-tema="oscuro"] tr.ka-veto td{background:transparent}
  tr.ka-veto{border-color:var(--alerta-b); background:var(--alerta-f)}
  [data-tema="oscuro"] tr.ka-veto{background:rgba(232,134,122,.07)}
}

/* ═══════════════════════════════════════════════════════════════
   LA BANDEJA, COMO WHATSAPP
   Mismo reparto que el CRM de BAFIOTE: la lista a la izquierda, el
   chat a la derecha; en el celular, dos pantallas.
   ═══════════════════════════════════════════════════════════════ */

.ka-lista-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px;
}
.ka-lista-cab b{font-family:var(--fuente-ui,inherit); font-size:22px; font-weight:600; letter-spacing:-.01em}

/* Debajo de los chips, con la línea que separa de la lista. */
.ka-buscar-chat{position:relative; padding:0 12px 12px; border-bottom:1px solid var(--linea)}
.ka-buscar-chat svg{
  position:absolute; left:26px; top:9px; width:16px; height:16px; color:var(--tenue);
}
.ka-buscar-chat input{
  width:100%; padding:9px 14px 9px 36px; border-radius:99px;
  background:var(--sup2); border:1px solid var(--linea2); font-size:13.5px;
}

/* La fila del chat */
.ka-conv-l1{display:flex; align-items:baseline; gap:10px}
.ka-conv-l1 b{
  font-weight:600; font-size:14.5px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-conv-l2{
  display:block; color:var(--tenue); font-size:13px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* La cabecera del chat: una sola línea, y el nombre manda. */
.ka-chat-cab{display:flex; align-items:center; gap:11px}
/* Lo que se puede hacer con la conversación, junto y a la derecha. */
.ka-chat-hacer{display:flex; align-items:center; gap:8px; margin-left:auto}
.ka-chat-quien{flex:1; min-width:0}
.ka-chat-quien b{
  display:block; font-size:15px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-chat-quien span{
  display:block; margin-top:1px; font-size:12px; color:var(--tenue);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-chat-quien i{font-style:normal}
.ka-abierta{color:var(--ok)}
.ka-llamar{flex:none; margin-left:auto}

/* Las burbujas: la nuestra en blanco macizo, la de la paciente en gris.
   Es la inversión de WhatsApp, y funciona igual: lo propio destaca. */
.ka-burbuja.ka-salida{background:var(--acento); color:var(--acento-t); border-color:var(--acento-b)}
/* 🔴 LA HORA DE LOS MENSAJES PROPIOS, INVISIBLE EN MODO DÍA.
   Aquí decía `color:rgba(0,0,0,.5)` a secas. En modo noche la burbuja propia es
   BLANCA y ese negro translúcido se lee perfecto; en modo día la burbuja es
   NEGRA y quedaba negro sobre negro: la hora, el «desde el celular» y los
   chulitos desaparecían. Es la misma familia del fallo de `--hueso`: un color
   fijo dentro de una caja que se invierte con el tema.
   Se arregla como se arreglan estos: heredando del color de la burbuja, que SÍ
   se invierte, y bajándole opacidad. Un solo par de reglas para los dos temas. */
.ka-burbuja.ka-salida span,.ka-burbuja.ka-salida .ka-tenue{color:inherit; opacity:.58}
.ka-burbuja.ka-salida .ka-acuse{color:inherit; opacity:.72}
.ka-burbuja.ka-entrada{background:var(--sup3); border-color:var(--linea2)}

/* ───────────── el compositor: UNA barra ─────────────
   Antes eran un cuadro de texto grande y, debajo, una fila de botones
   sueltos. En un teléfono eso ocupa un tercio de la pantalla y no se parece
   a nada que la gente ya sepa usar. Ahora es la barra de siempre. */
.ka-barra-msg{display:flex; align-items:flex-end; gap:10px}
.ka-barra-msg .ka-chat-acciones{
  display:flex; align-items:flex-end; gap:10px; width:100%; margin:0; flex-wrap:nowrap;
}
/* El campo de escribir, como el de WhatsApp: un renglón en reposo, y crece con
   el texto hasta un tope. Pasado el tope se desliza por dentro.

   El tope es una FRACCIÓN de la pantalla y no un número suelto de píxeles: en el
   computador caben siete renglones sin estorbar; en el teléfono, con el teclado
   subido, esos mismos píxeles taparían la conversación que se está contestando.

   Antes eran 120 píxeles fijos —tres renglones— y un mensaje de seis se escribía
   a ciegas, viendo solo el final.

   `resize:none` a propósito: con el tirador de la esquina el campo se quedaba a
   la altura que alguien le dejó una vez y ya no volvía a crecer ni a encoger
   solo. Dos maneras de cambiar el mismo alto siempre pelean. */
.ka-barra-msg textarea{
  flex:1; min-width:0; resize:none; max-height:min(34vh, 210px);
  padding:10px 16px; border-radius:22px; line-height:1.4;
  min-height:42px; height:42px; overflow-y:hidden;
}
/* El enlace, la carita y el «más»: más grandes y más separados.
   Iban a 38px pegados unos a otros y al ras del cuadro de escribir — «me
   aparece como muy al ras», y para tocarlos con el pulgar había que apuntar.
   44px es la medida mínima que recomiendan Apple y Google para algo que se
   toca con el dedo. */
.ka-barra-msg .ka-ico{flex:none; width:44px; height:44px; border-radius:50%}
.ka-barra-msg .ka-ico svg{width:21px; height:21px}
@media (hover:hover) and (pointer:fine){.ka-barra-msg .ka-ico:hover{background:var(--sup3)}}
.ka-redondo{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acento); color:var(--acento-t); box-shadow:var(--sh-s);
}
.ka-redondo svg{width:20px; height:20px}
.ka-redondo[hidden]{display:none !important}

@media (max-width: 900px){
  /* Si el chat se abrió solo (nadie lo eligió), en el celular no se muestra:
     quien entra a Conversaciones tiene que ver la LISTA, no caer dentro del
     primer chat sin haberlo pedido. */
  .ka-sola .ka-conversa{display:none}
  .ka-sola .ka-lista-conv{display:block}

  .ka-lista-conv{border:none; background:transparent; padding:0}
  .ka-lista-cab{padding:6px 2px 12px}
  .ka-buscar-chat{padding:0 0 14px}
  .ka-buscar-chat svg{left:14px}

  /* En el celular cada conversación es una tarjeta suelta, no una fila de una
     lista corrida. Separadas respiran, se distingue dónde termina una y empieza
     la otra sin mirar, y el dedo tiene dónde fallar sin abrir la equivocada. */
  .ka-conv{
    border:1px solid var(--linea2); border-radius:14px;
    background:var(--sup); padding:14px 16px; margin-bottom:8px;
  }
  .ka-conv:last-child{margin-bottom:0}
  /* La franja dorada pegada al canto izquierdo se sale de la esquina redonda y
     parece un desperfecto. En tarjeta, la elegida se marca con su propio borde. */
  .ka-conv.on{box-shadow:none; border-color:var(--oro); background:var(--sup3)}

  /* 🔴 La cabecera del chat, en DOS renglones.
     Visto en un teléfono de verdad: los botones iban en la misma fila que el
     nombre, lo empujaban fuera de la pantalla y se salían por la derecha. Se
     leía un avatar, tres botones cortados y ni rastro de la paciente — en la
     pantalla donde lo único que no puede faltar es de quién es la conversación.
     Arriba quién es; debajo, qué se puede hacer. */
  .ka-chat-cab{
    padding:10px 12px; gap:9px; flex-wrap:wrap;
    background:var(--sup); border-bottom:1px solid var(--linea2);
  }
  .ka-chat-cab .ka-chip{display:none}
  /* El nombre se queda con todo el ancho que sobre y empuja los botones al
     renglón de abajo. `min-width:0` es lo que le permite encogerse: sin eso un
     nombre largo vuelve a estirar la fila. */
  .ka-chat-quien{flex:1 1 140px; min-width:0}
  .ka-chat-quien b,
  .ka-chat-quien span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* Y los botones bajan TODOS juntos a su renglón, no unos arriba y otros
     abajo. Si un día son demasiados, ese renglón se desliza de lado — nunca se
     parte una palabra en tres, que es como se veía «Pasar a agenda». */
  .ka-chat-hacer{
    flex:1 0 100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    /* Alineados con el círculo de las iniciales, no con el borde.
       El renglón de arriba lleva la flecha de volver (38px) antes del avatar,
       así que los botones empezaban 47px a la izquierda del nombre y la
       cabecera se veía torcida. Este margen los pone debajo del avatar, que es
       donde el ojo espera que arranque la columna. */
    margin:2px 0 0 calc(38px + 9px);
    /* Y con aire: iban pegados unos a otros y pegados al nombre. */
    gap:9px; padding:2px 12px 4px 0;
  }
  /* Botones más altos: se tocan con el pulgar, no con un ratón. */
  .ka-chat-hacer .ka-btn{padding:8px 14px; font-size:13px; border-radius:10px}
  .ka-chat-hacer > *{flex:0 0 auto}
  .ka-chat-hacer .ka-btn,
  .ka-chat-hacer summary{white-space:nowrap}
  /* «Comentar al equipo» es el texto más largo de la fila: en el teléfono se
     queda en una palabra. El resto sigue escrito para el escritorio. */
  .ka-ancho{display:none}
  .ka-chat-pie{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--sup); border-top:1px solid var(--linea2);
  }
  /* En el teléfono el tope es más bajo: con el teclado abierto queda menos de
     media pantalla, y un campo de siete renglones taparía la conversación que
     se está contestando. */
  .ka-barra-msg textarea{font-size:16px; max-height:min(26dvh, 150px)}
  /* El emoji y el "+" caben; la cámara se va al menú del "+" para no apretar. */
  .ka-barra-msg #ka-camara{display:none}
}

/* El monograma es un archivo, no un dibujo: se escala con la caja y nunca se
   recolorea por CSS —el original trae los remates de la serifa con antialias y
   teñirlo deja el borde sucio—. Por eso hay dos archivos, blanco y negro. */
.ka-logo img,.ka-movil-marca img{width:auto; height:100%; display:block; object-fit:contain}
.ka-logo.grande img{height:100%; margin:0 auto}
.ka-movil-marca img{height:26px}

/* El sonido deja de ser una pastilla flotante que tapa el texto y pasa a vivir
   en la barra lateral, junto al tema: son las dos preferencias de la persona. */
#ka-sonido{
  position:static; width:100%; margin:0 0 8px;
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  padding:8px 10px; border-radius:10px; font-size:12.5px;
  color:rgba(241,237,233,.6); background:transparent;
  border:1px solid rgba(255,255,255,.1); box-shadow:none;
}
@media (hover:hover) and (pointer:fine){#ka-sonido:hover{color:var(--lateral-t); border-color:rgba(255,255,255,.26)}}
#ka-sonido.off{opacity:1; color:rgba(241,237,233,.38)}
@media (max-width:760px){ #ka-sonido{right:auto; bottom:auto} }

/* Los iconos del compositor van al aire, no en botones blancos: en la barra de
   WhatsApp solo hay UN botón macizo, el de enviar o grabar. Si todos pesan lo
   mismo, ninguno dice cuál es el que importa. */
.ka-barra-msg .ka-ico,.ka-chat-cab .ka-ico{
  background:transparent; border:none; box-shadow:none; color:var(--sec);
}
@media (hover:hover) and (pointer:fine){.ka-barra-msg .ka-ico:hover, .ka-chat-cab .ka-ico:hover{background:var(--sup3); color:var(--tinta)}}
.ka-barra-msg .ka-ico svg,.ka-chat-cab .ka-ico svg{width:22px; height:22px}
.ka-chat-cab .ka-volver{color:var(--tinta)}
.ka-chat-cab .ka-volver svg{width:22px; height:22px}

/* ═══════════════════════════════════════════════════════════════
   LA APP DEL TELÉFONO
   Las asesoras trabajan desde el celular, no desde el computador.
   Todo lo que sigue es para que se sienta app y no página web.
   ═══════════════════════════════════════════════════════════════ */

.ka-pestanas-pie{display:none}

/* ─── el botón de atrás ────────────────────────────────
   Solo en el teléfono. En el escritorio la columna de la izquierda está siempre
   a la vista y el navegador tiene su flecha; en el teléfono, instalada en la
   pantalla de inicio, la app no tiene ni lo uno ni lo otro. */
.ka-atras{display:none}
@media (max-width: 900px){
  .ka-atras{
    display:inline-flex; align-items:center; gap:4px;
    margin:0 0 10px -6px; padding:7px 12px 7px 8px;
    border-radius:99px; text-decoration:none;
    background:var(--sup2); border:1px solid var(--linea2);
    color:var(--sec); font-family:var(--fuente-ui); font-size:13px;
  }
  .ka-atras:active{background:var(--sup3)}
  .ka-atras svg{width:17px; height:17px; flex:none}
}

/* Los enlaces del menú se ven igual que sus botones. */
.ka-menu-adj a{
  display:flex; align-items:center; gap:10px; width:100%;
  font-size:13.5px; color:var(--tinta); padding:9px 12px; border-radius:9px;
}
@media (hover:hover) and (pointer:fine){.ka-menu-adj a:hover{background:var(--sup3)}}
.ka-menu-adj a svg{width:18px; height:18px; color:var(--sec); flex:0 0 18px}
.ka-menu-adj button[disabled]{opacity:.45; cursor:default}
@media (hover:hover) and (pointer:fine){.ka-menu-adj button[disabled]:hover{background:none}}
.ka-menu-adj i{
  margin-left:auto; font-style:normal; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tenue);
  border:1px solid var(--linea); border-radius:99px; padding:1px 7px;
}

@media (max-width: 900px){
  .ka-pestanas-pie{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:44;
    background:var(--lateral); border-top:1px solid rgba(255,255,255,.1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .ka-pestanas-pie a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 4px 8px; color:rgba(242,241,239,.45);
  }
  .ka-pestanas-pie a.on{color:var(--lateral-t)}
  .ka-pestanas-pie b{font-size:10.5px; font-weight:500; letter-spacing:.01em}
  .ka-pp-ico{position:relative; display:block}
  .ka-pp-ico svg{width:23px; height:23px; display:block}
  .ka-pp-ico i{
    position:absolute; top:-4px; right:-9px; min-width:16px; height:16px; padding:0 4px;
    border-radius:99px; background:var(--alerta); color:#fff;
    font-size:9.5px; font-weight:700; font-style:normal;
    display:flex; align-items:center; justify-content:center;
  }

  /* Deja sitio para la barra: si no, la última fila de cualquier lista queda
     debajo de ella y no se puede tocar. */
  .ka-main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  /* Antes aquí se reservaban 74 píxeles para la barra de pestañas del pie.
     Apagada la barra, ese hueco sería una franja vacía al final de cada lista:
     queda solo el respiro del borde del teléfono. */

  /* Dentro de un chat la barra se va: la pantalla es del chat, y ahí abajo
     tiene que caber el teclado. */
  body.ka-chat-abierto .ka-pestanas-pie{display:none}

  /* Instalada en la pantalla de inicio, la app ocupa todo: no hay barra de
     direcciones que deje su hueco. */
  @media (display-mode: standalone){
    .ka-movil{padding-top:max(env(safe-area-inset-top), 12px)}
  }

  /* Los paneles del compositor, a lo ancho de la pantalla: un menú de 190 px
     colgando de una esquina en un teléfono se ve como un accidente. */
  .ka-menu-adj,.ka-menu-emoji{
    left:0; right:0; width:auto; min-width:0; bottom:52px;
    max-height:60vh; overflow-y:auto;
  }
  .ka-menu-adj button,.ka-menu-adj a{padding:12px 14px; font-size:15px}
  .ka-menu-adj svg,.ka-menu-adj a svg{width:20px; height:20px; flex:0 0 20px}
}

@media (max-width: 900px){
  /* Para que el panel se mida contra la barra entera y no contra el botón que
     lo abrió, el contenedor del botón deja de ser el punto de referencia. */
  .ka-barra-msg .ka-adjuntar{position:static}
}

/* ───────────── el panel de avisos ───────────── */
.ka-avisos .ka-avisos-botones{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.ka-avisos .ka-btn[disabled]{opacity:.45; cursor:default}
.ka-avisos-nota{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--linea2); line-height:1.65;
}
.ka-avisos-nota b{color:var(--tinta)}
@media (max-width: 900px){
  .ka-avisos .ka-avisos-botones{flex-direction:column}
  .ka-avisos .ka-btn{width:100%; justify-content:center}
}

/* Con los avisos ya encendidos el panel no tiene nada que explicar: se encoge
   y deja de robarle sitio a lo del día. */
.ka-avisos-listo .ka-avisos-nota,.ka-avisos-listo #ka-avisos-texto{display:none}
.ka-avisos-listo .ka-avisos-botones{margin-top:10px}

/* La pregunta del consultorio cuando alguien decide no operarse: «¿le gustaría
   recibir información de otros procedimientos?». Va junto a los botones del
   chat porque se hace en ese momento, no en una pantalla aparte. */
.ka-campanas{margin:4px 0 6px; padding:10px 12px; border-radius:10px; background:var(--sup); border:1px solid var(--linea)}
.ka-campanas > .ka-tenue{display:block; font-size:11.5px; line-height:1.4; margin-bottom:7px}
.ka-campanas-b{display:flex; gap:6px; flex-wrap:wrap}
.ka-campanas-b form{margin:0}

/* El aviso de «aquí no hay nadie con ese nombre» del buscador de chats.
   Va dentro de la lista, donde la persona está mirando, y no arriba en la
   cabecera: un aviso fuera del sitio donde se busca no se lee. */
.ka-buscar-nada{
  margin:0; padding:14px 16px;
  font-size:12.5px; line-height:1.5; color:var(--sec);
  border-bottom:1px solid var(--linea);
}

/* ======================================================= el chat del equipo */

/* La ficha enlazada dentro de un mensaje interno. Es lo que convierte «la de la
   lipectomía» en un enlace que lleva a la paciente correcta, sin que nadie
   tenga que buscarla otra vez. */
.ka-interno-ficha{
  display:inline-block; margin-top:6px; padding:4px 10px;
  border:1px solid var(--linea); border-radius:999px;
  font-size:12px; color:var(--sec); text-decoration:none;
}
@media (hover:hover) and (pointer:fine){.ka-interno-ficha:hover{border-color:var(--oro-m); color:var(--tinta)}}

/* Las líneas mal escritas de «números marcados», en Ajustes. Se dicen una por
   una con su motivo: «no funciona» sin decir cuál no ayuda a arreglarlo. */
.ka-lineas-malas{
  margin:10px 0 4px; padding:12px 14px;
  background:var(--sup3); border:1px solid var(--oro-m); border-radius:12px;
  font-size:13px; color:var(--sec);
}
.ka-lineas-malas ul{margin:8px 0 0; padding-left:18px}
.ka-lineas-malas code{font-size:12px; color:var(--tinta)}

/* El panel de las que esperan cita. Comparte la pinta de los demás paneles de
   Mi día a propósito: es una lista más del día, no una pantalla aparte. */
.ka-panel-agenda .ka-remitida-nota{margin-top:4px}

/* La ficha que va pegada a un mensaje del equipo, avisada encima del campo de
   escribir: quien manda tiene que ver QUÉ va a mandar antes de mandarlo. */
.ka-interno-sobre{
  margin:0 0 8px; padding:8px 12px;
  background:var(--sup3); border-radius:10px;
  font-size:12.5px; color:var(--sec);
}

/* El pie de la lista cuando se están trayendo más conversaciones. */
.ka-mas-chats{
  margin:0; padding:16px; text-align:center;
  font-size:12.5px; color:var(--tenue);
}

/* ───────────── empezar de cero: soltar la bandeja de alguien ─────────────
   Lo más delicado de la pantalla de Equipo, y por eso va cerrado: se abre a
   propósito, no se tropieza uno con él. Los números de «con cita» y «hablando
   esta semana» van marcados porque son los que deciden si se pulsa o no. */
.ka-soltar{margin-top:18px}
.ka-soltar > summary{
  cursor:pointer; font-size:14.5px; padding:4px 0;
  list-style:none; display:flex; align-items:center; gap:8px;
}
.ka-soltar > summary::-webkit-details-marker{display:none}
.ka-soltar > summary::before{content:'▸'; color:var(--tenue); transition:transform .18s}
.ka-soltar[open] > summary::before{transform:rotate(90deg)}
.ka-soltar > p{margin:10px 0 14px; font-size:13px; line-height:1.55}
.ka-soltar .ka-fila{gap:12px; flex-wrap:wrap}
.ka-soltar input[type=text]{
  padding:8px 12px; border-radius:10px; border:1px solid var(--linea);
  background:var(--fondo); color:var(--tinta); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
}
.ka-ojo{color:var(--alerta)}

/* ═══════════════════════════════════════════════════════════════
   EL CALENDARIO
   La vista de semana de Google Calendar, copiada a propósito: las
   horas a la izquierda, los días en columnas, hoy marcado y cada
   cita como un bloque en su hora. Las asesoras llevan años mirando
   ESA rejilla; cualquier otra forma las obliga a aprender a leer
   una agenda otra vez.
   ═══════════════════════════════════════════════════════════════ */

.ka-cal{
  background:var(--sup); border:1px solid var(--linea2); border-radius:18px;
  box-shadow:var(--sh-s); overflow:hidden;
}
.ka-cal-mando{display:flex; gap:8px; align-items:center}

/* 🔴 Mientras llega el día nuevo. Y nada más que esto.
   La tentación es poner un girador o dejar la rejilla en blanco; las dos cosas
   se ven PEOR que esperar, porque anuncian una espera que dura doscientos
   milisegundos. Lo que hace falta es solo que el clic no parezca perdido: se
   apaga un pelo y se ignoran más clics. Si tarda de verdad, la opacidad tarda
   en entrar lo justo para no parpadear en el caso rápido. */
.ka-cal-yendo{pointer-events:none}
.ka-cal-yendo .ka-cal-vista{opacity:.55; transition:opacity .18s var(--ease-out) .12s}
@media (prefers-reduced-motion:reduce){.ka-cal-yendo .ka-cal-vista{transition:none}}

/* ─── la cabecera de los días */
.ka-cal-cab{
  display:grid; grid-template-columns:62px repeat(var(--cols,7),1fr);
  border-bottom:1px solid var(--linea2); position:sticky; top:0; z-index:2;
  background:var(--sup);
}
.ka-cal-dia{
  padding:12px 6px 10px; text-align:center; border-left:1px solid var(--linea2);
  font-family:var(--fuente-ui);
}
.ka-cal-dia span{
  display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:5px;
}
.ka-cal-dia b{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  font-size:17px; font-weight:500; letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
}
/* Hoy, como en Google: el número dentro de un círculo lleno. */
.ka-cal-dia.hoy span{color:var(--oro-d)}
/* 🔴 Aquí decía `color:#fff` sobre `--oro`. En modo noche `--oro` es un crema
   claro, así que el número de hoy quedaba BLANCO SOBRE BLANCO: el día de hoy,
   invisible, en la pantalla de la agenda. Es la cuarta vez que aparece este
   fallo —`--hueso`, la hora de las burbujas, y ahora esto— y siempre por lo
   mismo: un color fijo dentro de una caja que se invierte con el tema.
   `--acento` / `--acento-t` son la pareja que SÍ se invierte junta. */
.ka-cal-dia.hoy b{background:var(--acento); color:var(--acento-t)}

/* ─── la rejilla */
.ka-cal-cuerpo{
  display:grid; grid-template-columns:62px repeat(var(--cols,7),1fr);
  max-height:min(62vh,700px); overflow-y:auto; position:relative;
  /* La primera hora lleva su etiqueta 7 píxeles por encima de su línea; sin este
     respiro arriba, «7 am» queda cortada contra el borde de la caja. */
  padding-top:10px;
}
.ka-cal-horas{border-right:1px solid var(--linea2)}
.ka-cal-hora{
  height:var(--alto-hora); position:relative;
}
/* La hora se escribe PEGADA a su línea y un pelo por encima, como en Google:
   la etiqueta marca dónde empieza esa hora, no el centro de la franja. */
.ka-cal-hora span{
  position:absolute; top:-7px; right:8px;
  font-size:11px; color:var(--tenue); background:var(--sup); padding:0 2px;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-col{position:relative; border-left:1px solid var(--linea2)}
/* Hoy se tiñe apenas. Un fondo macizo parecía una columna «seleccionada» y
   robaba la atención que tienen que llevarse las citas. Un color con alfa sirve
   en los dos temas sin tener que escribirlo dos veces. */
.ka-cal-col.hoy{background:rgba(191,148,74,.07)}
.ka-cal-celda{height:var(--alto-hora); border-bottom:1px solid var(--linea2)}

/* ─── cada cita */
.ka-cal-ev{
  position:absolute; left:3px; right:3px; min-height:30px;
  border-radius:7px; padding:4px 7px; text-decoration:none;
  font-family:var(--fuente-ui); overflow:hidden;
  border-left:3px solid transparent;
  transition:transform .14s, box-shadow .14s;
}
@media (hover:hover) and (pointer:fine){.ka-cal-ev:hover{transform:scale(1.02); box-shadow:var(--sh-m); z-index:3}}
/* Se agarra y se mueve, como en Google: sin el arrastre de enlaces del
   navegador ni la selección de texto al estirar. */
.ka-cal-ev{-webkit-user-drag:none; user-select:none; -webkit-user-select:none}
@media (hover:hover) and (pointer:fine){.ka-cal-ev{cursor:grab}}
.ka-cal-ev b{
  display:block; font-size:10.5px; font-weight:600; opacity:.72;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-ev span{
  display:block; font-size:12px; line-height:1.25; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 🔴 Repartido en tres o más columnas, el bloque es una tira.
   Ahí el pie —la sede, el procedimiento— sale cortado a la mitad, que se lee
   peor que no salir. El nombre se queda: es lo único que hace falta para saber
   a quién abrir. El texto entero sigue en el papelito al pararse encima. */
.ka-cal-ev.ka-estrecho{padding:3px 5px}
.ka-cal-ev.ka-estrecho em{display:none}
.ka-cal-ev.ka-estrecho b{font-size:9.5px}
.ka-cal-ev.ka-estrecho span{font-size:11px}
/* La hora de fin solo donde cabe: en un bloque estrecho, en la semana de un
   portátil y en el teléfono se queda solo la de inicio (el rango completo
   sigue en el `title` y en la tarjeta). Sin esto «7:00 am – 10:00 am» ocupaba
   tres renglones y el nombre quedaba en «FLOR…». */
.ka-cal-ev b .ka-cal-h1, .ka-cal-ev b .ka-cal-h2{display:inline; white-space:nowrap}
.ka-cal-ev.ka-estrecho .ka-cal-h2{display:none}

/* En pantallas de dedo, ningún campo por debajo de 16 px: iOS hace zoom al
   tocar un campo más chico (el buscador del calendario estaba en 12,5 px y
   los del papelito de cita en 14). Solo con dedo: en el computador se quedan
   como están. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{font-size:16px !important}
}
@media (max-width:1280px){.ka-cal-v-semana .ka-cal-ev .ka-cal-h2{display:none}}
@media (max-width:900px){.ka-cal-ev .ka-cal-h2{display:none}}

/* Puesta desde el CRM: el color de la casa. */
.ka-cal-crm{background:var(--oro-l); color:var(--oro-d); border-left-color:var(--oro)}
/* De la agenda del consultorio: neutro, para que no compita. */
.ka-cal-google{background:var(--sup3); color:var(--sec); border-left-color:var(--apagado)}
/* Puesta aquí y todavía NO subida: se marca, porque es la que falta en el otro lado. */
.ka-cal-ev.suelta{border-left-color:var(--alerta); background:var(--alerta-f); color:var(--alerta)}

.ka-cal-leyenda{
  display:flex; flex-wrap:wrap; gap:18px; padding:12px 18px;
  border-top:1px solid var(--linea2); font-size:12px; color:var(--tenue);
}
.ka-cal-leyenda span{display:flex; align-items:center; gap:7px}
.ka-cal-leyenda .ka-cal-ley-cat{gap:6px}
.ka-cal-leyenda .ka-cal-ley-cat .ka-cat-n{width:17px; height:17px; font-size:10px; border-radius:5px}
.ka-cal-leyenda .ka-cat-t{display:inline}
.ka-cal-leyenda .ka-cat-t > span{font-size:12px; color:var(--tenue); font-weight:400}
.ka-cal-p{width:11px; height:11px; border-radius:3px; display:block}
.ka-cal-p.crm{background:var(--oro)}
.ka-cal-p.google{background:var(--apagado)}
.ka-cal-p.suelta{background:var(--alerta)}

.ka-cruce-t{
  font-family:var(--fuente-ui); font-size:14.5px; font-weight:600;
  margin:18px 0 2px;
}
.ka-cruce-t:first-of-type{margin-top:4px}

/* Lo que cambió en la agenda del consultorio y aquí nadie sabe todavía.
   Va marcado con un filo de color porque no es información: es algo que hay
   que decidir. Un panel igual a los demás se lee como un resumen más. */
.ka-cruce-movidas{border-left:3px solid var(--alerta)}
.ka-cruce-movidas .ka-fila{align-items:flex-start}
.ka-cruce-movidas .ka-enlinea{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ─── en el celular no cabe una semana ─────────────
   Siete columnas en 390 píxeles son 47 px por día: no cabe ni la hora. Se
   desliza de lado, con las horas ancladas a la izquierda, que es exactamente lo
   que hace Google Calendar en el teléfono. */
@media (max-width: 900px){
  .ka-cal{overflow-x:auto; -webkit-overflow-scrolling:touch}
  /* 🔴 El ancho mínimo es para la SEMANA, que son siete columnas y no caben.
     Aplicado también al día —que es una sola columna— obligaba a deslizar de
     lado en el teléfono para ver una agenda que cabía de sobra. `--cols` ya
     sabe cuántas hay: se pide el mínimo solo cuando hay más de una. */
  .ka-cal-cab,.ka-cal-cuerpo{min-width:680px}
  .ka-cal-cuerpo[style*="--cols:1"],.ka-cal-cab[style*="--cols:1"]{min-width:0}
  .ka-cal-cuerpo{max-height:none}
  .ka-cal-horas{position:sticky; left:0; z-index:1; background:var(--sup)}
  .ka-cal-cab .ka-cal-esquina{position:sticky; left:0; background:var(--sup); z-index:1}
  .ka-cal-mando{width:100%; justify-content:flex-start}
}

/* La línea roja de «ahora», como en Google Calendar: la raya cruza el día y el
   punto marca el borde. Es lo que dice dónde está uno parado sin buscar la hora. */
.ka-cal-ahora{
  position:absolute; left:0; right:0; height:2px; background:#E8554A; z-index:2;
  pointer-events:none;
}
.ka-cal-ahora::before{
  content:''; position:absolute; left:-5px; top:-4px;
  width:10px; height:10px; border-radius:50%; background:#E8554A;
}
.ka-cal-esquina{
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;
  font-size:10px; letter-spacing:.04em; color:var(--tenue);
}

/* La leyenda del calendario, que hace de «Mis calendarios» de Google: la lista
   de qué significa cada color, siempre a la vista debajo de la rejilla. */
.ka-cal-sep{width:1px; height:14px; background:var(--linea); padding:0}

/* ─── la sede, dentro del bloque ───────────────────────
   Una letra, no una palabra: en un bloque de 45 minutos caben dos renglones y
   medio, y «Villavicencio» se come el nombre de la paciente. La letra va al lado
   de la hora, que es el renglón donde siempre sobra espacio.

   🔴 Y va dibujada con `currentColor` —borde y letra del mismo color del texto
   del bloque— a propósito. Un color fijo aquí sería la quinta vez que cae el
   mismo fallo del proyecto: los bloques se pintan de dieciséis colores distintos
   (los cinco de las etiquetas y los once de Google) y un blanco fijo desaparece
   sobre el amarillo igual que el número de hoy desaparecía sobre el oro.
   `currentColor` es el único color que ya se sabe legible sobre ese fondo,
   porque es con el que está escrito el resto del bloque. */
.ka-cal-sede{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:13px; height:13px; padding:0 3px; margin-left:5px;
  border:1px solid currentColor; border-radius:4px;
  font-size:9px; font-weight:700; font-style:normal; line-height:1;
  opacity:.85; vertical-align:1px;
}
/* El procedimiento, tercer renglón. Se corta con puntos suspensivos: vale más
   media palabra que empujar el bloque encima del siguiente. */
.ka-cal-ev em{
  display:block; font-style:normal; font-size:10.5px; line-height:1.2;
  opacity:.74; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-cal-leyenda .ka-cal-sede{
  background:var(--sup3); color:var(--sec); margin:0;
  min-width:15px; height:15px; font-size:10px;
}

/* ─── arrastrar para agendar ───────────────────────────
   La columna avisa que se puede agarrar, y mientras se arrastra el texto no se
   selecciona: si no, al estirar queda media rejilla pintada de azul. */
.ka-cal-col{cursor:cell}
.ka-cal[data-puede="1"] .ka-cal-ev[data-ficha]:not([data-ficha="0"]){cursor:grab}
.ka-cal.ka-cal-agarrando,
.ka-cal.ka-cal-agarrando *{user-select:none; -webkit-user-select:none}

/* El bloque gris que se estira con el dedo. No es una cita todavía: por eso va
   punteado y sin color de etiqueta —lo que está punteado se entiende como
   «esto aún no existe». */
.ka-cal-fantasma{
  position:absolute; left:3px; right:3px; z-index:4; pointer-events:none;
  border-radius:7px; padding:3px 7px; overflow:hidden;
  background:var(--acento); color:var(--acento-t);
  border:1px dashed var(--acento-t);
  font-family:var(--fuente-ui); opacity:.92;
}
.ka-cal-fantasma b{
  display:block; font-size:10.5px; font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-fantasma span{display:block; font-size:10.5px; opacity:.8}

/* ─── el papelito de nueva cita ────────────────────────
   Flota sobre la rejilla, pegado a donde se soltó. Es la misma idea del cuadrito
   de Google: se agenda sin salir del calendario, y si uno se arrepiente basta
   con dar un toque afuera. */
.ka-cal-nueva,
.ka-cal-mover{
  position:fixed; z-index:60; width:min(320px, calc(100vw - 24px));
  background:var(--sup); border:1px solid var(--linea);
  border-radius:14px; box-shadow:var(--sh-g); padding:14px;
  font-family:var(--fuente-ui);
  animation:ka-cal-entra .13s ease-out;
  /* Nunca más alto que la pantalla: si no cabe, se desplaza por dentro. Antes
     el botón de guardar se iba por debajo del borde y la cita no se podía
     terminar. */
  max-height:calc(100dvh - 24px); overflow:auto;
}

/* En el teléfono deja de flotar y se pega abajo, ancho completo. */
.ka-cal-nueva.ka-cal-hoja,
.ka-cal-mover.ka-cal-hoja{
  left:0; right:0; bottom:0; top:auto; width:100%;
  border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:72vh;
  animation:ka-cal-sube .16s ease-out;
}
@keyframes ka-cal-sube{from{transform:translateY(18px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){
  .ka-cal-nueva.ka-cal-hoja,.ka-cal-mover.ka-cal-hoja{animation:none}
}
@keyframes ka-cal-entra{from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .ka-cal-nueva,.ka-cal-mover{animation:none}
}
.ka-cal-nueva-cab{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ka-cal-nueva-cab b{font-size:15px}

/* ─── el mismo papelito, editando una cita que ya existe ───
   Se abre parándose encima de la cita. Hereda todo lo de arriba: la única
   diferencia es que aquí la paciente no se busca —ya se sabe quién es— y en su
   lugar están el día y la hora, que es lo que se viene a cambiar. */
/* Y el de «Nueva cita» usa exactamente la misma fila de día, hora y duración:
   Manoroz pidió poder corregir ahí el día y la hora, y dos papelitos que se
   editan distinto son dos cosas que aprender. */
.ka-cal-ed-fila{display:flex; gap:8px; margin:10px 0 0}
.ka-cal-ed-fila label{flex:1; min-width:0}
.ka-cal-editar label,
.ka-cal-nueva .ka-cal-ed-fila label,
.ka-cal-nueva .ka-cal-ed-dura{
  display:block; font-size:12px; color:var(--tenue); font-family:var(--fuente-ui);
}
.ka-cal-editar label input,
.ka-cal-editar label select,
.ka-cal-nueva .ka-cal-ed-fila input,
.ka-cal-nueva .ka-cal-ed-dura select,
.ka-cal-editar .ka-dura-otro,
.ka-cal-nueva .ka-dura-otro{
  width:100%; margin-top:3px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-ed-dura{margin-top:10px}
.ka-cal-nueva .ka-cal-ed-dura{margin-bottom:10px}
/* Guardar y ver la ficha van en la misma fila: apilados parecen dos caminos
   igual de importantes, y no lo son. */
.ka-cal-editar .ka-acciones{display:flex; gap:8px; align-items:center; margin-top:12px}
.ka-cal-editar .ka-acciones .ka-btn{flex:1; text-align:center}
.ka-cal-ed-quien{
  /* El nombre de la paciente puede ser largo y la cabecera lleva la X al lado:
     se corta con puntos en vez de empujar el botón fuera del papelito. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Quitar la cita va aparte y en rojo tenue, separado de los botones que
   guardan: no es lo mismo equivocarse guardando que equivocarse quitando. */

/* ─── la cita de la agenda del consultorio, al abrirla ─────
   Copiado del orden de la tarjeta de Google, que es el que el consultorio ya
   sabe leer: las acciones arriba, el título grande, la fecha completa debajo, y
   cada dato en su renglón con su icono. */
.ka-cal-ver{width:min(400px, calc(100vw - 24px)); padding:10px 18px 18px}
.ka-cal-ver-acciones{display:flex; justify-content:flex-end; gap:2px; margin:0 -6px 2px 0}
.ka-cal-ver-acciones .ka-cal-x{font-size:17px; padding:6px 8px; border-radius:8px; line-height:1}
@media (hover:hover) and (pointer:fine){.ka-cal-ver-acciones .ka-cal-x:hover{background:var(--sup2)}}
.ka-cal-ver h3{
  font-family:var(--fuente-ui); font-size:19px; font-weight:500; line-height:1.28;
  margin:0 0 4px; color:var(--txt);
  /* Los títulos de esa agenda llevan nombre, cédula y teléfono en un renglón:
     se parten en varias líneas en vez de salirse de la tarjeta. */
  overflow-wrap:anywhere;
}
.ka-cal-ver-cat{display:flex; align-items:center; gap:10px; margin:-6px 0 14px}
.ka-cal-ver-cat .ka-cat-t > span{font-size:13px}
.ka-cal-ver-cuando{
  margin:0 0 14px; font-size:13.5px; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-ver-linea{
  display:flex; gap:12px; align-items:flex-start;
  margin:0 0 10px; font-size:13.5px; color:var(--sec); line-height:1.45;
}
.ka-cal-ver-linea i{
  font-style:normal; flex:none; width:16px; height:16px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
}
.ka-cal-ver-linea svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.8;
}
.ka-cal-ver-linea span{overflow-wrap:anywhere; white-space:pre-line}
.ka-cal-ver-ficha,
.ka-cal-ver-enlazar,
.ka-cal-ver-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--linea)}

/* ─── El cajón de crear una ficha ───

   🔴 Aquí NO hay un cajón nuevo. `.ka-cajon` ya existe —es el del chat, el de
   remitir y agendar— y este reusa ese, con su barra, su telón y su animación.

   Se escribió uno propio primero, con estos mismos nombres, y el choque dejó el
   formulario en `visibility:hidden`: invisible, y encima imposible de enfocar.
   Segunda colisión de nombre del mismo día. **Un nombre de clase es global.**
   Lo único que hace falta añadir es lo que este cajón tiene y los otros no. */
.ka-cajon-dice{margin:0 0 14px; font-size:12px; line-height:1.5}
.ka-cajon-dice span{color:var(--sec)}
.ka-cajon-cuerpo label input[type="text"]{
  width:100%; margin-top:4px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--tinta);
  font-family:var(--fuente-ui); font-size:13.5px;
}
.ka-cajon-cuerpo .ka-btn{width:100%; justify-content:center; margin:16px 0 4px}

/* ─── La comparación dentro del cajón ───
   Manoroz: «una ventana al costado derecho pequeña comparando los datos, y si
   son los correctos asignarlos y ya queda registrado».
   Las dos columnas se ven a la vez a propósito: decir «sí es ella» es comparar
   dos nombres y dos números, y eso se hace de un vistazo o no se hace. */
.ka-compara{
  border:1px solid var(--linea); border-radius:12px;
  padding:12px 13px; margin-bottom:12px; background:var(--sup2);
}
.ka-compara-l{margin-bottom:9px}
.ka-compara-t{
  display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:2px;
}
.ka-compara-l b{display:block; font-size:13.5px; color:var(--tinta); line-height:1.35}
.ka-compara-l span{display:block; font-size:12px; color:var(--sec)}
.ka-compara-por{margin:0 0 10px; font-size:11.5px}
.ka-compara-b{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ka-compara-b .ka-btn{width:auto; margin:0}

/* El formulario de crear, plegado cuando hay candidatas. */
.ka-cajon-crear{margin-top:6px}
.ka-cajon-crear>summary{
  cursor:pointer; list-style:none; padding:9px 0;
  font-size:12.5px; color:var(--sec); border-top:1px solid var(--linea3);
}
.ka-cajon-crear>summary::-webkit-details-marker{display:none}
.ka-cajon-crear>summary::before{content:'+ '; color:var(--tenue)}
.ka-cajon-crear[open]>summary::before{content:'– '}
@media (hover:hover) and (pointer:fine){.ka-cajon-crear>summary:hover{color:var(--tinta)}}
.ka-cal-ver-ficha .ka-btn{width:100%; text-align:center}
.ka-cal-ver-form label{display:block; font-size:12px; color:var(--tenue); margin-bottom:10px}
.ka-cal-ver-form input,
.ka-cal-ver-form select,
.ka-cal-ver-form textarea{
  width:100%; margin-top:3px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
}
.ka-cal-ver-form textarea{resize:vertical; min-height:56px}
.ka-cal-ver-form .ka-acciones{display:flex; gap:8px}
.ka-cal-ver-form .ka-acciones .ka-btn{flex:1; text-align:center}

/* 🔴 En el teléfono NO es una hoja: es la pantalla entera, como hace Google.
   Estos títulos llevan nombre, cédula y teléfono, y la descripción es donde el
   consultorio escribe lo que de verdad pasa («no ha conseguido el kenacor»). En
   una hoja de 72vh eso sale cortado, que es justo lo que no sirve. */
/* 🔴 Y empieza DEBAJO de la barra negra, no en el borde de la pantalla.
   Arrancaba en cero y la barra —con el ☰ y el globo de conversaciones— le caía
   encima: el título salía cortado y el botón de volver no se veía por ninguna
   parte. «Debería aparecerme la ficha completa sin que me toque deslizar, eso
   incluyendo el volver y demás». */
.ka-cal-ver.ka-cal-hoja{
  top:var(--cab-movil, 56px); left:0; right:0; bottom:0;
  width:100%; height:auto; max-height:none;
  border-radius:0; border:0;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
  overflow:auto; -webkit-overflow-scrolling:touch;
  animation:ka-cal-entra .13s ease-out;
}
.ka-cal-ver.ka-cal-hoja .ka-cal-ver-acciones{
  /* Como en el teléfono de Google: volver a la izquierda —donde cae el pulgar—
     y editar a la derecha. Y pegado arriba: si la descripción es larga y hay
     que desplazarse, el botón de volver sigue ahí. */
  justify-content:space-between; margin:0 -6px 12px;
  position:sticky; top:0; z-index:2;
  background:var(--sup); padding:10px 0 6px;
}
.ka-cal-ver.ka-cal-hoja .ka-cal-ver-acciones .ka-cal-x{order:2}
.ka-cal-ver.ka-cal-hoja .ka-cal-ver-acciones [data-cerrar]{order:1}
/* En el teléfono la × dice lo que hace. Una × en la esquina de una pantalla
   completa no se lee como «volver», y eso es lo que uno busca. */
.ka-cal-ver.ka-cal-hoja .ka-cal-ver-acciones [data-cerrar]{font-size:0}
.ka-cal-ver.ka-cal-hoja .ka-cal-ver-acciones [data-cerrar]::before{
  content:'‹ Volver'; font-size:15px; font-family:var(--fuente-ui);
}
.ka-cal-ver.ka-cal-hoja h3{font-size:24px}

.ka-cal-quitar-f{margin-top:10px; padding-top:10px; border-top:1px solid var(--linea)}
.ka-cal-ed-quitar{
  width:100%; color:var(--alerta); border-color:rgba(178,74,69,.35); background:transparent;
}
@media (hover:hover) and (pointer:fine){.ka-cal-ed-quitar:hover{background:rgba(178,74,69,.08)}}
.ka-cal-x{
  border:0; background:transparent; color:var(--tenue);
  font-size:20px; line-height:1; cursor:pointer; padding:0 2px;
}
@media (hover:hover) and (pointer:fine){.ka-cal-x:hover{color:var(--txt)}}
.ka-cal-cuando{
  margin:2px 0 10px; font-size:12.5px; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-cal-busca{position:relative}
.ka-cal-q{
  width:100%; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
}
.ka-cal-q:focus{outline:2px solid var(--oro); outline-offset:1px}
.ka-cal-sug{
  margin-top:6px; max-height:190px; overflow-y:auto;
  border:1px solid var(--linea2); border-radius:9px; background:var(--sup2);
}
.ka-cal-sug p{margin:0; padding:10px 11px; font-size:12.5px}
.ka-cal-sug-f{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:0; border-bottom:1px solid var(--linea2); background:transparent;
  padding:8px 11px; color:var(--txt); font-family:var(--fuente-ui);
}
.ka-cal-sug-f:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){.ka-cal-sug-f:hover{background:var(--sup3)}}
.ka-cal-sug-f b{display:block; font-size:13.5px; font-weight:500}
.ka-cal-sug-f span{display:block; font-size:11.5px; color:var(--tenue)}
.ka-cal-elegida{
  margin:8px 0 0; font-size:12px; color:var(--alerta);
}
.ka-cal-dos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0}
.ka-cal-dos label{display:block; font-size:11.5px; color:var(--tenue)}
.ka-cal-dos select{
  width:100%; margin-top:3px; padding:7px 8px; border-radius:8px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
/* 🔴 Se llama `-cita` y no `-nota` porque `.ka-cal-nota` YA EXISTE: es el
   renglón de «Queda la tarea de confirmarla el día antes» de este mismo
   papelito. Al estrenar el nombre repetido, ese renglón se pintó con borde,
   fondo y relleno de campo de texto — una frase metida dentro de una caja que
   no es un campo.

   Es el mismo error del `ka-cols` que descuadró Mi día: **un nombre de clase es
   global; antes de estrenar uno, buscarlo.** */
/* Agendar desde el chat. Usa la misma caja desplegable que Remitir —misma forma
   y mismo sitio— pero un poco más ancha: lleva cuatro campos y uno es una fecha
   con hora, que en 260 píxeles no se lee. */
.ka-agendar-chat .ka-remitir-caja{min-width:min(300px, 86vw)}
.ka-agendar-chat input[type="datetime-local"],
.ka-agendar-chat input[type="text"],
.ka-agendar-chat select{
  width:100%; padding:7px 9px; border-radius:8px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
.ka-agendar-chat label{display:block; margin-bottom:8px; font-size:11.5px; color:var(--tenue)}

.ka-cal-nota-cita{
  width:100%; margin-bottom:9px; padding:8px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:12.5px;
}
.ka-cal-nota-cita:focus{outline:2px solid var(--oro); outline-offset:1px}
.ka-cal-ok{width:100%}
.ka-cal-ok:disabled{opacity:.45; cursor:not-allowed}
.ka-cal-nota{margin:7px 0 0; font-size:11.5px}
.ka-cal-mover-t{margin:0 0 10px; font-size:13.5px}

/* ─── el tablero: columna del mes chiquito + rejilla ───
   Es la forma del tablero de Google, y no por copiarla: la columna de la
   izquierda es la que dice EN QUÉ PARTE del mes va uno, y sin ella la semana
   flota sola. En el celular no cabe y se esconde; allá manda la rejilla. */
.ka-cal-lienzo{display:grid; grid-template-columns:210px 1fr; gap:16px; align-items:start}
@media (max-width: 1000px){
  .ka-cal-lienzo{grid-template-columns:1fr}
  /* En el teléfono la columna entera no cabe, pero esconderla entera dejaba el
     calendario SIN botón de «Nueva cita»: la única forma de agendar era saber
     que hay que tocar la rejilla. Se queda el botón, que es la puerta; el mes
     chiquito y las casillas se van, porque para moverse de mes está el título y
     las casillas son para afinar, no para entrar. */
  /* 🔴 Plegado, no escondido (3.21.0).
     Antes se escondía todo menos el botón de «Nueva cita», y en el teléfono no
     había manera de saltar al día 10: el título mueve de MES. Ahora el mes
     chiquito y los filtros viven detrás de un renglón que se toca. */
  .ka-cal-rail{display:flex}
  .ka-cal-rail > .ka-cal-crear{display:flex; width:100%; justify-content:center}
  .ka-cal-rail-abrir{display:flex}
  .ka-cal-rail-plegable{display:none}
  .ka-cal-rail.abierto .ka-cal-rail-plegable{display:flex; flex-direction:column; gap:14px}
}
.ka-cal-rail{display:flex; flex-direction:column; gap:14px}
.ka-cal-rail-plegable{display:flex; flex-direction:column; gap:14px}
/* En el computador la columna está a la vista: un botón para abrir lo que ya
   está abierto sobra, y encima se llevaría el sitio del mes chiquito. */
.ka-cal-rail-abrir{display:none}
@media (max-width: 1000px){
  /* El `display` va AQUÍ y no en el bloque de arriba: la regla base
     `.ka-cal-rail-abrir{display:none}` está escrita después de aquel, y con la
     misma especificidad gana la última — el botón no salía en el teléfono. */
  .ka-cal-rail-abrir{
    display:flex;
    align-items:center; justify-content:space-between; gap:10px; width:100%;
    min-height:44px; padding:0 16px; cursor:pointer;
    border:1px solid var(--linea); border-radius:14px;
    background:var(--sup); color:var(--tinta);
    font-family:var(--fuente-ui); font-size:14px; font-weight:500;
  }
  .ka-cal-rail-abrir i{font-style:normal; font-size:12px; color:var(--tenue); transition:transform .18s}
  .ka-cal-rail.abierto .ka-cal-rail-abrir i{transform:rotate(180deg)}
  /* El mes chiquito, con sitio para el dedo: en el teléfono se toca un día
     concreto, y una casilla pensada para el ratón se falla una de cada tres
     veces. La rejilla se estira a lo ancho de la pantalla, que sobra. */
  .ka-cal-rail-plegable .ka-mini-d{min-height:40px; font-size:14px}
  .ka-cal-rail-plegable .ka-mini-rej{gap:3px}
}

/* El botón grande de «Nueva cita», el hermano del «Crear» de Google: pastilla
   alta, sombra suave y un signo de más que se lee antes que la palabra. */
.ka-cal-crear{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:12px 18px; border-radius:26px; border:1px solid var(--linea);
  background:var(--sup); color:var(--txt); box-shadow:var(--sh-m);
  font-family:var(--fuente-ui); font-size:14px; font-weight:500;
  transition:box-shadow .14s, transform .14s;
}
@media (hover:hover) and (pointer:fine){.ka-cal-crear:hover{box-shadow:var(--sh-g); transform:translateY(-1px)}}
.ka-cal-crear span{font-size:21px; line-height:1; color:var(--oro)}

/* ─── las casillas de colores */
.ka-cal-grupo{font-family:var(--fuente-ui)}
.ka-cal-grupo-t{
  display:block; font-size:12.5px; margin:0 0 6px 2px;
}
.ka-cal-check{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:4px 6px; border-radius:7px; font-size:12.5px; color:var(--sec);
}
@media (hover:hover) and (pointer:fine){.ka-cal-check:hover{background:var(--sup2)}}
.ka-cal-check input{
  width:14px; height:14px; margin:0; accent-color:var(--oro); cursor:pointer;
  flex:0 0 auto;
}
.ka-cal-check i{
  width:10px; height:10px; border-radius:3px; flex:0 0 auto;
  background:var(--apagado);
}
.ka-cal-check i.apagado{background:var(--apagado)}
/* Apagada, la fila se apaga entera: se ve que está quitada sin tener que
   mirarle la casilla. */
.ka-cal-check:has(input:not(:checked)){opacity:.45}
/* La casilla de una categoría: el cuadrito numerado y, debajo del nombre, lo
   que abarca en letra chica. */
.ka-cal-check-cat{align-items:flex-start; padding:5px 6px}
.ka-cal-check-cat input{margin-top:3px}
.ka-cal-check-cat .ka-cat-n{width:18px; height:18px; font-size:10.5px; border-radius:5px}

/* ─── la franja de todo el día */
.ka-cal-todo{
  display:grid; grid-template-columns:62px repeat(var(--cols,7),1fr);
  border-bottom:1px solid var(--linea2); min-height:26px;
}
.ka-cal-todo-t{
  font-size:10px; color:var(--tenue); text-align:right; padding:6px 8px 0 0;
  font-family:var(--fuente-ui);
}
.ka-cal-todo-c{
  border-left:1px solid var(--linea2); padding:4px 3px;
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.ka-cal-todo-e{
  display:block; border-radius:5px; padding:2px 6px; min-width:0;
  background:var(--sup3); color:var(--sec);
  font-family:var(--fuente-ui); font-size:10.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Un bloque corto se queda con la hora y el nombre: el procedimiento no cabe. */
.ka-cal-ev.ka-corto em{display:none}
/* Y ninguno se pinta si su casilla está apagada. */
.ka-cal-ev.ka-fuera,
.ka-mes-ev.ka-fuera{display:none}
.ka-cal-rail-nota{
  background:var(--sup2); border:1px solid var(--linea2); border-radius:12px;
  padding:11px 12px; font-family:var(--fuente-ui);
}
.ka-cal-rail-nota b{display:block; font-size:12.5px; margin-bottom:3px}
.ka-cal-rail-nota span{font-size:11.5px; color:var(--tenue); line-height:1.45}

/* ─── la barra de arriba */
.ka-cal-top{align-items:center; gap:12px; flex-wrap:wrap}
.ka-cal-mando{display:flex; align-items:center; gap:7px}
.ka-cal-titulo{
  margin:0 0 0 6px; font-size:22px; font-weight:400;
  font-family:var(--fuente-t); white-space:nowrap;
}
/* La mayúscula va en el <u>, no en el botón: `::first-letter` no se aplica a
   una caja flexible, y el mes salía en minúscula. */
.ka-cal-titulo u{text-decoration:none}
.ka-cal-titulo u::first-letter{text-transform:uppercase}
.ka-cal-flecha{padding-left:10px; padding-right:10px}
.ka-cal-sub{margin:-4px 0 14px}

/* Día · Semana · Mes, pegados como un solo mando. */
.ka-seg{
  display:inline-flex; background:var(--sup2);
  border:1px solid var(--linea); border-radius:9px; overflow:hidden;
}
.ka-seg-b{
  padding:6px 13px; font-size:12.5px; text-decoration:none;
  color:var(--sec); font-family:var(--fuente-ui);
  border-right:1px solid var(--linea2); transition:background .12s;
}
.ka-seg-b:last-child{border-right:0}
@media (hover:hover) and (pointer:fine){.ka-seg-b:hover{background:var(--sup3)}}
/* La vista puesta va con la pareja que SÍ se invierte con el tema. */
.ka-seg-b.on{background:var(--acento); color:var(--acento-t)}

/* ─── saltar de mes desde el título ────────────────────
   Tres años en una tablita. Las flechas sirven para moverse de a uno; esto es
   para «marzo del año que viene», que con flechas son dieciocho clics. */
.ka-cal-titulo{
  border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.ka-cal-titulo i{font-style:normal; font-size:12px; color:var(--tenue)}
@media (hover:hover) and (pointer:fine){.ka-cal-titulo:hover i{color:var(--txt)}}
.ka-cal-saltar{
  position:absolute; z-index:50; margin-top:6px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:13px; box-shadow:var(--sh-g); padding:12px;
  font-family:var(--fuente-ui);
}
.ka-cal-ano{margin-bottom:9px}
.ka-cal-ano:last-child{margin-bottom:0}
.ka-cal-ano > b{display:block; font-size:11.5px; color:var(--tenue); margin-bottom:4px}
.ka-cal-meses{display:grid; grid-template-columns:repeat(6,1fr); gap:3px}
.ka-cal-mes-b{
  padding:6px 4px; border-radius:7px; text-align:center;
  text-decoration:none; font-size:12px; color:var(--txt);
}
@media (hover:hover) and (pointer:fine){.ka-cal-mes-b:hover{background:var(--sup3)}}
.ka-cal-mes-b.on{background:var(--acento); color:var(--acento-t)}

/* ─── la lupa ──────────────────────────────────────────
   Pastilla, como la de Google: el campo y el botón en una sola pieza. */
.ka-cal-lupa{display:flex; align-items:center}
.ka-cal-lupa input{
  width:min(220px, 42vw); padding:7px 12px;
  border:1px solid var(--linea); border-right:0;
  border-radius:9px 0 0 9px; background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:12.5px;
}
.ka-cal-lupa input:focus{outline:2px solid var(--oro); outline-offset:-1px; z-index:1}
.ka-cal-lupa button{
  padding:7px 11px; cursor:pointer; line-height:1.15;
  border:1px solid var(--linea); border-radius:0 9px 9px 0;
  background:var(--sup2); color:var(--sec); font-size:16px;
}
@media (hover:hover) and (pointer:fine){.ka-cal-lupa button:hover{background:var(--sup3); color:var(--txt)}}

.ka-agenda-cuantas{
  margin:0; padding:12px 16px; border-bottom:1px solid var(--linea2);
  font-family:var(--fuente-ui); font-size:13px; color:var(--sec);
}
/* Lo que ya pasó se apaga un poco: buscando se mezclan años, y conviene ver de
   un golpe qué es historia y qué está por venir. */
.ka-agenda-dia.paso .ka-agenda-f b,
.ka-agenda-dia.paso .ka-agenda-e span{opacity:.72}

/* ─── la agenda: lo que viene, en lista ────────────────
   Sin rejilla. Es la única vista que se lee entera en el teléfono sin deslizar
   de lado, y la que contesta «¿qué tengo?» de un vistazo. */
.ka-agenda{padding:4px 0}
.ka-agenda-dia{
  display:grid; grid-template-columns:76px 1fr; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--linea2);
}
.ka-agenda-dia:last-child{border-bottom:0}
.ka-agenda-dia.hoy{background:rgba(191,148,74,.07)}
.ka-agenda-f{
  text-decoration:none; text-align:center; padding-top:2px;
  font-family:var(--fuente-ui);
}
.ka-agenda-f b{
  display:block; font-size:21px; font-weight:400; color:var(--txt);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-agenda-f span{display:block; font-size:10.5px; color:var(--tenue); text-transform:uppercase}
.ka-agenda-f i{font-style:normal; font-size:10.5px; color:var(--tenue)}
.ka-agenda-dia.hoy .ka-agenda-f b{color:var(--oro); font-weight:600}
.ka-agenda-l{display:flex; flex-direction:column; gap:2px; min-width:0}
.ka-agenda-e{
  display:grid; grid-template-columns:9px 68px 1fr; gap:9px; align-items:baseline;
  padding:6px 8px; border-radius:8px; text-decoration:none; min-width:0;
  font-family:var(--fuente-ui); color:var(--txt);
}
@media (hover:hover) and (pointer:fine){.ka-agenda-e:hover{background:var(--sup2)}}
/* Lo que sale de la agenda del consultorio va con una guía al lado. No tiene
   estado, ni asesora, ni tarea de confirmar: no es una cita del CRM, y verse
   igual que una haría creer que sí. */
.ka-de-agenda{border-left:2px solid var(--linea2); padding-left:8px}
.ka-agenda-e i{
  width:9px; height:9px; border-radius:50%; background:var(--apagado);
  align-self:center;
}
.ka-agenda-e b{
  font-size:12px; font-weight:600; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-agenda-e span{
  font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* La nota de la cita, en la agenda. Va en su propio renglón y en cursiva: es un
   recado de ESE día —«viene con la mamá»— y se tiene que distinguir del
   procedimiento, que es un dato. */
.ka-agenda-e u{
  grid-column:3; text-decoration:none; font-size:11.5px; font-style:italic;
  color:var(--oro); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ka-agenda-e em{
  grid-column:3; font-style:normal; font-size:11.5px; color:var(--tenue);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ka-agenda-e.ka-fuera{display:none}
.ka-agenda-vacia{padding:26px 16px; text-align:center}

/* ─── el año entero ────────────────────────────────────
   Doce meses chiquitos y un punto en los días con algo. No se leen las citas:
   se lee qué tan lleno está cada mes, que es lo que hace falta para decir
   «la operamos en marzo». */
.ka-ano{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:16px; padding:16px;
}
.ka-ano-m{font-family:var(--fuente-ui)}
.ka-ano-t{
  display:block; margin-bottom:5px; text-decoration:none;
  font-size:12.5px; color:var(--oro);
}
.ka-ano-t::first-letter{text-transform:uppercase}
.ka-ano-rej{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center}
.ka-ano-rej i{font-style:normal; font-size:9px; color:var(--tenue); padding-bottom:2px}
.ka-ano-d{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:50%; text-decoration:none;
  font-size:10.5px; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
@media (hover:hover) and (pointer:fine){.ka-ano-d:hover{background:var(--sup3)}}
.ka-ano-d.vacio{pointer-events:none}
/* El punto va DEBAJO del número, no encima: el número se sigue leyendo. */
.ka-ano-d.lleno::after{
  content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  width:3.5px; height:3.5px; border-radius:50%; background:var(--oro);
}
.ka-ano-d.hoy{background:var(--acento); color:var(--acento-t); font-weight:600}
.ka-ano-d.hoy.lleno::after{background:var(--acento-t)}

/* ─── el mes chiquito */
.ka-mini{
  background:var(--sup2); border:1px solid var(--linea2);
  border-radius:12px; padding:11px; font-family:var(--fuente-ui);
}
.ka-mini-cab{display:flex; align-items:center; justify-content:space-between; margin-bottom:7px}
.ka-mini-cab b{font-size:12.5px}
.ka-mini-cab b::first-letter{text-transform:uppercase}
.ka-mini-cab span{display:flex; gap:2px}
.ka-mini-cab a{
  text-decoration:none; color:var(--tenue); font-size:15px; line-height:1;
  padding:2px 6px; border-radius:6px;
}
@media (hover:hover) and (pointer:fine){.ka-mini-cab a:hover{background:var(--sup3); color:var(--txt)}}
.ka-mini-rej{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center}
.ka-mini-rej i{
  font-style:normal; font-size:9.5px; color:var(--tenue);
  padding-bottom:3px;
}
.ka-mini-d{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:50%; text-decoration:none;
  font-size:11px; color:var(--txt);
  font-variant-numeric:lining-nums tabular-nums;
}
@media (hover:hover) and (pointer:fine){.ka-mini-d:hover{background:var(--sup3)}}
.ka-mini-d.fuera{color:var(--tenue); opacity:.55}
.ka-mini-d.hoy{background:var(--acento); color:var(--acento-t); font-weight:600}
.ka-mini-d.mirando{box-shadow:inset 0 0 0 1px var(--oro)}

/* ─── la rejilla del mes */
.ka-mes-cab{
  display:grid; grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--linea2);
}
.ka-mes-cab span{
  padding:9px 0; text-align:center; font-size:10.5px; letter-spacing:.08em;
  color:var(--tenue); font-family:var(--fuente-ui);
}
.ka-mes{
  display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(92px, 1fr);
}
.ka-mes-c{
  border-left:1px solid var(--linea2); border-bottom:1px solid var(--linea2);
  padding:4px 4px 6px; min-width:0; overflow:hidden;
}
.ka-mes-c:nth-child(7n+1){border-left:0}
/* Los días del mes de al lado siguen ahí, pero apagados: se ven, no se tocan. */
.ka-mes-c.fuera{background:var(--sup2)}
.ka-mes-c.fuera .ka-mes-n{color:var(--tenue); opacity:.6}
.ka-mes-n{
  display:block; width:fit-content; margin:0 auto 4px;
  padding:3px 7px; border-radius:11px; text-decoration:none;
  font-size:11.5px; color:var(--sec); font-family:var(--fuente-ui);
  font-variant-numeric:lining-nums tabular-nums;
}
@media (hover:hover) and (pointer:fine){.ka-mes-n:hover{background:var(--sup3)}}
.ka-mes-c.hoy .ka-mes-n{background:var(--acento); color:var(--acento-t); font-weight:600}
/* Cada cita, un renglón: punto de color, hora y nombre. Igual que en Google, y
   por lo mismo — en una casilla de mes no cabe un bloque, pero sí una línea. */
.ka-mes-ev{
  display:flex; align-items:center; gap:5px; min-width:0;
  padding:2px 4px; border-radius:5px; text-decoration:none;
  font-family:var(--fuente-ui); font-size:11px; color:var(--txt);
}
@media (hover:hover) and (pointer:fine){.ka-mes-ev:hover{background:var(--sup3)}}
.ka-mes-ev i{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--apagado);
}
.ka-mes-ev b{font-weight:600; opacity:.7; flex:0 0 auto; font-size:10px}
.ka-mes-ev span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ka-mes-ev.suelta i{box-shadow:0 0 0 2px var(--alerta-f)}
.ka-mes-mas{
  display:block; padding:1px 5px; text-decoration:none;
  font-size:10.5px; color:var(--tenue); font-family:var(--fuente-ui);
}
@media (hover:hover) and (pointer:fine){.ka-mes-mas:hover{color:var(--txt)}}

@media (max-width: 720px){
  /* En el teléfono el mes se aprieta: se quedan los puntos y la hora, y el
     nombre se lee tocando el día. Mejor eso que siete columnas ilegibles. */
  .ka-mes{grid-auto-rows:minmax(74px, 1fr)}
  .ka-mes-ev span{display:none}
  .ka-mes-cab span{font-size:9.5px}
  .ka-cal-titulo{font-size:18px}
}
.ka-etiq-sel{min-width:180px}

/* ═══════════════════════════════════════════════════════════════
   LA HOJA DEL DÍA
   Para dejársela impresa a la doctora cada mañana. Vive escondida
   dentro de la pantalla del calendario y solo existe en el papel.
   ═══════════════════════════════════════════════════════════════ */

/* 🔴 SOLO LA HOJA DEL DÍA SE ESCONDE — LA DE LA COTIZACIÓN NO.
   Las dos usan la misma clase `.ka-hoja` porque son el mismo papel, y esta
   regla —escrita para la hoja del día, que solo existe para imprimir— estaba
   escondiendo también la vista previa del cotizador. Resultado: la columna de
   la derecha decía «Es el mismo documento que se manda, en pequeño» y debajo
   no había nada. Así llevaba desde que existe el cotizador.
   La del día cuelga directamente de `.ka-main`; la de la cotización vive
   dentro de `.ka-hoja-caja`. Esa es la diferencia, y por ahí se separan. */
.ka-main > .ka-hoja{display:none}
.ka-hoja-caja > .ka-hoja{display:block}

@media print{
  /* En el papel no hay barra lateral, ni menú, ni botones: solo la hoja.
     🔴 Va con `:not()` y no con «ocultar todo y volver a enseñar la hoja»: así
     estaba escrito antes y la hoja salía EN BLANCO, porque `.ka-main > *` gana
     por especificidad a `.ka-hoja` aunque las dos lleven !important. Ocultar por
     descarte no tiene ese problema: a la hoja nunca se la oculta.

     🔴🔴 Y la segunda vez que salió en blanco fue por esto otro: aquí se ocultaba
     todo lo que colgara del `body` menos `.ka-cuerpo` — un contenedor que NO
     EXISTE en la aplicación. Solo existía en la lupa, que lo inventaba al pintar.
     Así que en la pantalla de verdad el que se ocultaba era `.ka-main`, y con él
     la hoja entera. La lupa decía que todo estaba bien porque ella sí tenía ese
     contenedor.

     La estructura de verdad, mirada en el navegador, es:
         body.kaapp > header.ka-movil + aside.ka-side + main.ka-main > .ka-hoja
     Se escribe contra ESA, y `.ka-cuerpo` se tolera por si alguna pantalla lo
     trae, pero ya no manda. */
  /* El papel no tiene el ancho de la pantalla. Sin soltar los anchos y los
     mínimos, la hoja sale con el ancho del monitor y se corta por la derecha. */
  html,body,.ka-cuerpo,.ka-main,.ka-hoja{
    width:auto !important; min-width:0 !important; max-width:100% !important;
    background:#fff !important; color:#111 !important; box-shadow:none !important;
  }
  body.kaapp > *:not(.ka-main):not(.ka-cuerpo){display:none !important}
  .ka-cuerpo{display:block !important; padding:0 !important; margin:0 !important; max-width:none !important}
  .ka-cuerpo > *:not(.ka-main){display:none !important}
  .ka-main{display:block !important; padding:0 !important; margin:0 !important; max-width:none !important}
  .ka-main > *:not(.ka-hoja){display:none !important}
  .ka-hoja{
    display:block !important;
    /* Tamaño carta, con márgenes de carta. */
    padding:0; color:#111; background:#fff; border:none;
    font-family:var(--fuente-ui,system-ui),sans-serif;
  }
  @page{size:letter; margin:18mm 16mm}

  .ka-hoja-cab{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12pt;
    border-bottom:1.5pt solid #111; padding-bottom:10pt; margin-bottom:14pt;
  }
  .ka-hoja-cab h1{font-family:var(--fuente-titulo,Georgia),serif; font-size:22pt; font-weight:400; margin:0}
  /* En español el día va en minúscula; solo la primera letra sube. Con
     `capitalize` salía «Miércoles 16 De Septiembre De 2026». */
  .ka-hoja-cab p{font-size:11pt; color:#444; margin:3pt 0 0}
  .ka-hoja-cab p::first-letter{text-transform:uppercase}
  .ka-hoja-marca{text-align:right}
  .ka-hoja-marca b{display:block; font-size:11pt; letter-spacing:.02em}
  .ka-hoja-marca span{display:block; font-size:9pt; color:#666; margin-top:2pt}

  /* `fixed` para que una columna con texto largo no estire la tabla por
     fuera del papel: el reparto lo mandan los anchos, no el contenido. */
  .ka-hoja-tabla{width:100%; border-collapse:collapse; table-layout:fixed}
  .ka-hoja-tabla td{word-wrap:break-word; overflow-wrap:anywhere}
  .ka-hoja-tabla th{
    text-align:left; font-size:8pt; letter-spacing:.09em; text-transform:uppercase;
    color:#666; font-weight:600; padding:0 6pt 6pt 0; border-bottom:.75pt solid #999;
  }
  .ka-hoja-tabla td{
    padding:6.5pt 6pt 6.5pt 0; border-bottom:.5pt solid #ddd; vertical-align:top;
    font-size:10.5pt;
  }
  /* La hora manda: es lo que se busca con el dedo al recorrer la hoja. */
  .ka-hoja-hora{font-size:12.5pt; font-weight:600; white-space:nowrap; width:52pt}
  /* 🔴 Y el nombre necesita ancho de verdad. La tabla es de ancho fijo: sin
     decirle nada, las seis columnas se repartían el papel por igual y el nombre
     —que es lo más largo que hay en esta hoja— caía en una columna estrecha y se
     partía palabra por palabra. Un día de 42 citas salía en siete hojas. */
  .ka-hoja-quien{width:34%}
  .ka-hoja-tabla.sin-que .ka-hoja-quien{width:46%}
  .ka-hoja-tel{width:88pt; white-space:nowrap; font-variant-numeric:lining-nums tabular-nums}
  .ka-hoja-tabla b{display:block; font-weight:600}
  .ka-hoja-tabla i{display:block; font-style:normal; font-size:8.5pt; color:#666; margin-top:1pt}
  /* La franja para escribir a mano al lado de cada cita. */
  .ka-hoja-libre{width:22%; border-bottom:.5pt solid #ddd}
  /* La nota de la cita, debajo del procedimiento. En cursiva y más chica: en el
     papel el renglón principal tiene que seguir siendo el procedimiento. */
  .ka-hoja-nota-cita{display:block; font-size:8.5pt; font-style:italic; color:#444; margin-top:2px}
  /* El enlace de la videollamada, en el papel: sin cursiva y un poco más
     apretado, que es un dato para copiar, no una nota para leer. */
  .ka-hoja-meet{display:block; font-size:8.5pt; font-style:normal; color:#222; margin-top:2px; word-break:break-all}
  .ka-hoja-vacia{font-size:11pt; color:#666; padding:20pt 0}
  .ka-hoja-pie{margin-top:12pt; font-size:8.5pt; color:#777}

  /* Que ninguna cita se parta entre dos hojas. */
  .ka-hoja-tabla tr{page-break-inside:avoid}

  /* 🔴 La clase de cada cita, también en el papel: la franja de su color a la
     izquierda de la hora, como en la agenda. `print-color-adjust` porque los
     navegadores quitan los colores al imprimir si no se les pide. */
  .ka-hoja-tabla tr[style*="--cat"] td.ka-hoja-hora{
    box-shadow:inset 3pt 0 0 var(--cat); padding-left:7pt;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .ka-hoja-hora small{display:block; font-size:8pt; font-weight:400; color:#666; margin-top:1pt}
  /* Las desmarcadas en el cajón de imprimir no salen. */
  .ka-hoja-fuera{display:none !important}
  /* Por clase: un título por grupo, con su color. */
  .ka-hoja-grupo-f td{
    padding:12pt 0 5pt !important; border-bottom:1pt solid #111 !important;
    font-size:9.5pt !important; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .ka-hoja-grupo-f[style*="--cat"] td{
    box-shadow:inset 0 -3pt 0 var(--cat);
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .ka-hoja-grupo-f{page-break-after:avoid}
  .ka-hoja-filtro{font-size:9pt !important; color:#111 !important; font-weight:600}
}

/* ─── el cajón de imprimir ─────────────────────────────── */
.ka-imp-rapido{display:flex; gap:6px; margin:-2px 0 10px}
.ka-imp-rapido .ka-btn{width:auto !important; margin:0 !important}
.ka-imp-cats{display:flex; flex-direction:column; gap:2px; margin-bottom:18px}
/* `.ka-cajon-cuerpo label` los pone en bloque (es para los campos de los otros
   cajones): aquí cada clase es una fila, con la casilla, el cuadrito y el nombre
   en línea, como en el filtro del calendario. */
.ka-cajon-cuerpo .ka-imp-cat{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  padding:9px 40px 9px 10px; border-radius:10px; color:var(--sec);
  position:relative;
}
.ka-cajon-cuerpo .ka-imp-cat input{margin-top:2px}
.ka-cajon-cuerpo .ka-imp-cat .ka-cat-n{width:20px; height:20px; font-size:11px; border-radius:6px}
.ka-cajon-cuerpo .ka-imp-orden .ka-seg-b{display:flex; align-items:center; margin:0}
.ka-imp-cat .ka-cat-t > span{color:var(--tinta)}
/* Cuántas hay ese día de cada clase: a la derecha, como el número de un
   filtro. En cero se apaga, pero se puede marcar igual. */
.ka-imp-n{
  position:absolute; right:12px; top:10px; font-style:normal;
  font-family:var(--fuente-ui); font-size:11.5px; font-weight:600; color:var(--sec);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-imp-cero .ka-cat-t, .ka-imp-cero .ka-imp-n{opacity:.5}
.ka-imp-orden{display:flex; margin-bottom:16px}
.ka-imp-orden .ka-seg-b{flex:1; justify-content:center; cursor:pointer; margin:0 !important; color:var(--sec)}
.ka-imp-orden .ka-seg-b input{position:absolute; opacity:0; width:0; height:0}
.ka-imp-orden .ka-seg-b:has(input:checked){background:var(--acento); color:var(--acento-t)}
.ka-imp-orden .ka-seg-b:has(input:focus-visible){outline:2px solid var(--oro); outline-offset:2px}
.ka-imp-resumen{font-family:var(--fuente-ui); font-size:13px; color:var(--sec); margin:0 0 10px}
.ka-imp-resumen b{color:var(--tinta)}
/* En pantalla la hoja no se ve, pero los renglones apagados tampoco cuentan. */
.ka-hoja-fuera{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   CONFIRMAR CITAS
   Una fecha, una lista y un botón. La pantalla es aburrida a
   propósito: es lo más parecido a un envío masivo que tiene el
   sistema, y cuanto menos haya que adivinar, mejor.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   El dinero recibido, en la ficha.
   Plata: números tabulares y alineados a la derecha, para poder
   compararlos de un vistazo sin tener que leerlos.
   ═══════════════════════════════════════════════════════════════ */
.ka-pagos-total{
  font-family:var(--fuente-ui); font-size:19px; font-weight:600; color:var(--txt);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-pagos-t td{vertical-align:top}
.ka-pago-valor{
  text-align:right; white-space:nowrap; font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
/* Quién lo registró, en chiquitito. Pedido así, y es lo que hace que un
   número raro tenga a quién preguntarle. */
.ka-pago-quien{font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-pago-anu{font-size:11.5px; color:var(--alerta); margin-top:2px}
/* Anulado: se tacha, no desaparece. */
.ka-pago-anulado td{opacity:.55}
.ka-pago-anulado .ka-pago-valor{text-decoration:line-through}
.ka-pago-anular summary{cursor:pointer; list-style:none; font-size:12.5px}
.ka-pago-anular summary::-webkit-details-marker{display:none}
.ka-pago-anular input[type="text"]{
  width:100%; margin:6px 0; padding:8px 10px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
.ka-pago-nuevo{margin-top:14px; padding-top:14px; border-top:1px solid var(--linea)}
.ka-pago-nota{display:block; margin:10px 0 12px; font-size:12px; color:var(--tenue)}
.ka-pago-nota input{
  width:100%; margin-top:3px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
}
@media (max-width: 860px){
  .ka-pagos-t thead{display:none}
  .ka-pagos-t tr{display:block; padding:10px 0; border-bottom:1px solid var(--linea2)}
  .ka-pagos-t td{display:block; padding:2px 0; border:0}
  .ka-pago-valor{text-align:left}
}

/* Desde cuándo mira la cola. Chips pequeños, arriba de la lista: se cambia de
   ventana sin salir de la pantalla. */
.ka-cola-ventana{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px}
.ka-cola-ventana .ka-tenue{margin-right:2px}
/* Lo que queda fuera de la ventana se DICE. Esconder una paciente que espera
   sería cambiar un problema por otro que además no se ve. */
.ka-cola-fuera{margin:8px 0 0; padding-top:8px; border-top:1px solid var(--linea2)}

/* El dinero, en la ficha del costado del chat. Resumido: total, tres últimos
   movimientos y tres campos. Lo completo vive en la ficha. */
.ka-fr-pagos{
  margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--linea2);
  font-family:var(--fuente-ui);
}
.ka-fr-pagos-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px}
.ka-fr-pagos-cab b{font-size:13px}
.ka-fr-pagos-cab span{
  font-size:15px; font-weight:600; color:var(--txt);
  font-variant-numeric:lining-nums tabular-nums;
}
.ka-fr-pago{
  display:flex; justify-content:space-between; gap:8px; margin:0 0 5px;
  font-size:12.5px; color:var(--sec);
}
.ka-fr-pago i{font-style:normal; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.ka-fr-pago.anulado{opacity:.5}
.ka-fr-pago.anulado i{text-decoration:line-through}
.ka-fr-pago-f{margin-top:10px}
.ka-fr-pago-f input[type="text"],
.ka-fr-pago-f select{
  width:100%; padding:8px 10px; border-radius:9px; margin-bottom:6px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
.ka-fr-pago-fila{display:flex; gap:6px}
.ka-fr-pago-fila select{min-width:0}
.ka-fr-pago-f .ka-btn{width:100%; text-align:center}

/* Quién lleva la conversación, encima del hilo. Un renglón tenue: se lee al
   entrar y no compite con los mensajes, que es a lo que uno viene. */
.ka-tira-asesora{
  margin:0; padding:7px 16px;
  background:var(--sup2); border-bottom:1px solid var(--linea2);
  font-family:var(--fuente-ui); font-size:12.5px; color:var(--sec); line-height:1.45;
}
.ka-tira-asesora b{color:var(--txt); font-weight:600}
.ka-tira-asesora.sin{background:rgba(178,74,69,.07)}
.ka-tira-asesora.sin b{color:var(--alerta)}

.ka-conf-dias{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
/* Ir a un día concreto, al lado de «Día siguiente». Pegado a la derecha en el
   computador; en el teléfono baja a su propio renglón, entero. */
/* Pegado a «Día siguiente», no al borde: «al lado de este botón», y a la
   derecha del todo se leía como otra cosa. Una raya fina lo separa de los
   botones de paso. */
.ka-conf-fecha{display:flex; gap:8px; align-items:center; margin:0 0 0 8px; padding-left:16px; border-left:1px solid var(--linea); flex-wrap:nowrap}
.ka-conf-fecha label{display:flex; align-items:center; gap:10px; margin:0}
.ka-conf-fecha label .ka-tenue{font-size:12.5px; white-space:nowrap}
.ka-conf-fecha input[type=date]{
  height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--linea);
  background:var(--sup); color:var(--tinta); font:inherit; font-size:14px; color-scheme:light dark;
}
@media (max-width:620px){
  /* En el teléfono: su propio renglón, el campo ancho y el botón al lado. El
     rótulo sobra: el campo ya enseña la fecha y el calendario. */
  .ka-conf-fecha{margin:4px 0 0; padding:0; border:0; flex:1 1 100%}
  .ka-conf-fecha label{flex:1 1 auto; min-width:0}
  .ka-conf-fecha label .ka-tenue{display:none}
  .ka-conf-fecha input[type=date]{flex:1; min-width:0; width:100%}
  .ka-conf-fecha .ka-btn{flex:none}
}
.ka-conf-todas{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.ka-conf-todas b{font-size:17px}
.ka-conf-hora{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}
.ka-conf-hacer{white-space:nowrap; text-align:right}
.ka-conf-hacer .ka-enlinea{display:inline-block; margin-left:6px}

/* Los dos modos: a mano, o el aviso de la mañana. Se lee antes que la lista
   porque decide si la lista hay que mandarla o ya salió sola. */
.ka-conf-modo-op{
  display:flex; gap:10px; align-items:flex-start; margin:4px 0 12px;
  font-size:14px; line-height:1.5;
}
.ka-conf-modo-op input{margin-top:3px; flex:none; width:17px; height:17px; accent-color:var(--oro)}
.ka-conf-modo-hora{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.ka-conf-modo-hora label{
  display:block; font-size:12px; color:var(--tenue); font-family:var(--fuente-ui);
}
.ka-conf-modo-hora input{
  display:block; margin-top:3px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:14px;
  font-variant-numeric:lining-nums tabular-nums;
}
/* Las de la agenda sin ficha van al final y con aire: son de mirar, no de
   apretar. */
.ka-conf-sueltas .ka-tabla{margin-top:14px}

/* La vista previa: el mensaje exacto que va a recibir esa paciente.
   Se despliega por fila y no en una ventana, para poder abrir dos y
   compararlas — que es justo lo que uno hace la primera vez. */
.ka-conf-hacer{position:relative}
.ka-conf-ver{display:inline-block}
.ka-conf-ver summary{cursor:pointer; list-style:none}
.ka-conf-ver summary::-webkit-details-marker{display:none}
/* Flota sobre la fila, no dentro de ella.
   Metida en la celda, abrir una vista previa estiraba el renglón a cuatro veces
   su alto y mandaba la hora y el nombre al centro de un espacio en blanco: la
   tabla quedaba ilegible justo cuando uno está revisando. */
.ka-conf-previa{
  position:absolute; right:0; top:calc(100% + 6px); z-index:5;
  margin:0; padding:12px 14px; text-align:left; width:360px;
  background:var(--sup); border:1px solid var(--linea); border-radius:10px;
  box-shadow:var(--sh-g);
  font-family:var(--fuente-ui); font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; color:var(--sec);
}

@media (max-width: 760px){
  /* En el teléfono la tabla se lee como fichas, no como tabla: cinco
     columnas en 390px es una columna de dos letras. */
  .ka-conf thead{display:none}
  .ka-conf tr{display:block; padding:12px 0; border-bottom:1px solid var(--linea2)}
  .ka-conf td{display:block; padding:2px 0; border:0}
  .ka-conf-hacer{text-align:left; margin-top:8px; position:static}
  /* En el teléfono no flota: no hay dónde. Vuelve al flujo, ancho completo. */
  .ka-conf-previa{position:static; width:auto; margin-top:8px; box-shadow:none}
}

/* ── Identidad de WhatsApp ─────────────────────────────────────────────
 *
 * Desde 2026 una paciente puede escribir con NOMBRE DE USUARIO y Meta no
 * entrega el teléfono. La asesora tiene que verlo sin buscarlo: el @usuario
 * debajo del nombre, y «Sin teléfono» en ámbar donde antes iba el número.
 * No es un error, es un dato que hay que pedir dentro de la conversación —
 * sin número no se puede llamar ni mandar la confirmación de la cita.
 */
.ka-identidad{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:3px 0 0}
.ka-usuario{
  font-size:12px; color:var(--tinta-3, #6b7280); font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.ka-sin-tel{
  font-size:11px; font-style:normal; letter-spacing:.02em;
  color:#8a5a12; background:rgba(214,158,46,.14);
  border:1px solid rgba(214,158,46,.34); border-radius:99px; padding:1px 8px;
  white-space:nowrap; cursor:help;
}
.ka-chat-quien .ka-sin-tel{padding:0 6px; font-size:10.5px}

/* Las remitidas que se pasaron de las 24 horas.
   No se borran —son pacientes de verdad— pero bajan a un plegable y dejan de
   contar arriba: son otro trabajo. Dentro solo se les puede mandar la plantilla
   aprobada, y eso es lo que hace «Retomar». */
.ka-fuera-ventana{margin-top:10px; border-top:1px solid var(--linea3); padding-top:10px}
.ka-fuera-ventana summary{
  cursor:pointer; font-size:13px; color:var(--sec); padding:6px 0;
  list-style:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.ka-fuera-ventana summary::-webkit-details-marker{display:none}
.ka-fuera-ventana summary::before{
  content:'›'; display:inline-block; font-size:15px; color:var(--tenue);
  transition:transform .2s ease;
}
.ka-fuera-ventana[open] summary::before{transform:rotate(90deg)}
.ka-fuera-ventana summary b{font-variant-numeric:tabular-nums}
.ka-fuera-ventana .ka-fila-remitida{opacity:.82}

/* La cita que no dice de qué ciudad es.
   Va marcada en ámbar y con la pregunta ARRIBA del botón de enviar a todas: la
   pregunta tiene que aparecer antes de que la mano vaya al botón. Antes esto no
   existía y el mensaje salía con la dirección de Bogotá por defecto — una
   paciente de Villavicencio podía viajar a la ciudad equivocada. */
.ka-conf-preguntar{border-color:var(--acento)}
.ka-sin-sede{
  display:inline-block; font-size:11px; letter-spacing:.02em;
  color:#8a5a12; background:rgba(214,158,46,.14);
  border:1px solid rgba(214,158,46,.34); border-radius:99px; padding:1px 8px;
  white-space:nowrap; cursor:help;
}
.ka-elige-sede{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px}
.ka-elige-sede form{margin:0}
.ka-elige-sede .ka-comolink{font-size:12px}
.ka-sugerencia{font-size:12px; color:var(--tenue); font-style:italic}

/* 3.202.7 · La fecha del pago y su procedimiento, en el panel de la conversación y en la ficha. */
.ka-fr-pago-fecha{display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; color:var(--sec)}
.ka-fr-pago-fecha input{box-sizing:border-box; width:100%}
.ka-fr-pago-f .ka-fr-pago-fila + .ka-fr-pago-fecha,.ka-fr-pago-fecha + .ka-fr-pago-fila{margin-top:6px}
.ka-fr-pago-fila select[name="proc"]{flex:1 1 auto; width:100%}
.ka-pago-proc{font-size:12.5px; color:var(--tinta); margin-top:2px}
/* 3.202.7 · Por qué Meta no entregó el mensaje, debajo de la burbuja. */
.ka-no-salio-por{display:block; margin-top:6px; padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--alerta) 8%,transparent); color:var(--alerta); font-size:12.5px; line-height:1.45; white-space:normal}

/* 3.202.13 · Confirmar citas en el teléfono: cada cita en su tarjeta, con aire por dentro.
   Arriba, la hora a la izquierda y el lugar a la derecha. En el centro, el nombre completo
   (en dos renglones si es largo) y debajo el tipo de cita. Abajo, el estado a la izquierda
   y los botones a la derecha, con el espacio repartido. */
@media (max-width: 900px){
  table.ka-conf tr{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"hora don" "pac pac" "est hacer";
    column-gap:12px; row-gap:10px; align-items:center;
    padding:14px 16px 16px; margin-bottom:12px;
    border:0; border-radius:16px; background:var(--sup4);
    box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  }
  [data-tema="oscuro"] table.ka-conf tr{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  table.ka-conf td{display:block; padding:0; margin:0; border:0; min-width:0}
  table.ka-conf td:nth-child(1){grid-area:hora; font-size:15px; padding:0; margin:0; border:0}
  table.ka-conf td:nth-child(3){grid-area:don; justify-self:end; text-align:right; color:var(--sec); font-size:13px}
  table.ka-conf td:nth-child(2){
    grid-area:pac; text-align:center; padding:12px 4px; border-top:1px solid var(--linea2); border-bottom:1px solid var(--linea2);
  }
  table.ka-conf td:nth-child(2) > a b{display:block; font-size:17px; line-height:1.3; text-wrap:balance}
  table.ka-conf td:nth-child(2) .ka-tenue{margin-top:3px}
  table.ka-conf td:nth-child(2) .ka-conf-otras{text-align:left}
  table.ka-conf td:nth-child(4){grid-area:est; justify-self:start; white-space:nowrap}
  /* Los botones se reparten parejo el espacio que queda al lado del estado. */
  table.ka-conf td.ka-conf-hacer{
    grid-area:hacer; justify-self:stretch; margin:0; text-align:center;
    display:flex; gap:8px; align-items:center; white-space:normal;
  }
  table.ka-conf .ka-conf-hacer > *{flex:1 1 0; min-width:0; margin:0}
  table.ka-conf .ka-conf-hacer > .ka-tenue{flex:0 1 auto; font-size:12.5px}
  table.ka-conf .ka-conf-hacer .ka-btn,table.ka-conf .ka-conf-hacer summary.ka-btn{display:flex; width:100%; min-height:40px; align-items:center; justify-content:center; box-sizing:border-box; margin:0; padding:0 10px; white-space:nowrap}
  table.ka-conf .ka-conf-hacer .ka-enlinea{display:block}
  /* Al abrir «Ver mensaje», el mensaje ocupa todo el ancho de la tarjeta. */
  table.ka-conf tr:has(details[open]) td.ka-conf-hacer{grid-column:1 / -1; grid-row:auto; flex-wrap:wrap}
  table.ka-conf details[open]{flex-basis:100%; text-align:left}
}
/* ═══════════════════════════════════════════════════════════════════════
   REACTIVACIÓN — los montones, las campañas y las etiquetas
   ═══════════════════════════════════════════════════════════════════════
   Lo que manda aquí es el NÚMERO de cada montón: es lo primero que se busca al
   entrar («¿a cuánta gente le podría escribir?») y por eso va grande y solo,
   sin nada compitiendo al lado. Debajo, en tenue, de dónde sale — porque un
   montón de cuatrocientas fichas sin explicación es un montón al que nadie se
   atreve a mandarle una campaña, y con razón.

   En el celular todo pasa a una columna. No hay ni una tabla que se salga de la
   pantalla: las de esta pantalla se vuelven fichas apiladas más abajo. */

.ka-montones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:14px; margin-bottom:6px;
}
.ka-monton{
  border:1px solid var(--linea2); border-radius:14px; padding:15px 16px 14px;
  background:var(--sup); display:flex; flex-direction:column; gap:7px;
}
.ka-monton-auto{background:var(--sup4)}
.ka-monton-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.ka-monton-cab b{font-size:14px; line-height:1.35}
.ka-monton-cab .ka-chip{flex:0 0 auto}
.ka-monton-n{
  font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums; margin:2px 0 1px;
}
.ka-monton p{font-size:12px; line-height:1.55; margin:0; flex:1 1 auto}
.ka-monton-btns{display:flex; gap:7px; flex-wrap:wrap; margin-top:4px}
.ka-monton-btns .ka-btn{margin:0}

/* Una campaña. El texto se enseña tal como lo va a leer la paciente, en su
   propia caja y con los saltos de línea puestos: aprobar un mensaje leyéndolo
   apelmazado en un párrafo es aprobar otra cosa. */
.ka-camp{
  border:1px solid var(--linea2); border-radius:14px; padding:15px 16px;
  background:var(--sup); margin-bottom:13px;
}
.ka-camp-vieja{opacity:.62}
.ka-camp-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.ka-camp-cab b{font-size:14.5px}
.ka-camp-nums{
  display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--sec);
  padding:9px 0; border-top:1px solid var(--linea3); border-bottom:1px solid var(--linea3);
  margin-bottom:11px;
}
.ka-camp-nums b{font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-camp-texto{
  background:var(--sup2); border:1px solid var(--linea3); border-radius:12px;
  padding:13px 15px; font-size:13px; line-height:1.6; color:var(--tinta);
  white-space:normal; margin-bottom:9px;
}
.ka-camp-btns{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.ka-camp-btns form{margin:0}
.ka-camp-btns .ka-tenue{flex:1 1 260px; font-size:12px; line-height:1.5}

/* El botón que le escribe a cientos de pacientes. Hay que escribir la palabra:
   es el único sitio del CRM donde un clic de más cuesta dinero de verdad. */
.ka-enviar-tanda{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; width:100%;
  background:var(--sup3); border:1px solid var(--linea); border-radius:12px; padding:12px 14px;
}
.ka-enviar-tanda label{font-size:12px; color:var(--sec)}
.ka-enviar-tanda input{max-width:150px}
.ka-enviar-tanda .ka-btn{margin:0}

/* El aviso de que el texto se queda en Meta. Va donde se escribe, no al pie:
   una advertencia que se lee después de escribir no evita nada. */
.ka-aviso-meta{
  font-size:12.5px; line-height:1.6; color:var(--alerta);
  background:var(--alerta-f); border:1px solid var(--alerta-b);
  border-radius:12px; padding:12px 14px; margin-bottom:18px;
}
.ka-campo-largo{display:block; margin-bottom:6px; font-size:12px; color:var(--sec)}
.ka-campo-largo textarea{width:100%; margin-top:6px; font-size:13.5px; line-height:1.6}
.ka-fijar{margin-top:14px}
.ka-fijar summary{cursor:pointer; font-size:13px}
.ka-fijar select{margin-right:7px}

/* Las etiquetas en la ficha. Puestas a mano, y se quitan pulsándolas: la × está
   dentro del propio chip porque en el celular un botón aparte al lado de un
   chip de 90 píxeles no se acierta con el pulgar. */
.ka-etiquetas{
  margin:14px 0 4px; padding-top:12px; border-top:1px solid var(--linea3);
  display:flex; flex-direction:column; gap:8px;
}
.ka-etiquetas-puestas{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ka-etiquetas-puestas form{margin:0}
.ka-etq{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; line-height:1; padding:5px 9px; border-radius:99px;
  background:var(--chip); color:var(--tinta); border:1px solid var(--linea2);
  white-space:nowrap;
}
.ka-etq-puesta{cursor:pointer; font-family:inherit}
.ka-etq-puesta i{font-style:normal; color:var(--tenue); font-size:13px; line-height:1}
@media (hover:hover) and (pointer:fine){.ka-etq-puesta:hover{border-color:var(--acento)}}
@media (hover:hover) and (pointer:fine){.ka-etq-puesta:hover i{color:var(--alerta)}}
.ka-etq-poner select{font-size:12px; max-width:100%}
.ka-etq-camp{margin:2px 0 0; font-size:12px}
.ka-etqs{display:flex; gap:5px; flex-wrap:wrap; margin-top:4px}

/* El punto del filtro de campaña de reactivación en la bandeja. Tinte propio:
   es una cosa distinta del punto de «Anuncio», que es la campaña de ORIGEN. */
.ka-punto-reac{background:#2E7D6B}

/* Una tabla que no se sale de la pantalla.
   En el celular las filas se vuelven fichas y cada celda lleva su rótulo
   delante, que viene del data-t del HTML. Una tabla de cinco columnas con
   deslizamiento horizontal en un teléfono es una tabla que no se lee. */
.ka-tabla-envuelta{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (max-width:760px){
  .ka-montones{grid-template-columns:1fr}
  .ka-monton-n{font-size:28px}
  .ka-camp-cab{flex-direction:column; gap:8px}
  .ka-camp-nums{gap:12px}
  .ka-enviar-tanda{flex-direction:column; align-items:stretch}
  .ka-enviar-tanda input{max-width:none}
  .ka-enviar-tanda .ka-btn{width:100%}

  .ka-tabla-envuelta{overflow-x:visible}
  .ka-tabla-envuelta table,
  .ka-tabla-envuelta tbody,
  .ka-tabla-envuelta tr,
  .ka-tabla-envuelta td{display:block; width:auto}
  .ka-tabla-envuelta thead{display:none}
  .ka-tabla-envuelta tr{
    border:1px solid var(--linea2); border-radius:12px;
    padding:12px 14px; margin-bottom:10px; background:var(--sup4);
  }
  .ka-tabla-envuelta td{border:0; padding:3px 0; font-size:13px}
  .ka-tabla-envuelta td[data-t]::before{
    content:attr(data-t) ' · '; color:var(--tenue); font-size:11.5px;
  }
  .ka-tabla-envuelta td:first-child{font-size:14px; margin-bottom:4px}
  .ka-tabla-envuelta select{width:100%}

  /* La cabecera de estos paneles se apila.
     Visto pintando la pantalla en 390 px: «Los montones» quedaba partido en
     dos renglones —«Los / montones»— porque la explicación de al lado le
     robaba el ancho. Un título partido a la mitad se lee como un defecto.
     Va por clase y no sobre .ka-ph a secas para no moverle la cabecera a las
     otras doce pantallas que ya están bien. */
  .ka-panel-reac .ka-ph{flex-direction:column; align-items:flex-start; gap:6px}
  .ka-panel-reac .ka-ph h2{font-size:17px}
  .ka-panel-reac .ka-ph .ka-btn{margin:0}
}
.ka-montones-vacios{margin:12px 0 0; padding-top:11px; border-top:1px solid var(--linea3); font-size:12px}

/* ═══════════════════════════════════════════════════════════════════════
   LA CAMPANITA — lo que hay que hacer hoy
   ═══════════════════════════════════════════════════════════════════════
   Manoroz: «veo que la gente, si no le dan señales de lo que tiene que hacer,
   no lo hace». Por eso el globo es rojo y no gris, y por eso la campanita
   late cuando entra algo: quien atiende con el teléfono en silencio —que es
   media clínica— no se enteraría de nada con solo el tono.

   En el computador vive fija arriba a la derecha, fuera de la columna del
   contenido: es un sitio que no cambia nunca, y eso es medio valor de una
   campanita. En el celular vive en la barra negra, donde antes estaba el icono
   de conversaciones. */

.ka-campana{
  position:fixed; top:14px; right:18px; z-index:45;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sup); border:1px solid var(--linea);
  color:var(--tinta); cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
@media (hover:hover) and (pointer:fine){.ka-campana:hover{border-color:var(--acento)}}
.ka-campana.abierta{border-color:var(--acento)}
.ka-campana svg{width:20px; height:20px}
.ka-campana i{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  border-radius:99px; background:var(--alerta); color:#fff;
  font-size:10px; font-weight:700; font-style:normal; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--fondo);
}
/* 🔴 El globo rojo tiene que DESAPARECER cuando no hay nada que hacer.
   Se pintaba con el atributo `hidden` y el guion lo enciende y lo apaga con
   `g.hidden = ...`, pero la regla de arriba trae `display:flex` y una clase le
   gana al `[hidden]` que trae el navegador de fábrica: el día tranquilo salía
   un punto rojo vacío al lado del nombre. Un aviso que alarma sin decir de qué
   es peor que ninguno — a la tercera vez ya nadie mira la campanita. */
.ka-campana i[hidden]{display:none}

/* El latido. Corto y una sola vez: algo que se mueve sin parar en el borde de
   la pantalla se tapa con la mano a la media hora. */
@keyframes ka-latir{
  0%,100%{transform:rotate(0)}
  12%{transform:rotate(-13deg)} 24%{transform:rotate(11deg)}
  36%{transform:rotate(-8deg)}  48%{transform:rotate(6deg)}
  60%{transform:rotate(-3deg)}  72%{transform:rotate(0)}
}
.ka-campana.ka-late svg{animation:ka-latir 1s ease}
@media (prefers-reduced-motion:reduce){ .ka-campana.ka-late svg{animation:none} }

/* El cajón. */
/* 🔴 El cajón se abre PEGADO A LA CAMPANITA, no en la otra punta de la pantalla.
   Manoroz: «cuando se abra la ventanita de las notificaciones debería estar al
   lado… debería salir del costado izquierdo, justo donde está la campanita».
   Y tiene razón de sobra: el botón está a la izquierda y el panel salía arriba
   a la derecha, que es donde estaba cuando la campanita vivía ahí. Pulsar en un
   sitio y que la respuesta aparezca a un metro de distancia se lee como que se
   abrió otra cosa.
   `left` se calcula del ancho del panel, no de un número escrito a mano. */
.ka-avisos-cajon{
  /* `top` a la altura de la campanita, no al borde de la pantalla: el cajón y
     el botón tienen que leerse como una sola cosa.

     Los 88 px están MEDIDOS, no puestos a ojo: es donde arranca la campanita
     dentro del panel (26 de aire arriba + el logotipo + su separación). Si
     algún día cambia el aire de la cabecera, se vuelve a medir — el borde de
     arriba del cajón tiene que coincidir con el de la campanita. */
  position:fixed; top:88px; left:calc(var(--ancho-panel) + 12px); right:auto; z-index:46;
  width:min(360px, calc(100vw - 32px)); max-height:min(72vh, 620px); overflow-y:auto;
  background:var(--sup); border:1px solid var(--linea); border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
.ka-avisos-cajon[hidden]{display:none}
.ka-avisos-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 11px; border-bottom:1px solid var(--linea3);
  position:sticky; top:0; background:var(--sup); border-radius:16px 16px 0 0;
}
.ka-avisos-cab b{font-size:14px}
.ka-avisos-x{
  width:30px; height:30px; border-radius:50%; font-size:19px; line-height:1;
  color:var(--tenue); cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.ka-avisos-x:hover{background:var(--sup3); color:var(--tinta)}}

/* Un renglón. El número va primero y grande: es lo único que se mira de
   reojo, y de él depende si se entra o no. */
.ka-aviso-fila{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--linea3);
  color:var(--tinta);
}
.ka-aviso-fila:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){.ka-aviso-fila:hover{background:var(--sup2)}}
.ka-aviso-n{
  flex:none; min-width:34px; height:34px; padding:0 7px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--chip); color:var(--tinta);
}
/* Los colores dicen QUÉ TAN URGENTE, no de qué se trata. Rojo es «alguien
   está esperando ahora mismo»; si el rojo se usara para todo, dejaría de
   querer decir eso. */
.ka-aviso-r{background:var(--alerta-f); color:var(--alerta); border:1px solid var(--alerta-b)}
.ka-aviso-y{background:rgba(214,158,46,.14); color:#8a5a12; border:1px solid rgba(214,158,46,.34)}
.ka-aviso-g{background:rgba(46,125,107,.12); color:#1f6354; border:1px solid rgba(46,125,107,.28)}
.ka-aviso-b{background:var(--sup3); color:var(--sec); border:1px solid var(--linea2)}
.ka-aviso-t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto}
.ka-aviso-t b{font-size:13.5px; line-height:1.3}
.ka-aviso-t i{font-size:11.5px; font-style:normal; color:var(--tenue); line-height:1.4}
.ka-aviso-ir{width:16px; height:16px; flex:none; color:var(--apagado)}
.ka-avisos-limpio{padding:22px 18px; font-size:13px; line-height:1.6; color:var(--sec); margin:0}
.ka-avisos-limpio b{color:var(--tinta)}

/* La pantalla completa usa los mismos renglones, con más aire. */
.ka-panel-avisos .ka-aviso-fila{padding:15px 4px; border-bottom:1px solid var(--linea3)}
@media (hover:hover) and (pointer:fine){.ka-panel-avisos .ka-aviso-fila:hover{background:transparent}}
@media (hover:hover) and (pointer:fine){.ka-panel-avisos .ka-aviso-fila:hover .ka-aviso-t b{text-decoration:underline}}
.ka-panel-avisos .ka-aviso-n{min-width:44px; height:44px; font-size:16px; border-radius:12px}
.ka-panel-avisos .ka-aviso-t b{font-size:15px}
.ka-panel-avisos .ka-aviso-t i{font-size:12.5px}
.ka-panel-avisos .ka-tenue{margin-top:16px; font-size:12px; line-height:1.6}

@media (max-width: 900px){
  /* En el celular vuelve a la barra negra, donde estaba el icono de
     conversaciones. Sin posición fija: la barra ya es pegajosa. */
  .ka-campana{
    position:static; width:52px; height:52px; flex:none;
    background:transparent; border:0; box-shadow:none; color:var(--lateral-t);
    border-radius:0;
  }
  .ka-campana.abierta{border:0}
@media (hover:hover) and (pointer:fine){.ka-campana:hover{border:0}}
  .ka-campana svg{width:22px; height:22px}
  .ka-campana i{top:9px; right:8px; border:0}

  /* El cajón baja justo debajo de la barra y ocupa el ancho de la pantalla
     menos un margen. Un panel de 360 px metido a la fuerza en 390 se lee
     apretado contra los dos bordes. */
  .ka-avisos-cajon{
    top:calc(var(--cab-movil) + 6px); left:10px; right:10px;
    width:auto; max-height:70dvh; border-radius:14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLANTILLAS EN EL CHAT Y AVISOS DE CIRUGÍA
   ═══════════════════════════════════════════════════════════════════════
   Lo que decide este bloque: con la ventana vencida, la asesora tiene que poder
   LEER el mensaje entero antes de mandarlo. «Confirmación de cita · consultorio»
   no dice a qué hora ni en qué sede va a salir, y eso es justo lo que hay que
   revisar antes de que le llegue a alguien que se opera mañana. Por eso cada
   opción se despliega con el texto exacto, con el mismo aire de una burbuja. */

.ka-plantillas-menu{
  /* 🔴 `flex:1 0 100%` y no un ancho suelto.
     Esto vive DENTRO de `.ka-fuera`, que es un flex con `flex-wrap`. Sin
     reclamar el renglón entero, el menú se convertía en una columna estrecha al
     lado del texto y del formulario de WhatsApp, y en el computador el botón de
     «Enviar esta» quedaba comprimido fuera de la vista: Manoroz lo vio —«me sale
     "a usted le quede bien", pero no veo la opción para enviar»—. En el teléfono
     no se notaba porque ahí todo apila, que es justo por lo que la lupa a 430
     píxeles no lo cazó. Las lupas también hay que pintarlas anchas. */
  flex:1 0 100%;
  margin:12px 0 4px; padding-top:12px; border-top:1px solid var(--linea3);
  display:flex; flex-direction:column; gap:7px;
}
.ka-plantillas-menu > .ka-tenue{font-size:11.5px; letter-spacing:.02em}

/* Las aprobadas que HOY no se le pueden mandar a esta paciente, con el motivo.
   Sin esto, quien veía seis en verde en Ajustes y dos aquí concluía que el
   sistema se come cuatro. Van apagadas y sin botón a propósito: es un renglón
   que explica, no un botón muerto que invita a pulsar. */
.ka-plantillas-fuera{
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--linea3);
}
.ka-plantillas-fuera > b{font-size:11.5px; letter-spacing:.02em; line-height:1.4}
/* Una fila por plantilla: el nombre arriba y el motivo debajo, sin raya en
   medio. En una sola línea corrida —«Confirmación de cita · consultorio —
   Necesita una cita…»— el nombre y el motivo se confundían y el bloque se
   leía como un párrafo roto. */
.ka-plantillas-fuera ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ka-plantillas-fuera li{
  display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:9px; background:var(--sup2, var(--fondo));
}
/* Las que NO se pueden mandar, un escalón por debajo de las que sí: se leen,
   pero no compiten con lo que se puede tocar. */
.ka-plantillas-fuera li i{font-style:normal; font-weight:500; font-size:12.5px; color:var(--tenue); line-height:1.35}
.ka-plantillas-fuera li span{font-size:11.5px; line-height:1.45; color:var(--tenue)}
/* Un botón por acción, no uno por fila: tres «Agendar» seguidos parecen tres
   cosas distintas. */
.ka-plantillas-fuera-acc{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.ka-plantillas-fuera-acc .ka-btn{flex:0 0 auto}

/* El aviso de «no hay ninguna», que ahora dice LA razón de esta ficha. */
.ka-sin-plantillas{margin:0 0 4px; font-size:12.5px; line-height:1.5}
.ka-sin-plantillas b{color:var(--tinta)}
.ka-sin-plantillas > b:first-child{display:block; font-size:13.5px; margin-bottom:2px}
/* El botón que lo arregla, pegado a la explicación y no al fondo del panel. */
.ka-sin-plantillas-acc{margin:8px 0 2px}

/* El lugar, en el panel que escribe directo en la agenda del consultorio.
   Las mismas pastillas que la sede del CRM, más «Otro»: la agenda de la
   doctora tiene sitios que no son sedes nuestras, y forzar la lista borraría
   lo que alguien escribió a mano. */
.ka-cal-lugar-otro{
  width:100%; margin-top:8px; padding:9px 11px;
  border:1px solid var(--linea); border-radius:10px;
  background:var(--sup); color:inherit; font:inherit; font-size:13px;
}
.ka-plantilla-op{
  border:1px solid var(--linea2); border-radius:11px; background:var(--sup);
  overflow:hidden;
}
.ka-plantilla-op summary{
  cursor:pointer; padding:10px 13px; font-size:13px; line-height:1.4;
  display:flex; flex-direction:column; gap:2px; list-style:none;
}
.ka-plantilla-op summary::-webkit-details-marker{display:none}
/* 🔴 El título de la que SÍ se puede mandar, en el color de la tinta.
   `.ka-fuera span{color:var(--tenue)}` —pensada para la frase de la barra—
   lo pintaba gris apagado, y las que NO se pueden mandar, debajo, salían más
   brillantes: la jerarquía al revés. Lo que se puede tocar parecía apagado y
   lo apagado parecía lo importante. */
.ka-plantilla-op summary span{font-weight:600; color:var(--tinta); font-size:13.5px; display:block; margin:0}
.ka-plantilla-op summary{position:relative; padding-right:34px}
/* Una flecha que dice «esto se abre»: sin ella, la tarjeta parecía texto. */
.ka-plantilla-op summary::after{
  content:'›'; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:18px; color:var(--tenue); transition:transform .15s var(--ease-out);
}
.ka-plantilla-op[open] summary::after{transform:translateY(-50%) rotate(90deg)}
@media (hover:hover) and (pointer:fine){
  .ka-plantilla-op:hover{border-color:var(--linea)}
}
.ka-plantilla-op summary i{font-style:normal; font-size:11.5px; color:var(--tenue)}
.ka-plantilla-op[open] summary{border-bottom:1px solid var(--linea3)}
.ka-plantilla-previa{
  padding:12px 14px; font-size:13px; line-height:1.6;
  background:var(--sup2); color:var(--tinta);
}
.ka-plantilla-op form{margin:0; padding:10px 13px}
.ka-plantilla-op .ka-btn{margin:0}
.ka-sin-plantillas{margin:10px 0 0; font-size:12px; line-height:1.55}

/* Las recomendaciones del día de la cirugía, en el menú de la barra del chat. */
.ka-menu-reco{max-width:280px; padding:10px}
.ka-menu-reco > .ka-tenue{display:block; font-size:11px; margin-bottom:7px}
.ka-menu-reco form{margin:0; display:block}
.ka-reco-op{
  display:block; width:100%; text-align:left; font-family:inherit;
  font-size:13px; padding:9px 11px; border-radius:9px; margin-bottom:4px;
  background:var(--sup2); border:1px solid var(--linea3); color:var(--tinta); cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.ka-reco-op:hover{border-color:var(--acento); background:var(--sup3)}}
.ka-menu-reco p{margin:7px 0 0; font-size:11px; line-height:1.45}

/* Cada momento de cirugía, en la pantalla de confirmar. */
.ka-cirugia-momento{margin-top:18px; padding-top:15px; border-top:1px solid var(--linea3)}
.ka-cirugia-momento h3{font-size:14px; margin:0}
.ka-cirugia-momento form{margin-top:10px}

/* El editor de recomendaciones en Ajustes. */
.ka-reco-campo{
  border:1px solid var(--linea2); border-radius:12px; padding:13px 15px;
  margin-bottom:12px; background:var(--sup);
}
.ka-reco-campo label{display:block; margin-bottom:9px; font-size:12px; color:var(--sec)}
.ka-reco-campo input,.ka-reco-campo textarea{width:100%; margin-top:5px}
.ka-reco-campo textarea{font-size:13px; line-height:1.55}

@media (max-width:760px){
  .ka-menu-reco{max-width:none; left:0; right:0}
  .ka-cirugia-momento form .ka-btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   QUIÉN ESTÁ CONECTADA, ARRIBA DEL PANEL
   ═══════════════════════════════════════════════════════════════════════
   Manoroz: «ahí debería aparecer el nombre de la persona que está conectada
   arriba, el usuario, y deberían aparecer botoncitos. El botoncito que
   inicialmente vamos a meter sería el de notificaciones».

   Dos problemas de verdad que cierra: en un equipo donde varias personas usan
   el mismo computador, saber con qué cuenta se está evita contestar un chat
   desde la cuenta de otra; y la campanita existía SOLO en la barra del
   teléfono, así que quien trabaja sentada —que son casi todas— no la tenía.

   Es una fila, en plural, porque van a venir más botones. */

.ka-quien{
  /* 🔴 La campanita va EN LA MISMA LÍNEA que el nombre y el cargo.
     Manoroz: «la campanita debería estar alineada con el usuario, el cargo y
     demás». `align-items:center` la centra contra el bloque de dos renglones,
     que es donde el ojo la busca. El tirón hacia arriba que había aquí la
     descuadraba respecto al logotipo de encima. */
  display:flex; align-items:center; gap:10px;
  padding:2px 8px 18px;
  margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08);
}
/* 🔴 Sin el cuadrito de las iniciales.
   Manoroz: «quitemos eso completamente, dejemos solamente el nombre de la
   persona, y el cargo debajo, y el botoncito de campana». Decía las iniciales al lado
   del nombre completo y dos centímetros debajo del logo, que ya dice la marca:
   tres veces lo mismo en el mismo rincón. El avatar de iniciales se gana su
   sitio donde hay que distinguir a varias personas de un vistazo —la lista de
   conversaciones—, no donde solo hay una. */
.ka-quien-n{min-width:0; flex:1 1 auto}
.ka-quien-n b{
  display:block; font-size:13px; font-weight:500; color:var(--lateral-t);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-quien-n i{
  display:block; font-style:normal; font-size:11px;
  color:rgba(246,243,240,.45); line-height:1.35;
}
.ka-quien-b{display:flex; gap:6px; flex:none}

/* La campanita del panel: sobre fondo negro, así que hereda el color del
   panel en vez del de las tarjetas. */
.ka-campana-lado{
  /* 🔴 `relative`, no `static`. El globo del número es `absolute`, así que sin
     esto se posiciona contra lo primero que encuentre —el documento— y se va a
     la esquina de la pantalla, lejos de la campanita. Lo cazó la lupa al pintar
     el panel; leyendo el CSS no se ve.

     🔴 Y `inset:auto` NO sobra. La regla base de `.ka-campana` trae
     `top:14px; right:18px` de cuando la campanita flotaba fija en la esquina de
     la pantalla. Al cambiarla a `relative` sin borrar esas dos, el `top:14px`
     deja de anclarla arriba y pasa a EMPUJARLA 14 píxeles hacia abajo desde su
     sitio: el botón queda perfectamente centrado con el nombre y el cargo, y la
     campanita dentro de él, descuadrada. Es justo lo que se veía —y lo que no
     se arreglaba tocando los márgenes de la fila, porque la fila estaba bien.
     Se midió: el contenedor centrado en 105 y la campanita en 119. */
  position:relative; inset:auto;
  width:34px; height:34px; flex:none;
  border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:rgba(246,243,240,.78);
  display:flex; align-items:center; justify-content:center;
  box-shadow:none; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s var(--ease-out);
}
.ka-campana-lado.abierta{
  color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.12);
}
@media (hover:hover) and (pointer:fine){.ka-campana-lado:hover{
  color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.12);
}}
.ka-campana-lado svg{width:17px; height:17px}
.ka-campana-lado .ka-campana-n{top:-5px; right:-5px}

@media (max-width: 900px){
  /* En el teléfono el panel es el cajón del menú: la cabecera se queda —saber
     con qué cuenta se entró vale igual— pero la campanita de aquí sobra,
     porque ya está en la barra de arriba, a la vista sin abrir nada. */
  .ka-quien-b{display:none}
  .ka-quien{padding-bottom:14px}
}

/* Los filtros de «Antes y después». Misma barra de chips que la bandeja: es el
   mismo gesto —acotar de qué montón se habla— y aprenderlo una vez debe
   bastar. Se desliza al lado cuando hay muchos procedimientos. */
.ka-filtro-casos{margin-bottom:18px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
.ka-filtro-casos a{flex:none}

/* La palabra de verificación recién generada. Se enseña UNA vez, así que tiene
   que saltar a la vista: quien no la copie ahora tiene que volver a generarla. */
.ka-verify-nueva{
  border:1px solid var(--acento); border-radius:12px;
  padding:14px 16px; margin:14px 0; background:var(--sup3);
}
.ka-verify-nueva p{margin:0 0 8px; font-size:13px; line-height:1.6}
.ka-verify-nueva p:last-child{margin-bottom:0}
.ka-codigo-grande{
  display:block; font-size:15px; letter-spacing:.04em; padding:11px 13px;
  word-break:break-all; user-select:all;
}

/* ═════════════════════════════════════════════════════════════════════
   CAPA PREMIUM · 3.4.4 · SKILL PREMIUM DISEÑO
   Va al final a propósito: no cambia lógica ni textos, solo plataforma,
   movimiento y distribución. Cada bloque dice qué arregla.
   ═════════════════════════════════════════════════════════════════════ */

/* Curvas únicas para todo el CRM. Nada de ease-in en la interfaz. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}

/* En el celular: sin el destello gris al tocar, sin zoom por texto chico,
   sin seleccionar el texto de un botón al dejar el dedo encima, y sin la
   espera de 300 ms del doble toque. */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.kaapp button,.kaapp summary,.ka-btn,.ka-filtro-conv a,.ka-conv,.ka-nav a,.ka-pestanas a{
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}

/* Respuesta al pulsar: el botón se hunde apenas en cuanto el dedo lo toca.
   Antes había UNA sola regla :active en todo el CRM. */
.ka-btn,.ka-filtro-conv a,.ka-conv,.ka-campana,.ka-campana-lado,.ka-llamar,.ka-redondo{
  transition-property:background-color,color,border-color,box-shadow,transform;
  transition-duration:.15s,.15s,.15s,.15s,.12s;
  transition-timing-function:ease,ease,ease,ease,var(--ease-out)}
.ka-btn:active,.ka-filtro-conv a:active,.ka-conv:active,.ka-campana:active,
.ka-campana-lado:active,.ka-llamar:active,.ka-redondo:active{transform:scale(.97)}

/* Cajón y toast con las curvas de la casa. */
.ka-lateral{animation-timing-function:var(--ease-drawer)}
#ka-toast{animation-timing-function:var(--ease-out)}

/* Títulos grandes con el tracking cerrado que piden a ese tamaño. */
.kaapp h1{letter-spacing:-.02em;line-height:1.08}

/* BANDEJA EN PORTÁTIL (901–1180 px). Antes la ficha bajaba a una segunda
   fila DENTRO del mismo alto y el alto se partía en dos: la lista mostraba
   solo los filtros —ninguna conversación— y el chat quedaba de 40 px útiles.
   Ahora la lista y el chat tienen el alto completo y la ficha va debajo,
   con su altura natural. */
@media (min-width:901px) and (max-width:1180px){
  .ka-bandeja{height:auto;grid-template-rows:max(520px,calc(100dvh - 170px)) auto}
  .ka-bandeja>.ka-ficha-rapida{grid-column:1 / -1}
}

@media (max-width:900px){
  /* Filtros de Conversaciones en UNA fila que se desliza. Antes eran 8 chips
     en 253 px de alto y en pantalla cabía una sola conversación. */
  .ka-filtro-conv{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 0 8px;margin:0;
    overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .ka-filtro-conv::-webkit-scrollbar{display:none}
  .ka-filtro-conv>*{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}

  /* Botones del chat: Ficha · Remitir · Agendar · Nota y el teléfono caben
     en la pantalla. Antes el teléfono quedaba escondido a la derecha. */
  /* Cinco desde la 3.10 (entró «Sin leer»): cinco columnas iguales y el
     teléfono al final. Con cuatro, el quinto se iba a otra fila con huecos. */
  .ka-chat-cab .ka-chat-hacer{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 36px;
    overflow:visible;margin:6px 0 0;padding:0;gap:5px;flex:1 0 100%}
  .ka-chat-cab .ka-chat-hacer .ka-btn{padding:9px 2px;justify-content:center;text-align:center;font-size:12px;white-space:nowrap;min-width:0}
  .ka-chat-cab .ka-chat-hacer .ka-llamar{margin-left:0;justify-self:end}

  /* Escribir: la caja ocupa el ancho y los adjuntos van en una fila debajo.
     Antes la caja medía 96 px y «Escribe un mensaje» se partía en tres líneas. */
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones{flex-wrap:wrap;row-gap:6px}
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones>textarea{order:1;flex:1 1 calc(100% - 60px);min-width:0;width:auto}
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones>.ka-redondo,
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones>.ka-ico{order:2}
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones>.ka-adjuntar{order:3;flex:0 0 auto}

  .ka-chat-hilo,.ka-lista-conv{overscroll-behavior:contain}
}

@media (prefers-reduced-motion:reduce){
  .ka-btn:active,.ka-filtro-conv a:active,.ka-conv:active,.ka-campana:active,
  .ka-campana-lado:active,.ka-llamar:active,.ka-redondo:active{transform:none}
}

/* ─── «¿Es alguna de estas?» — la pregunta de las citas sin ficha ───
   Manoroz: «que trate de leerlo y comparar sin inventar, y si no entiende, que
   pregunte». Cada propuesta es un renglón: quién, por qué, y el botón. El
   motivo escrito es lo que permite decir que NO sin abrir la ficha.
   Crear la ficha NO se hace aquí: se hace en el calendario, en el mismo cajón
   lateral que ya existe — «ese diseño de hecho ya lo tenemos». */
.ka-sugerida{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:5px 0; border-bottom:1px solid var(--linea3);
}
.ka-sugerida:last-of-type{border-bottom:0}
.ka-sugerida .ka-n{font-size:13px}
.ka-sugerida .ka-tenue{font-size:11.5px}
.ka-sugerida form{margin-left:auto}
.ka-sugerida-pie{margin-top:7px; font-size:11.5px; color:var(--tenue)}
@media (max-width:760px){
  .ka-sugerida form{margin-left:0; width:100%}
  .ka-sugerida .ka-btn{width:100%; justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════
   «¿YA ERA PACIENTE?» — la misma persona en otra ficha.

   Manoroz: *«necesito que se crucen sí o sí»*. Va en la ficha lateral
   del chat —donde se está atendiendo, antes de contestar— y arriba de
   la ficha completa. Una tarjeta, no un aviso rojo: no es un error, es
   una pregunta, y el rojo en este CRM es «no contactar».
   ══════════════════════════════════════════════════════════════════ */
.ka-gemelas{
  margin:12px 0; padding:12px 14px; border-radius:12px;
  background:var(--sup3); border:1px solid var(--linea2);
}
.ka-gemelas-t{display:block; font-family:var(--fuente-ui); font-size:14px; color:var(--tinta)}
.ka-gemelas > .ka-tenue{margin:2px 0 8px}
.ka-gemela{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  padding:10px 0; border-top:1px solid var(--linea2);
}
.ka-gemela .ka-n{font-weight:600}
.ka-gemela > .ka-tenue{flex:1 1 100%; margin-top:-2px}
.ka-gemela-porque{flex:1 1 100%; font-size:12.5px; color:var(--sec); line-height:1.45}
/* Las pistas fuertes (mismo número, mismo correo, la agenda) se marcan con
   la raya del acento; la débil —el nombre— va sin ella. */
.ka-gemela-fuerte{box-shadow:inset 3px 0 0 var(--acento); padding-left:10px}
.ka-gemela-unir{flex:1 1 100%}
.ka-gemela-unir > summary{list-style:none; display:inline-flex; cursor:pointer}
.ka-gemela-unir > summary::-webkit-details-marker{display:none}
.ka-gemela-unir[open] > summary{opacity:.55}
.ka-gemela-unir > p{margin:8px 0; font-size:12.5px; line-height:1.55}

/* ═══════════════════════════════════════════════════════════════════════
   Las cotizaciones de la ficha (3.16.0)

   Manoroz: «en todo momento poder descargarla cuando ya la cree para
   imprimirla, porque muchas veces el paciente se la lleva». Cada renglón
   lleva sus dos botones —ver o imprimir, y descargar— y las de prueba se
   quedan en gris: no se borra ninguna.
   ═══════════════════════════════════════════════════════════════════════ */
.ka-cots-t td{vertical-align:top}
.ka-cot-quien{font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-cot-anu{font-size:11.5px; color:var(--alerta); margin-top:3px}
.ka-cots-t .ka-cot-hoja{white-space:nowrap}
.ka-cots-t .ka-cot-hoja form{display:inline-block; margin:0 4px 4px 0}
.ka-cot-anulada td{opacity:.5}
.ka-cot-anulada b{text-decoration:line-through}
.ka-cot-limpiar summary{cursor:pointer; list-style:none; font-size:12.5px}
.ka-cot-limpiar summary::-webkit-details-marker{display:none}
.ka-cot-limpiar input[type="text"]{
  width:100%; min-width:190px; margin:6px 0; padding:8px 10px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
/* En el cotizador: ver la hoja y descargarla antes de mandar nada. */
.ka-cot-acciones{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.ka-cot-acciones form{margin:0}
/* La cotización de prueba, también en la vista previa del chat. */
.ka-fr-cots li.ka-cot-anulada{opacity:.5}
@media (max-width: 860px){
  .ka-cots-t thead{display:none}
  .ka-cots-t tr{display:block; padding:10px 0; border-bottom:1px solid var(--linea2)}
  .ka-cots-t td{display:block; padding:2px 0}
  .ka-cots-t .ka-cot-hoja{white-space:normal}
}

/* ═══════════════════════════════════════════════════════════════════════
   El cajón de la sala de videollamada (3.17.0)

   Manoroz: «al momento de crear el enlace debería aparecer una subventana que
   se deslice de la parte lateral derecha y que diga, en caso de que no se
   pueda, explicar que no se puede… y pegar el link ahí para mandárselo como
   confirmación». Cuatro pasos numerados, la hora de la cita arriba —que es el
   dato que hace falta para crear la sala— y el motivo cuando Google dice que
   no. Entra con el mismo mecanismo que los demás cajones.
   ═══════════════════════════════════════════════════════════════════════ */
.ka-cajon-meet .ka-meet-cuando{
  margin:0 0 14px; padding:12px 14px; border-radius:12px;
  background:var(--sup2); border:1px solid var(--linea2);
}
.ka-cajon-meet .ka-meet-cuando b{display:block; font-size:15px}
.ka-cajon-meet .ka-meet-cuando span{display:block; margin-top:2px; font-size:12.5px; color:var(--tenue)}
.ka-meet-porque{
  margin:0 0 16px; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--alerta) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--alerta) 34%, transparent);
}
.ka-meet-porque b{display:block; font-size:13.5px; margin-bottom:3px}
.ka-meet-porque span{display:block; font-size:12.5px; line-height:1.5; color:var(--tenue)}
.ka-meet-pasos{margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:18px}
.ka-meet-pasos li{font-size:12.5px}
.ka-meet-pasos li::marker{color:var(--tenue); font-family:var(--fuente-ui)}
.ka-meet-pasos b{display:block; font-size:13.5px; margin-bottom:3px}
.ka-meet-pasos span{display:block; color:var(--tenue); line-height:1.5; margin-bottom:8px}
.ka-meet-pasos form{margin:0}
.ka-meet-pasos input[type="url"]{
  width:100%; margin-bottom:8px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea); background:var(--sup2); color:var(--txt);
  font-family:var(--fuente-ui); font-size:13px;
}
.ka-meet-ir{display:flex; gap:8px; flex-wrap:wrap}
/* El último paso espera al enlace: se ve, para saber que existe, pero apagado. */
.ka-meet-espera{opacity:.55}

/* ═══════════════════════════════════════════════════════════════════════
   El color de cada asesora (3.18.0) — SOLO en el perfil de dirección

   Manoroz: «en el perfil de admin me gustaría incluir el nombre de qué asesor
   está llevando en ese preciso instante al paciente, e identifiquemos a cada
   asesor con un color». La dirección mira diez mil conversaciones: un anillo
   de color se reconoce sin leer, y el nombre de pila queda al lado para quien
   todavía no se sabe los colores.

   El color viaja en `--quien`, puesto en el propio elemento: son colores de
   personas, no del tema, y se eligen desde Equipo. Escribirlos aquí
   significaría tocar el plugin cada vez que entre alguien nuevo.
   ═══════════════════════════════════════════════════════════════════════ */
/* 🔴 Nada de anillos gruesos ni fondos saturados.
   Manoroz: «solo sombrearlo un poco del color, que se vea tecnológico, o
   marcarle unos bordes; nada exagerado ni cansón para la vista». Son tres
   toques mínimos y ninguno compite con lo que de verdad hay que leer —el
   nombre de la paciente y su último mensaje—:
     · un filo de 2px en el canto izquierdo de la fila,
     · un velo del color al 4 % de fondo,
     · las iniciales teñidas.
   Con `color-mix` el mismo color sirve de día y de noche sin escribir dos
   paletas: lo que cambia es sobre qué se mezcla. */
.ka-conv.ka-conv-quien{box-shadow:inset 2px 0 0 var(--quien)}
/* El velo de color aparece SOLO al pasar por encima y en la abierta. Con las
   diez mil filas teñidas a la vez la lista se vuelve un arcoíris y deja de
   leerse: probado, y era justo lo «cansón para la vista» que él no quería. */
.ka-conv.ka-conv-quien:hover{background:color-mix(in srgb, var(--quien) 6%, transparent)}
.ka-conv.ka-conv-quien.on{background:color-mix(in srgb, var(--quien) 10%, transparent)}
.ka-av-conv.ka-av-color{
  background:color-mix(in srgb, var(--quien) 14%, transparent);
  color:var(--quien);
}
/* «En un ladito, que se vea minimalista»: el punto y el nombre, sin cápsula.
   Las otras marcas de la fila —Nueva, Paciente, Anuncio— sí van en cápsula
   porque son estados; esto es una firma, y una firma no se encierra. */
.ka-marca-lleva{
  font-style:normal; font-size:10.5px; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:5px;
  color:var(--tenue); background:none; border:0; padding:0;
}
.ka-marca-lleva::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--quien, var(--tenue));
}
/* El selector de color en «Quién es quién». */
.ka-color-form{display:flex; align-items:center; gap:8px}
.ka-color-bola{
  width:14px; height:14px; border-radius:50%; flex:none;
  background:var(--quien); border:1px solid var(--linea);
}

/* «Esta paciente la lleva otra, y la acabas de trabajar tú» (3.19.0).
   Va arriba de la ficha, con el mismo aire que el aviso de relevo: es un dato
   que hay que resolver, no una alarma. Nunca en rojo — el rojo en este CRM es
   «pidió que no se le escriba». */
.ka-lleva-otra{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between;
  border:1px solid var(--linea); border-left:3px solid var(--acento);
  background:var(--sup); border-radius:12px; padding:11px 14px; margin:0 0 14px;
}
.ka-lleva-otra b{display:block; font-size:13.5px}
.ka-lleva-otra span{display:block; margin-top:2px; font-size:12px; color:var(--tenue)}
.ka-lleva-otra-btn{display:flex; gap:8px; flex-wrap:wrap}
.ka-lleva-otra-btn form{margin:0}

/* ─────────────────────── apuntar una llamada (3.20.0) ───────────────────────

   Las cinco opciones son botones de radio de verdad, pintados como pastillas.
   Se apunta una llamada de pie, con el teléfono en la otra mano: la zona que
   hay que tocar es grande a propósito —44 px de alto— y la que está elegida se
   ve invertida, sin leer nada.

   El punto del radio no se esconde con `display:none`: así el teclado y el
   lector de pantalla siguen funcionando. Se saca de la vista con `opacity` y
   posición, que es lo mismo para el ojo y distinto para todo lo demás. */
.ka-llam-ops{display:grid; gap:8px; margin:0 0 14px}
.ka-llam-op{
  position:relative; display:flex; align-items:center; min-height:44px;
  border:1px solid var(--linea); border-radius:12px; padding:0 14px;
  background:var(--sup); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.ka-llam-op input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.ka-llam-op span{font-size:14px; line-height:1.3}
.ka-llam-op:has(input:checked){
  background:var(--acento); border-color:var(--acento-b); color:var(--acento-t);
}
.ka-llam-op:has(input:focus-visible){outline:2px solid var(--acento-b); outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .ka-llam-op:hover{border-color:var(--acento-b)}
}
.ka-llamada-form .ka-llam-nota{display:block; margin:0 0 14px}
.ka-llamada-form .ka-llam-nota input{width:100%}

/* El renglón de la última llamada: se lee antes de decidir si se vuelve a
   marcar. Discreto —no es una alerta— pero con su borde para que no se
   confunda con el texto de al lado. */
.ka-ultima-llamada{
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  border:1px solid var(--linea3); border-left:3px solid var(--apagado);
  background:var(--sup); border-radius:12px; padding:9px 13px; margin:0 0 14px;
}
.ka-ultima-llamada b{font-size:12.5px}
.ka-ultima-llamada span{font-size:12.5px; color:var(--tenue)}

/* ─────────────────────────── Tutoriales (3.22.0) ───────────────────────────

   La pantalla de «cómo se hace». Dos mitades: los videos, para aprender el
   proceso entero, y los casos escritos, para resolver algo que está pasando
   ahora mismo.

   Las tarjetas van en rejilla y no en lista: cinco videos en columna obligan
   a desplazarse para saber qué hay, y lo primero que uno quiere aquí es ver
   el índice completo. */
.ka-tut-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:18px; margin-top:4px;
}
.ka-tut{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--linea2); border-radius:16px; padding:16px;
  background:var(--sup);
}
.ka-tut-cab{display:flex; gap:12px; align-items:flex-start}
/* El número dice el orden en que conviene verlos: es el camino de una
   paciente, de la primera respuesta hasta la llamada de seguimiento. */
.ka-tut-n{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acento); color:var(--acento-t);
  font-size:12.5px; font-weight:600; font-variant-numeric:lining-nums tabular-nums;
}
.ka-tut-cab b{display:block; font-size:15px; line-height:1.3}
.ka-tut-cab i{display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--tenue)}
.ka-tut-para{margin:0; font-size:13px; line-height:1.5; color:var(--sec)}
.ka-tut-video{
  width:100%; border-radius:12px; background:#000; display:block;
  aspect-ratio:16/10;
}
.ka-tut-falta{opacity:.6}
.ka-tut-sin{
  margin:0; padding:22px 14px; text-align:center; border-radius:12px;
  border:1px dashed var(--linea); font-size:12.5px; color:var(--tenue);
}

/* Los casos, plegados. Quien entra con un problema busca SU frase: diez
   respuestas abiertas de golpe no se leen, se hojean y se abandonan. */
.ka-tut-casos{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.ka-tut-caso{
  border:1px solid var(--linea2); border-radius:12px; background:var(--sup);
  overflow:hidden;
}
.ka-tut-caso > summary{
  cursor:pointer; list-style:none; padding:13px 16px;
  font-size:14px; font-weight:500; line-height:1.35;
  display:flex; align-items:center; gap:10px; min-height:44px;
}
.ka-tut-caso > summary::-webkit-details-marker{display:none}
.ka-tut-caso > summary::before{
  content:'+'; flex:none; width:18px; color:var(--tenue); font-weight:400;
}
.ka-tut-caso[open] > summary::before{content:'–'}
.ka-tut-caso[open] > summary{border-bottom:1px solid var(--linea3)}
@media (hover:hover) and (pointer:fine){
  .ka-tut-caso > summary:hover{background:var(--sup2, var(--sup))}
}
.ka-tut-resp{padding:13px 16px 15px 44px}
.ka-tut-resp p{margin:0 0 8px; font-size:13.5px; line-height:1.6; color:var(--sec)}
.ka-tut-resp p:last-child{margin-bottom:0}
/* El porqué de la regla, debajo de la respuesta. La respuesta dice qué hacer;
   esto dice por qué la cosa es así, que es lo que hace que la pregunta deje de
   llegar. Separado con un filete: se lee después, no en vez de. */
.ka-tut-resp small{
  display:block; margin-top:9px; padding-top:8px;
  border-top:1px solid var(--linea3);
  font-size:11.5px; line-height:1.5; color:var(--tenue);
}

/* Un mensaje que NO salió y no va a salir solo. Iba con la misma letra gris
   que los pendientes y se leía como enviado; lleva el color de lo que falla
   porque hay que volver a mandarlo con plantilla. */
.ka-no-salio{color:var(--alert); font-weight:600}

/* La pregunta de las cirugías marcadas «Bogotá»: ¿consultorio o quirófano?
   Discreta —va dentro de una celda de tabla— pero con las dos salidas a la
   vista, que es lo que evita que alguien la ignore. */
.ka-sede-duda{display:flex; flex-direction:column; gap:2px; margin-top:5px}
.ka-sede-duda > span{font-size:11.5px; color:var(--tenue); line-height:1.35}
.ka-sede-duda form{margin:0}
.ka-sede-duda .ka-comolink{font-size:12px}

/* ── 3.31.0 · Otra cita sin mover la que tiene ─────────────────────────────
   Manoroz, 29 sep: «no dejarme agendar varias citas sin que me las mueva de
   fecha». La pregunta sale solo cuando la paciente ya tiene cita, con dos
   tarjetas: la marcada se ve marcada (borde de tinta), la otra se lee igual. */
.ka-cal-aparte{border:0; padding:0; margin:10px 0 4px; min-width:0}
.ka-cal-aparte[hidden]{display:none !important}
.ka-cal-aparte legend{padding:0}
.ka-aparte-op{
  display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  border:1px solid var(--linea); border-radius:10px; padding:9px 11px;
  margin:0 0 6px; background:var(--sup);
}
.ka-aparte-op:has(input:checked){border-color:var(--tinta)}
.ka-aparte-op input{margin:2px 0 0; accent-color:var(--tinta); flex:none}
.ka-aparte-op span{font-size:12.5px; line-height:1.4; color:var(--tenue)}
.ka-aparte-op b{display:block; font-size:13.5px; font-weight:500; color:var(--tinta)}
.ka-aparte-op i{font-style:normal; color:var(--sec)}

.ka-otra-cita{margin:14px 0 0; border-top:1px solid var(--linea); padding-top:10px}
.ka-otra-cita > summary{cursor:pointer; font-size:13px; color:var(--sec); list-style:none}
.ka-otra-cita > summary::-webkit-details-marker{display:none}
.ka-otra-cita > summary::before{content:'+'; display:inline-block; width:1.1em; font-weight:600; color:var(--tinta)}
.ka-otra-cita[open] > summary::before{content:'–'}
.ka-otra-cita > form{margin-top:10px}

.ka-otras-citas{margin:14px 0 0}
.ka-otras-citas ul{list-style:none; margin:0; padding:0}
.ka-otras-citas li{
  display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline;
  border:1px solid var(--linea); border-radius:10px; padding:8px 11px; margin:0 0 6px; background:var(--sup);
}
.ka-otras-citas li b{font-size:13.5px; font-weight:500; color:var(--tinta)}
.ka-otras-citas li span{font-size:12px; color:var(--tenue); flex:1 1 180px; min-width:0; overflow-wrap:anywhere}
.ka-otras-citas li em{font-style:normal}

/* ── 3.32.0 · Varias citas el mismo día, en Confirmar citas ──────────────── */
.ka-conf-otras{margin-top:5px; padding:6px 9px; border-left:2px solid var(--tinta); font-size:12px; line-height:1.5; color:var(--sec)}
.ka-conf-otras > span{display:block; color:var(--tenue)}
.ka-conf-otras b{font-weight:500; color:var(--tinta)}

/* ── 3.33.0 · Buscar una palabra y llegar al mensaje ───────────────────────── */
.ka-conv-hallado{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ka-conv-hallado em{font-style:normal; font-size:11px; color:var(--tenue); margin-right:5px}
.ka-conv-hallado mark,
.ka-marca-busca{background:#F3D9C9; color:#111; border-radius:3px; padding:0 2px}
.ka-hallado-tira{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px;
  padding:8px 14px; border-bottom:1px solid var(--linea); background:var(--sup);
  font-size:12.5px; color:var(--sec);
}
.ka-hallado-tira b{font-weight:500; color:var(--tinta)}
.ka-hallado-ir{display:flex; gap:6px}
.ka-burbuja.ka-hallada{box-shadow:0 0 0 2px #C27A56; transition:box-shadow .8s ease}
.ka-burbuja.ka-hallada.ka-hallada-fin{box-shadow:0 0 0 1px rgba(194,122,86,.45)}
@media (prefers-reduced-motion:reduce){.ka-burbuja.ka-hallada{transition:none}}

/* ── 3.34.0 · La moneda de cada pago: COP o USD ─────────────────────────────
   En el costado del chat va pegada al valor: la cifra se lee con su moneda al
   lado, que es justo lo que tiene que pasar al anotarla. */
.ka-pago-con-moneda input[type="text"]{flex:1 1 auto; min-width:0}
.ka-pago-con-moneda .ka-moneda{flex:0 0 auto; width:auto}
.ka-pago-valor, .ka-pagos-total{white-space:nowrap}

/* ── 3.35.0 · Los dólares a la TRM del día ───────────────────────────────── */
.ka-campo-trm[hidden]{display:none !important}
.ka-pago-desglose{margin:-2px 0 8px; font-size:11.5px; line-height:1.4; color:var(--tenue); text-align:right}
.ka-pago-desglose-ficha{margin:-8px 0 12px}
.ka-pago-trm{display:block; margin-top:3px; font-size:11px; font-weight:400; line-height:1.4; color:var(--tenue); white-space:normal}
.ka-pago-trm b{font-weight:500; color:var(--sec)}
.ka-pago-trm-falta{margin-top:4px; font-size:11.5px; font-weight:400; white-space:normal}
.ka-pago-trm-falta > summary{cursor:pointer; color:var(--alerta)}
.ka-pago-trm-falta input{width:100%; margin:6px 0; padding:6px 8px; border-radius:8px; border:1px solid var(--linea); background:var(--sup2); color:var(--txt); font-size:12.5px}

/* ── 3.36.0 · La videollamada al agendar, y en la conversación ───────────── */
.ka-sala{border:0; padding:0; margin:10px 0 6px; min-width:0}
.ka-sala[hidden]{display:none !important}
.ka-sala legend{padding:0}
.ka-sala .ka-apagada{opacity:.55; cursor:not-allowed}
.ka-sala-enlace{width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--linea); background:var(--sup2); color:var(--txt); font-size:13px}
.ka-sala-enlace[hidden]{display:none !important}
.ka-fr-sala{border:1px solid var(--linea); border-radius:10px; padding:9px 12px; margin:0 0 12px; background:var(--sup)}
.ka-fr-sala b{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); font-weight:500}
.ka-fr-sala a{display:block; font-size:13.5px; margin:3px 0; word-break:break-all}
.ka-fr-sala span{display:block; font-size:12.5px; color:var(--alerta); margin:3px 0 7px}
.ka-fr-sala .ka-comolink{font-size:12px}

/* ── 3.37.0 · Sus citas, en la ficha ────────────────────────────────────────
   Cada renglón con la barra y el número del color de su clase, como en el
   calendario. La próxima va marcada; las canceladas, tachadas. */
.ka-citas-lista{list-style:none; margin:0; padding:0}
.ka-cita-r{margin:0 0 6px}
.ka-cita-r > a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:start;
  padding:9px 12px 9px 14px; border:1px solid var(--linea); border-radius:10px;
  background:var(--sup); color:var(--txt); text-decoration:none; position:relative; overflow:hidden;
}
.ka-cita-r > a::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tinte)}
@media (hover:hover) and (pointer:fine){.ka-cita-r > a:hover{border-color:var(--tinta)}}
.ka-cita-r.proxima > a{border-color:var(--tinta); box-shadow:0 1px 0 var(--linea)}
.ka-cita-cuando b{display:block; font-size:13.5px; font-weight:500; color:var(--tinta)}
.ka-cita-cuando i{display:block; font-style:normal; font-size:12px; color:var(--sec); font-variant-numeric:tabular-nums}
.ka-cita-que{min-width:0; grid-column:1 / -1; grid-row:2}
.ka-cita-proc{word-break:normal}
.ka-cita-clase{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sec)}
.ka-cita-clase em{
  flex:none; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px;
  background:var(--tinte); color:#fff; font-style:normal; font-size:11px; font-weight:600;
}
.ka-cita-proc{display:block; font-size:13.5px; color:var(--tinta); margin-top:2px; overflow-wrap:anywhere}
.ka-cita-donde{display:block; font-size:11.5px; color:var(--tenue); margin-top:1px}
.ka-cita-estado{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.ka-cita-estado i{font-style:normal; font-size:11px; padding:2px 7px; border-radius:99px; background:var(--sup2); color:var(--sec); white-space:nowrap}
.ka-cita-estado i.ka-cita-prox{background:var(--tinta); color:var(--sup)}
.ka-cita-estado i.bien{color:#0B8043}
.ka-cita-estado i.mal{color:var(--alerta)}
.ka-cita-r.cancelada .ka-cita-cuando b,
.ka-cita-r.cancelada .ka-cita-proc{text-decoration:line-through; opacity:.6}
.ka-citas-pasadas .ka-cita-r > a{background:transparent}
.ka-citas-antes{margin:12px 0 6px}
.ka-citas-mas > summary{cursor:pointer; font-size:12.5px; color:var(--sec); margin:4px 0 6px}
@media (max-width:560px){
  .ka-cita-r > a{grid-template-columns:1fr auto}
  .ka-cita-que{grid-column:1 / -1; grid-row:2}
}

/* 3.152.5 · La cita que vino de Google sin firma, partida a la mitad (Manoroz: «se puede partir
   la de sus citas a la mitad, y la otra mitad poner el pendiente, quién la agendó, elegir y
   guardar»). A la izquierda la cita; a la derecha, a su misma altura, el pendiente. Si la
   columna es angosta (teléfono, costado del chat), vuelve a quedar debajo como antes. */
.ka-sus-citas{container-type:inline-size}
.ka-cita-r.ka-cita-con-pend > .ka-cita-pend{
  margin:6px 0 0; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:8px;
  padding:10px 12px; border:1px dashed #E7C98F; border-radius:10px; background:#FDF8EE; min-width:0;
}
.ka-cita-r.ka-cita-con-pend .ka-pend-chip{align-self:flex-start}
.ka-cita-r.ka-cita-con-pend form.ka-pend-form{width:100%; margin:0}
.ka-cita-r.ka-cita-con-pend form.ka-pend-form select{flex:1 1 auto; max-width:none; min-height:36px; font-size:16px}
[data-tema="oscuro"] .ka-cita-r.ka-cita-con-pend > .ka-cita-pend{background:rgba(194,135,59,.10); border-color:rgba(194,135,59,.45)}
@container (min-width:440px){
  .ka-cita-r.ka-cita-con-pend{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:stretch}
  .ka-cita-r.ka-cita-con-pend > .ka-cita-pend{margin:0}
}

/* ── 3.38.0 · El pie del chat, compacto y parejo ────────────────────────────
   Manoroz, 29 sep: «la barra donde da el mensaje es larguísima y no deja ver
   el mensaje de plantilla que se envió», y «que se vea homogéneo y
   organizado». Las dos barras que pueden ocupar el sitio del cuadro de
   escribir —«Todavía no tiene asesora» y «Pasaron más de 24 horas»— se leen
   igual: el título, el texto con el mismo tamaño y color, la letra chica, y
   los botones debajo, todo a la izquierda. */
.ka-chat-pie .ka-fuera{
  display:grid; grid-template-columns:auto auto 1fr; align-items:center; justify-items:start;
  gap:8px; padding:12px 16px; border:0; border-radius:12px; background:var(--sup2); text-align:left;
}
.ka-chat-pie .ka-fuera-t{grid-column:1 / -1; min-width:0}
.ka-chat-pie .ka-fuera-t > b{font-size:13px; font-weight:500; color:var(--tinta); margin-bottom:1px}
.ka-chat-pie .ka-fuera-t > span{font-size:13px; line-height:1.45; color:var(--sec); margin-top:0}
.ka-chat-pie .ka-fuera .ka-letra-chica{margin-top:3px; font-size:11px; line-height:1.4}
/* Con los botones a la izquierda, el panel se cuelga de la barra entera y
   abre hacia la derecha: colgado del botón se salía por el borde izquierdo. */
@media (min-width:621px){
  .ka-chat-pie .ka-fuera-op{position:static}
  .ka-chat-pie .ka-fuera-panel{left:0; right:auto; transform-origin:bottom left}
}
/* 3.39.0 · «Todavía no tiene asesora», ARRIBA y en una franja delgada: el
   texto a la izquierda, en renglones cortos, y «Tomar» a la derecha.
   Manoroz: «el banner más chiquito… el texto justificado a la izquierda, y a
   la derecha, en esa misma franja, tomar conversación». */
.ka-franja-duena{
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px;
  padding:8px 16px; background:var(--sup2); border-bottom:1px solid var(--linea2);
}
.ka-franja-duena p{margin:0; min-width:0; text-align:left; font-size:12px; line-height:1.4; color:var(--sec)}
.ka-franja-duena p b{display:block; font-size:12.5px; font-weight:500; color:var(--tinta)}
.ka-franja-duena p span{display:block}
.ka-franja-duena form{margin:0; flex:none}
.ka-franja-duena .ka-btn{white-space:nowrap}
@media (max-width:620px){
  .ka-franja-duena{padding:8px 12px}
  .ka-franja-duena p span{display:inline}
}
.ka-pie-nota{margin:0; padding:10px 16px; font-size:12.5px; color:var(--sec); text-align:left; background:var(--sup2); border-radius:12px}

/* ═══════════════════════════════════════════════════════════════
   3.42.0 · Documentos de la ficha: cotizaciones de antes, fotos,
   exámenes. Una lista corta de renglones: miniatura, qué es y de
   cuándo, y las acciones a la derecha.
   ═══════════════════════════════════════════════════════════════ */
.ka-docs-lista{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px}
.ka-docf{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 12px; border:1px solid var(--linea2); border-radius:12px; background:var(--sup4);
}
.ka-docf-mini{
  width:52px; height:52px; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--sup3); color:var(--sec); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.04em;
}
.ka-docf-mini img{width:100%; height:100%; object-fit:cover; display:block}
.ka-docf-pdf{background:var(--tinta); color:var(--sup)}
.ka-docf-cuerpo{min-width:0}
.ka-docf-l1{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px}
.ka-docf-tipo{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--chip); color:var(--tinta)}
.ka-docf-t-cotizacion{background:var(--tinta); color:var(--sup)}
.ka-docf-fecha{font-size:12px; color:var(--sec); font-variant-numeric:lining-nums tabular-nums}
.ka-docf-nombre{display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-docf-nota{font-size:12.5px; color:var(--sec); margin-top:1px}
.ka-docf-quien{font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-docf-arc{font-size:11.5px; color:var(--alerta); margin-top:2px}
.ka-docf-acciones{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.ka-docf-archivar{position:relative}
.ka-docf:has(.ka-docf-archivar[open]) .ka-docf-acciones{grid-column:1 / -1}
.ka-docf-archivar[open]{flex-basis:100%}
.ka-docf-archivar form{display:flex; gap:6px; margin-top:6px}
.ka-docf-archivar input[type=text]{flex:1; min-width:0}
.ka-docf-archivado{opacity:.6}
.ka-docs-subir > summary{list-style:none; display:inline-flex; cursor:pointer}
.ka-docs-subir > summary::-webkit-details-marker{display:none}
.ka-docs-subir[open] > summary{margin-bottom:10px}
.ka-docs-caja{
  display:flex; flex-direction:column; gap:4px; padding:16px; margin-bottom:10px; cursor:pointer;
  border:1.5px dashed var(--linea); border-radius:12px; background:var(--sup2);
}
.ka-docs-caja input[type=file]{font-size:13px}
.ka-docs-caja-t{font-size:12.5px; color:var(--sec)}
.ka-docs-elegidos{font-size:12.5px; color:var(--tinta)}
.ka-docs-elegidos .ka-docs-grande{color:var(--alerta)}
.ka-docs-caja.ka-docs-mal{border-color:var(--alerta); background:var(--alerta-f)}
.ka-docs-archivados{margin-top:12px}
.ka-docs-archivados .ka-docs-lista{margin-top:8px}
@media (max-width:640px){
  .ka-docf{grid-template-columns:44px minmax(0,1fr)}
  .ka-docf-mini{width:44px; height:44px}
  .ka-docf-acciones{grid-column:1 / -1; justify-content:flex-start}
}

/* ═══════════════════════════════════════════════════════════════
   3.43.0 · Responder un mensaje en específico, y «Deshacer».
   ═══════════════════════════════════════════════════════════════ */
/* La barra de escribir pasa a dos pisos solo cuando hay una cita encima. */
.ka-barra-msg{flex-wrap:wrap}
.ka-barra-msg .ka-resp-previa{flex:0 0 100%}

/* La cita dentro de una burbuja: una franja con raya a la izquierda, como en
   WhatsApp. Hereda el color de la burbuja, así sirve en las dos (negra y gris)
   y en los dos temas. */
.ka-burbuja .ka-citado{
  display:block; margin:-2px 0 7px; padding:6px 10px; border-radius:9px;
  border-left:3px solid currentColor; background:rgba(127,127,127,.14);
  color:inherit; text-decoration:none; cursor:pointer; max-width:100%;
}
.ka-burbuja .ka-citado b{display:block; font-size:11.5px; font-weight:600; opacity:.8}
.ka-burbuja .ka-citado span{
  display:block; margin:0; font-size:12.5px; opacity:.75;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ka-burbuja .ka-citado:hover{background:rgba(127,127,127,.22)}

/* «Responder»: aparece al pasar por la burbuja, del lado de afuera. En pantallas
   táctiles (sin «pasar por encima») queda siempre a la vista, tenue. */
.ka-burbuja{position:relative}
.ka-responder{display:none}
.ka-puede-responder .ka-responder{
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0; border-radius:50%;
  border:1px solid var(--linea); background:var(--sup); color:var(--sec);
  cursor:pointer; opacity:0; transition:opacity .15s ease;
}
.ka-puede-responder .ka-burbuja.ka-entrada .ka-responder{right:-40px}
.ka-puede-responder .ka-burbuja.ka-salida .ka-responder{left:-40px}
.ka-responder svg{width:16px; height:16px}
.ka-puede-responder .ka-burbuja:hover .ka-responder,
.ka-puede-responder .ka-responder:focus-visible{opacity:1}
.ka-responder:hover{color:var(--tinta); border-color:var(--tinta)}
@media (hover:none){
  .ka-puede-responder .ka-responder{opacity:.55}
}

/* Encima de la caja: el mensaje que se está respondiendo, con su X. */
.ka-resp-previa{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
  padding:8px 8px 8px 12px; border-radius:12px;
  background:var(--sup2); border:1px solid var(--linea2); border-left:3px solid var(--tinta);
}
.ka-resp-previa[hidden]{display:none}
.ka-resp-previa-t{flex:1; min-width:0}
.ka-resp-previa-t b{display:block; font-size:11.5px; font-weight:600; color:var(--sec)}
.ka-resp-previa-t span{display:block; font-size:13px; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-resp-quitar{
  flex:none; width:28px; height:28px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--sec); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ka-resp-quitar svg{width:15px; height:15px}
.ka-resp-quitar:hover{background:var(--sup3); color:var(--tinta)}

/* «Se envía en 5 s · Deshacer»: justo encima de la barra de escribir. */
.ka-deshacer{
  display:flex; align-items:center; gap:12px; margin:0 0 8px;
  padding:9px 10px 9px 14px; border-radius:12px;
  background:var(--tinta); color:var(--sup); font-size:13px;
  animation:kaDeshacerEntra .18s ease-out;
}
.ka-deshacer-t{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-deshacer-t b{font-variant-numeric:tabular-nums}
.ka-deshacer-t i{font-style:normal; opacity:.7}
.ka-deshacer-b{
  flex:none; padding:6px 14px; border-radius:999px; border:1px solid currentColor;
  background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer;
}
.ka-deshacer-b:hover{background:var(--sup); color:var(--tinta)}
@keyframes kaDeshacerEntra{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.ka-deshacer{animation:none}}

/* 3.43.0 · Corregir una cotización ya enviada. */
.ka-corrigiendo{
  margin:0 0 16px; padding:14px 16px; border-radius:14px;
  background:var(--sup2); border:1px solid var(--linea); border-left:3px solid var(--tinta);
}
.ka-corrigiendo b{display:block; font-size:14px}
.ka-corrigiendo span{display:block; margin-top:2px; font-size:12.5px; color:var(--sec)}
.ka-corrigiendo p{margin:8px 0 6px; font-size:13px; color:var(--sec); line-height:1.5}
.ka-corrigiendo p b{display:inline; font-size:inherit; color:var(--tinta)}
.ka-cot-reemplazada{color:var(--sec)}

/* ═══════════════════════════════════════════════════════════════
   3.44.0 · El chat del equipo: emojis, archivos, fichas y citas.
   ═══════════════════════════════════════════════════════════════ */
.ka-eq-barra{position:relative; flex-wrap:wrap; padding:12px 18px 16px; border-top:1px solid var(--linea2); background:var(--sup)}
.ka-eq-barra .ka-chat-acciones{flex:1 1 100%; align-items:flex-end}
.ka-eq-barra textarea{flex:1; min-width:0}
.ka-eq-barra.ka-eq-soltar{outline:2px dashed var(--tinta); outline-offset:-6px}
.ka-eq-barra.ka-enviando .ka-enviar{opacity:.5; pointer-events:none}

/* Lo que va pegado al mensaje, encima de la caja, cada cosa con su X. */
.ka-eq-previa{flex:0 0 100%; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px}
.ka-eq-previa[hidden]{display:none}
.ka-eq-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 6px 5px 10px; border-radius:999px;
  background:var(--sup2); border:1px solid var(--linea2); font-size:12.5px; color:var(--sec);
}
.ka-eq-chip b{font-weight:600; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
.ka-eq-chip img{width:26px; height:26px; border-radius:6px; object-fit:cover}
.ka-eq-chip button{
  width:22px; height:22px; border:0; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; color:var(--sec); font-size:16px; line-height:1;
}
.ka-eq-chip button:hover{background:var(--sup3); color:var(--tinta)}
.ka-eq-aviso-peso{flex:0 0 100%; margin:0; font-size:12px; color:var(--alerta)}

/* Los emojis del equipo: todos, con pestañas por grupo. Más grande que el
   del chat de pacientes, que es una selección corta a propósito. */
.ka-eq-emojis{width:340px; max-height:none; padding:0; overflow:hidden; display:flex; flex-direction:column}
.ka-eq-emo-tabs{
  display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--linea2);
  overflow-x:auto; scrollbar-width:none;
}
.ka-eq-emo-tabs button{flex:none; width:30px; height:30px; border:0; border-radius:8px; background:transparent; font-size:17px; cursor:pointer}
.ka-eq-emo-tabs button:hover{background:var(--sup3)}
.ka-eq-emo-cuerpo{position:relative; height:280px; overflow-y:auto; padding:4px 10px 12px}
.ka-eq-emojis div{display:flex; flex-wrap:wrap; gap:1px}
.ka-eq-emojis button[data-emoji]{width:34px; height:34px; font-size:21px}

/* Los paneles para elegir una ficha o una cita: suben desde la barra. */
.ka-eq-panel{
  position:absolute; left:12px; right:12px; bottom:calc(100% - 4px); z-index:45;
  background:var(--sup); border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sh-m); padding:12px; display:flex; flex-direction:column; gap:8px;
  max-height:min(420px, 60vh);
}
.ka-eq-panel[hidden]{display:none}
.ka-eq-panel-cab{display:flex; align-items:center; justify-content:space-between}
.ka-eq-panel-cab b{font-size:13.5px}
.ka-eq-cerrar{width:28px; height:28px; border:0; border-radius:50%; background:transparent; font-size:18px; cursor:pointer; color:var(--sec)}
.ka-eq-cerrar:hover{background:var(--sup3)}
.ka-eq-panel input[type=search]{width:100%}
.ka-eq-lista{overflow-y:auto; display:flex; flex-direction:column; gap:4px; min-height:0}
.ka-eq-lista .ka-tenue{margin:6px 2px}
.ka-eq-op{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:8px 10px 8px 12px; border-radius:10px; border:1px solid transparent;
  background:var(--sup2); border-left:4px solid var(--ka-c, var(--linea));
  font:inherit; color:inherit;
}
.ka-eq-op[hidden]{display:none}
.ka-eq-op:hover{border-color:var(--linea); background:var(--sup3)}
.ka-eq-op b{display:block; font-size:13px}
.ka-eq-op span{display:block; font-size:12px; color:var(--sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Dentro de la burbuja: la foto, el video, el documento, la ficha y la cita. */
.ka-eq-burbuja .ka-eq-foto{display:block; margin:-2px 0 6px}
.ka-eq-burbuja .ka-eq-foto img{display:block; max-width:min(320px, 100%); max-height:320px; border-radius:10px; object-fit:cover}
.ka-eq-burbuja .ka-eq-video{max-width:min(320px, 100%); border-radius:10px; margin-bottom:6px}
.ka-eq-doc{
  display:flex; align-items:center; gap:10px; margin:0 0 6px; padding:8px 10px;
  border-radius:10px; background:rgba(127,127,127,.14); color:inherit; text-decoration:none;
}
.ka-eq-doc i{font-style:normal; font-size:10.5px; font-weight:700; padding:6px 7px; border-radius:6px; background:rgba(127,127,127,.28); color:inherit}
.ka-eq-doc span{margin:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-eq-ficha,.ka-eq-cita{
  display:flex; gap:10px; margin:0 0 6px; padding:9px 12px; border-radius:12px;
  background:rgba(127,127,127,.14); border-left:3px solid currentColor;
}
.ka-eq-cita{border-left-color:var(--ka-c, currentColor)}
.ka-eq-ico{font-size:18px; line-height:1.3}
.ka-eq-ficha b,.ka-eq-cita b{display:block; font-size:13.5px}
.ka-burbuja .ka-eq-ficha span,.ka-burbuja .ka-eq-cita span{display:block; margin:1px 0 0; font-size:12.5px; opacity:.8}
.ka-eq-ficha em,.ka-eq-cita em{display:block; margin-top:5px; font-style:normal; font-size:12.5px}
.ka-eq-ficha em a,.ka-eq-cita em a{color:inherit; font-weight:600}
.ka-eq-cancelada b{text-decoration:line-through}
.ka-burbuja .ka-eq-aviso{color:var(--alerta); opacity:1}
.ka-burbuja.ka-salida .ka-eq-aviso{color:inherit; font-weight:600}
@media (max-width:640px){
  .ka-eq-emojis{width:calc(100vw - 32px)}
  .ka-eq-panel{left:8px; right:8px}
}

/* ═══════════════════════════════════════════════════════════════
   3.45.0 · Gestión del equipo: filtros, sedes, tabla y calendario.
   ═══════════════════════════════════════════════════════════════ */
.ka-ge-filtros{display:flex; flex-direction:column; gap:12px; margin:0 0 22px}
.ka-ge-filtros .ka-rango{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.ka-ge-fila2{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.ka-ge-sedes{display:inline-flex; padding:3px; border-radius:999px; background:var(--sup3); gap:2px; flex-wrap:wrap}
.ka-ge-sedes a{padding:7px 14px; border-radius:999px; font-size:13px; color:var(--sec); text-decoration:none; white-space:nowrap}
.ka-ge-sedes a.on{background:var(--sup); color:var(--tinta); font-weight:600; box-shadow:var(--sh-s)}
.ka-ge-quien select{min-width:220px}
.ka-ge-kpis .ka-v small{font-size:13px; font-weight:500; color:var(--tenue); margin-left:4px}
.ka-ge-kpis .ka-ge-alerta{border-color:var(--alerta-b); background:var(--alerta-f)}
.ka-ge-kpis .ka-ge-alerta .ka-v{color:var(--alerta)}

.ka-ge-sedes-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.ka-ge-sede{
  display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--linea2); background:var(--sup2); color:var(--sec); text-decoration:none;
}
.ka-ge-sede b{font-size:15px; color:var(--tinta); margin-bottom:4px}
.ka-ge-sede span{font-size:13px}
.ka-ge-sede i{font-style:normal; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums; display:inline-block; min-width:34px}
.ka-ge-sede.on{border-color:var(--tinta); box-shadow:0 0 0 1px var(--tinta)}
.ka-ge-sede:hover{border-color:var(--linea)}

.ka-ge-tabla-caja{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ka-ge-tabla{min-width:980px}
.ka-ge-tabla td,.ka-ge-tabla th{white-space:nowrap}
.ka-ge-tabla td{font-variant-numeric:tabular-nums}
.ka-ge-nombre{color:inherit; text-decoration:none}
.ka-ge-nombre:hover b{text-decoration:underline}

/* El calendario: siete columnas, cada día con sus cuatro números. */
.ka-ge-cal{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px}
.ka-ge-dsem{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue); padding:0 4px 2px}
.ka-ge-dia{
  display:flex; flex-direction:column; gap:2px; min-height:108px; padding:8px 9px;
  border-radius:12px; border:1px solid var(--linea2); background:var(--sup);
  color:var(--sec); text-decoration:none; font-size:11.5px; line-height:1.35;
}
.ka-ge-dia:hover{border-color:var(--linea)}
.ka-ge-dia.on{border-color:var(--tinta); box-shadow:0 0 0 1px var(--tinta)}
.ka-ge-vacio{border:0; background:transparent; min-height:0}
.ka-ge-quieto{background:var(--sup2); color:var(--apagado)}
.ka-ge-futuro{opacity:.45}
.ka-ge-num{font-weight:600; color:var(--tinta); font-size:12.5px; margin-bottom:3px}
.ka-ge-l i{font-style:normal; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-ge-rojo, .ka-ge-rojo i{color:var(--alerta)}
.ka-ge-fuerte i{font-size:13px}

/* El detalle del día: una tarjeta por asesora. */
.ka-ge-det{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px}
.ka-ge-per{padding:14px 16px; border-radius:14px; border:1px solid var(--linea2); background:var(--sup2)}
.ka-ge-per h3{margin:0 0 10px; font-size:15px}
.ka-ge-grupo{margin:0 0 10px}
.ka-ge-grupo b{display:block; font-size:12px; font-weight:600; color:var(--sec); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px}
.ka-ge-grupo summary{cursor:pointer; list-style:none}
.ka-ge-grupo summary::-webkit-details-marker{display:none}
.ka-ge-grupo p{margin:0; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:13px; line-height:1.5}
.ka-ge-grupo a{color:var(--tinta); font-weight:500}
.ka-ge-grupo i{font-style:normal; font-size:11.5px; color:var(--tenue)}
.ka-ge-grupo i.ka-ge-si{color:var(--ok, #2E7D4F); font-weight:600}
.ka-ge-g-sin b{color:var(--alerta)}
.ka-ge-g-agendo b{color:var(--tinta)}
.ka-ge-como ul{margin:10px 0 0; padding-left:18px; font-size:13px; color:var(--sec); line-height:1.6}
.ka-ge-como summary{cursor:pointer}

@media (max-width:760px){
  .ka-ge-sedes-cards{grid-template-columns:1fr}
  .ka-ge-cal{grid-template-columns:1fr; gap:6px}
  .ka-ge-dsem,.ka-ge-vacio{display:none}
  .ka-ge-dia{min-height:0; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
  .ka-ge-num{min-width:64px; margin:0}
  .ka-ge-quieto .ka-ge-num::after{content:' · sin movimiento'; font-weight:400; color:var(--apagado)}
  .ka-ge-quien select{min-width:0; width:100%}
  .ka-ge-quien{width:100%}
}

.ka-ge-kpis{grid-template-columns:repeat(auto-fit, minmax(128px,1fr))}
.ka-ge-ver{text-transform:none; letter-spacing:0; font-weight:500; color:var(--tinta); text-decoration:underline; margin-left:4px}
details[open] .ka-ge-ver{display:none}
@media (max-width:900px){
  .ka-ge-tabla{min-width:0}
  .ka-ge-tabla td,.ka-ge-tabla th{white-space:normal}
  .ka-ge-tabla td[data-r]::before{width:150px}
}

/* ═══════════════════════════════════════════════════════════════
   3.46.0 · Gestión del equipo: cápsulas, medidores y una lámina por
   persona con el color de su chat. Manoroz: «está desbordado… una
   ficha completa de cada una… con el medidor, el porcentaje y el número».
   ═══════════════════════════════════════════════════════════════ */
.ka-ge-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.ka-ge-cab .ka-sub b{color:var(--tinta); font-weight:600}
.ka-ge-sedes-g{align-self:flex-start}
.ka-ge-sedes-g a{padding:9px 18px; font-size:14px}
.ka-ge-periodos{flex-wrap:wrap; gap:6px}
.ka-ge-nota{margin:0; font-size:12.5px; color:var(--tenue); line-height:1.5; max-width:820px}

/* Las cápsulas: cada número en la suya, nada se sale. */
.ka-ge-bloque{margin:0 0 22px}
.ka-ge-bt{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-ge-caps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
@media (max-width:1100px){ .ka-ge-caps{grid-template-columns:repeat(3, minmax(0,1fr))} }
.ka-ge-cap{
  display:flex; align-items:center; gap:12px; min-width:0; padding:14px 16px;
  border-radius:16px; background:var(--sup); border:1px solid var(--linea2); box-shadow:var(--sh-s);
}
.ka-ge-cap-t{display:flex; flex-direction:column; min-width:0; gap:2px}
.ka-ge-cap-l{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); line-height:1.3}
.ka-ge-cap-v{font-size:30px; font-weight:500; line-height:1.05; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap}
.ka-ge-cap-n{font-size:12px; color:var(--sec); line-height:1.35; overflow-wrap:anywhere}
.ka-ge-cap-alerta{border-color:var(--alerta-b); background:var(--alerta-f)}
.ka-ge-cap-alerta .ka-ge-cap-v{color:var(--alerta)}
.ka-ge-cap-aviso .ka-ge-cap-v{color:#B7791F}
.ka-ge-cap-med .ka-ge-med{flex:0 0 auto}

/* El medidor. */
.ka-ge-med{position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; color:var(--tinta)}
.ka-ge-med svg{position:absolute; inset:0; width:100%; height:100%}
.ka-ge-med b{position:relative; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.ka-ge-medw{display:inline-flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto}
.ka-ge-medw small{font-size:10px; font-weight:600; color:var(--tenue); text-transform:uppercase; letter-spacing:.06em}

/* Bogotá y Villavicencio. */
.ka-ge-duelo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.ka-ge-sedeb{display:flex; flex-direction:column; gap:14px; padding:18px 20px; border-radius:18px; border:1px solid var(--linea2); background:var(--sup2); color:inherit; text-decoration:none}
a.ka-ge-sedeb:hover{border-color:var(--linea)}
.ka-ge-sedeb-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap}
.ka-ge-sedeb-h h3{margin:0; font-size:20px}
.ka-ge-gente{display:flex; flex-wrap:wrap; gap:6px}
.ka-ge-gente i{font-style:normal; font-size:12px; font-weight:500; padding:3px 10px 3px 8px; border-radius:999px; background:var(--sup); border:1px solid var(--linea2); display:inline-flex; align-items:center; gap:6px}
.ka-ge-gente i::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--quien)}
.ka-ge-sedeb-m{display:flex; gap:18px}
.ka-ge-pie{margin:10px 0 0; font-size:12.5px; color:var(--tenue)}

/* Las láminas. */
.ka-ge-lams{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:0 0 22px}
@media (max-width:1100px){ .ka-ge-lams{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ka-ge-tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px}
.ka-ge-tile{display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:12px; background:var(--sup2); min-width:0}
.ka-ge-tile b{font-size:19px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-ge-tile span{font-size:11.5px; color:var(--sec); line-height:1.25}
.ka-ge-tile small{font-size:10.5px; color:var(--tenue); line-height:1.25}
.ka-ge-tile.ka-ge-rojo b{color:var(--alerta)}
.ka-ge-tile.ka-ge-ambar b{color:#B7791F}
.ka-ge-lam{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:18px 18px 16px; overflow:hidden;
  border-radius:18px; background:var(--sup); border:1px solid var(--linea2); box-shadow:var(--sh-s);
}
.ka-ge-lam::before{content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--quien)}
.ka-ge-lam header{display:flex; align-items:center; gap:12px}
.ka-ge-lam h3{margin:0; font-size:17px; line-height:1.2}
.ka-ge-ini{flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:16px; color:#fff; background:var(--quien)}
.ka-ge-hoy{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:8px 12px; border-radius:12px; background:var(--sup2); font-size:12.5px; color:var(--sec)}
.ka-ge-hoy b{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta)}
.ka-ge-hoy i{font-style:normal; font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-ge-lam-top{display:flex; align-items:center; gap:16px}
.ka-ge-lam-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.ka-ge-lam-min{font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.1}
.ka-ge-lam-n{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.ka-ge-lam-n li{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px solid var(--linea3); font-size:12.5px; color:var(--sec); min-width:0}
.ka-ge-lam-n li b{color:var(--tinta); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ka-ge-lam-n li.ka-ge-rojo b{color:var(--alerta)}
.ka-ge-lam-n li.ka-ge-ambar b{color:#B7791F}
.ka-ge-lam-ag{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:10px 12px; border-radius:12px; border:1px solid var(--quien)}
.ka-ge-lam-ag span{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--sec)}
.ka-ge-lam-ag b{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.ka-ge-lam-ag small{flex-basis:100%; font-size:11.5px; color:var(--tenue)}
.ka-ge-lam-ir{font-size:13px; font-weight:500; color:var(--tinta); text-decoration:none; align-self:flex-start}
.ka-ge-lam-ir:hover{text-decoration:underline}

/* La agenda de una sede, en barras. */
.ka-ge-barras{display:flex; flex-direction:column; gap:8px}
.ka-ge-barra{display:grid; grid-template-columns:minmax(120px,220px) 1fr 44px; align-items:center; gap:12px; font-size:13px}
.ka-ge-barra i{display:block; height:10px; border-radius:999px; background:var(--pista); overflow:hidden}
.ka-ge-barra em{display:block; height:100%; border-radius:999px}
.ka-ge-barra b{text-align:right; font-variant-numeric:tabular-nums}

/* El calendario: el porcentaje de respondidas en la esquina, los días sin registro en gris. */
.ka-ge-num{display:flex; justify-content:space-between; gap:6px}
.ka-ge-num em{font-style:normal; font-weight:600; font-size:11px; color:#2E7D4F}
.ka-ge-sinreg{background:var(--sup2); color:var(--apagado)}
.ka-ge-sinreg .ka-ge-l{font-style:italic}
.ka-ge-per{border-top:4px solid var(--quien, var(--linea2))}
.ka-ge-g-tarde b{color:#B7791F}
.ka-ge-g-suave b{color:var(--tenue)}

/* Las citas de ese día. */
.ka-ge-citas{display:flex; flex-direction:column; gap:6px}
.ka-ge-cita{display:grid; grid-template-columns:70px 12px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:var(--sup2); font-size:13px}
.ka-ge-hora{font-variant-numeric:tabular-nums; color:var(--sec)}
.ka-ge-cat{width:10px; height:10px; border-radius:50%}
.ka-ge-cn{display:flex; flex-direction:column; min-width:0}
.ka-ge-cn a{color:var(--tinta); font-weight:500}
.ka-ge-cn small{color:var(--tenue); font-size:11.5px}
.ka-ge-marca{font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--chip); white-space:nowrap}
.ka-ge-m-si .ka-ge-marca{background:var(--dentro-l); color:var(--dentro)}
.ka-ge-m-no .ka-ge-marca{background:var(--fuera-l); color:var(--fuera)}
.ka-ge-m-cancelada{opacity:.6}

@media (max-width:760px){
  .ka-ge-duelo{grid-template-columns:1fr}
  .ka-ge-caps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ka-ge-cap{flex-direction:column; align-items:flex-start; gap:8px}
  .ka-ge-cap-v{font-size:26px}
  .ka-ge-lams{grid-template-columns:1fr}
  .ka-ge-barra{grid-template-columns:110px 1fr 36px}
  .ka-ge-cita{grid-template-columns:58px 10px 1fr; }
  .ka-ge-marca{grid-column:3; justify-self:start}
  .ka-ge-cab .ka-acciones{width:100%}
}

/* 3.46.0 · El borrador de cada chat, como en WhatsApp. */
.ka-conv-borrador{color:var(--tenue)}
.ka-conv-borrador b{color:#2E7D4F; font-weight:600}

/* 3.48.0 · Cómo le fue a cada campaña. */
.ka-camp-res{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:10px 0 4px}
.ka-camp-res-n{position:relative; display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:12px; background:var(--sup2); overflow:hidden}
.ka-camp-res-n b{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.ka-camp-res-n span{font-size:12px; color:var(--sec)}
.ka-camp-res-n i{font-style:normal; font-size:11px; font-weight:600; color:var(--tenue)}
.ka-camp-res-n em{position:absolute; left:0; bottom:0; height:3px; background:var(--tinta); border-radius:0 3px 3px 0}
@media (max-width:760px){ .ka-camp-res{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* 3.49.0 · De dónde vienen: una lámina por origen y el día a día en barras. */
.ka-or-fuentes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ka-or-fuentes li{display:grid; grid-template-columns:minmax(0,1fr) 34% 34px; align-items:center; gap:8px; font-size:12.5px; color:var(--sec)}
.ka-or-fn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-or-fuentes i{display:block; height:8px; border-radius:999px; background:var(--pista); overflow:hidden}
.ka-or-fuentes em{display:block; height:100%; border-radius:999px; background:var(--quien)}
.ka-or-fuentes b{text-align:right; color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-or-conectar p{margin:0 0 10px}
.ka-or-campana{margin-top:18px}
.ka-or-campana:first-of-type{margin-top:4px}
.ka-or-tabla td small{display:block; font-size:11.5px; color:var(--tenue)}
.ka-or-tabla td{font-variant-numeric:tabular-nums}
.ka-or-nadie td{background:var(--alerta-f)}
.ka-or-dias{display:flex; flex-direction:column; gap:5px}
.ka-or-dia{display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,auto); align-items:center; gap:12px; font-size:12.5px}
.ka-or-dn{color:var(--sec); font-variant-numeric:tabular-nums}
.ka-or-barra{display:flex; height:12px; min-width:2px; border-radius:999px; overflow:hidden; background:var(--pista)}
.ka-or-barra em{display:block; height:100%}
.ka-or-dv{color:var(--sec); white-space:nowrap}
.ka-or-dv b{color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-or-quieto{opacity:.5}
.ka-or-leyenda{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0}
.ka-or-leyenda i{font-style:normal; font-size:12px; font-weight:500; padding:3px 10px 3px 8px; border-radius:999px; background:var(--sup); border:1px solid var(--linea2); display:inline-flex; align-items:center; gap:6px}
.ka-or-leyenda i::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--quien)}
@media (max-width:760px){
  .ka-or-dia{grid-template-columns:62px minmax(0,1fr)}
  .ka-or-dv{grid-column:2; white-space:normal}
}
.ka-or-tabla{table-layout:fixed}
.ka-or-tabla th:first-child{width:28%}
@media (max-width:900px){
  .ka-or-tabla{table-layout:auto}
  .ka-or-tabla td small{display:inline; margin-left:6px}
}

/* 3.49.0 · De dónde viene, en la ficha: como en BAFIOTE. */
.ka-or-chipl{margin:6px 0 0; font-size:13px; color:var(--sec); display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ka-or-chip{display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 9px; border-radius:999px; border:1px solid var(--quien); color:var(--tinta); font-weight:500; font-size:12.5px}
.ka-or-chip::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--quien)}
.ka-or-cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.ka-or-card{display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px; border:1px solid var(--linea2); background:var(--sup2); min-width:0}
.ka-or-card b{display:flex; align-items:center; gap:8px; font-size:19px; font-weight:600; color:var(--tinta)}
.ka-or-card b i{width:10px; height:10px; border-radius:50%; background:var(--quien); flex:0 0 auto}
.ka-or-card span:not(.ka-ge-cap-l){font-size:13px; color:var(--sec); overflow-wrap:anywhere}
.ka-or-card small{font-size:12px; color:var(--tenue)}
.ka-or-nota{margin:10px 0 0; font-size:13px; color:var(--sec); overflow-wrap:anywhere}
.ka-or-lxl{margin-top:18px}
.ka-or-lista{list-style:none; margin:0; padding:0}
.ka-or-lista li{display:grid; grid-template-columns:10px 132px 150px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--linea3); font-size:13px}
.ka-or-lista li > i{width:8px; height:8px; border-radius:50%; background:var(--quien)}
.ka-or-lf{color:var(--tenue); font-variant-numeric:tabular-nums}
.ka-or-lista b{font-weight:600; color:var(--tinta)}
.ka-or-ld{color:var(--sec); overflow-wrap:anywhere}
.ka-or-lr em{font-style:normal; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--chip); white-space:nowrap}
.ka-or-lr em.ka-or-ok{background:var(--dentro-l); color:var(--dentro)}
@media (max-width:760px){
  .ka-or-cards{grid-template-columns:1fr}
  .ka-or-lista li{grid-template-columns:10px 1fr auto; row-gap:2px}
  .ka-or-lf{grid-column:2}
  .ka-or-lista li > b{grid-column:2}
  .ka-or-ld{grid-column:2 / 4}
  .ka-or-lr{grid-column:3; grid-row:1}
}
.ka-ge-bt a{text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px}
/* 3.51.0 · Los pasos de Meta, con su botón. */
.ka-or-pasos{margin:0 0 14px; padding:0; list-style:none; counter-reset:paso; display:flex; flex-direction:column; gap:8px}
.ka-or-pasos li{counter-increment:paso; display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--sup2)}
.ka-or-pasos li::before{content:counter(paso); grid-row:1 / 3; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--tinta); color:var(--sup); font-weight:600; font-size:13px}
.ka-or-pasos b{font-size:14px; color:var(--tinta)}
.ka-or-pasos span{grid-column:2; font-size:12.5px; color:var(--sec); line-height:1.45}
.ka-or-pasos .ka-btn{grid-column:3; grid-row:1 / 3; white-space:nowrap}
@media (max-width:760px){ .ka-or-pasos li{grid-template-columns:34px minmax(0,1fr)} .ka-or-pasos .ka-btn{grid-column:2; grid-row:auto; justify-self:start; margin-top:8px} }
/* 3.51.0 · Enlaces con rastro. */
.ka-en-como{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0 0 20px}
.ka-en-como > div{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:16px; background:var(--sup); border:1px solid var(--linea2); box-shadow:var(--sh-s)}
.ka-en-como b{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#C2410C; color:#fff; font-size:14px}
.ka-en-como span{font-size:13px; color:var(--sec); line-height:1.45}
.ka-en-como strong{color:var(--tinta); font-weight:600}
.ka-en-lista{display:flex; flex-direction:column; gap:12px}
.ka-en-item{position:relative; display:flex; flex-direction:column; gap:12px; padding:16px 18px 14px 22px; border-radius:16px; background:var(--sup2); border:1px solid var(--linea2); overflow:hidden}
.ka-en-item::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--quien)}
.ka-en-item header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.ka-en-item h3{margin:0 0 6px; font-size:16px}
.ka-en-url{display:flex; align-items:center; gap:8px; min-width:0}
.ka-en-url code{font-size:13px; padding:6px 10px; border-radius:10px; background:var(--sup); border:1px solid var(--linea2); overflow-wrap:anywhere}
.ka-en-nums{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px}
.ka-en-nums > div{display:flex; flex-direction:column; padding:8px 10px; border-radius:12px; background:var(--sup)}
.ka-en-nums b{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.ka-en-nums span{font-size:11.5px; color:var(--sec)}
.ka-en-nums small{font-size:10.5px; color:var(--tenue)}
.ka-en-item footer{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px}
.ka-en-archivado{opacity:.6}
@media (max-width:900px){ .ka-en-como{grid-template-columns:1fr} .ka-en-nums{grid-template-columns:repeat(3, minmax(0,1fr))} }

/* 3.60.0 · Punta a punta */
.ka-fila-alerta td{background:color-mix(in srgb, #C0392B 9%, transparent)}
.ka-pa-frases{margin:4px 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.45}
.ka-pa-frases li::marker{color:var(--oro, #8F7766)}
.ka-pa-ficha .ka-tabla th{width:150px; text-align:left; font-weight:500; vertical-align:top}

/* 3.61.0 · La IA que audita */
.ka-ia-texto{display:flex; flex-direction:column; gap:4px; font-size:15px; line-height:1.5}
.ka-ia-texto h4{margin:12px 0 2px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--oro, #8F7766); font-weight:600}
.ka-ia-texto h4:first-child{margin-top:0}
.ka-ia-texto ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}

/* ─────────────────────────────── 3.63.0 · el asistente ─────────────────────
   El sello «✦ Asistente» en las burbujas que escribió él, y el brillo de
   colores mientras piensa (el de Apple Intelligence): un borde que gira
   despacio, en azul, violeta, rosa y naranja. Sin animación para quien la
   tiene apagada en su equipo. */
@property --ka-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ka-ia-sello {
	font-weight: 600;
	background: linear-gradient(90deg, #3d7bff, #a25bff, #ff5fa8, #ff9a3d);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	white-space: nowrap;
}
.ka-ia-brilla { position: relative; isolation: isolate; }
.ka-ia-brilla::before,
.ka-ia-brilla::after {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
	background: conic-gradient(from var(--ka-ang), #3d7bff, #a25bff, #ff5fa8, #ff9a3d, #3d7bff);
	animation: ka-ia-giro 2.6s linear infinite;
}
.ka-ia-brilla::before {
	padding: 2px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.ka-ia-brilla::after { z-index: -1; filter: blur(14px); opacity: .45; }
@keyframes ka-ia-giro { to { --ka-ang: 360deg; } }
.ka-ia-pensando {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
	margin: 8px 0; padding: 10px 14px; border-radius: 18px;
	background: var(--ka-panel, #fff); font-size: 13px;
}
.ka-ia-puntos { display: inline-flex; gap: 3px; margin-left: 2px; }
.ka-ia-puntos b { width: 5px; height: 5px; border-radius: 50%; background: #a25bff; opacity: .3; animation: ka-ia-punto 1.2s infinite; }
.ka-ia-puntos b:nth-child(2) { animation-delay: .2s; background: #ff5fa8; }
.ka-ia-puntos b:nth-child(3) { animation-delay: .4s; background: #ff9a3d; }
@keyframes ka-ia-punto { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
	.ka-ia-brilla::before, .ka-ia-brilla::after, .ka-ia-puntos b { animation: none; }
}

/* 3.65.0 · La mano levantada en el renglón de la conversación. */
.ka-mano {
	font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap;
	padding: 2px 8px; border-radius: 999px;
	background: #fff3d6; color: #8a5a00;
}

/* ══════════════════════════════════════════════════════════════════
   3.67.0 · EL RENGLÓN DE LA CONVERSACIÓN, SIMPLIFICADO

   Manoroz: «las iniciales, el nombre, la hora, el último mensaje,
   paciente, quién lo lleva, el procedimiento… y el necesita una
   persona, que se vea bastante, en negrilla, marcado».

   Tres renglones que no se parten: nombre y hora; el último mensaje; y
   Paciente/Nueva · quién la lleva · procedimiento. Lo demás (anuncio,
   país, inglés) va en letra pequeña al final. Y si hay mano levantada,
   el renglón entero se marca en ámbar y lleva su franja en negrilla con
   lo que necesita.
   ══════════════════════════════════════════════════════════════════ */
.ka-conv-l3{flex-wrap:nowrap; overflow:hidden; gap:8px}
.ka-conv-l3 > *{flex:none}
.ka-conv-l3 .ka-conv-proc{flex:0 1 auto; min-width:0; max-width:none; color:var(--sec)}
.ka-conv-extra{font-size:10.5px !important; letter-spacing:.02em; color:var(--tenue)}
.ka-conv-l3 .ka-espera{margin-left:auto}

/* La cápsula vieja de la mano ya no se usa: la franja la reemplaza. */
.ka-conv-l3 .ka-mano{display:none}

/* ══════════════════════════════════════════════════════════════════
   3.67.1 · La mano levantada, en ROJO y PEQUEÑA

   Manoroz: «pongámosla en rojo… el texto no tan grande, pequeñito,
   para que no se tenga que ampliar la ventana de conversación… dos
   renglones… rojo con letra blanca en modo claro… rojo y negro» de
   noche. Y lo mismo para Nueva, Paciente y las demás marcas: más
   pequeñas, más regulares.

   Ojo: en este CRM el rojo era solo «No contactar». Aquí va en
   franja llena (fondo rojo), y «No contactar» en texto rojo sin fondo:
   no se confunden.
   ══════════════════════════════════════════════════════════════════ */
.ka-conv.ka-conv-mano{
  background:color-mix(in srgb, #C0392B 6%, var(--sup));
  box-shadow:inset 3px 0 0 #C0392B;
}
@media (hover:hover) and (pointer:fine){
  .ka-conv.ka-conv-mano:hover{background:color-mix(in srgb, #C0392B 10%, var(--sup))}
}
.ka-conv.ka-conv-mano.on{background:color-mix(in srgb, #C0392B 12%, var(--sup))}
.ka-conv-mano-f{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:3px; padding:0 6px; border:3px solid #C0392B; border-radius:6px;
  background:#C0392B; color:#fff;
  font-size:10.5px; font-weight:500; line-height:1.35; letter-spacing:0;
}
.ka-conv-mano-f b{font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:none}
[data-tema="oscuro"] .ka-conv.ka-conv-mano{
  background:color-mix(in srgb, #E5484D 9%, var(--sup));
  box-shadow:inset 3px 0 0 #E5484D;
}
[data-tema="oscuro"] .ka-conv-mano-f{background:#E5484D; border-color:#E5484D; color:#0B0B0B}

/* Las marcas del tercer renglón, más pequeñas y parejas. */
.ka-conv-l3{gap:6px}
.ka-conv-l3 .ka-marca-nueva,
.ka-conv-l3 .ka-marca-paciente{font-size:9.5px; line-height:1.5; padding:0 6px; letter-spacing:.05em}
.ka-conv-l3 .ka-marca-lleva{font-size:10.5px}
.ka-conv-l3 .ka-conv-proc{font-size:11px}
.ka-conv-l3 .ka-espera{font-size:10px; padding:1px 7px; line-height:1.5}
.ka-conv-extra{font-size:10px !important}

/* 3.77.0 · La caja de escribir mientras el asistente escribe. */
textarea.ka-ia-espera { box-shadow: 0 0 0 2px rgba(155, 120, 255, .35); }
textarea.ka-ia-espera::placeholder { color: #7a5cff; }

/* 3.77.2 · El aviso se quita deslizándolo o con la ×. */
#ka-toast{touch-action:pan-y; user-select:none; -webkit-user-select:none}
#ka-toast .ka-toast-x{position:absolute; top:6px; right:8px; width:26px; height:26px; border:0; border-radius:50%;
  background:transparent; color:var(--tenue); font-size:18px; line-height:26px; cursor:pointer; padding:0}
#ka-toast .ka-toast-x:hover{background:rgba(0,0,0,.06); color:var(--tinta)}
/* 3.77.2 · «← Mi día» arriba, para volver a donde se estaba. */
.ka-volver-a{display:inline-block; margin-bottom:6px}

/* 3.78.0 · El embudo operativo del consultorio. */
.ka-emb{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:center}
.ka-emb-embudo{display:flex; flex-direction:column; align-items:center; gap:10px}
.ka-emb-fr{width:var(--ancho); text-align:center}
.ka-emb-barra{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-radius:14px; color:#fff;
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.ka-emb-fr-1 .ka-emb-barra{background:#3a3a3a}
.ka-emb-fr-2 .ka-emb-barra{background:#2c2c2c}
.ka-emb-fr-3 .ka-emb-barra{background:#1f1f1f}
.ka-emb-fr-4 .ka-emb-barra{background:#7a4630}
.ka-emb-fr-5 .ka-emb-barra{background:#9a5a3c}
.ka-emb-fr-6 .ka-emb-barra{background:#b5623d}
.ka-emb-t{font-size:13px; letter-spacing:.04em; text-transform:uppercase; opacity:.85; text-align:left}
.ka-emb-v{font-size:22px; font-weight:600; white-space:nowrap}
.ka-emb-nota{margin:5px 0 0; font-size:12.5px; color:var(--tenue)}
.ka-emb-ramal{display:flex; flex-direction:column; gap:14px}
.ka-emb-ramas{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ka-emb-caja{border:1px solid var(--linea); border-radius:14px; padding:14px 16px; background:var(--sup)}
.ka-emb-caja span{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-emb-caja b{display:block; font-size:26px; font-weight:600; margin:4px 0}
.ka-emb-caja small{font-size:12px; color:var(--tenue)}
.ka-emb-no{border-left:3px solid var(--alerta)}
.ka-emb-si{border-left:3px solid #128C7E}
.ka-emb-nr{border-left:3px solid var(--oro)}
.ka-emb-frase{margin:6px 0 0; padding:14px 16px; border:1.5px dashed var(--linea); border-radius:14px; font-size:13.5px; color:var(--sec)}
.ka-emb-frase span{color:var(--tenue)}
.ka-emb-total td{border-top:2px solid var(--tinta)}
.ka-or-punto{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}
.ka-tabla-envoltura{overflow-x:auto}
@media (max-width:860px){
  .ka-emb{grid-template-columns:1fr}
  .ka-emb-fr{width:100%}
  .ka-emb-barra{clip-path:none}
}
table.ka-tabla.ka-emb-tabla th{padding-right:16px; line-height:1.25; vertical-align:bottom}
.ka-or-tabla.ka-emb-tabla th:first-child{width:18%}

/* 3.79.0 · El embudo se abre: quiénes forman cada número */
a.ka-emb-barra{text-decoration:none; transition:transform .15s ease, box-shadow .15s ease}
a.ka-emb-barra:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.14)}
.ka-emb-ver{font-style:normal; font-size:15px; opacity:.65; flex:none}
a.ka-emb-barra .ka-emb-v{margin-left:auto}
a.ka-emb-quien{color:var(--tinta); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.ka-emb-fr.on .ka-emb-barra{outline:2px solid var(--tinta); outline-offset:3px}
a.ka-emb-caja{display:block; color:inherit; text-decoration:none; transition:border-color .15s ease, transform .15s ease}
a.ka-emb-caja:hover{transform:translateY(-1px); border-color:var(--tinta)}
a.ka-emb-caja.on{outline:2px solid var(--tinta); outline-offset:2px}
a.ka-emb-n{color:inherit; font-weight:600; text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:3px}
a.ka-emb-n:hover, a.ka-emb-n.on{text-decoration-color:currentColor}
a.ka-emb-n.on{background:var(--oro-l); border-radius:6px; padding:1px 6px}
.ka-emb-aviso{margin:4px 0 0; font-size:12.5px; color:var(--tenue); text-align:center}
.ka-emb-aviso a{color:var(--alerta); font-weight:600}
.ka-emb-quienes{scroll-margin-top:20px; border:1.5px solid var(--tinta)}
.ka-emb-q td small, .ka-emb-tabla td small, .ka-ct-tabla td small, .ka-ct-reglas td small{display:block; font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-emb-q td small.ka-r-t, .ka-emb-tabla td small.ka-r-t, .ka-ct-tabla td small.ka-r-t{color:var(--alerta)}
.ka-emb-q .ka-pill{margin-left:0; display:inline-block}
#ka-adquisicion .ka-ge-caps{margin-bottom:16px}
.ka-emb-eq td small a{color:var(--tenue)}

/* 3.79.0 · Los indicadores del consultorio */
.ka-me-grupos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 24px}
.ka-me-g h3{margin:0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); font-weight:600}
.ka-me-i{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:baseline; padding:10px 12px; border:1px solid var(--linea2); border-radius:12px; margin-bottom:6px; color:inherit; text-decoration:none; background:var(--sup4)}
a.ka-me-i:hover{border-color:var(--tinta)}
.ka-me-i b{font-weight:600; font-size:14px}
.ka-me-i small{grid-column:2; font-size:12px; color:var(--tenue); margin-top:2px}
.ka-me-e{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap}
.ka-me-si .ka-me-e{background:rgba(18,140,126,.12); color:#0e7a6d}
.ka-me-parcial .ka-me-e{background:rgba(181,98,61,.14); color:#9a5a3c}
.ka-me-falta .ka-me-e{background:var(--oro-l); color:var(--sec)}
@media (max-width:900px){ .ka-me-grupos{grid-template-columns:1fr} }

/* 3.79.0 · Costos y comisiones */
.ka-ct-pct{display:inline-flex; align-items:center; gap:4px}
.ka-ct-pct input{width:64px; text-align:right}
.ka-ct-pct i{font-style:normal; color:var(--tenue)}
.ka-ct-reglas input[type=text]{max-width:220px}
.ka-ct-sin td{color:var(--tenue); background:var(--sup4)}
.ka-ct-faltan{font-size:12.5px; color:var(--sec); background:var(--sup4); border:1px dashed var(--linea); border-radius:10px; padding:10px 12px}
.ka-ct-personas{margin:14px 0}
.ka-ct-personas summary{cursor:pointer; padding:6px 0}
.ka-ct-meta{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.ka-ct-meta label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--tenue)}
.ka-ct-meta input{min-width:220px}
.ka-ct-hist{list-style:none; margin:0; padding:0}
.ka-ct-hist li{padding:9px 0; border-bottom:1px solid var(--linea2); font-size:13px}
.ka-ct-hist time{color:var(--tenue); font-size:12px; margin-right:6px}

.ka-ct-inv{max-width:760px}
.ka-ct-inv td{padding-top:8px; padding-bottom:8px}
.ka-ct-inv input{max-width:200px}
.ka-ct-reglas input::placeholder, .ka-ct-pct input::placeholder{color:var(--apagado)}
#ka-reglas .ka-btn, #ka-costos .ka-btn, #ka-inversion .ka-btn{margin-top:8px}

/* 3.82.0 · La ventanita del traductor */
.ka-tv{position:fixed; inset:0; z-index:9999; background:rgba(17,17,17,.38); display:flex; align-items:flex-end; justify-content:center; padding:16px; animation:kaTvFondo .18s ease}
.ka-tv-caja{width:100%; max-width:560px; background:var(--sup, #fff); color:var(--tinta); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.25); padding:18px 18px 14px; margin-bottom:max(12px, env(safe-area-inset-bottom)); animation:kaTvSube .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:760px){ .ka-tv{align-items:center} }
.ka-tv-cab{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.ka-tv-cab b{font-size:15px; font-weight:600}
.ka-tv-cab span{font-size:12px; color:var(--tenue)}
.ka-tv-cuerpo{display:flex; flex-direction:column; gap:10px}
.ka-tv-b{border:1px solid var(--linea2); border-radius:14px; padding:10px 12px; background:var(--sup4)}
.ka-tv-t{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); margin-bottom:4px}
.ka-tv-b p{margin:0; font-size:14.5px; line-height:1.45; white-space:pre-wrap}
.ka-tv-orig p{color:var(--sec)}
.ka-tv-corr{border-color:rgba(181,98,61,.35)}
.ka-tv-final{border:1.5px solid var(--tinta); background:var(--sup, #fff)}
.ka-tv-final textarea{width:100%; border:0; background:transparent; font:inherit; font-size:15px; line-height:1.45; resize:vertical; padding:0; color:inherit; outline:none}
.ka-tv-pie{display:flex; justify-content:flex-end; gap:8px; margin-top:14px; flex-wrap:wrap}
.ka-tv-error{margin:0; font-size:13px; color:var(--alerta)}
.ka-tv-puntos{display:flex; gap:6px; padding:8px 4px}
.ka-tv-puntos i{width:8px; height:8px; border-radius:50%; background:var(--tenue); animation:kaTvPunto 1s infinite ease-in-out}
.ka-tv-puntos i:nth-child(2){animation-delay:.15s}
.ka-tv-puntos i:nth-child(3){animation-delay:.3s}
@keyframes kaTvPunto{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
@keyframes kaTvFondo{from{opacity:0}}
@keyframes kaTvSube{from{opacity:0; transform:translateY(18px)}}

/* 3.91.0 · Todas las plantillas: grupos, huecos para escribir y vista previa
   que cambia al escribir. El panel es más ancho para leer la previa entera, y
   se desliza por dentro: no tapa la conversación más de lo necesario. */
.ka-fuera-panel{width:min(460px, calc(100vw - 32px))}
.ka-pl-grupo{display:block; font-style:normal; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); margin:10px 2px 2px}
.ka-pl-grupo:first-of-type{margin-top:2px}
.ka-pl-form{margin:0; padding:10px 13px 13px; display:flex; flex-direction:column; gap:10px}
.ka-pl-campos{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.ka-pl-campos label{display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-pl-campos label span{font-size:11px; color:var(--tenue)}
.ka-pl-campos input,.ka-pl-campos select{width:100%; padding:8px 10px; border:1px solid var(--linea); border-radius:9px; background:var(--sup); color:inherit; font:inherit; font-size:13px}
.ka-pl-campos input:focus,.ka-pl-campos select:focus{outline:2px solid var(--acento); outline-offset:1px}
.ka-pl-asi{font-size:11px; font-weight:500; color:var(--tenue); letter-spacing:.02em}
.ka-pl-form .ka-plantilla-previa{border-radius:10px; margin:0}
.ka-pl-form .ka-btn{align-self:flex-start}
.ka-pl-apagada summary span{color:var(--tenue)}
.ka-pl-nota{font-size:11.5px; margin:0}
/* 3.91.0 · En la vista previa la negrita va en la misma línea, como en WhatsApp
   (la regla general de .ka-fuera b la partía en dos renglones). */
.ka-fuera .ka-plantilla-previa b{display:inline; font-size:inherit; line-height:inherit}

/* 3.92.0 · La ventana de 24 horas, en la pantalla.
   — «plantillas sin costo hasta…»: lo de las 72 h de quien llegó por un anuncio.
   — el aviso de la última hora y el cuadro que se cierra solo. */
.ka-gratis{color:var(--ok)}
.ka-fuera .ka-fuera-gratis{display:block; margin-top:4px; font-size:12px; color:var(--sec)}
.ka-fuera-gratis b{color:var(--tinta)}
.ka-cierra-pronto{margin:0; padding:6px 16px; font-size:12px; color:var(--sec); background:var(--sup2); border-top:1px solid var(--linea3)}
.ka-recien-cerrada{border-radius:12px; border:1px solid var(--linea2)}
.ka-recien-cerrada b{color:var(--tinta)}
.ka-ventana-vencida{opacity:.55; pointer-events:none}
.ka-ventana-vencida textarea{pointer-events:auto; user-select:text}
.ka-fuera .ka-ya-contesto{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 100%; font-size:12.5px; color:var(--tinta)}
.ka-cot-sin-ventana{margin:0 0 8px; padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.5; background:var(--sup2); border:1px solid var(--linea2); color:var(--sec)}
.ka-cot-sin-ventana b{color:var(--tinta)}

/* 3.97.0 · «¿Primera vez?» y «¿Cuál cirugía / inyectable?» al agendar. */
.ka-tipo-cita > div{margin-top:10px}
.ka-tipo-ops{display:flex; gap:8px; flex-wrap:wrap}
.ka-tipo-ops label{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--linea); border-radius:999px; font-size:13px; cursor:pointer; background:var(--sup)}
.ka-tipo-ops label:has(input:checked){border-color:var(--acento); background:var(--sup2); font-weight:600}
.ka-tipo-proc select,.ka-tipo-proc input[type="text"]{width:100%; padding:9px 11px; border:1px solid var(--linea); border-radius:10px; background:var(--sup); color:inherit; font:inherit; font-size:13.5px}
.ka-tipo-proc input[type="text"]{margin-top:6px}
.ka-tipo-ayuda{margin:2px 0 8px; font-size:12px}
/* 3.145.0 · «También es» (otros tipos de la misma cita) y el aviso de «primera vez» con historia. */
/* 3.151.1 · «También es» en cuadritos, como «Qué clase de cita es»: su número sobre su color, y a la derecha el círculo del chulito. */
.ka-tambien-cats{margin-bottom:4px}
.ka-tambien-cats .ka-cat{position:relative; align-items:center; padding:8px 10px}
.ka-tambien-cats label[hidden]{display:none}
.ka-tambien-cats .ka-cat .ka-tamb-v{margin-left:auto; background:transparent; flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--linea); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; font-weight:700; line-height:1; color:transparent; transition:background-color .12s ease, border-color .12s ease}
.ka-tambien-cats .ka-cat:has(input:checked) .ka-tamb-v{background:var(--tinte); border-color:var(--tinte); color:var(--cat-t, #fff)}
.ka-tipo-aviso{margin:8px 0 0; padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.45; background:var(--alerta-f); border:1px solid var(--alerta-b); color:var(--tinta)}

/* 3.97.0 · La Medición nueva: las citas, las primeras veces, el equipo y la plata. */
.ka-med-indice{margin-bottom:10px}
.ka-med-cuando{margin:0 0 22px; font-size:12.5px}
.ka-med-cuando a{color:var(--sec)}
.ka-med-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ka-med-kpis .ka-kpi small{display:block; margin-top:4px; font-size:12px; color:var(--tenue)}
.ka-med-kpis .ka-kpi.alerta{border-color:var(--alerta-b); background:var(--alerta-f)}
.ka-med-kpis .ka-kpi.alerta .ka-v{color:var(--alerta)}
.ka-med-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px}
.ka-med-dos > .ka-panel{margin-bottom:0; min-width:0}
.ka-med-tabla td small{display:block; font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-med-tabla + .ka-med-tabla{margin-top:16px}
.ka-med-cadena{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:6px 0 12px}
.ka-med-cadena > div{position:relative; padding:12px 12px 10px; border:1px solid var(--linea2); border-radius:14px; background:var(--sup2); min-width:0}
.ka-med-cadena > div + div::before{content:"→"; position:absolute; left:-9px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--tenue); background:var(--sup); line-height:1}
.ka-med-cadena span{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); line-height:1.3}
.ka-med-cadena b{display:block; font-size:26px; font-weight:600; margin:4px 0 2px}
.ka-med-cadena small{display:block; font-size:11.5px; color:var(--tenue)}
.ka-med-ramas{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:13px; color:var(--sec)}
.ka-med-ramas span{padding:5px 10px; border-radius:999px; background:var(--sup2); border:1px solid var(--linea3)}
.ka-med-est{display:inline-block; font-size:11px; letter-spacing:.03em; padding:2px 8px; border-radius:999px; white-space:nowrap; background:var(--sup2); color:var(--sec); border:1px solid var(--linea2)}
.ka-med-est-vino{background:rgba(18,140,126,.12); color:#0e7a6d; border-color:transparent}
.ka-med-est-no_vino, .ka-med-est-sin_marcar{background:var(--alerta-f); color:var(--alerta); border-color:transparent}
.ka-med-est-reagendo{background:rgba(181,98,61,.14); color:#9a5a3c; border-color:transparent}
.ka-med-caps{margin-top:18px}
.ka-med-reglas{margin-top:14px; padding:14px 16px; border-radius:14px; background:var(--sup2); border:1px solid var(--linea3); font-size:13px; color:var(--sec)}
.ka-med-reglas p{margin:0 0 8px}
.ka-med-reglas p:last-child{margin-bottom:0}
.ka-med-reglas b{color:var(--tinta)}
.ka-med-grande{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:4px 0 14px}
.ka-med-grande b{font-size:34px; font-weight:500; letter-spacing:-.02em}
.ka-med-grande span{font-size:13px; color:var(--tenue)}
.ka-med-det{margin-top:12px}
.ka-med-det summary{cursor:pointer; font-size:13px; color:var(--sec)}
.ka-med-caja{max-height:640px; overflow:auto}
.ka-med-dia td{background:var(--sup2); font-size:12.5px; position:sticky; top:0}
.ka-med-dia td span{float:right; font-weight:600; color:var(--tinta)}
.ka-med-excel{margin:-6px 0 26px; text-align:right}
.ka-med-lista{margin:0 0 18px}
#ka-m-citas, #ka-m-primeras, #ka-m-equipo, #ka-m-plata, #ka-m-lista, #ka-mas-medicion{scroll-margin-top:20px}
.ka-med-mas{margin-top:34px; border-top:1px solid var(--linea2); padding-top:18px}
.ka-med-mas > summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--linea2); border-radius:14px; background:var(--sup); margin-bottom:22px}
.ka-med-mas > summary::-webkit-details-marker{display:none}
.ka-med-mas > summary::before{content:"＋"; font-size:14px; color:var(--tenue)}
.ka-med-mas[open] > summary::before{content:"－"}
.ka-med-mas > summary span{font-size:12.5px; color:var(--tenue)}
@media (max-width:860px){
  .ka-med-dos{grid-template-columns:1fr}
  .ka-med-cadena{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-med-cadena > div:nth-child(3)::before{display:none}
}
.ka-tipo-cita{margin-bottom:14px}

/* 3.98.0 · Cómo lo pensó el asistente */
.ka-razon{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#f6f3f0;border:1px solid #ece5df;font-size:13px}
.ka-razon summary{cursor:pointer;font-weight:600;list-style:none}
.ka-razon summary::-webkit-details-marker{display:none}
.ka-razon[open] summary{margin-bottom:6px}
.ka-razon-texto{white-space:normal;line-height:1.5;color:#3a3330;max-height:320px;overflow:auto}

/* 3.99.0 · El asistente le ayuda a la asesora */

.ka-asis-resumen{display:flex; flex-direction:column; gap:8px; margin:4px 0 6px}
.ka-asis-resumen p{margin:0; padding:9px 12px; border-radius:12px; background:var(--sup3, #f6f3f0); line-height:1.45; font-size:14px}
.ka-razon-consulto{margin:0 0 6px; font-size:12.5px; color:var(--sec, #6b625d)}
.ka-razon summary .ka-tenue{font-weight:400}

/* 3.100.3 · Cita marcada sin clase guardada: no se pinta de un color que no es el suyo */
.ka-cal-ev.ka-sin-clase{background:var(--sup, #fff) !important;color:var(--tinta, #111) !important;border:1.5px dashed #9a9a9a !important}
.ka-cal-marca-clases{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:6px 0 10px}
.ka-cal-marca-clases label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.ka-cal-marca-clases i{width:12px;height:12px;border-radius:3px;flex:0 0 12px}
.ka-cal-ver-marca .ka-check{display:flex;gap:6px;align-items:flex-start;font-size:13px;margin:4px 0 10px}

/* ═══ 3.101.0 · Reportes en una sola entrada, con pestañas ═══
 * Las pestañas son el mismo control de sedes (.ka-ge-sedes) que ya existía;
 * en el teléfono se deslizan de lado en vez de partirse en tres renglones.
 * Lo de dentro de cada pestaña es lo de siempre: solo el título de cada
 * pantalla vieja se achica, porque arriba ya está «Reportes». */
.ka-rep-pest{display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%; margin:0 0 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.ka-rep-pest::-webkit-scrollbar{display:none}
.ka-rep-pest a{flex:0 0 auto}
.ka-top.ka-rep-cab{margin-top:30px; padding-bottom:10px; margin-bottom:14px}
.ka-top.ka-rep-cab h1{font-size:24px}
.ka-top.ka-rep-cab .ka-sub{display:none}
.ka-rep-plegado > summary{cursor:pointer}
.ka-rep-plegado[open] > summary{margin-bottom:16px}
@media (max-width:760px){
  .ka-top.ka-rep-cab h1{font-size:20px}
}

/* ═══ 3.102.0 · El Resumen como tablero: recorrido, hoy y faltas ═══
 * Manoroz: «más tecnológico, animación, indicador… que no se desfase».
 * Y después: «con el dorado profundo de la doctora… que se vea premium,
 * contemporáneo y moderno». Del negro al dorado, sin azul. Cada etapa es una fila
 * de la MISMA rejilla, así ningún texto se sale de su sitio. */
.ka-rx,.ka-rx-lista{--rx1:#141210; --rx2:#3a2f1e; --rx3:#6e5426; --rx4:#a57d36; --rx5:#cfa85a; --rx-cel:#d9b56a; --rx-azul:#a57d36}
.ka-rx-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin:0 0 18px}
.ka-rx-cab h2{margin:0 0 4px}
.ka-rx-cab p{margin:0; font-size:13px}
.ka-rx-chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ka-rx-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  background:var(--sup3); color:var(--tinta); border:1px solid var(--linea2, rgba(0,0,0,.08)); white-space:nowrap; vertical-align:middle; text-transform:none}
.ka-rx-chip svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.ka-rx-chip-suave{font-weight:500; color:var(--sec); background:transparent}
.ka-rx-chip-vivo{background:#15120d; color:#f3e6c6; border-color:#15120d}
.ka-rx-chip-vivo i{width:8px; height:8px; border-radius:50%; background:#d9b56a; box-shadow:0 0 0 0 rgba(217,181,106,.7); animation:ka-rx-pulso 1.8s infinite}
@keyframes ka-rx-pulso{0%{box-shadow:0 0 0 0 rgba(217,181,106,.65)}70%{box-shadow:0 0 0 8px rgba(217,181,106,0)}100%{box-shadow:0 0 0 0 rgba(217,181,106,0)}}
.ka-rx-bt{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* El recorrido */
.ka-rx-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
.ka-rx-etapas{display:flex; flex-direction:column}
.ka-rx-fila{display:grid; grid-template-columns:30px minmax(150px,210px) minmax(0,1fr) 70px 120px; align-items:center; gap:14px;
  padding:12px 14px; border-radius:14px; color:inherit; text-decoration:none; border:1px solid transparent;
  transition:background-color .2s, border-color .2s, transform .15s var(--ease-out, ease)}
a.ka-rx-fila:hover{background:var(--sup3)}
a.ka-rx-fila:active{transform:scale(.995)}
.ka-rx-fila.on{border-color:var(--rx-azul); background:var(--sup3)}
.ka-rx-ix{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; background:var(--c)}
.ka-rx-et b{display:block; font-size:15px}
.ka-rx-et small{display:block; font-size:12px; color:var(--tenue); line-height:1.35; margin-top:2px}
.ka-rx-pista{position:relative; height:14px; border-radius:999px; background:var(--sup3); overflow:hidden}
.ka-rx-pista i{position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:999px;
  background:linear-gradient(90deg, var(--c) 0%, var(--c2) 100%);
  animation:ka-rx-crece 1.1s var(--ease-out, ease) both; animation-delay:var(--d)}
.ka-rx-pista i::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform:translateX(-100%); animation:ka-rx-brillo 2.8s ease-in-out infinite; animation-delay:calc(var(--d) + 1.2s)}
@keyframes ka-rx-crece{from{width:0}to{width:var(--w)}}
@keyframes ka-rx-brillo{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.ka-rx-val{font-size:26px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ka-rx-cmp{font-size:12px; text-align:right}
.ka-rx-cmp .ka-var{display:inline-flex; flex-direction:column; align-items:flex-end; font-style:normal}
.ka-rx-c1{--c:var(--rx1); --c2:#2c2721}
.ka-rx-c2{--c:var(--rx2); --c2:#57442a}
.ka-rx-c3{--c:var(--rx3); --c2:#8c6a30}
.ka-rx-c4{--c:var(--rx4); --c2:#c19849}
.ka-rx-c5{--c:var(--rx5); --c2:#ecd19a}
.ka-rx-paso{display:flex; align-items:center; gap:8px; margin:0 0 0 58px; padding:4px 0 4px 2px; font-size:12px; color:var(--sec);
  animation:ka-rx-entra .5s ease both; animation-delay:var(--d)}
.ka-rx-paso i{width:2px; height:18px; border-radius:2px; background:linear-gradient(var(--rx3), var(--rx5))}
.ka-rx-paso b{font-size:12.5px; padding:2px 8px; border-radius:999px; background:rgba(165,125,54,.14); color:#8a6626; font-variant-numeric:tabular-nums}
@keyframes ka-rx-entra{from{opacity:0; transform:translateY(-3px)}to{opacity:1; transform:none}}

/* Las tarjetas de resultado */
.ka-rx-res{display:flex; flex-direction:column; gap:14px}
.ka-rx-card{position:relative; border-radius:16px; padding:18px; background:linear-gradient(160deg, #110f0c 0%, #2b2215 100%); color:#f6eedd; border:1px solid rgba(217,181,106,.25); overflow:hidden}
.ka-rx-card::before{content:''; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(217,181,106,.35), transparent 70%)}
.ka-rx-card.on{outline:2px solid var(--rx-cel); outline-offset:2px}
.ka-rx-l{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.75}
.ka-rx-big{display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums}
.ka-rx-card .ka-rx-cmp{display:block; text-align:left}
.ka-rx-card .ka-rx-cmp .ka-var{align-items:flex-start}
.ka-rx-card .ka-var span{color:rgba(246,238,221,.6)}
.ka-rx-meta{margin:12px 0 4px}
.ka-rx-meta span{display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden}
.ka-rx-meta span i{display:block; height:100%; width:var(--w); border-radius:999px; background:linear-gradient(90deg, var(--rx-azul), var(--rx-cel)); animation:ka-rx-crece 1.2s var(--ease-out, ease) both .4s}
.ka-rx-meta small{display:block; margin-top:6px; font-size:12px; opacity:.8}
.ka-rx-datos{list-style:none; margin:12px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.1)}
.ka-rx-datos li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,.07)}
.ka-rx-datos li span{opacity:.75}
.ka-rx-ir{display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--rx-cel); text-decoration:none}
.ka-rx-punta{background:linear-gradient(160deg, #15120d 0%, #4a3818 100%)}
.ka-rx-punta-in{display:flex; gap:14px; align-items:center; margin:10px 0 6px}
.ka-rx-punta-in .ka-ge-med{color:#f6eedd; flex:none}
.ka-rx-punta-in p{margin:0; font-size:13px; line-height:1.45}
.ka-rx-punta-in .ka-tenue{color:rgba(246,238,221,.65)}

/* Las que no vinieron (del periodo) */
.ka-rx-flujo{display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:stretch}
.ka-rx-ramas{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ka-rx-rama{align-self:center; height:2px; background:linear-gradient(90deg, var(--rx3), var(--rx5)); border-radius:2px; position:relative}
.ka-rx-rama::after{content:''; position:absolute; right:-2px; top:-4px; border:5px solid transparent; border-left-color:var(--rx5)}
.ka-rx-falta,.ka-rx-hoy-t{position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:14px; background:var(--sup); border:1px solid var(--linea2, rgba(0,0,0,.08));
  color:inherit; text-decoration:none; transition:border-color .2s, transform .15s, box-shadow .2s; min-width:0}
a.ka-rx-falta:hover,a.ka-rx-hoy-t:hover{border-color:var(--rx-azul); box-shadow:0 6px 18px rgba(60,45,20,.10)}
.ka-rx-falta.on,.ka-rx-hoy-t.on{border-color:var(--rx-azul); box-shadow:inset 0 0 0 1px var(--rx-azul)}
.ka-rx-falta .ka-rx-l,.ka-rx-hoy-t .ka-rx-l{color:var(--tenue); opacity:1}
.ka-rx-falta b,.ka-rx-hoy-t b{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ka-rx-falta small,.ka-rx-hoy-t small{font-size:12px; color:var(--tenue); line-height:1.35}
.ka-rx-flecha{position:absolute; right:14px; top:14px; font-style:normal; color:var(--rx-azul); font-size:14px}
.ka-rx-f-no,.ka-rx-h-no{box-shadow:inset 3px 0 0 #c0392b}
.ka-rx-f-si,.ka-rx-h-re{box-shadow:inset 3px 0 0 var(--rx-cel)}
.ka-rx-f-nr,.ka-rx-h-nr{box-shadow:inset 3px 0 0 var(--rx2)}
.ka-rx-h-si{box-shadow:inset 3px 0 0 var(--rx-azul)}
.ka-rx-alerta{background:rgba(192,57,43,.06); border-color:rgba(192,57,43,.35)}
.ka-rx-alerta b{color:#c0392b}

/* Cómo va hoy */
.ka-rx-dia{border:1px solid rgba(165,125,54,.3)}
.ka-rx-hoy-g{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:22px}
.ka-rx-hoy-grupo h3{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-rx-hoy-fila{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.ka-rx-hoy-tareas{grid-template-columns:repeat(2, minmax(0,1fr))}

/* La lista de quiénes */
.ka-rx-q td{vertical-align:top}
.ka-rx-q td small{display:block; font-size:11.5px; color:var(--tenue); margin-top:3px}
.ka-rx-pac b{font-size:14px}
.ka-rx-sub{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px}
.ka-rx-sub em{font-style:normal; font-size:12px; color:var(--tenue)}
.ka-rx-origen{display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:11.5px; font-weight:600; padding:2px 8px 2px 6px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 12%, transparent); color:var(--tinta)}
.ka-rx-origen::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--c)}
.ka-rx-est{display:inline-block; white-space:nowrap; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--sup3); color:var(--sec)}
.ka-rx-est-si{background:rgba(165,125,54,.14); color:#8a6626}
.ka-rx-est-no{background:rgba(192,57,43,.1); color:#c0392b}
.ka-rx-num{text-align:right; white-space:nowrap}
.ka-rx-periodo{color:var(--tinta) !important; font-weight:600}
.ka-rx-q tfoot td{border-top:2px solid var(--tinta); padding-top:12px}
.ka-rx-lista .ka-rx-cuenta{color:var(--tinta)}


@media (max-width:1100px){
  .ka-rx-grid{grid-template-columns:1fr}
  .ka-rx-res{display:grid; grid-template-columns:1fr 1fr}
  .ka-rx-hoy-g{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ka-rx-fila{grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"ix et val" "pista pista pista" "cmp cmp cmp"; row-gap:8px; padding:12px 8px}
  .ka-rx-ix{grid-area:ix} .ka-rx-et{grid-area:et} .ka-rx-val{grid-area:val} .ka-rx-pista{grid-area:pista} .ka-rx-fila .ka-rx-cmp{grid-area:cmp; text-align:left}
  .ka-rx-fila .ka-rx-cmp .ka-var{flex-direction:row; gap:6px; align-items:center}
  .ka-rx-paso{margin-left:12px}
  .ka-rx-chip{white-space:normal; max-width:100%}
  .ka-rx-res{grid-template-columns:1fr}
  .ka-rx-flujo{grid-template-columns:1fr}
  .ka-rx-rama{display:none}
  .ka-rx-hoy-fila{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .ka-rx-pista i,.ka-rx-meta span i,.ka-rx-paso{animation:none}
  .ka-rx-pista i::after,.ka-rx-chip-vivo i{animation:none}
}

/* 3.102.0 · «Cómo se mide cada número», en tarjetas */
.ka-rx-como > summary{padding:4px 0}
.ka-rx-glos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:16px 0 22px}
.ka-rx-gl{position:relative; padding:16px 16px 14px; border-radius:14px; background:var(--sup); border:1px solid var(--linea2, rgba(0,0,0,.08)); box-shadow:inset 0 3px 0 var(--rx4)}
.ka-rx-gl-n{position:absolute; right:14px; top:12px; font-size:11px; font-weight:700; color:var(--rx4); letter-spacing:.06em}
.ka-rx-gl h4{margin:0 0 6px; font-size:15px}
.ka-rx-gl p{margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--sec); display:flex; gap:7px}
.ka-rx-gl .ka-rx-gl-f{display:block; font-weight:600; color:var(--tinta); padding:8px 10px; border-radius:10px; background:rgba(165,125,54,.10)}
.ka-rx-gl p i{font-style:normal; font-weight:700; flex:none}
.ka-rx-gl-si i{color:#8a6626}
.ka-rx-gl-no i{color:#c0392b}
.ka-rx-gl-t{margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-rx-camino{list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; counter-reset:none}
.ka-rx-camino li{position:relative; padding:14px; border-radius:14px; background:linear-gradient(160deg, #110f0c 0%, #2b2215 100%); color:#f6eedd; display:flex; flex-direction:column; gap:4px}
.ka-rx-camino li:not(:last-child)::after{content:'→'; position:absolute; right:-10px; top:50%; transform:translateY(-50%); color:var(--rx4); font-weight:700; z-index:1}
.ka-rx-camino-n{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--rx5); color:#15120d}
.ka-rx-camino b{font-size:13.5px}
.ka-rx-camino small{font-size:12px; opacity:.75; line-height:1.4}
.ka-rx-camino em{margin-top:auto; font-style:normal; font-size:11px; font-weight:600; color:var(--rx-cel); letter-spacing:.04em; text-transform:uppercase}
@media (max-width:1100px){ .ka-rx-glos{grid-template-columns:repeat(2, minmax(0,1fr))} .ka-rx-camino{grid-template-columns:1fr 1fr} .ka-rx-camino li::after{display:none} }
@media (max-width:760px){ .ka-rx-glos,.ka-rx-camino{grid-template-columns:1fr} }

/* 3.102.1 · Las fechas del recorrido, dentro de su bloque */
.ka-rx-fechas{display:flex; flex-direction:column; gap:10px; padding:14px 16px; margin:0 0 18px; border-radius:14px; background:var(--sup3); border:1px solid var(--linea2, rgba(0,0,0,.06))}
.ka-rx-f1,.ka-rx-f2{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
/* 3.105.5 · Las dos filas reparten a los lados: arriba periodo | comparar,
   abajo fechas a mano | sede. */
.ka-rx-f1,.ka-rx-f2{justify-content:space-between}
.ka-rx-vs .ka-rx-fl{white-space:nowrap}
/* 3.105.5 · La portadita de cada anuncio, en 4:5, al lado del nombre. */
.ka-or-con-portada{display:flex; align-items:flex-start; gap:12px}
.ka-or-portada{flex:0 0 48px; width:48px; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:var(--sup3); box-shadow:inset 0 0 0 1px var(--linea2)}
.ka-or-portada img{display:block; width:100%; height:100%; object-fit:cover}
.ka-or-an{display:flex; flex-direction:column; gap:2px; min-width:0}
@media (hover:hover) and (pointer:fine){ .ka-or-portada:hover{box-shadow:0 0 0 2px var(--kao)} }
@media (max-width:760px){
  /* En el celular, botones parejos: el periodo de dos en dos y la sede de tres. */
  .ka-rx-seg[aria-label="Periodo"]{display:grid; grid-template-columns:1fr 1fr; width:100%}
  .ka-rx-seg[aria-label="Sede"]{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%}
  .ka-rx-seg a{text-align:center; justify-content:center; white-space:normal; line-height:1.2; padding:8px 6px; min-width:0}
  .ka-rx-vs{width:100%}
}
.ka-rx-fl{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-rx-seg{background:var(--sup)}
.ka-rx-seg a.on{background:linear-gradient(160deg, #15120d, #3a2f1e); color:#f3e6c6; box-shadow:none}
.ka-rx-rango{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0}
.ka-rx-rango label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sec)}
.ka-rx-rango input[type=date]{padding:6px 8px; font-size:13px}
.ka-rx-vs{margin:0}
.ka-rx-vs label{display:flex; align-items:center; gap:10px}
.ka-rx-vs select{padding:7px 10px; font-size:13px; border-radius:10px; min-width:240px}
@media (max-width:760px){ .ka-rx-vs select{min-width:0; width:100%} .ka-rx-vs label{flex-wrap:wrap} .ka-rx-seg{flex-wrap:wrap} }

/* 3.102.2 · El embudo operativo del consultorio, con su fuente */
.ka-rx-fila{grid-template-columns:30px minmax(170px,240px) minmax(0,1fr) 120px 110px; row-gap:6px}
.ka-rx-et em{display:block; font-style:normal; font-size:12px; font-weight:600; color:#8a6626; margin-top:1px}
.ka-rx-fuente{grid-column:2 / -1; font-size:11.5px; color:var(--tenue); line-height:1.4}
.ka-rx-fuente i{font-style:normal; color:#a57d36; margin-right:2px}
.ka-rx-pista.ka-rx-sin{visibility:hidden}
.ka-rx-val-plata{font-size:21px}
.ka-rx-paso-mudo{display:none}
.ka-rx-c6{--c:#6e5426; --c2:#cfa85a}
.ka-rx-plata-f + .ka-rx-paso-mudo, .ka-rx-plata-f{margin-top:6px}
.ka-rx-ramal{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:16px; background:var(--sup3); border:1px solid var(--linea2, rgba(0,0,0,.06))}
.ka-rx-ramal-t{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-rx-ramal-hijos{display:grid; grid-template-columns:1fr; gap:10px; padding-left:16px; border-left:2px solid #cfa85a; margin-left:10px}
.ka-rx-boton{margin-top:6px; font-size:12.5px; font-weight:600; color:#8a6626}
.ka-rx-frase{margin:4px 0 0; padding:12px 14px; border:1.5px dashed #cfa85a; border-radius:12px; font-size:12.5px; line-height:1.45; color:var(--sec)}
.ka-rx-frase span{display:block; margin-top:4px; font-weight:600; color:#8a6626}
@media (max-width:760px){
  .ka-rx-fila{grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"ix et val" "pista pista pista" "cmp cmp cmp" "fu fu fu"}
  .ka-rx-fuente{grid-area:fu}
  .ka-rx-pista.ka-rx-sin{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   3.103.0 · Lo que se ha hecho cada paciente (etiquetas de
   procedimiento) y su catálogo. El color de cada procedimiento lo
   pone la clínica; aquí solo se usa como tinte suave y como borde,
   para que se distinga sin gritar.
   ═══════════════════════════════════════════════════════════════ */
.ka-pchip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 6px;
  border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.25;
  color:var(--tinta); background:color-mix(in srgb, var(--pc, #6B6B6B) 13%, var(--sup));
  border:1px solid color-mix(in srgb, var(--pc, #6B6B6B) 38%, transparent);
  white-space:nowrap; max-width:100%;
}
.ka-pchip i{
  font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:color-mix(in srgb, var(--pc, #6B6B6B) 22%, var(--sup)); font-size:12px;
}
.ka-pchip small{font-weight:500; color:var(--sec); font-size:11.5px}
.ka-pchips{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.ka-pchips .ka-pchip{font-size:11.5px; padding:2px 8px 2px 4px}
.ka-pchips .ka-pchip i{width:16px; height:16px; font-size:10px}

.ka-hizo{display:flex; flex-direction:column; gap:8px; margin:14px 0 4px; padding-top:12px; border-top:1px solid var(--linea3)}
.ka-hizo-cab{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.ka-hizo-ajustar{font-size:12px; color:var(--sec); text-decoration:underline; text-underline-offset:2px}
.ka-hizo-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start}
.ka-pchip-d{position:relative; max-width:100%}
.ka-pchip-d > summary{list-style:none; cursor:pointer}
.ka-pchip-d > summary::-webkit-details-marker{display:none}
.ka-pchip-d[open] > summary{box-shadow:0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent)}
.ka-pchip-toca > summary::after{
  content:'Le toca'; margin-left:2px; padding:1px 6px; border-radius:999px; font-size:10.5px; font-weight:700;
  background:var(--pc); color:#fff;
}
.ka-pchip-mas{
  margin-top:6px; padding:10px 12px; border-radius:12px; background:var(--sup);
  border:1px solid var(--linea); box-shadow:0 8px 24px rgba(0,0,0,.08); min-width:220px; font-size:12.5px;
}
.ka-pchip-reloj{margin:0 0 6px; font-weight:600; color:var(--sec)}
.ka-pchip-mas ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.ka-pchip-mas li{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ka-pchip-mas li span{font-weight:600; min-width:84px}
.ka-pchip-mas li em{font-style:normal; color:var(--tenue); font-size:11.5px; flex:1}
.ka-pchip-mas form{margin:0}
.ka-pchip-x{border:0; background:none; color:var(--tenue); font:inherit; font-size:11.5px; text-decoration:underline; cursor:pointer; padding:0}
.ka-pchip-x:hover{color:var(--alerta)}
.ka-hizo-sug{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 10px; border-radius:12px; background:var(--sup2); border:1px dashed var(--linea)}
.ka-hizo-sug form{margin:0}
.ka-hizo-sug-b{display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0; cursor:pointer; font:inherit}
.ka-hizo-sug-b b{font-size:11.5px; text-decoration:underline; text-underline-offset:2px}
.ka-hizo-poner{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:0}
.ka-hizo-poner select{font-size:12.5px; flex:1 1 180px; min-width:0; width:auto}
.ka-hizo-poner input[type=date]{font-size:12.5px; flex:0 1 150px; width:auto; min-width:0}
.ka-hizo-poner .ka-btn{flex:0 0 auto}

/* El catálogo */
.ka-top-btns{display:flex; gap:8px; flex-wrap:wrap}
.ka-pcat-como{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ka-pcat-como > div{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--sup2); font-size:13px; line-height:1.45}
.ka-pcat-como > div > b{flex:0 0 26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--tinta); color:var(--sup); font-size:13px}
.ka-pcat-llenar{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--linea2)}
.ka-pcat-llenar > div{display:flex; flex-direction:column; gap:2px; font-size:13px}
.ka-pcat{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.ka-pcat-c{
  --pc:#6B6B6B; position:relative; padding:14px; border-radius:16px; background:var(--sup);
  border:1px solid var(--linea2); box-shadow:0 1px 2px rgba(0,0,0,.04);
  border-top:4px solid var(--pc); display:flex; flex-direction:column; gap:10px; min-width:0;
}
.ka-pcat-top{display:flex; gap:10px; align-items:center}
.ka-pcat-emo{flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:12px; font-size:21px; background:color-mix(in srgb, var(--pc) 15%, var(--sup))}
.ka-pcat-top > div > b{display:block; font-size:14.5px}
.ka-pcat-t b{font-weight:700; color:var(--tinta)}
.ka-pcat-t{font-size:12px; color:var(--sec)}
.ka-pcat-n{font-size:12.5px; color:var(--sec)}
.ka-pcat-n b{font-size:18px; color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-pcat-propio{align-self:flex-start; font-size:10.5px; padding:1px 7px; border-radius:999px; background:var(--chip); color:var(--sec)}
.ka-pcat-ed > summary{cursor:pointer; font-size:12.5px; color:var(--sec); text-decoration:underline; text-underline-offset:2px}
.ka-pcat-f{display:flex; flex-direction:column; gap:10px; margin:10px 0 0}
.ka-pcat-f label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600}
.ka-pcat-fijo{margin:0; font-size:12.5px}
.ka-pcat-fila{display:flex; flex-direction:column; gap:6px}
.ka-pcat-emoji input{width:72px; font-size:20px; text-align:center}
.ka-pcat-emojis{display:flex; flex-wrap:wrap; gap:4px}
.ka-pcat-emojis button{border:1px solid var(--linea2); background:var(--sup2); border-radius:8px; width:32px; height:32px; font-size:16px; cursor:pointer; padding:0}
.ka-pcat-emojis button:hover{background:var(--sup3)}
.ka-pcat-colores{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.ka-pcat-colores label{flex-direction:row; cursor:pointer}
.ka-pcat-colores input[type=radio]{position:absolute; opacity:0; pointer-events:none}
.ka-pcat-colores label i{display:block; width:24px; height:24px; border-radius:50%; background:var(--pc); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.ka-pcat-colores input[type=radio]:checked + i{outline:2px solid var(--tinta); outline-offset:2px}
.ka-pcat-otro input[type=color]{width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; border-radius:50%; overflow:hidden}
.ka-pcat-otro input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.ka-pcat-otro input[type=color]::-webkit-color-swatch{border:0; border-radius:50%}
.ka-pcat-otro input[type=radio]:checked ~ input[type=color]{outline:2px solid var(--tinta); outline-offset:2px; border-radius:50%}
.ka-pcat-meses span{display:flex; align-items:center; gap:6px; font-weight:500}
.ka-pcat-meses input{width:90px; padding:8px 10px; border:1px solid var(--linea); border-radius:10px; background:var(--sup2); font:inherit; color:var(--tinta)}
.ka-pcat-meses small{font-weight:400}
.ka-pcat-arch{display:flex; gap:8px; align-items:center; margin-top:10px; font-size:12px}
.ka-pcat-nuevo > summary{cursor:pointer}
.ka-pcat-nuevo .ka-pcat-f{max-width:520px}
.ka-pcat-archivados{display:flex; flex-wrap:wrap; gap:10px}
.ka-pcat-archivados > span{display:inline-flex; gap:6px; align-items:center}
.ka-pcat-archivados form{margin:0}
@media (max-width: 760px){
  .ka-pcat-como{grid-template-columns:1fr}
  .ka-pcat-llenar{flex-direction:column; align-items:stretch}
  .ka-pchip{white-space:normal}
}
.ka-pcat-f [hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════
   3.104.0 · La ficha, organizada en cinco franjas: quién es (datos
   anchos y el estado al costado), sus citas y la conversación, plata
   y papeles, lo que sigue, e historia. Cada bloque es el de siempre.
   ═══════════════════════════════════════════════════════════════ */
.ka-fi-banda{display:flex; align-items:center; gap:10px; margin:26px 0 12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); font-weight:700}
.ka-fi-banda b{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--tinta); color:var(--sup); font-size:11px; letter-spacing:0}
.ka-fi-banda::after{content:''; flex:1; height:1px; background:var(--linea2)}
.ka-fi > .ka-fi-banda:first-child{margin-top:8px}
.ka-fi-fila{display:grid; gap:18px; align-items:start}
.ka-fi-fila > div{display:flex; flex-direction:column; gap:18px; min-width:0}
.ka-fi-fila .ka-panel{margin:0}
.ka-fi-uno{grid-template-columns:minmax(0,2.3fr) minmax(300px,1fr)}
.ka-fi-dos{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.ka-fi-tres{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ka-fi-cuatro{grid-template-columns:repeat(3,minmax(0,1fr))}
.ka-fi-cuatro.ka-fi-sin-llamadas{grid-template-columns:repeat(2,minmax(0,1fr))}
.ka-fi input[type=tel], .ka-fi input[type=email], .ka-fi input[type=number]{
  width:100%; border:1px solid var(--linea); border-radius:11px; padding:11px 14px; font-size:14px;
  background:var(--sup2); color:var(--tinta); font-weight:400; text-transform:none; letter-spacing:0}
.ka-fi-uno .ka-form-datos .ka-form{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px}
.ka-fi-uno .ka-form-datos .ka-form label{min-width:0}
.ka-fi-uno .ka-datos{margin-top:14px; width:auto}
.ka-fi-uno .ka-datos tbody{display:flex; flex-wrap:wrap; gap:6px}
.ka-fi-uno .ka-datos tr{display:inline-flex; gap:6px; align-items:center; background:var(--sup2); border:1px solid var(--linea2); border-radius:999px; padding:4px 12px}
.ka-fi-uno .ka-datos td{padding:0; border:0; font-size:12.5px}
.ka-fi-tags .ka-hizo{margin-top:0; padding-top:0; border-top:0}
@media (max-width:1100px){
  .ka-fi-uno, .ka-fi-dos, .ka-fi-tres, .ka-fi-cuatro, .ka-fi-cuatro.ka-fi-sin-llamadas{grid-template-columns:1fr}
  .ka-fi-uno .ka-form-datos .ka-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .ka-fi-uno .ka-form-datos .ka-form{grid-template-columns:1fr}
}
.ka-fi-tags .ka-pchip{white-space:normal}

/* ── 3.105.1 · Agendar desde la ficha, compacto ──
   Manoroz: «las bandejitas… que los textos sean en minúscula y cortitos…
   en cuatro filas… y para cada sede de la clínica…
   más pequeñitas y que el botoncito del color esté al ladito, no encima,
   igual que en conversación».
   La causa de lo grande: dentro de la ficha estas casillas caían bajo
   `.ka-form label` (columna, mayúsculas, separación de letras), que es la
   regla de los campos del formulario y no de las casillas. Aquí se les
   devuelve su forma, solo dentro de la ficha. */
.ka-fi .ka-form .ka-etiq{flex-direction:row; text-transform:none; letter-spacing:0; color:var(--sec)}
/* 3.105.3 · De cuatro en cuatro, todas del mismo alto (`grid-auto-rows:1fr`),
   y la última fila ancha para que el bloque cierre parejo con el borde. */
.ka-fi .ka-cats.ka-cats-corto{grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:6px; margin-bottom:6px; width:100%}
.ka-fi .ka-cats-corto .ka-cat{padding:9px 10px; gap:7px; align-items:flex-start; height:100%; box-sizing:border-box}
/* El número arriba y el nombre debajo, a todo el ancho de la casilla: en
   cuatro columnas, con el número al lado, «Telemedicina» se partía. */
.ka-fi .ka-cats-corto .ka-cat.ka-etiq{flex-direction:column; align-items:flex-start; gap:5px}
.ka-fi .ka-cats-corto .ka-cat-t{min-width:0; width:100%; overflow-wrap:break-word}
.ka-fi .ka-cats-corto .ka-cat-ancha2{grid-column:span 2}
.ka-fi .ka-cats-corto .ka-cat-ancha4{grid-column:1 / -1}
.ka-fi .ka-cats-corto .ka-cat-n{width:18px; height:18px; font-size:10.5px; border-radius:5px}
.ka-fi .ka-cats-corto .ka-cat-t > span{font-size:12px}
.ka-fi .ka-cats-corto .ka-cat-t small{font-size:10.5px; margin-top:1px}
.ka-fi .ka-etiqs:not(.ka-cats){gap:6px; margin-bottom:6px}
.ka-fi .ka-etiqs:not(.ka-cats) .ka-etiq{padding:5px 11px 5px 9px; font-size:12px; gap:6px}
.ka-fi .ka-etiqs:not(.ka-cats) .ka-etiq i{width:9px; height:9px}
.ka-fi .ka-form .ka-campo-t{margin:0}
/* 3.105.15 · Agendar en una ficha SIN cita: la fecha, «qué clase de cita
   es», las bandejitas y «dónde es» van una debajo de la otra, a todo el
   ancho. En pantallas anchas la rejilla del formulario abría dos columnas y
   las bandejitas caían en la mitad izquierda, apretadas («Cirugí-a»),
   con los títulos sueltos a la derecha (Manoroz, 9 oct, en KliniApp). */
.ka-fi .ka-form:has(> .ka-cats){grid-template-columns:minmax(0,1fr); gap:12px}
.ka-fi .ka-form:has(> .ka-cats) > *{grid-column:1 / -1; min-width:0}
.ka-fi .ka-form:has(> .ka-cats) > .ka-cats{margin-bottom:0}
/* La pregunta de «¿cuál cirugía?» solo ocupa sitio cuando aparece. */
.ka-fi .ka-form .ka-tipo-cita:not(:has(> :not([hidden]))){display:none}
.ka-fi input[type=datetime-local]{
  width:100%; border:1px solid var(--linea); border-radius:11px; padding:11px 14px; font-size:14px;
  background:var(--sup2); color:var(--tinta); font-weight:400; text-transform:none; letter-spacing:0}
/* 3.105.2 · Aire alrededor del botón de agendar. Manoroz: «bajarlo un
   poquito más… que no quede encima de nota para esta cita… debería tener
   espacio para respirar. Al agendar te queda la tarea de confirmar: eso
   también va debajo, con un espacito prudente». */
.ka-fi label.ka-larga{display:block; margin:14px 0 0}
.ka-fi label.ka-larga > input{margin-top:6px}
.ka-fi label.ka-larga + .ka-btn{margin-top:22px}
.ka-fi .ka-btn + p.ka-tenue{margin-top:12px}

/* 3.105.2 · «Sus citas» y «Conversación» del mismo alto. Manoroz: «iguala
   el de conversación al de sus citas en cuanto al espacio en blanco…
   hacer un poquito más grande la ventanita de conversación para que
   queden equiparadas». La columna de la conversación se estira hasta el
   final de la de las citas y el chat se lleva ese espacio: más mensajes
   a la vista y ningún hueco blanco debajo. `contain:size` hace que el chat
   no empuje la fila con su largo —la fila la mide la columna de las
   citas— y el mínimo de 360 px lo deja cómodo cuando la otra es corta. */
.ka-fi-dos{align-items:stretch}
.ka-fi-dos > div:last-child > .ka-panel:last-child{flex:1 1 auto; display:flex; flex-direction:column}
.ka-fi-dos > div:last-child .ka-chat{flex:1 1 auto; max-height:none; min-height:360px; contain:size}
@media (max-width:1100px){
  .ka-fi-dos > div:last-child .ka-chat{contain:none; max-height:480px; min-height:0}
}
/* 3.105.3 · «Agendar otra cita» en su propia tarjeta, abierta. */
.ka-agendar-otra .ka-otra-cita{margin:0; border-top:0; padding-top:0}
.ka-agendar-otra .ka-otra-cita > form{margin-top:0}
.ka-agendar-sin{margin-top:14px; font-size:12px}
/* 3.105.4 · La X para cerrar el menú del celular, a la altura del logo.
   En el computador no existe (el menú siempre está). 44 px: se toca con el
   pulgar. */
.ka-cerrar-menu{display:none}
@media (max-width:900px){
  .ka-marca{justify-content:space-between}
  .ka-cerrar-menu{
    display:grid; place-items:center; width:44px; height:44px; flex:none; margin-right:-6px;
    border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.04);
    color:var(--kao-lado); cursor:pointer; padding:0;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .ka-cerrar-menu svg{width:20px; height:20px}
  .ka-cerrar-menu:active{transform:scale(.96)}
}
/* En la cabecera de «La cita»: la fecha y «Comentar al equipo», a la derecha. */
.ka-ph-der{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
/* La ayuda de «Anotar el pago», más chiquita y con aire. */
.ka-fi .ka-pago-ayuda{font-size:11.5px; line-height:1.5; margin-top:12px}
@media (max-width:600px){
  /* En el celular, de dos en dos: diez = cinco filas parejas, sin anchas. */
  .ka-fi .ka-cats.ka-cats-corto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-fi .ka-cats-corto .ka-cat-ancha2, .ka-fi .ka-cats-corto .ka-cat-ancha4{grid-column:auto}
  .ka-fi input[type=datetime-local]{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════
   3.105.0 · Toques dorados y dibujitos
   Manoroz: «la gente entiende mucho por dibujitos… acentuaciones muy
   chiquitas del color dorado del logo… negro, blanco, gris y dorado».
   Y: «ese mismo dorado… para que las chicas puedan verlo y que tengan
   alguito de color».

   🔴 UN solo dorado: #A57D36 (oscurito, poco saturado). De noche sube a
   #CFA85A para que no se apague sobre el negro. Es el mismo de Reportes
   (--rx4 / --rx5). El dorado ACENTÚA —un icono, una rayita, un borde—;
   nunca rellena un botón ni un fondo grande: el sistema sigue siendo
   blanco y negro, y el dorado es la joya, no la ropa.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --kao:#A57D36; --kao-2:#CFA85A;
  --kao-suave:rgba(165,125,54,.10); --kao-borde:rgba(165,125,54,.30);
  --kao-badge-a:#FFFAF0; --kao-badge-b:#F3E6C8;
  /* La barra lateral es negra de día y de noche: allí va el dorado claro. */
  --kao-lado:#CFA85A; --kao-lado-t:rgba(207,168,90,.62);
}
[data-tema="oscuro"]{
  --kao:#CFA85A; --kao-2:#E2C27F;
  --kao-suave:rgba(207,168,90,.12); --kao-borde:rgba(207,168,90,.32);
  --kao-badge-a:#2A241A; --kao-badge-b:#1B1712;
}
.kao-ico{width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle}
.kao-guardado{display:none !important}
.kao-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.kao-mini{width:15px; height:15px; color:var(--kao); margin-right:6px; vertical-align:-3px}

/* ── La H de la doctora, en dorado ── */
.ka-logo.kao-logo-c svg{height:100%; width:auto; display:block}

/* ── El menú ── */
.ka-nav > a, .ka-nav-fam > summary{gap:12px}
.ka-nav .kao-ico{width:19px; height:19px; color:var(--kao-lado-t); transition:color .15s ease}
.ka-nav a.on .kao-ico, .ka-nav-fam > summary.dentro .kao-ico{color:var(--kao-lado)}
.ka-nav > a{position:relative}
.ka-nav > a.on::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(var(--kao-2), var(--kao));
}
@media (hover:hover) and (pointer:fine){
  .ka-nav a:hover .kao-ico, .ka-nav-fam > summary:hover .kao-ico{color:var(--kao-lado)}
}
.ka-nav .kao-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-nav > a .ka-pill{margin-left:auto}
.ka-nav-fam > summary .ka-pill{margin-left:auto}
.ka-nav-fam > summary .ka-pill + .ka-nav-v{margin-left:8px}
.ka-salir{display:flex; align-items:center; gap:10px}
.ka-salir .kao-ico{width:16px; height:16px; color:var(--kao-lado-t)}

/* ── Los títulos de los bloques ── */
.ka-ph h2{display:flex; align-items:center; gap:9px}
.kao-h{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  background:var(--kao-suave); color:var(--kao);
}
.kao-h .kao-ico{width:16px; height:16px}
/* Los números de las cinco bandas de la ficha: un aro dorado. */
.ka-fi-banda b{background:none; color:var(--kao); box-shadow:inset 0 0 0 1.5px var(--kao)}

/* ── Las tarjetas de números de Mi día ── */
/* El dibujito va arriba, en su cuadrito, y la etiqueta debajo: en la
   esquina se montaba encima de las palabras largas («AGENDAMIENTOS»). */
.kao-kpi{
  display:grid; place-items:center; width:28px; height:28px; margin-bottom:10px;
  border-radius:9px; background:var(--kao-suave); color:var(--kao);
}
.kao-kpi .kao-ico{width:16px; height:16px}

/* ── El chat: la cabecera, dibujito + palabra, un poco más pequeña ── */
.ka-chat-hacer{gap:5px}
/* `:not(.ka-solo-movil)`: «Ficha» solo existe en el teléfono; en el
   computador la ficha ya es la tercera columna. */
.ka-chat-hacer .ka-btn.ka-mini:not(.ka-solo-movil){display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:6px 9px 6px 7px; white-space:nowrap}
.ka-chat-hacer .ka-btn .kao-ico{width:15px; height:15px; color:var(--kao)}
.ka-chat-hacer .ka-btn.ka-oro .kao-ico{color:var(--kao-2)}
.ka-chat-hacer .ka-llamar{color:var(--kao)}
.ka-chat-hacer .ka-llamar .kao-ico{width:19px; height:19px}

/* ── El chat: el compositor ──
   Las herramientas en dos hileras de cuatro a la izquierda, el mensaje
   grande en el medio y el micrófono (o la flecha de enviar) al lado. */
.ka-barra-msg .ka-chat-acciones.kao-comp{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
}
.kao-herr{display:grid; grid-template-columns:repeat(4,36px); grid-auto-rows:36px; gap:4px; align-content:center}
.kao-herr .ka-adjuntar{display:contents}
.ka-barra-msg .kao-herr .ka-ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; padding:0;
  border:1px solid var(--linea2); background:var(--sup); color:var(--kao);
}
.ka-barra-msg .kao-herr .ka-ico .kao-ico{width:18px; height:18px}
@media (hover:hover) and (pointer:fine){
  .ka-barra-msg .kao-herr .ka-ico:hover{background:var(--kao-suave); border-color:var(--kao-borde); color:var(--kao)}
}
.ka-barra-msg .kao-herr .ka-ico:active{transform:scale(.96)}
.kao-comp textarea[data-ka-redactor]{min-height:64px; height:64px; border-radius:16px; font-size:15px; padding:12px 16px; margin:0}
.kao-comp > .ka-redondo{align-self:center}
/* Los menús que cuelgan de una herramienta se miden contra la caja de las
   herramientas (la .ka-adjuntar se volvió transparente para la rejilla). */
.kao-herr{position:relative}
.kao-herr .ka-menu-adj, .kao-herr .ka-menu-emoji{bottom:calc(100% + 8px)}

/* ── Los procedimientos: el dibujito dorado ── */
/* Un poco más grandes que el emoji de antes: el dibujo tiene el cuerpo en
   tenue y a 13 px no se distinguía. */
.ka-pchip i{color:var(--kao); background:var(--sup); width:24px; height:24px}
.ka-pchip i .kao-ico{width:19px; height:19px}
.ka-pchips .ka-pchip i{width:20px; height:20px}
.ka-pchips .ka-pchip i .kao-ico{width:16px; height:16px}
.kao-badge{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; flex:0 0 auto; color:var(--kao);
  background:linear-gradient(145deg, var(--kao-badge-a), var(--kao-badge-b)); box-shadow:inset 0 0 0 1px var(--kao-borde);
}
.kao-badge .kao-ico{width:17px; height:17px}
.kao-badge-m{width:54px; height:54px; border-radius:16px; margin-bottom:4px}
.kao-badge-m .kao-ico{width:34px; height:34px}
h1 .kao-badge{width:52px; height:52px; border-radius:16px; margin-right:12px; vertical-align:middle}
h1 .kao-badge .kao-ico{width:34px; height:34px}
.ka-pcat-emo{
  flex:0 0 48px; height:48px; color:var(--kao);
  background:linear-gradient(145deg, var(--kao-badge-a), var(--kao-badge-b)); box-shadow:inset 0 0 0 1px var(--kao-borde);
}
.ka-pcat-emo .kao-ico{width:32px; height:32px}
/* El selector de dibujos del catálogo: se toca el dibujo, sin guion. */
.kao-elegir{display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:4px; max-height:212px; overflow-y:auto; overscroll-behavior:contain; padding:2px}
.kao-elegir label{
  position:relative; display:grid; place-items:center; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--linea2); background:var(--sup2); color:var(--kao);
}
.kao-elegir input{position:absolute; opacity:0; pointer-events:none}
.kao-elegir .kao-ico{width:24px; height:24px}
.kao-elegir label:has(input:checked){background:var(--kao-suave); border-color:var(--kao); box-shadow:0 0 0 1px var(--kao)}
.kao-elegir label:has(input:focus-visible){outline:2px solid var(--kao); outline-offset:2px}

/* ── En el teléfono ── */
@media (max-width:900px){
  .ka-chat-cab .ka-chat-hacer .ka-btn.ka-mini,
  .ka-chat-cab .ka-chat-hacer .ka-btn.ka-mini:not(.ka-solo-movil){
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:10.5px; padding:6px 2px; line-height:1.1;
  }
  .ka-chat-cab .ka-chat-hacer form{display:contents}
  .ka-chat-cab .ka-chat-hacer .ka-btn .kao-ico{width:17px; height:17px}
  .ka-chat-pie .ka-barra-msg .ka-chat-acciones.kao-comp{grid-template-columns:minmax(0,1fr) auto; row-gap:8px}
  .kao-comp .kao-herr{grid-column:1 / -1; grid-template-columns:repeat(8,minmax(0,1fr)); grid-auto-rows:38px}
  .ka-barra-msg .kao-herr .ka-ico{width:100%}
  /* 16px: con menos, el iPhone hace zoom al tocar el campo. */
  .kao-comp textarea[data-ka-redactor]{min-height:52px; height:52px; font-size:16px}
  /* Con las ocho casillas ya hay sitio: la cámara vuelve a estar a un toque. */
  .ka-barra-msg .kao-herr #ka-camara{display:grid}
  .kao-herr .ka-menu-adj, .kao-herr .ka-menu-emoji{left:0; right:0}
}
@media (prefers-reduced-motion:reduce){
  .ka-barra-msg .kao-herr .ka-ico:active{transform:none}
}

/* ── 3.105.16 · Mi día: tarjetas con el dibujito AL LADO del título y el
   número solito debajo (Manoroz, 9 oct: «se ve un poquito más organizado»).
   Y cada tarjeta se toca: abre debajo la lista de quiénes son. Solo en Mi día
   (`.ka-kpis-dia`): las tarjetas de las otras pantallas siguen igual. ── */
.ka-kpis-dia .ka-kpi{display:flex; flex-direction:column; justify-content:space-between; gap:14px; text-decoration:none; color:inherit; cursor:pointer}
.ka-kpis-dia .ka-kpi-cab{display:flex; align-items:flex-start; gap:9px; min-height:30px}
.ka-kpis-dia .ka-kpi-cab .kao-kpi{margin:0; flex:none}
.ka-kpis-dia .ka-kpi .ka-l{margin:0; padding-top:6px; line-height:1.3}
.ka-kpis-dia .ka-kpi .ka-v{margin:0; display:block}
.ka-kpis-dia .ka-kpi{transition:border-color 150ms ease, box-shadow 150ms ease}
@media (hover:hover) and (pointer:fine){
  .ka-kpis-dia .ka-kpi:hover{border-color:var(--kao-2, #CFA85A)}
}
.ka-kpis-dia .ka-kpi:active{transform:scale(.98)}
.ka-kpis-dia .ka-kpi{transition:border-color 150ms ease, transform 120ms cubic-bezier(0.23,1,0.32,1)}
.ka-kpis-dia .ka-kpi.on{border-color:var(--kao, #A57D36); box-shadow:0 0 0 1px var(--kao, #A57D36) inset, var(--sh-s)}
.ka-kpis-dia .ka-kpi:focus-visible{outline:2px solid var(--kao, #A57D36); outline-offset:2px}
.ka-kpi-det{scroll-margin-top:16px}
.ka-tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (min-width:601px){
  .ka-kpi-tabla td, .ka-kpi-tabla th{white-space:nowrap}
  .ka-kpi-tabla td:first-child{white-space:normal; min-width:140px}
}
@media (max-width:600px){
  .ka-kpis-dia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-kpis-dia .ka-kpi{padding:14px}
  .ka-kpis-dia .ka-kpi-cab{align-items:flex-start}
}

/* ═══ 3.105.16 · Ajustes dentro del CRM ═══════════════════════════════════
   Plantillas WhatsApp (el constructor) y el asistente. Mismo lenguaje del
   CRM: tarjetas, dorado para lo principal, mucho aire. Clases con `ka-aj-`. */
.ka-aj-pestanas{margin:0 0 18px}
.ka-aj-intro p{margin:6px 0 0}
.ka-aviso-suave{margin-top:10px; padding:10px 14px; border-radius:12px; background:var(--sup3); border:1px solid var(--linea); font-size:13px}
.ka-aj-grupo{margin:26px 0 8px}
.ka-aj-g-t{font-size:15px; font-weight:600; margin:0 0 12px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.ka-aj-g-t .ka-tenue{font-weight:400; font-size:12.5px}
.ka-aj-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:14px}
.ka-aj-pl{background:var(--sup); border:1px solid var(--linea2); border-radius:16px; padding:16px 18px; box-shadow:var(--sh-s); display:flex; flex-direction:column; gap:12px; min-width:0}
.ka-aj-pl-cab{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.ka-aj-pl-cab h4{margin:0; font-size:15px; font-weight:600}
.ka-aj-pl-cab p{margin:3px 0 0; font-size:12.5px}
.ka-aj-por{display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:6px !important; padding:2px 9px; border-radius:999px; background:var(--kao-suave, rgba(165,125,54,.12)); color:var(--kao, #A57D36); font-size:11.5px !important}
.ka-aj-pl-cab .ka-chip{flex:none}
.ka-aj-datos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; margin:0}
.ka-aj-datos div{min-width:0}
.ka-aj-datos dt{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue)}
.ka-aj-datos dd{margin:2px 0 0; font-size:13px; overflow-wrap:anywhere}
.ka-aj-datos code{font-size:12px; background:var(--sup2); padding:1px 6px; border-radius:6px}
.ka-aj-pl-cuerpo{background:var(--sup2); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55}
.ka-aj-pl-cuerpo p{margin:0}
.ka-aj-pl-cuerpo img{display:block; width:100%; aspect-ratio:1.91/1; object-fit:cover; border-radius:9px; margin-bottom:10px}
.ka-aj-hueco{display:inline-flex; align-items:baseline; gap:4px; padding:0 7px; border-radius:999px; background:var(--kao-suave, rgba(165,125,54,.12)); color:var(--kao, #A57D36); font-size:12px; white-space:nowrap}
.ka-aj-hueco b{font-weight:600}
.ka-aj-botones{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.ka-aj-botones span{flex:1 1 auto; text-align:center; padding:7px 10px; border-radius:10px; background:var(--sup); border:1px solid var(--linea); font-size:12.5px; color:var(--info, #2A6FB0)}
.ka-aj-signif{margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:12.5px}
.ka-aj-signif b{display:inline-block; min-width:38px; color:var(--kao, #A57D36)}
.ka-aj-pl-pie{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:auto; padding-top:4px; border-top:1px solid var(--linea2); padding-top:12px}
.ka-aj-pl-pie .ka-tenue{font-size:12.5px; flex:1 1 180px}

/* El constructor */
.ka-aj-constructor{border-color:var(--kao, #A57D36)}
.ka-aj-cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start}
.ka-aj-izq{display:flex; flex-direction:column; gap:16px; min-width:0}
.ka-aj-izq .ka-form{margin:0}
.ka-aj-izq label{display:block; font-size:13px; color:var(--sec); text-transform:none; letter-spacing:0}
.ka-aj-izq label > input, .ka-aj-izq label > select, .ka-aj-izq label > textarea{display:block; margin-top:6px}
.ka-aj-fila2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.ka-aj-subir-fila{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ka-aj-izq label.ka-aj-subir{position:relative; overflow:hidden; display:inline-flex; color:inherit; cursor:pointer}
.ka-aj-subir input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.ka-aj-izq input[type=text], .ka-aj-izq select, .ka-aj-izq textarea, .ka-aj-ta{
  width:100%; box-sizing:border-box; border:1px solid var(--linea); border-radius:11px; padding:10px 12px;
  font-size:14px; background:var(--sup2); color:var(--tinta); font-family:inherit}
.ka-aj-izq textarea, .ka-aj-ta{line-height:1.5; resize:vertical}
.ka-aj-fila3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ka-aj-usos{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 18px}
.ka-aj-usos legend{font-size:13px; color:var(--sec); margin-bottom:6px; padding:0}
.ka-aj-usos .ka-check{display:inline-flex; align-items:center; gap:7px}
.ka-aj-usos .ka-check input{margin:0}
.ka-aj-insertar{display:flex; gap:12px; align-items:flex-start; margin-top:-6px}
/* 3.105.20 · La fila de emojis del constructor. */
.ka-aj-emojis{display:flex; flex-wrap:wrap; gap:4px; margin-top:-8px}
.ka-aj-emojis button{width:36px; height:36px; display:grid; place-items:center; font-size:18px; line-height:1; border:1px solid var(--linea2); border-radius:10px; background:var(--sup); cursor:pointer; padding:0; touch-action:manipulation; transition:transform 120ms cubic-bezier(0.23,1,0.32,1)}
.ka-aj-emojis button:active, .ka-aj-emo-rejilla button:active{transform:scale(.92)}
.ka-aj-emojis .ka-aj-emo-mas{width:auto; padding:0 10px; display:inline-flex; gap:6px; font-size:16px}
.ka-aj-emo-mas span{font-size:12.5px; color:var(--sec)}
.ka-aj-emo-mas[aria-expanded="true"]{border-color:var(--kao, #A57D36)}
.ka-aj-emo-panel{border:1px solid var(--linea2); border-radius:14px; background:var(--sup); box-shadow:var(--sh-s); padding:8px; margin-top:-8px}
.ka-aj-emo-panel[hidden]{display:none}
.ka-aj-emo-tabs{display:flex; gap:2px; border-bottom:1px solid var(--linea2); padding-bottom:6px; margin-bottom:6px; overflow-x:auto}
.ka-aj-emo-tabs button{flex:none; width:38px; height:34px; font-size:18px; border:0; border-radius:9px; background:transparent; cursor:pointer}
.ka-aj-emo-tabs button.on{background:var(--kao-suave, rgba(165,125,54,.14))}
.ka-aj-emo-rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:2px; max-height:220px; overflow-y:auto; overscroll-behavior:contain}
.ka-aj-emo-rejilla button{height:36px; font-size:20px; border:0; border-radius:8px; background:transparent; cursor:pointer; padding:0; touch-action:manipulation}
@media (hover:hover) and (pointer:fine){ .ka-aj-emo-rejilla button:hover, .ka-aj-emo-tabs button:hover{background:var(--sup2)} }
@media (hover:hover) and (pointer:fine){ .ka-aj-emojis button:hover{border-color:var(--kao, #A57D36)} }
.ka-aj-insertar .ka-btn{flex:none}
.ka-aj-insertar .ka-tenue{font-size:12px; line-height:1.45}
.ka-aj-huecos{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; background:var(--sup2)}
.ka-aj-huecos .ka-campo-t, .ka-aj-huecos > p{margin:0}
.ka-aj-hueco-fila{display:grid; grid-template-columns:44px minmax(0,1.2fr) minmax(0,1fr); gap:8px; align-items:center}
.ka-aj-hueco-fila b{color:var(--kao, #A57D36); font-size:13px}
.ka-aj-hueco-fila[hidden]{display:none !important}
.ka-aj-imagen .ka-campo-t{margin:0 0 8px}
.ka-aj-espec{margin:10px 0 0; padding-left:18px; font-size:12px; color:var(--tenue); line-height:1.55}
.ka-aj-img-actual{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.ka-aj-img-actual img{width:120px; aspect-ratio:1.91/1; object-fit:cover; border-radius:8px}
.ka-aj-img-actual[hidden], .ka-aj-quitar[hidden]{display:none !important}
.ka-aj-quitar{color:var(--alerta, #B24A45)}
.ka-aj-der{position:sticky; top:16px}
.ka-aj-der .ka-campo-t{margin:0 0 8px}
.ka-aj-telefono{background:#E9E2D6; border-radius:18px; padding:16px 12px; min-height:220px}
.ka-aj-burbuja{background:#fff; color:#111; border-radius:4px 14px 14px 14px; padding:8px 10px 10px; box-shadow:0 1px 1px rgba(0,0,0,.08); font-size:13px; line-height:1.5}
.ka-aj-burbuja img{display:block; width:100%; aspect-ratio:1.91/1; object-fit:cover; border-radius:8px; margin-bottom:8px}
.ka-aj-burbuja img[hidden]{display:none}
.ka-aj-burbuja p{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.ka-aj-burbuja .ka-aj-botones span{background:#fff; color:#2A6FB0}
.ka-aj-acciones{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:20px}

/* El asistente */
.ka-aj-asis{display:flex; flex-direction:column; gap:14px}
.ka-aj-asis .ka-panel{margin:0}
.ka-aj-asis-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px}
.ka-aj-asis-dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.ka-aj-asis .ka-panel > .ka-tenue{margin:0 0 10px; font-size:12.5px}
.ka-aj-precio-filas{display:flex; flex-direction:column; gap:6px; max-height:420px; overflow:auto; padding-right:2px}
.ka-aj-precio{display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:6px}
.ka-aj-precio input{width:100%; box-sizing:border-box; border:1px solid var(--linea); border-radius:10px; padding:8px 10px; font-size:13.5px; background:var(--sup2); color:var(--tinta)}
.ka-aj-fijo{position:sticky; bottom:14px; margin:0; padding:0; pointer-events:none}
.ka-aj-fijo .ka-btn{pointer-events:auto; box-shadow:0 6px 22px rgba(0,0,0,.18)}
.ka-aj-asis .ka-panel{display:flex; flex-direction:column}
.ka-aj-asis .ka-panel > .ka-aj-ta{flex:1 1 auto}
.ka-aj-check{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--sec)}
.ka-aj-check input{margin:0}

@media (max-width:900px){
  .ka-aj-cols{grid-template-columns:minmax(0,1fr)}
  .ka-aj-der{position:static; order:-1}
}
@media (max-width:600px){
  .ka-aj-fila3, .ka-aj-fila2{grid-template-columns:minmax(0,1fr)}
  .ka-aj-hueco-fila{grid-template-columns:40px minmax(0,1fr)}
  .ka-aj-hueco-fila input{grid-column:2}
  .ka-aj-insertar{flex-direction:column}
  .ka-aj-datos{grid-template-columns:minmax(0,1fr)}
  .ka-aj-izq input[type=text], .ka-aj-izq select, .ka-aj-izq textarea, .ka-aj-ta, .ka-aj-precio input{font-size:16px}
  .ka-aj-precio{grid-template-columns:minmax(0,1fr) 110px}
  .ka-aj-acciones .ka-btn{flex:1 1 auto}
}

/* 3.105.20 · El dibujito de cada plantilla (de qué va, de un vistazo). */
.ka-aj-pl-cab .ka-aj-pl-tit{flex:1; min-width:0}
.ka-aj-dib{flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--kao-suave); color:var(--kao); box-shadow:inset 0 0 0 1px var(--kao-borde)}
.ka-aj-dib .kao-ico{width:20px; height:20px}
.ka-aj-dib-cambiar{margin:2px 0 0}
.ka-aj-dib-cambiar > summary{cursor:pointer; font-size:12.5px; color:var(--sec); list-style:none; display:inline-flex; align-items:center; gap:6px; padding:4px 0}
.ka-aj-dib-cambiar > summary::-webkit-details-marker{display:none}
.ka-aj-dib-cambiar > summary::before{content:"›"; display:inline-block; transition:transform 160ms var(--ease-out, ease)}
.ka-aj-dib-cambiar[open] > summary::before{transform:rotate(90deg)}
.ka-aj-dib-form{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:6px}
.ka-aj-dibs{display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:6px; width:100%}
.ka-aj-izq .ka-aj-dib-op, .ka-aj-dib-op{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 4px 6px; border-radius:12px; cursor:pointer; color:var(--sec); font-size:11px; text-align:center; margin:0}
.ka-aj-dib-op input{position:absolute; opacity:0; pointer-events:none}
.ka-aj-dib-op small{font-size:11px; line-height:1.2}
.ka-aj-dib-op:has(input:checked){background:var(--kao-suave); color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--kao)}
.ka-aj-dib-op:has(input:focus-visible){outline:2px solid var(--kao); outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .ka-aj-dib-op:hover{background:var(--kao-suave)} }
.ka-aj-dib-campo{border:0; padding:0; margin:0}
.ka-aj-dib-campo legend{font-size:13px; color:var(--sec); margin-bottom:6px; padding:0}

/* 3.105.21 · Emoji etiqueta: también los de procedimientos, guardados un nivel más adentro. */
.ka-aj-dib-mas{width:100%; margin-top:8px}
.ka-aj-dib-mas > summary{cursor:pointer; font-size:12.5px; color:var(--kao); list-style:none; display:inline-flex; align-items:center; gap:6px; padding:4px 0}
.ka-aj-dib-mas > summary::-webkit-details-marker{display:none}
.ka-aj-dib-mas > summary::before{content:"›"; display:inline-block; transition:transform 160ms var(--ease-out, ease)}
.ka-aj-dib-mas[open] > summary::before{transform:rotate(90deg)}
.ka-aj-dib-mas .ka-aj-dibs{grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); margin-top:6px; max-height:300px; overflow-y:auto; overscroll-behavior:contain; padding:2px}

/* 3.106.0 · Anuncio por anuncio: quiénes llegaron, con un toque a su ficha. */
.ka-or-quienes{margin-top:6px}
.ka-or-quienes > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--tinta); padding:2px 0}
.ka-or-quienes > summary::-webkit-details-marker{display:none}
.ka-or-quienes > summary::before{content:"›"; display:inline-block; transition:transform 160ms var(--ease-out, ease)}
.ka-or-quienes[open] > summary::before{transform:rotate(90deg)}
.ka-or-quienes ul{list-style:none; margin:6px 0 2px; padding:0; display:grid; gap:4px; max-height:280px; overflow-y:auto; overscroll-behavior:contain}
.ka-or-quienes li a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; padding:6px 8px; border-radius:10px; text-decoration:none; color:inherit; background:var(--sup2, rgba(0,0,0,.03))}
.ka-or-quienes li a b{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-or-quienes li a span{grid-column:1; font-size:11.5px; color:var(--sec)}
.ka-or-quienes li a em{grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal; font-size:11.5px; font-weight:600; color:var(--tinta)}
.ka-or-quienes li a em.ka-or-q-no{color:var(--tenue); font-weight:400}
@media (hover:hover) and (pointer:fine){ .ka-or-quienes li a:hover{background:var(--chip, rgba(0,0,0,.06))} }

/* 3.106.0 · El pie de derechos de KliniApp. */
.ka-derechos{margin:40px 0 8px; padding:14px 2px 0; border-top:1px solid var(--linea, rgba(0,0,0,.08))}
.ka-derechos p{margin:0; font-size:11.5px; line-height:1.5; color:var(--tenue); max-width:860px}

/* 3.107.0 · KliniApp: inicios de sesión. */
.ka-ingresos-filtro{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.ka-ingresos td small{display:block; font-size:11.5px; color:var(--tenue)}
.ka-ingresos code{font-size:12px; color:var(--sec)}
.ka-ingresos-nuevo{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; background:var(--acento-suave); color:var(--tinta)}
.ka-ingresos-nota{margin-top:12px; font-size:12px}

/* ═══════════════════════════════════════════════════════════════
   3.107.1 · KliniApp: los acentos en azul celeste, no en dorado.
   Manoroz, 13 oct: «los iconos me salen en dorado y recuerda que los
   acentos de KliniApp van en azul celeste». El dorado es de la clínica
   de la doctora; en la muestra (se reconoce por su franja) todo lo que
   era dorado pasa al celeste de KliniApp: los dibujitos, las rayitas,
   los bordes y el embudo de Reportes.
   ═══════════════════════════════════════════════════════════════ */
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)){
  --kao:#0EA5E9; --kao-2:#38BDF8;
  --kao-suave:rgba(14,165,233,.10); --kao-borde:rgba(14,165,233,.30);
  --kao-badge-a:#F0F9FF; --kao-badge-b:#E0F2FE;
  --kao-lado:#38BDF8; --kao-lado-t:rgba(56,189,248,.62);
}
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)){
  --kao:#38BDF8; --kao-2:#7DD3FC;
  --kao-suave:rgba(56,189,248,.12); --kao-borde:rgba(56,189,248,.32);
  --kao-badge-a:#0C2230; --kao-badge-b:#0A1A24;
}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx,
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-lista{--rx1:#0B1620; --rx2:#0C2A3A; --rx3:#0369A1; --rx4:#0EA5E9; --rx5:#38BDF8; --rx-cel:#7DD3FC; --rx-azul:#0EA5E9}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c1{--c2:#16283A}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c2{--c2:#0E4A66}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c3{--c2:#0284C7}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c4{--c2:#38BDF8}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c5{--c2:#BAE6FD}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-c6{--c:#0369A1; --c2:#38BDF8}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-chip-vivo{background:#0B1620; color:#E0F2FE; border-color:#0B1620}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-chip-vivo i{background:#38BDF8; box-shadow:0 0 0 0 rgba(56,189,248,.7); animation-name:ka-rx-pulso-k}
@keyframes ka-rx-pulso-k{0%{box-shadow:0 0 0 0 rgba(56,189,248,.65)}70%{box-shadow:0 0 0 8px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-paso b,
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-est-si{background:rgba(14,165,233,.14); color:#0369A1}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-dia{border-color:rgba(14,165,233,.3)}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-gl .ka-rx-gl-f{background:rgba(14,165,233,.10)}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-gl-si i,
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-et em,
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-boton,
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-frase span{color:#0369A1}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-fuente i{color:#0EA5E9}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-ramal-hijos{border-left-color:#38BDF8}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-frase{border-color:#38BDF8}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-seg a.on{background:linear-gradient(160deg, #0B1620, #0C2A3A); color:#E0F2FE}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-punta{background:linear-gradient(160deg, #0B1620 0%, #0E4A66 100%)}
html:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-camino-n{color:#0B1620}
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-paso b,
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-est-si,
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-gl-si i,
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-et em,
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-boton,
html[data-tema="oscuro"]:is([data-edicion="kliniapp"],:has(.ka-demo-franja)) .ka-rx-frase span{color:#7DD3FC}

/* ═══════════════════════════════════════════════════════════════
   3.107.2 · KliniApp: los derechos, abajo del menú, en pequeño.
   «KliniApp» lleva a la página; la frase larga, al pasar el mouse.
   ═══════════════════════════════════════════════════════════════ */
.ka-lado-derechos{margin-top:12px; padding:12px 4px 2px; border-top:1px solid rgba(255,255,255,.08); font-size:10.5px; line-height:1.5; color:rgba(246,243,240,.38); letter-spacing:.01em}
.ka-lado-derechos a{color:var(--kao-lado, #CFA85A); font-weight:600; font-size:11px; text-decoration:none} /* 3.107.4 · el color de la clínica; celeste en KliniApp */
.ka-lado-derechos span,.ka-lado-derechos b{color:rgba(246,243,240,.5)}
.ka-lado-derechos b{font-weight:500; white-space:nowrap}
.ka-lado-derechos p{margin:2px 0 0; white-space:nowrap}
.ka-lado-derechos .ka-lado-derechos-1{margin:0}
@media (hover:hover) and (pointer:fine){.ka-lado-derechos a:hover{text-decoration:underline}}

/* ═══════════════════════════════════════════════════════════════
   3.108.0 · Reportes → Resumen: «El periodo que se revisa».
   El nombre del periodo, las fechas (subieron del embudo) y las dos
   descargas: el Excel con índice y el PDF. El dorado sale de --kao,
   así en KliniApp es celeste solo.
   ═══════════════════════════════════════════════════════════════ */
.ka-rinf-tar{border:1px solid var(--kao-borde, rgba(165,125,54,.3))}
.ka-rinf-tar-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:14px}
.ka-rinf-tar-eti{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--kao, #A57D36); font-weight:600; margin-bottom:4px}
.ka-rinf-tar-cab h2{margin:0 0 4px; font-size:26px; letter-spacing:-.02em; line-height:1.1}
.ka-rinf-tar-cab p{margin:0; max-width:620px}
.ka-rinf-tar-bajar{display:flex; gap:10px; flex-wrap:wrap}
.ka-rinf-b{display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; text-decoration:none; font-weight:600; font-size:14px; line-height:1.15; touch-action:manipulation; transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.ka-rinf-b small{display:block; font-weight:400; font-size:11.5px; opacity:.75; margin-top:2px}
.ka-rinf-b svg{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ka-rinf-b:active{transform:scale(.97)}
.ka-rinf-b-x{background:var(--tinta); color:var(--sup)}
.ka-rinf-b-x svg{stroke:var(--kao-2, #CFA85A)}
.ka-rinf-b-p{background:var(--sup); color:var(--tinta); border:1px solid var(--linea)}
.ka-rinf-b-p svg{stroke:var(--kao, #A57D36)}
@media (hover:hover) and (pointer:fine){ .ka-rinf-b-p:hover{border-color:var(--kao, #A57D36)} .ka-rinf-b-x:hover{opacity:.92} }
.ka-rinf-trae{margin-top:12px; font-size:13px}
.ka-rinf-trae summary{cursor:pointer; color:var(--kao, #A57D36); font-weight:600}
.ka-rinf-trae ol{margin:8px 0 0; padding-left:20px; columns:2; column-gap:28px; color:var(--sec); line-height:1.7}
@media (max-width:760px){ .ka-rinf-tar-bajar{width:100%} .ka-rinf-b{flex:1 1 0; min-width:0} .ka-rinf-trae ol{columns:1} .ka-rinf-tar-cab h2{font-size:22px} }
/* 3.108.0 · La lista «Quiénes forman…»: el anuncio exacto, en una línea. */
.ka-rx-fte{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:170px; min-width:120px}
.ka-rx-q td.ka-rx-pac{min-width:170px}
.ka-rx-q td.ka-rx-num small{white-space:normal}
[data-tema="oscuro"] .ka-rinf-b-x svg{stroke:var(--kao, #CFA85A)}

/* ═══════════════════════════════════════════════════════════════
   3.108.1 · De dónde vienen → Anuncio por anuncio: cada número se abre
   y dice quiénes son, con los datos de su ficha, justo debajo.
   ═══════════════════════════════════════════════════════════════ */
.ka-or-num{display:inline-block; min-width:28px; padding:2px 8px; margin:-2px -8px; border-radius:8px; color:inherit; text-decoration:underline; text-decoration-color:var(--kao-borde, rgba(165,125,54,.4)); text-underline-offset:4px; touch-action:manipulation}
.ka-or-num.on{background:var(--tinta); color:var(--sup); text-decoration:none}
@media (hover:hover) and (pointer:fine){ .ka-or-num:hover{background:var(--kao-suave, rgba(165,125,54,.1)); text-decoration-color:var(--kao, #A57D36)} .ka-or-num.on:hover{background:var(--tinta)} }
.ka-or-q-fila > td{padding:2px 0 22px !important; background:transparent !important}
.ka-or-q-fila .ka-emb-quienes{margin:0; box-shadow:none; border:1px solid var(--kao-borde, rgba(165,125,54,.3))}
@media (max-width:900px){
  /* En el celular la lista abierta no va dentro de otra tarjeta: ocupa el ancho. */
  .ka-tabla tr.ka-or-q-fila{border:0; background:transparent; padding:0}
  .ka-or-q-fila > td{display:block !important; padding:0 !important}
  /* Lo de debajo de cada dato («nueva · 7 mensajes») va debajo, no en otra columna. */
  .ka-rx-q td[data-r]{flex-wrap:wrap}
  .ka-rx-q td[data-r] > small{flex-basis:100%; padding-left:124px; margin-top:0}
  .ka-rx-fte{display:block; flex:1 1 0; max-width:none; min-width:0; -webkit-line-clamp:unset}
}

/* ═══════════════════════════════════════════════════════════════
   3.109.0 · Resumen: «Las que más dejaron» y «Los procedimientos del
   periodo», con sus fechas. El dorado sale de --kao (celeste en KliniApp).
   ═══════════════════════════════════════════════════════════════ */
.ka-dej-seg{margin:2px 0 14px}
.ka-dej-lista{list-style:none; margin:0; padding:0}
.ka-dej-cli{display:grid; grid-template-columns:34px minmax(180px,1.1fr) minmax(260px,2fr) minmax(170px,.9fr); gap:18px; align-items:start; padding:16px 0; border-top:1px solid var(--linea)}
.ka-dej-n{font-size:20px; font-weight:600; color:var(--kao, #A57D36); line-height:1.2}
.ka-dej-quien a{color:var(--tinta); text-decoration:none}
.ka-dej-quien b{font-size:15px}
@media (hover:hover) and (pointer:fine){ .ka-dej-quien a:hover b{text-decoration:underline; text-underline-offset:3px} }
.ka-dej-sub{display:flex; flex-direction:column; gap:5px; margin-top:6px}
.ka-dej-sub .ka-rx-origen{align-self:flex-start}
.ka-dej-sub em{font-style:normal; font-size:12px; color:var(--tenue)}
.ka-dej-t{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); font-weight:600; margin-bottom:6px}
.ka-dej-linea{list-style:none; margin:0; padding:0 0 0 2px; border-left:2px solid var(--linea)}
.ka-dej-linea li{position:relative; display:flex; gap:10px; align-items:baseline; padding:3px 0 3px 14px; font-size:13px}
.ka-dej-linea li i{position:absolute; left:-6px; top:9px; width:10px; height:10px; border-radius:50%; background:var(--linea2); border:2px solid var(--sup)}
.ka-dej-linea li.on i{background:var(--kao, #A57D36)}
.ka-dej-linea li b{font-weight:600; min-width:92px; white-space:nowrap}
.ka-dej-linea li:not(.on){color:var(--tenue)}
.ka-dej-linea li.ka-dej-nada{font-size:12.5px}
.ka-dej-pagos{display:block; margin-top:8px; font-size:11.5px; color:var(--tenue); line-height:1.5}
.ka-dej-dejo{text-align:right}
.ka-dej-dejo b{display:block; font-size:20px; letter-spacing:-.01em}
.ka-dej-dejo small{display:block; font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-dej-barra{display:block; height:6px; border-radius:3px; background:var(--pista); margin:8px 0 6px}
.ka-dej-barra i{display:block; height:6px; border-radius:3px; margin-left:auto; background:linear-gradient(90deg, var(--kao-2, #CFA85A), var(--kao, #A57D36))}
.ka-dej-mas{margin:14px 0 0; font-size:13px}
.ka-dej-mas a{font-weight:600; color:var(--tinta)}
.ka-dej-gente{display:flex; flex-wrap:wrap; gap:6px}
.ka-dej-p{display:inline-flex; gap:6px; align-items:baseline; padding:4px 10px; border-radius:999px; background:var(--sup2); color:var(--tinta); text-decoration:none; font-size:12.5px; touch-action:manipulation}
.ka-dej-p b{color:var(--kao, #A57D36); font-weight:600; white-space:nowrap}
@media (hover:hover) and (pointer:fine){ .ka-dej-p:hover{background:var(--kao-suave, rgba(165,125,54,.1))} }
@media (max-width:900px){
  .ka-dej-cli{grid-template-columns:28px 1fr; gap:10px 12px}
  .ka-dej-hizo,.ka-dej-dejo{grid-column:2}
  .ka-dej-dejo{text-align:left}
  .ka-dej-barra i{margin-left:0}
  .ka-dej-tabla td.ka-rx-num{justify-content:flex-start; text-align:left}
  .ka-dej-tabla .ka-dej-gente{flex:1 1 0; min-width:0}
}
/* 3.109.1 · Cada cifra con su nombre: «Pagó del 1 al 12 de octubre» arriba y «Ha pagado en total» abajo. */
.ka-dej-dejo small.ka-dej-et{margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--kao, #A57D36)}
.ka-dej-dejo small.ka-dej-otro{color:var(--tinta); font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   3.110.0 · Resumen: «Primera vez» o «Ya era paciente». El dorado sale de
   --kao (celeste en KliniApp). Y lo cotizado / lo pagado, bien alineado.
   ═══════════════════════════════════════════════════════════════ */
.ka-pv-par{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.ka-pv-c{display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--sup2); color:var(--tinta); border:1px solid transparent}
.ka-pv-c i{width:7px; height:7px; border-radius:50%; flex:none}
.ka-pv-c.ka-pv-n{border-color:var(--kao-borde, rgba(165,125,54,.35))}
.ka-pv-c.ka-pv-n i{background:var(--kao, #A57D36)}
.ka-pv-c.ka-pv-y i{background:color-mix(in srgb, var(--kao, #A57D36) 28%, transparent)}
/* La barra de Agendaron, en dos tonos: lo dorado es primera vez. */
.ka-pv-pista i{background:linear-gradient(90deg, var(--kao, #A57D36) 0 var(--pv), color-mix(in srgb, var(--kao, #A57D36) 28%, transparent) var(--pv) 100%) !important}
.ka-pv-tag{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; font-style:normal; white-space:nowrap; line-height:1.6}
.ka-pv-tag.ka-pv-n{color:var(--kao, #8A6528); background:var(--kao-suave, rgba(165,125,54,.12)); border:1px solid var(--kao-borde, rgba(165,125,54,.35))}
.ka-pv-tag.ka-pv-y{color:var(--sec); background:var(--sup2); border:1px solid var(--linea2)}
.ka-dej-quien > a + .ka-pv-tag{margin-left:8px; vertical-align:2px}
.ka-pv-seg{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px}
.ka-pv-seg a{display:inline-flex; align-items:baseline; gap:6px; padding:6px 14px; border-radius:999px; font-size:13px; background:var(--sup2); color:var(--tinta); text-decoration:none; touch-action:manipulation}
.ka-pv-seg a b{font-weight:700}
.ka-pv-seg a.on{background:var(--tinta); color:var(--sup)}
.ka-pv-seg a.on b{color:var(--kao-2, #E9D3A4)}
@media (hover:hover) and (pointer:fine){ .ka-pv-seg a:not(.on):hover{background:var(--kao-suave, rgba(165,125,54,.1))} }
.ka-pv-res{margin:-2px 0 12px; font-size:13px; color:var(--tenue)}
.ka-pv-res b{color:var(--tinta)}

/* Cotizado y Ha pagado: la cifra arriba y cada dato en su línea, sin partir frases. */
.ka-rx-q td.ka-rx-plata{min-width:128px}
.ka-rx-q th.ka-rx-num{text-align:right}
.ka-rx-cifra{display:inline-flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right}
.ka-rx-cifra b{font-variant-numeric:tabular-nums; white-space:nowrap}
.ka-rx-q td .ka-rx-cifra small{margin-top:0; white-space:nowrap}
@media (max-width:900px){
  /* En el celular, como los demás datos: el rótulo a la izquierda y la cifra a su lado, todo alineado a la izquierda. */
  .ka-rx-q td.ka-rx-plata{text-align:left; justify-content:flex-start; min-width:0}
  .ka-rx-cifra{align-items:flex-start; text-align:left; flex:1 1 0; min-width:0}
  .ka-rx-q td .ka-rx-cifra small{white-space:normal}
}

/* ══════════════════════════════════════════════════════════════════
   3.112.5 · Reportes → El equipo: lo que agendó partido, «A quién lleva
   cada una» y «La agendó» con el color de cada persona.
   ══════════════════════════════════════════════════════════════════ */
.ka-eq-ag{display:grid;grid-template-columns:repeat(3,1fr);padding:0!important;overflow:hidden}
.ka-eq-ag>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-width:0}
.ka-eq-ag>div+div{border-left:1px solid var(--linea)}
.ka-eq-ag span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sec)}
.ka-eq-ag b{font-size:20px;line-height:1.1}
.ka-eq-lleva{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.ka-eq-caja{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta);text-decoration:none;min-width:0;transition:transform 120ms var(--ease-out,ease),border-color 120ms ease}
.ka-eq-caja i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--quien);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700}
.ka-eq-caja span{display:flex;flex-direction:column;min-width:0}
.ka-eq-caja b{font-size:22px;line-height:1}
.ka-eq-caja small{font-size:12px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ka-eq-caja.on{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.ka-eq-caja:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){a.ka-eq-caja:hover{border-color:var(--quien)}}
.ka-eq-cola{opacity:.85}
.ka-eq-lista{background:var(--sup2);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.ka-eq-lista h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px}
.ka-eq-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:var(--sup2);font-size:12.5px;white-space:nowrap}
.ka-eq-chip i{width:8px;height:8px;border-radius:50%;background:var(--quien)}
.ka-eq-chip-sin{color:var(--sec)}
@media (max-width:640px){.ka-eq-lleva{grid-template-columns:repeat(2,minmax(0,1fr))}.ka-eq-ag b{font-size:18px}}
.ka-emb-eq{min-width:1080px}
/* 3.112.6 · Con 13 columnas el ancho fijo partía «Recibido» encima de «Comisión». */
.ka-or-tabla.ka-emb-eq{table-layout:auto}
.ka-emb-eq td[data-r="Recibido"],.ka-emb-eq td[data-r="Comisión"],.ka-emb-eq td[data-r="Tiempo de respuesta"]{white-space:nowrap}

/* ─────────────────────────────────────────────────────────────
   3.113.0 · EL AGENTE DEL CRM
   Manoroz, 15 oct: «la ventanita que aparece así como brillante…
   que tenga una animacioncita… en un color doradito… que se vea
   premium dorado y dependiendo del color que tenga cada uno».
   El color sale de --kao / --kao-2: el de la clínica, celeste en
   KliniApp, y el de cada clínica que venga. Un solo brillo que
   cruza el botón de vez en cuando (solo transform y opacity); con
   «reducir movimiento» queda quieto.
   ───────────────────────────────────────────────────────────── */
.ka-ag-pill{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:500; font-size:13.5px; letter-spacing:.01em; color:#fff;
  background:linear-gradient(135deg, var(--kao, #A57D36) 0%, var(--kao-2, #CFA85A) 70%, var(--kao-2, #CFA85A) 100%);
  box-shadow:0 4px 16px var(--kao-borde, rgba(165,125,54,.35)), inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform 140ms cubic-bezier(.23,1,.32,1), box-shadow 200ms ease;
}
.ka-ag-pill:active{transform:scale(.97)}
.ka-ag-pill:focus-visible{outline:2px solid var(--kao-2, #CFA85A); outline-offset:3px}
.ka-ag-pill::after{
  content:""; position:absolute; inset:-40% auto -40% 0; width:45%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-160%) skewX(-18deg); opacity:0;
  animation:ka-ag-brillo 9s cubic-bezier(.23,1,.32,1) 1.2s infinite;
}
@keyframes ka-ag-brillo{
  0%{transform:translateX(-160%) skewX(-18deg); opacity:0}
  2%{opacity:1}
  14%{transform:translateX(330%) skewX(-18deg); opacity:1}
  15%,100%{transform:translateX(330%) skewX(-18deg); opacity:0}
}
.ka-ag-chispa{
  width:20px; height:20px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:11px; line-height:1;
  background:rgba(255,255,255,.22);
}
@media (hover:hover) and (pointer:fine){
  .ka-ag-pill:hover{box-shadow:0 6px 22px var(--kao-borde, rgba(165,125,54,.45)), inset 0 1px 0 rgba(255,255,255,.3)}
  .ka-ag-pill:hover::after{animation-duration:2.4s; animation-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .ka-ag-pill::after{animation:none; opacity:0}
}
/* 3.113.1 · En el computador: pequeño, flotando arriba a la derecha de todas
   las pantallas, por encima del contenido y por debajo de menús y ventanas. */
.ka-ag-link{color:var(--kao, #A57D36); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor}
.ka-ag-pill-arriba{position:fixed; top:9px; right:22px; z-index:55; padding:5px 13px 5px 6px; font-size:13px}
@media (max-width:900px){ .ka-ag-pill-arriba{display:none} }
/* Un poco más de aire arriba para que el botón no toque los avisos de la pantalla. */
@media (min-width:901px){ .ka-main{padding-top:46px} }
/* En la barra negra del teléfono: compacto, al lado de la campanita. */
.ka-ag-pill-movil{display:none; padding:7px 12px 7px 8px; font-size:13px; flex:none}
@media (max-width:900px){
  .ka-movil .ka-ag-pill-movil{display:flex}
  .ka-movil .ka-movil-marca{margin:0 auto 0 4px}
}

/* El panel: a la derecha en el computador; a pantalla completa en el teléfono. */
.ka-ag-telon{position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:90}
.ka-ag{
  position:fixed; z-index:91; top:0; right:0; bottom:0; width:min(420px, 100vw);
  display:flex; flex-direction:column;
  background:var(--sup); color:var(--tinta);
  border-left:1px solid var(--linea2);
  box-shadow:-18px 0 40px rgba(0,0,0,.12);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transform:translateX(0); transition:transform 300ms cubic-bezier(.32,.72,0,1);
}
.ka-ag[hidden]{display:none !important}
.ka-ag.entrando{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){ .ka-ag{transition:none} }
@media (max-width:900px){
  .ka-ag{width:100vw; border-left:0; padding-top:env(safe-area-inset-top, 0px)}
}
/* 3.113.1 · En el computador: una ventana flotante debajo del botón, no un
   panel de lado a lado. El botón queda a la vista; se cierra con la X, con Esc
   o tocando afuera. */
@media (min-width:901px){
  .ka-ag-telon{background:transparent}
  .ka-ag{
    top:50px; right:22px; bottom:auto; width:380px;
    height:min(600px, calc(100dvh - 70px));
    border:1px solid var(--linea2); border-radius:18px; overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 48px rgba(0,0,0,.16);
    transform-origin:top right;
    transition:transform 220ms cubic-bezier(.23,1,.32,1), opacity 180ms ease;
  }
  .ka-ag.entrando{transform:translateY(-6px) scale(.97); opacity:0}
  [data-tema="oscuro"] .ka-ag{box-shadow:0 18px 48px rgba(0,0,0,.5)}
}
.ka-ag-cab{display:flex; align-items:center; gap:10px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--linea2)}
.ka-ag-av,.ka-ag-hola-av{
  width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  color:#fff; font-size:14px;
  background:linear-gradient(135deg, var(--kao, #A57D36), var(--kao-2, #CFA85A));
}
.ka-ag-cab b{display:block; font-size:15px; font-weight:600}
.ka-ag-cab small{display:block; color:var(--tenue); font-size:11.5px}
.ka-ag-x{margin-left:auto; width:40px; height:40px; border:0; background:none; color:var(--sec); display:grid; place-items:center; border-radius:10px; cursor:pointer}
.ka-ag-x svg{width:20px; height:20px}
@media (hover:hover) and (pointer:fine){ .ka-ag-x:hover{background:var(--sup2)} }
.ka-ag-rol{margin:10px 14px 0; padding:8px 11px; border-radius:10px; background:var(--sup2); color:var(--sec); font-size:12px; line-height:1.45}
.ka-ag-rol b{color:var(--tinta); font-weight:600}
.ka-ag-hilo{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px 16px; display:flex; flex-direction:column; gap:14px}
.ka-ag-hola{text-align:center; margin:auto 0; padding:10px 4px}
.ka-ag-hola-av{margin:0 auto 10px; width:44px; height:44px; font-size:18px}
.ka-ag-hola h3{margin:0 0 4px; font-size:19px; font-weight:600; letter-spacing:-.01em}
.ka-ag-hola p{margin:0 0 14px; color:var(--sec); font-size:13.5px}
.ka-ag-sug{display:flex; flex-direction:column; gap:7px; text-align:left}
.ka-ag-sug button,.ka-ag-sig button{
  font:inherit; font-size:13px; color:var(--tinta); text-align:left; cursor:pointer;
  background:var(--sup); border:1px solid var(--linea2); border-radius:11px; padding:9px 12px;
  transition:border-color 150ms ease;
}
@media (hover:hover) and (pointer:fine){ .ka-ag-sug button:hover,.ka-ag-sig button:hover{border-color:var(--kao, #A57D36)} }
.ka-ag-yo{align-self:flex-end; max-width:86%; background:var(--kao-suave, rgba(165,125,54,.12)); border:1px solid var(--kao-borde, rgba(165,125,54,.3)); border-radius:14px 14px 4px 14px; padding:9px 12px; font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere}
.ka-ag-el{font-size:13.5px; line-height:1.5}
.ka-ag-el p{margin:0 0 7px}
.ka-ag-el ul{margin:0 0 7px; padding-left:18px}
.ka-ag-el li{margin:2px 0}
.ka-ag-el b{font-weight:600}
.ka-ag-pasos{border:1px solid var(--linea2); border-radius:11px; padding:7px 10px; margin-bottom:8px; font-size:12px; color:var(--sec)}
.ka-ag-pasos summary{cursor:pointer; color:var(--tinta); font-weight:500; list-style:none}
.ka-ag-pasos summary::-webkit-details-marker{display:none}
.ka-ag-pasos ol{margin:6px 0 0 18px; padding:0}
.ka-ag-pasos li::marker{color:var(--kao, #A57D36)}
.ka-ag-meta{display:flex; align-items:center; gap:4px; color:var(--tenue); font-size:11.5px; margin-top:2px}
.ka-ag-meta button{border:0; background:none; cursor:pointer; padding:5px 6px; border-radius:8px; font-size:13px; opacity:.6; line-height:1}
.ka-ag-meta button.on{opacity:1; background:var(--sup2)}
.ka-ag-sig{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.ka-ag-err{color:var(--alerta); font-size:13px}
.ka-ag-pensando{display:flex; align-items:center; gap:8px; color:var(--sec); font-size:12.5px}
.ka-ag-pensando i{width:6px; height:6px; border-radius:50%; background:var(--kao, #A57D36); animation:ka-ag-punto 1.1s ease-in-out infinite}
.ka-ag-pensando i:nth-child(2){animation-delay:.15s}.ka-ag-pensando i:nth-child(3){animation-delay:.3s}
@keyframes ka-ag-punto{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .ka-ag-pensando i{animation:none; opacity:.7} }
.ka-ag-campo{display:flex; align-items:flex-end; gap:8px; margin:8px 12px 6px; border:1.5px solid var(--kao-borde, rgba(165,125,54,.4)); border-radius:14px; padding:6px 6px 6px 12px; background:var(--sup)}
.ka-ag-campo:focus-within{border-color:var(--kao, #A57D36)}
.ka-ag-campo textarea{flex:1; border:0; outline:0; resize:none; background:transparent; font:inherit; font-size:16px; line-height:1.4; max-height:120px; padding:6px 0; color:var(--tinta)}
.ka-ag-env{width:36px; height:36px; flex:none; border:0; border-radius:50%; background:var(--tinta); color:var(--sup); display:grid; place-items:center; cursor:pointer}
.ka-ag-env svg{width:18px; height:18px}
.ka-ag-env[disabled]{opacity:.4; cursor:default}
.ka-ag-pie{margin:0 14px 10px; color:var(--tenue); font-size:11px; text-align:center}
body.ka-ag-abierto{overflow:hidden}

/* La alarma del crédito de la IA (solo la dirección). */
.ka-credito{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:0 0 14px; padding:11px 14px; border-radius:12px; font-size:13px; border:1px solid}
.ka-credito b{font-weight:600}
.ka-credito-aviso{background:#FDF6E7; border-color:#EBD7A6; color:#6B4E12}
.ka-credito-alerta{background:#FDEEE2; border-color:#F0C29C; color:#7A3B0B}
.ka-credito-agotado{background:var(--alerta-f); border-color:var(--alerta-b); color:var(--alerta)}
[data-tema="oscuro"] .ka-credito-aviso{background:#2A2414; border-color:#4A3D1C; color:#E8D19C}
[data-tema="oscuro"] .ka-credito-alerta{background:#2C1D12; border-color:#5A3518; color:#F2B98A}

/* Ajustes → Agente */
.ka-aj-ag-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:12px}
.ka-aj-ag-kpis div{background:var(--sup2); border-radius:11px; padding:10px 12px; min-width:0}
.ka-aj-ag-kpis small{display:block; color:var(--tenue); font-size:11.5px}
.ka-aj-ag-kpis b{display:block; font-size:16px; font-weight:600; overflow-wrap:anywhere}
.ka-aj-ag-fila{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:12px 0 6px}
.ka-aj-l{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--sec); margin:8px 0}
.ka-aj-l input{font-size:16px}
.ka-aj-ag-lista{margin:4px 0 0; padding-left:0; list-style:none}
.ka-aj-ag-lista li{padding:9px 0; border-top:1px solid var(--linea3)}
.ka-aj-ag-lista li:first-child{border-top:0}
.ka-aj-ag-lista li small{display:block; color:var(--tenue); font-size:12px}
.ka-aj-ag-lista details{margin-top:4px; font-size:12.5px; color:var(--sec)}
@media (max-width:900px){ .ka-aj-ag-kpis,.ka-aj-ag-fila{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ka-ag .ka-ag-campo textarea,.ka-ag .ka-ag-campo textarea:focus{border:0; box-shadow:none; background:transparent; padding:6px 0; border-radius:0; min-height:0}

/* ═══ 3.115.0 · La entrada segura: verificar, Mi cuenta, Sesiones abiertas ═══ */
.ka-acc h1{font-size:28px}
.ka-acc-qr{width:196px;height:196px;margin:6px auto 10px;padding:8px;background:#fff;border-radius:14px}
.ka-acc-qr svg{width:100%;height:100%;display:block}
.ka-acc-abrir{display:none;margin:0 auto 10px}
@media (hover:none) and (pointer:coarse){ .ka-acc-abrir{display:inline-flex} }
.ka-acc-manual{font-size:12px;opacity:.8;line-height:1.5}
.ka-acc-manual code{display:inline-block;margin-top:4px;font-size:13px;letter-spacing:.06em;padding:3px 8px;border-radius:7px;background:rgba(127,127,127,.15)}
.ka-acc-respaldos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.ka-acc-respaldos code{font-size:14px;letter-spacing:.05em;padding:7px 8px;border-radius:9px;background:rgba(127,127,127,.12);text-align:center}
.ka-acc-nota{font-size:12px;opacity:.8}
.ka-acc-det{margin-top:14px;font-size:12.5px;text-align:left;opacity:.85}
.ka-acc-det summary{cursor:pointer}
.ka-acc-espera{display:flex;gap:6px;justify-content:center;margin:12px 0 18px}
.ka-acc-espera span{width:8px;height:8px;border-radius:50%;background:var(--kao-2, #CFA85A);animation:ka-acc-punto 1.2s ease-in-out infinite}
.ka-acc-espera span:nth-child(2){animation-delay:.15s}.ka-acc-espera span:nth-child(3){animation-delay:.3s}
@keyframes ka-acc-punto{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .ka-acc-espera span{animation:none;opacity:.7} }
.ka-acc-ses{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--linea2)}
.ka-acc-ses:first-of-type{border-top:0}
.ka-acc-ses small{display:block;color:var(--tenue);font-size:12px;margin-top:2px}
.ka-acc-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
.ka-acc-fila select{width:auto;flex:0 1 320px;min-width:200px}
.ka-acc-ajustes{display:grid;gap:12px;max-width:560px}
.ka-acc-ajustes label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.ka-acc-ajustes .ka-acc-check{flex-direction:row;align-items:center;gap:8px}
.ka-acc-ajustes input[type=number]{width:120px;padding:10px 12px;border:1px solid var(--linea2);border-radius:10px;background:var(--sup2);color:var(--tinta);font:inherit;font-size:16px}
.ka-acc-ajustes .ka-btn{justify-self:start}
.ka-acc-activar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;margin-top:8px}
.ka-acc-activar label{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:10px}
.ka-acc-pide{border-left:4px solid var(--kao, #A57D36)}
.ka-acc-alerta{border-left:4px solid #B4472F}
.ka-btn.ka-acc-rojo{color:#B4472F;border-color:#EAC3B8}
.ka-btn.ka-acc-negro{background:#0B0B0C;color:#fff;border-color:#0B0B0C}
[data-tema="oscuro"] .ka-btn.ka-acc-rojo{color:#F2A08A;border-color:#5A2A1E}
[data-tema="oscuro"] .ka-btn.ka-acc-negro{background:#F4F2EE;color:#0B0B0C;border-color:#F4F2EE}
.ka-quien-n a{color:inherit;text-decoration:none}
@media (max-width:700px){
  .ka-acc-ses{grid-template-columns:minmax(0,1fr) auto}
  .ka-acc-ses > .ka-tenue{grid-column:1/-1;order:3}
  .ka-acc-activar{grid-template-columns:1fr}
}

/* ───────────── 3.120.0 · Ajustes → La clínica ───────────── */
.ka-cl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.ka-cl-grid label,.ka-cl-fila label{display:flex; flex-direction:column; gap:5px; min-width:0}
.ka-cl-grid label span,.ka-cl-fila label span{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-cl-fila{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:10px; align-items:end; margin:0 0 10px}
.ka-cl-sede{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.6fr) minmax(0,.8fr)}
.ka-cl-nota{padding-bottom:10px; font-size:12px}
/* 3.128.0 · Ajustes → Agenda: las sedes o especialidades (emoji, nombre, ciudad, dirección, tipo). */
.ka-sd-fila{grid-template-columns:64px repeat(auto-fit,minmax(140px,1fr))}
.ka-sd .ka-cl-sede-cal{margin-bottom:16px; grid-template-columns:minmax(0,.7fr) 96px minmax(0,2.2fr) auto}
.ka-sd .ka-cl-sede-cal .ka-cl-ancho{grid-column:auto}
/* 3.127.0 · Ajustes → Agenda: los tipos de cita, un renglón por tipo. */
.ka-tc-fila{display:grid; grid-template-columns:70px 64px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr) 64px; gap:8px; align-items:end; padding:8px 0; border-top:1px solid var(--linea)}
.ka-tc-fila label{display:flex; flex-direction:column; gap:4px; min-width:0}
.ka-tc-fila .ka-tc-mov{display:none; font-size:11px; color:var(--tenue)}
.ka-tc-cab{border-top:0; padding:0; font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.ka-tc-hace{font-size:12px; padding-bottom:9px}
.ka-tc-arch{flex-direction:row !important; align-items:center; padding-bottom:9px}
.ka-tc-archivada{opacity:.55}
.ka-tc-nueva{background:var(--sup2); border-radius:10px; padding:8px}
.ka-tc select[style*="--tinte"]{border-left:6px solid var(--tinte)}
@media (max-width:760px){.ka-tc-fila{grid-template-columns:1fr 1fr}.ka-tc-cab{display:none}.ka-tc-fila .ka-tc-mov{display:block}}
.ka-cl-ejemplo{margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--sup2); font-size:13.5px}
.ka-cl-falta{border-color:var(--alerta)}
.ka-cl-falta h2{color:var(--alerta)}
.ka-cl-pie{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 30px}
.ka-cl-aviso{border-color:var(--alerta); color:var(--tinta); background:var(--sup)}
@media (max-width:760px){.ka-cl-fila,.ka-cl-sede{grid-template-columns:1fr}}

/* ───────────── 3.121.0 · Ajustes por secciones ─────────────
   El menú de secciones a la izquierda y lo de cada sección a la derecha. En
   el celular el menú pasa arriba, en fila que se desliza. */
.ka-aj-marco{display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start}
.ka-aj-menu{position:sticky; top:16px; background:var(--sup); border:1px solid var(--linea2); border-radius:18px; padding:10px 8px; display:flex; flex-direction:column; gap:2px}
.ka-aj-menu .ka-aj-grupo{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--tenue); margin:10px 10px 4px} /* 3.154.0 · solo el del menú: Plantillas usa la misma clase para sus grupos */
.ka-aj-menu .ka-aj-grupo:first-child{margin-top:4px}
.ka-aj-menu a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:10px; font-size:13.5px; color:var(--tinta)}
.ka-aj-menu a .kao-ico{width:17px; height:17px; flex:none}
.ka-aj-menu a span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-aj-menu a.on{background:var(--acento); color:var(--acento-t)}
.ka-aj-menu a.ka-aj-fuera{color:var(--tenue)}
.ka-aj-menu a small{margin-left:auto; font-size:10.5px; color:var(--tenue); white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ka-aj-menu a:not(.on):hover{background:var(--sup2)}}
.ka-aj-contenido{min-width:0}
.ka-aj-campos{display:grid; gap:12px}
.ka-aj-campo{display:flex; flex-direction:column; gap:5px}
.ka-aj-campo span{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-aj-pie{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--linea2)}
.ka-aj-botones{display:flex; gap:8px}
.ka-aj-deshacer{visibility:hidden}
.ka-aj-sucio .ka-aj-deshacer{visibility:visible}
.ka-aj-sucio .ka-aj-estado::before{content:"● Cambio sin guardar · "; color:#BA7517}
.ka-aj-sucio{border-color:var(--tinta)}
.ka-aj-difs{margin:6px 0 10px; padding-left:18px; font-size:13.5px}
.ka-aj-difs s{color:var(--tenue)}
.ka-aj-ventana{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px}
.ka-aj-caja{background:var(--sup); color:var(--tinta); border-radius:18px; padding:20px 22px; max-width:520px; width:100%; max-height:80vh; overflow:auto; box-shadow:var(--sh-m)}
.ka-aj-caja h3{margin:0 0 10px; font-size:17px; font-weight:500}
.ka-aj-caja ul{margin:0 0 10px; padding-left:18px; font-size:13.5px}
.ka-aj-caja li{margin:0 0 6px}
.ka-aj-caja s{color:var(--tenue)}
.ka-aj-caja p{font-size:12.5px; color:var(--tenue); margin:0 0 14px}
.ka-aj-caja-botones{display:flex; justify-content:flex-end; gap:8px}
@media (max-width:900px){
  .ka-aj-marco{grid-template-columns:1fr}
  .ka-aj-menu{position:static; flex-direction:row; overflow-x:auto; padding:8px; -webkit-overflow-scrolling:touch}
  .ka-aj-menu .ka-aj-grupo{display:none}
  .ka-aj-menu a{white-space:nowrap; flex:none}
  .ka-aj-menu a small{display:none}
}
.ka-cl-sede-cal{grid-template-columns:minmax(0,.5fr) minmax(0,.4fr) minmax(0,2fr); margin-top:-4px; padding-bottom:12px; border-bottom:1px solid var(--linea2)}
.ka-cl-sede-cal input[type=color]{height:38px; padding:2px; border-radius:10px; width:100%}

/* ───────────── 3.136.0 · Ajustes → Colores y marca ─────────────
   La vista previa pinta sus colores a mano (no hereda el tema de la página):
   así «De día» se ve de día aunque quien mira esté de noche. */
.ka-mc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:18px}
.ka-mc-colores{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.ka-mc-colores legend{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); margin-bottom:8px; padding:0}
.ka-mc-muestra{display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-size:11.5px; color:var(--sec); width:64px}
.ka-mc-muestra input[type=radio]{position:absolute; opacity:0; pointer-events:none}
.ka-mc-muestra i{display:block; width:38px; height:38px; border-radius:50%; background:var(--m); border:2px solid var(--linea2); box-shadow:inset 0 0 0 3px var(--sup)}
.ka-mc-muestra i.ka-mc-fabrica{background:conic-gradient(#A57D36 0 50%,#0EA5E9 0)}
.ka-mc-muestra input[type=radio]:checked ~ i,.ka-mc-otro input[type=radio]:checked ~ input[type=color]{border-color:var(--tinta)}
.ka-mc-muestra input[type=radio]:focus-visible ~ i{outline:2px solid var(--tinta); outline-offset:2px}
.ka-mc-otro input[type=color]{width:38px; height:38px; padding:0; border-radius:50%; border:2px solid var(--linea2); background:none; cursor:pointer}
.ka-mc-aviso{min-height:1.2em; margin:4px 0 0}
.ka-mc-previa{display:grid; gap:10px}
.ka-mc-pant{display:grid; grid-template-columns:88px 1fr; border-radius:14px; overflow:hidden; border:1px solid var(--linea2); font-family:var(--p-fuente,var(--fuente)); min-height:128px}
.ka-mc-pant[data-tema=claro]{background:#F2F1EF; color:#111}
.ka-mc-pant[data-tema=oscuro]{background:#161616; color:#F2F1EF}
.ka-mc-lado{background:#0A0A0A; padding:10px 8px; display:flex; flex-direction:column; gap:6px}
.ka-mc-lado img{width:28px; height:28px; object-fit:contain; margin-bottom:4px}
.ka-mc-lado b{font-weight:400; font-size:11px; color:#B4B4B4; padding:3px 6px; border-radius:6px}
.ka-mc-lado b.on{color:var(--p-lado,#CFA85A); background:rgba(255,255,255,.06)}
.ka-mc-cuerpo{padding:12px 14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.ka-mc-cuerpo small{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.6}
.ka-mc-cuerpo strong{font-weight:500; font-size:15px}
.ka-mc-chip{font-size:11px; padding:2px 9px; border-radius:99px; background:var(--p-badge,#F3E6C8); color:var(--p-kao,#A57D36); border:1px solid var(--p-borde,rgba(165,125,54,.3))}
.ka-mc-boton{font-size:12.5px; padding:6px 14px; border-radius:99px; background:var(--p-kao,#A57D36); color:#fff}
.ka-mc-pant[data-tema=oscuro] .ka-mc-boton{color:#0B0B0B}
.ka-mc-logos{display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px}
.ka-mc-logos span{display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:14px; border:1px solid var(--linea2)}
.ka-mc-logos img{max-width:64px; max-height:64px; object-fit:contain}
.ka-mc-sobre-negro{background:#0A0A0A}
.ka-mc-sobre-blanco{background:#fff}
.ka-mc-icono{background:transparent}
.ka-mc-icono img{max-width:72px; max-height:72px; border-radius:16px}
@media (max-width:900px){ .ka-mc-grid{grid-template-columns:1fr} }

/* ───────────── 3.137.0 · Ajustes → Conectores → Google Ads: el script para copiar ───────────── */
.ka-script{display:block; width:100%; box-sizing:border-box; min-height:220px; padding:12px; border-radius:12px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; overflow:auto; resize:vertical}

/* ───────────── 3.139.0 · Cómo van los conectores ───────────── */
.ka-salud-filas{display:grid; border-top:1px solid var(--linea2)}
.ka-salud-fila{display:grid; grid-template-columns:14px minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1.6fr) auto; gap:12px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--linea2); font-size:13.5px}
.ka-salud-fila small{display:block; font-size:11.5px; color:var(--tenue); margin-top:2px}
.ka-salud-punto{width:12px; height:12px; border-radius:50%; background:#B4B4B4}
.ka-salud-fila.ka-salud-bien .ka-salud-punto{background:#3B8C2A}
.ka-salud-fila.ka-salud-sin_senal .ka-salud-punto,.ka-salud-fila.ka-salud-falta .ka-salud-punto{background:#BA7517}
.ka-salud-fila.ka-salud-falla .ka-salud-punto{background:#C0392B}
.ka-salud-fila.ka-salud-falla .ka-salud-prob{color:#C0392B}
.ka-salud-fila.ka-salud-apagado{opacity:.6}
.ka-salud-nom b{font-weight:500}
.ka-salud-acc form{margin:0}
@media (max-width:900px){
  .ka-salud-fila{grid-template-columns:14px minmax(0,1fr) auto; row-gap:4px}
  .ka-salud-senal,.ka-salud-prob{grid-column:2 / 4}
  .ka-salud-acc{grid-column:3; grid-row:1}
  .ka-salud-fila.ka-salud-apagado .ka-salud-senal,.ka-salud-fila.ka-salud-apagado .ka-salud-prob{display:none}
}
/* El punto rojo de Ajustes en el menú, si un conector falla. */
.ka-salud-alerta{display:inline-block; width:8px; height:8px; border-radius:50%; background:#C0392B; margin-left:6px; vertical-align:middle}

/* ───────── 3.141.0 · El tiempo de respuesta por dentro: tramos y las más lentas ───────── */
.ka-tiempos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:18px; margin-top:14px}
.ka-tiempos h4{margin:0 0 8px; font-size:13px; font-weight:500}
.ka-tiempos-fila{display:grid; grid-template-columns:120px 1fr 36px 40px; gap:8px; align-items:center; font-size:13px; padding:3px 0}
.ka-tiempos-fila i{display:block; height:8px; border-radius:99px; background:var(--sup2)}
.ka-tiempos-fila em{display:block; height:100%; border-radius:99px; background:var(--kao)}
.ka-tiempos-fila b{text-align:right; font-weight:500}
.ka-tiempos-fila small{color:var(--tenue); font-size:11.5px}
@media (max-width:900px){ .ka-tiempos{grid-template-columns:1fr} }

/* ───────── 3.141.0 · ¿A quién le llegan las pacientes nuevas? ───────── */
.ka-quien-tabla td{vertical-align:top}
.ka-quien-tabla td small{display:block; margin-top:3px; font-size:11.5px}
.ka-quien-tabla td .ka-chip{margin:4px 4px 0 0}
.ka-quien-tabla tr.ka-recibe-y td:last-child{color:#8A5A00}
[data-tema="oscuro"] .ka-quien-tabla tr.ka-recibe-y td:last-child{color:#E0B45A}

/* ───────── 3.146.0 · El recorrido de las primeras veces ───────── */
.ka-pf-filtros{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:0 0 14px}
.ka-pf-form{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end}
.ka-pf-form label{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--tenue)}
.ka-pf-form select{min-width:150px}
.ka-pf-pie{margin:6px 0 0; font-size:12.5px; color:var(--tenue)}
.ka-pf-ya{margin:8px 0 0; font-size:13px; color:var(--sec)}
.ka-pf-modseg{margin:0 0 10px}
.ka-pf-mod{display:flex; align-items:center; gap:10px; margin:4px 0 10px 18px; font-size:12.5px; color:var(--sec)}
.ka-pf-mod-b{flex:0 0 160px; height:8px; border-radius:99px; overflow:hidden; background:color-mix(in srgb, var(--kao, #A57D36) 28%, transparent)}
.ka-pf-mod-b i{display:block; height:100%; background:var(--kao, #A57D36)}
.ka-pf-mes{margin-left:0}
.ka-pf-mes b{flex:0 0 72px; font-weight:500; color:var(--tinta)}
.ka-pf-acomp-n{margin:0 0 10px; font-size:13.5px}
.ka-pf-acomp-l{margin:0; padding:0; list-style:none; columns:2 320px; column-gap:24px}
.ka-pf-acomp-l li{break-inside:avoid; padding:4px 0; font-size:13px; border-bottom:1px solid var(--linea2)}
.ka-pf-acomp-va{color:var(--sec)}
.ka-pf-trae-t td:nth-child(n+2), .ka-pf-trae-t th:nth-child(n+2){text-align:right}
.ka-pv-tag.ka-pv-s{color:var(--sec); background:transparent; border:1px dashed var(--linea2)}

/* «¿Ya se había atendido?» y «¿Cómo llegó?»: al registrar y en la ficha */
.ka-ya-reg, .ka-llego{margin:10px 0; padding:10px 12px; border:1px solid var(--linea2); border-radius:10px}
.ka-ya-reg legend, .ka-llego legend{padding:0 4px; font-size:12.5px; color:var(--tinta); font-weight:600}
.ka-ya-reg label, .ka-llego label{display:inline-flex; gap:6px; align-items:center; margin:0 14px 6px 0; font-size:13px}
.ka-ya-cuando{display:block; margin-top:4px; font-size:12.5px; color:var(--tenue)}
.ka-ya-ficha{margin:8px 0; font-size:13px}
.ka-llego-ficha{margin:8px 0; font-size:13px}
.ka-llego-ficha > summary{cursor:pointer; color:var(--sec)}
.ka-llego-trajo{margin:6px 0; font-size:13px}
.ka-llego-trajo span{display:block}

/* El buscador de fichas (al registrar, en la ficha y al agendar el acompañante) */
.ka-bf{position:relative; display:block; margin-top:6px; max-width:380px}
.ka-bf-q{width:100%}
.ka-bf.ka-bf-ok .ka-bf-q{border-color:var(--kao, #A57D36)}
.ka-bf-sug{position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; max-height:260px; overflow:auto; background:var(--sup); border:1px solid var(--linea2); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.ka-bf-sug[hidden]{display:none}
.ka-bf-op{display:block; width:100%; padding:8px 12px; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--linea2); color:var(--tinta); cursor:pointer}
.ka-bf-op:hover, .ka-bf-op:focus{background:var(--sup2)}
.ka-bf-op b{display:block; font-weight:500; font-size:13px}
.ka-bf-op small{color:var(--tenue); font-size:11.5px}
.ka-bf-nada{display:block; padding:8px 12px; font-size:12.5px; color:var(--tenue)}

/* «+ Agendar también a su acompañante» */
.ka-acomp{margin:10px 0 0; padding:8px 12px; border:1px dashed var(--linea2); border-radius:10px}
.ka-acomp > summary{cursor:pointer; font-size:13px; color:var(--kao, #8A6528); font-weight:600}
.ka-acomp[hidden]{display:none}
.ka-acomp-si{display:flex; gap:6px; align-items:center; margin:8px 0; font-size:13px}
.ka-acomp input[type="text"], .ka-acomp input[type="tel"]{display:block; width:100%; max-width:380px; margin:0 0 6px}

/* ───────── 3.147.0 · ¿Cómo quedaron?, ¿Cuándo se operan? y lo que pidió ───────── */
.ka-pf-quedo-g{border-bottom:1px solid var(--linea2)}
.ka-pf-quedo-g > summary{display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; list-style:none; font-size:13.5px}
.ka-pf-quedo-g > summary::-webkit-details-marker{display:none}
.ka-pf-quedo-n{flex:0 0 210px}
.ka-pf-quedo-b{flex:1 1 auto; max-width:320px; height:10px; border-radius:99px; background:var(--sup2); overflow:hidden}
.ka-pf-quedo-b i{display:block; height:100%; background:var(--kao, #A57D36)}
.ka-pf-q-no .ka-pf-quedo-b i{background:color-mix(in srgb, var(--kao, #A57D36) 45%, var(--sec))}
.ka-pf-q-sin_noticias .ka-pf-quedo-b i{background:var(--apagado)}
.ka-pf-ver{margin-left:auto; font-size:12px; color:var(--sec); text-decoration:underline}
.ka-pf-regla{margin:0 0 4px; font-size:12px}
.ka-pf-gente{margin:0 0 10px; font-size:13px; line-height:1.6}
.ka-pf-motivos{margin:10px 0 0; font-size:13px}
.ka-pf-tramos{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 12px; font-size:13.5px}
.ka-pf-procs, .ka-pf-pidio-t{margin:8px 0 14px}
.ka-pf-procs td:nth-child(n+2), .ka-pf-procs th:nth-child(n+2){text-align:right}
.ka-pf-h3{margin:14px 0 8px; font-size:13px; font-weight:600; color:var(--tinta)}
.ka-pf-uno{background:var(--sup2)}
.ka-pf-pidio .ka-pf-mes b, .ka-pf-cuando .ka-pf-mes b{flex:0 0 150px}
.ka-pf-persona{margin-top:6px; font-size:12.5px}
.ka-pf-persona > summary{cursor:pointer; color:var(--sec)}
.ka-motivo{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0}
.ka-motivo[hidden]{display:none}
.ka-motivo input[name="motivo_otro"]{max-width:200px}
@media (max-width:700px){
	.ka-pf-quedo-g > summary{flex-wrap:wrap}
	.ka-pf-quedo-n{flex:1 0 100%}
	.ka-pf-quedo-b{order:5; flex:1 0 100%; max-width:none}
}

/* ═════════ 3.148.0 · Primeras veces: filtros curados, el embudo como el del Resumen, C, D y E ═════════ */

/* Los filtros: una sola franja; el Excel a la derecha, en la misma línea */
.ka-pf-filtros{display:flex; flex-direction:column; align-items:stretch; gap:10px}
.ka-pf-filtros .ka-pf-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px}
.ka-pf-sel{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 130px; max-width:220px}
.ka-pf-sel span{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-pf-sel select{width:100%; min-width:0; max-width:100%; text-overflow:ellipsis}
.ka-pf-sel.on select{border-color:var(--kao, #A57D36); box-shadow:inset 0 0 0 1px var(--kao, #A57D36)}
.ka-pf-excel{margin-left:auto; align-self:flex-end; flex:0 0 auto; white-space:nowrap}
.ka-pf-filtros .ka-pf-fila{display:flex; justify-content:flex-start; align-self:flex-start}
.ka-pf-filtros .ka-pf-fila .ka-pv-seg{margin:0}
.ka-pf-filtros .ka-pf-pie{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0}
.ka-pf-chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--tenue)}
.ka-pf-chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; color:var(--tinta);
  background:var(--kao-suave, rgba(165,125,54,.12)); border:1px solid var(--kao-borde, rgba(165,125,54,.35)); text-decoration:none}
.ka-pf-chip i{font-style:normal; opacity:.65}
.ka-pf-chip:hover i{opacity:1}

/* El embudo: las mismas piezas del Resumen (ka-rx), sin la columna de comparación */
.ka-pf-embudo .ka-rx-fila{grid-template-columns:30px minmax(160px,250px) minmax(0,1fr) 92px}
.ka-pf-embudo .ka-rx-fila:not([href]){cursor:default}
.ka-pf-embudo .ka-pf-ya{margin:0 0 12px}
.ka-pf-modlin{display:flex; align-items:center; gap:8px; margin-top:5px; font-size:12px; color:var(--sec)}
.ka-pf-modlin .ka-pf-mod-b{flex:0 0 90px; height:6px}
.ka-pf-ix{display:inline-grid; place-items:center; min-width:24px; height:20px; padding:0 5px; margin-right:4px; border-radius:6px; font-style:normal; font-size:11px; font-weight:700;
  color:#fff; background:var(--rx3, #8c6a30); letter-spacing:0; text-transform:none}
.ka-pf-ramal .ka-pf-hija{margin-left:18px; border-left:2px solid #cfa85a}
.ka-pf-ramal .ka-rx-falta:not([href]){opacity:.75}

.ka-pf-tiempos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:16px}
.ka-pf-tiempos > div, .ka-pf-costos-g > div{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:var(--sup3, var(--sup2)); min-width:0}
.ka-pf-tiempos span, .ka-pf-costos-g span{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-pf-tiempos b, .ka-pf-costos-g b{font-size:22px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-pf-tiempos small{font-size:12px; color:var(--tenue); line-height:1.35}
.ka-pf-costos{margin-top:16px; padding-top:14px; border-top:1px solid var(--linea2)}
.ka-pf-costos h3{margin:0 0 10px; font-size:14px}
.ka-pf-costos-g{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-bottom:8px}
.ka-pf-verde b{color:#2E7D4F}
.ka-pf-rojo b{color:#B4372C}
[data-tema="oscuro"] .ka-pf-verde b{color:#6FCF97}
[data-tema="oscuro"] .ka-pf-rojo b{color:#F28B82}

/* C · ¿Cómo quedaron?: una barra partida y cinco tarjetas */
.ka-pf-barra{display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--sup3, var(--sup2)); margin:4px 0 14px}
.ka-pf-barra i{display:block; min-width:4px}
.ka-pf-q-iniciaron{--q:#2E7D4F}
.ka-pf-q-no_llega{--q:#C19849}
.ka-pf-q-no{--q:#B4372C}
.ka-pf-q-seguimiento{--q:#3B6EA8}
.ka-pf-q-sin_noticias{--q:#9A9A9A}
.ka-pf-barra i{background:var(--q)}
.ka-pf-tarjetas{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
.ka-pf-tarjeta{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:var(--sup); color:inherit; text-decoration:none;
  border:1px solid var(--linea2); border-top:4px solid var(--q); min-width:0; transition:box-shadow .2s, border-color .2s}
a.ka-pf-tarjeta[href]:hover{box-shadow:0 6px 18px rgba(60,45,20,.10)}
.ka-pf-tarjeta.on{box-shadow:inset 0 0 0 2px var(--q)}
.ka-pf-tarjeta-n{font-size:12.5px; font-weight:600; color:var(--sec)}
.ka-pf-tarjeta-n em{font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; margin-right:4px; font-size:11px; color:#fff; background:var(--q)}
.ka-pf-tarjeta b{font-size:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-pf-tarjeta-p{font-size:13px; font-weight:600; color:var(--q)}
.ka-pf-tarjeta small{font-size:11.5px; color:var(--tenue); line-height:1.35}
.ka-pf-motivos{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:12px 0 0; font-size:13px}
.ka-pf-motivo{padding:3px 10px; border-radius:999px; background:rgba(180,55,44,.08); border:1px solid rgba(180,55,44,.25)}

/* D · ¿Cuándo se operan? */
.ka-pf-cuando .ka-pf-tramos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0 0 6px}
.ka-pf-tramo{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; padding:12px 14px; border-radius:12px; background:var(--sup3, var(--sup2))}
.ka-pf-tramo span:first-child{font-size:12.5px; font-weight:600; color:var(--sec)}
.ka-pf-tramo b{font-size:22px; font-variant-numeric:tabular-nums}
.ka-pf-tramo .ka-pf-mod-b{grid-column:1 / -1; flex:none; width:100%}
.ka-pf-tramo small{grid-column:1 / -1; font-size:12px; color:var(--tenue)}
.ka-pf-procs{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px}
.ka-pf-proc{padding:12px 14px; border-radius:12px; border:1px solid var(--linea2); min-width:0}
.ka-pf-proc-sin{border-style:dashed}
.ka-pf-proc dl{display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:8px 0 0; font-size:12.5px}
.ka-pf-proc dt{color:var(--tenue)}
.ka-pf-proc dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.ka-pf-meses{display:flex; align-items:flex-end; gap:10px; height:190px; padding:6px 0; overflow-x:auto}
.ka-pf-mesv{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; flex:1 0 64px; height:100%}
.ka-pf-mesv b{font-size:13px; font-variant-numeric:tabular-nums}
.ka-pf-col{display:flex; align-items:flex-end; width:34px; flex:1 1 auto; border-radius:8px 8px 4px 4px; background:var(--sup3, var(--sup2)); overflow:hidden}
.ka-pf-col i{display:block; width:100%; background:linear-gradient(180deg, #cfa85a, #8c6a30); border-radius:8px 8px 0 0}
.ka-pf-madura .ka-pf-col i{background:repeating-linear-gradient(45deg, #cfa85a 0 6px, #e3cb98 6px 12px)}
.ka-pf-mesv small{font-size:11.5px; white-space:nowrap}

/* E · Lo que pidió → cotizó → se hizo */
.ka-pf-pidio-l{display:flex; flex-direction:column}
.ka-pf-pidio-f{border-bottom:1px solid var(--linea2)}
.ka-pf-pidio-f > summary{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr) minmax(0,1fr) auto; align-items:center; gap:8px 14px; padding:10px 4px; cursor:pointer; list-style:none}
.ka-pf-pidio-f > summary::-webkit-details-marker{display:none}
.ka-pf-pidio-q{font-weight:600}
.ka-pf-pasos3{display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-pf-p3{position:relative; display:block; font-size:12px; color:var(--sec); padding-left:6px}
.ka-pf-p3 i{position:absolute; left:0; top:2px; bottom:2px; width:var(--w); border-radius:4px; background:rgba(165,125,54,.18); z-index:0}
.ka-pf-p3-c i{background:rgba(165,125,54,.32)}
.ka-pf-p3-h i{background:rgba(46,125,79,.28)}
.ka-pf-p3 b{position:relative; z-index:1; color:var(--tinta)}
.ka-pf-pidio-que{font-size:12.5px; color:var(--sec); min-width:0}
.ka-pf-ver{font-size:12px; color:var(--sec); text-decoration:underline; white-space:nowrap}
.ka-pf-pidio-f[open] .ka-pf-ver{text-decoration:none; font-weight:600}
.ka-pf-personas{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:8px; padding:4px 4px 14px}
.ka-pf-persona{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:var(--sup3, var(--sup2)); font-size:12.5px; min-width:0}
.ka-pf-persona em{display:inline-block; min-width:52px; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tenue)}

@media (max-width:1100px){
	.ka-pf-tarjetas{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:760px){
	.ka-pf-sel{flex:1 1 calc(50% - 10px)}
	.ka-pf-excel{margin-left:auto; flex:0 0 auto}
	.ka-pf-embudo .ka-rx-fila{grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"ix et val" "pista pista pista" "fu fu fu"}
	.ka-pf-tiempos, .ka-pf-cuando .ka-pf-tramos{grid-template-columns:1fr}
	.ka-pf-tarjetas{grid-template-columns:1fr 1fr}
	.ka-pf-pidio-f > summary{grid-template-columns:1fr auto; grid-template-areas:"q ver" "p p" "que que"}
	.ka-pf-pidio-q{grid-area:q} .ka-pf-pasos3{grid-area:p} .ka-pf-pidio-que{grid-area:que} .ka-pf-pidio-f .ka-pf-ver{grid-area:ver}
	.ka-pf-ramal .ka-pf-hija{margin-left:10px}
}
/* ═════════ 3.150.0 · Reportes de lectura fácil (auditoría del 22 oct, dibujos 1 a 5) ═════════ */

/* Las cifras grandes caben en su cuadro: el tamaño baja con el ancho del
   cuadro (y, si aun así no cabe, 06-reportes-agente-y-ajustes.js lo achica). Nunca «…». */
.ka-ge-caps{min-width:0}
.ka-ge-cap{min-width:0; container-type:inline-size}
.ka-ge-cap-v{display:block; max-width:100%; font-size:clamp(18px, 13cqi, 30px); font-variant-numeric:lining-nums tabular-nums; text-overflow:clip; overflow:visible}
.ka-kpis{min-width:0}
.ka-kpi{min-width:0}
.ka-kpi .ka-v{max-width:100%; text-overflow:clip}

/* Las listas numeradas: título, cuántas, Excel y Cerrar */
.ka-lista{margin-top:14px}
.ka-panel .ka-lista{background:var(--sup2); border-radius:14px; padding:14px 16px 6px}
.ka-lst-cab{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:0 0 8px}
.ka-lst-cab h2{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em}
.ka-lst-cab .ka-lista-n{font-weight:600; color:var(--tinta)}
.ka-lista-botones{display:flex; gap:8px; flex:0 0 auto}
.ka-lista-ix{width:34px; text-align:center; color:var(--tenue); font-variant-numeric:tabular-nums}
.ka-lista-t td small{display:block; color:var(--tenue); font-size:12px}
.ka-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ka-tabla tr.on > td{background:var(--sup2)}

/* Dibujo 1 · ¿Qué tan rápido contestamos? */
.ka-tramos{margin:22px 0 8px; padding:20px 0 6px; border-top:1px solid var(--linea)}
.ka-tramos-cab{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px}
.ka-tramos-cab h3{margin:0; font-size:18px; font-weight:600}
.ka-tramos-para{margin:6px 0 14px; color:var(--sec); font-size:13.5px; max-width:70ch}
.ka-tramos-barra{display:flex; gap:3px; height:42px; border-radius:10px; overflow:hidden}
.ka-tramo{display:flex; align-items:center; justify-content:center; min-width:52px; padding:0 8px; color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; text-decoration:none; overflow:hidden}
.ka-tramo-0{background:#5E8C61}
.ka-tramo-1{background:#A57D36}
.ka-tramo-2{background:#C2873B}
.ka-tramo-3{background:#B4533E}
a.ka-tramo:hover{filter:brightness(1.08)}
.ka-tramo.on{box-shadow:inset 0 0 0 3px rgba(255,255,255,.75)}
.ka-tramos-pie{margin:10px 0 0; font-size:12.5px}

/* Dibujo 3 · Google: el tipo de campaña */
.ka-g-tipo{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; background:var(--sup2); border:1px solid var(--linea2); white-space:nowrap}
.ka-g-tipo.ka-g-sin{color:var(--tenue); border-style:dashed}

/* Dibujo 2 · Las citas pendientes de quién las agendó */
.ka-pend-chip{display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; color:#8A5A12; background:#FBF1DE; border:1px solid #E7C98F; white-space:nowrap}
.ka-pend-fila td{background:#FDF8EE}
/* 3.151.1 · «Elegir…» y «Guardar» siempre juntos, uno al lado del otro (Manoroz: «luego debería venir Elegir, y luego al ladito Guardar»).
   Antes el formulario quedaba en línea (`form.ka-enlinea`) y, en la agenda o la ficha, Guardar se caía debajo. */
form.ka-pend-form{display:flex; flex-wrap:nowrap; gap:6px; align-items:center; max-width:100%}
form.ka-pend-form select{flex:1 1 auto; width:auto; min-width:0; max-width:220px; margin:0}
form.ka-pend-form .ka-btn{flex:none; margin:0; white-space:nowrap}
.ka-cal-ver-pend:not([hidden]), .ka-cita-pend{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.ka-pend-t td{vertical-align:middle}
.ka-cita-pend{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px}
.ka-cal-pend{outline:2px dashed #C2873B; outline-offset:-2px}
.ka-cal-ver-pend{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--linea)}
.ka-cal-ver-pend[hidden]{display:none}
.ka-pend-tarjeta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; text-decoration:none; color:inherit; border-color:#E7C98F}
.ka-pend-tarjeta:hover{background:#FDF8EE}

/* Dibujo 4 · La plata: de dónde sale el nombre */
.ka-chip-de{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; color:var(--sec); background:var(--sup3, rgba(0,0,0,.05)); white-space:nowrap}
.ka-plata-conc td:first-child{min-width:160px}

/* Dibujo 5 · El recorrido hasta la cirugía */
.ka-rec{display:grid; grid-template-columns:repeat(5, minmax(64px, 1fr)); margin:0; padding:22px 0 4px; list-style:none; min-width:360px}
.ka-rec li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; font-size:12.5px; line-height:1.3}
.ka-rec li i{position:relative; z-index:1; width:12px; height:12px; border-radius:50%; background:#A57D36; margin-bottom:4px}
.ka-rec li + li::before{content:""; position:absolute; top:5px; right:50%; width:100%; height:2px; background:#E3D3B4}
.ka-rec li b{font-weight:500}
.ka-rec li small{color:var(--tenue); font-size:12px}
.ka-rec-sin i{background:#CFCFCF}
.ka-rec-sin b{color:var(--tenue)}
.ka-rec-d{position:absolute; top:-20px; right:50%; width:100%; text-align:center; font-size:12px; font-weight:600; color:#A57D36}
.ka-rec-t td{vertical-align:middle}
.ka-pf-proc .ka-emb-n{margin-left:4px}
.ka-pf-proc.on{outline:2px solid #A57D36; outline-offset:-2px}

/* De noche */
[data-tema="oscuro"] .ka-pend-chip{color:#F1D6A3; background:rgba(194,135,59,.18); border-color:rgba(194,135,59,.45)}
[data-tema="oscuro"] .ka-pend-fila td,
[data-tema="oscuro"] .ka-pend-tarjeta:hover{background:rgba(194,135,59,.10)}
[data-tema="oscuro"] .ka-rec li + li::before{background:rgba(165,125,54,.35)}
[data-tema="oscuro"] .ka-rec-sin i{background:#5a5a5a}

@media (max-width:900px){
  /* En tarjeta, el recorrido va debajo de su rótulo, a todo el ancho. */
  .ka-rec-t td[data-r="Su recorrido"]{display:block}
  .ka-rec-t td[data-r="Su recorrido"]::before{display:block; width:auto}
  .ka-rec{min-width:0; grid-template-columns:repeat(5, minmax(0, 1fr)); font-size:11.5px}
  .ka-rec li{font-size:11.5px}
  .ka-rec li small{font-size:11px}
  .ka-rec li b{font-size:10.5px; white-space:nowrap; letter-spacing:-.01em}
}
@media (max-width:640px){
  .ka-lst-cab h2{font-size:15.5px}
  .ka-tramo{min-width:40px; font-size:11.5px; padding:0 4px}
}
/* ═════════ 3.151.0 · El Agente: Reportes, Excel, dictado y fotos (dibujo 6) ═════════ */

/* El clip y el micrófono, a los lados de la caja */
.ka-ag-clip,.ka-ag-mic{width:36px; height:36px; flex:none; border:0; border-radius:50%; background:transparent; color:var(--sec); display:grid; place-items:center; cursor:pointer}
.ka-ag-clip:hover,.ka-ag-mic:hover{background:var(--sup2)}
.ka-ag-clip svg,.ka-ag-mic svg{width:19px; height:19px}
.ka-ag-mic[hidden]{display:none}
.ka-ag-mic.on{background:#C0392B; color:#fff; animation:ka-ag-oye 1.2s ease-in-out infinite}
@keyframes ka-ag-oye{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.45)} 50%{box-shadow:0 0 0 7px rgba(192,57,43,0)}}
@media (prefers-reduced-motion: reduce){ .ka-ag-mic.on{animation:none} }
.ka-ag-pie + .ka-ag-pie{margin-top:-6px}
.ka-ag-pie[hidden]{display:none}

/* La foto lista para mandar */
.ka-ag-foto{display:flex; align-items:center; gap:10px; margin:8px 12px 0; padding:6px 8px; border:1px solid var(--linea2); border-radius:12px; background:var(--sup2); font-size:12.5px; color:var(--sec)}
.ka-ag-foto[hidden]{display:none}
.ka-ag-foto img{width:44px; height:44px; object-fit:cover; border-radius:8px}
.ka-ag-foto span{flex:1; min-width:0}
.ka-ag-foto-x{border:0; background:transparent; color:var(--tenue); font-size:14px; cursor:pointer; padding:4px 8px}

/* Lo que mandó: su foto y si fue dictado */
.ka-ag-yo-foto{display:block; max-width:100%; max-height:180px; border-radius:10px; margin-bottom:6px; object-fit:cover}
.ka-ag-yo-meta{display:block; margin-top:4px; font-size:11px; color:var(--tenue); white-space:normal}

/* Una tabla corta en la respuesta */
.ka-ag-tabla{width:100%; border-collapse:collapse; margin:6px 0 8px; font-size:13px; font-variant-numeric:tabular-nums}
.ka-ag-tabla th,.ka-ag-tabla td{padding:6px 6px; border-bottom:1px solid var(--linea); text-align:left; vertical-align:top}
.ka-ag-tabla th{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tenue)}
.ka-ag-tabla td + td,.ka-ag-tabla th + th{text-align:right}

/* El Excel que armó el Agente */
.ka-ag-xlsx{display:flex; align-items:center; gap:10px; margin:8px 0 4px; padding:10px; border:1px solid var(--linea2); border-radius:12px; background:var(--sup)}
.ka-ag-xlsx-ic{flex:none; display:grid; place-items:center; width:34px; height:40px; border-radius:6px; background:#1F7A45; color:#fff; font-size:9px; font-weight:700; letter-spacing:.02em}
.ka-ag-xlsx > div{flex:1; min-width:0}
.ka-ag-xlsx b{display:block; font-size:13px; overflow-wrap:anywhere}
.ka-ag-xlsx small{display:block; font-size:11.5px; color:var(--tenue)}
.ka-ag-xlsx-b{flex:none; white-space:nowrap}
.ka-ag-xlsx .ka-ag-xlsx-b{background:var(--kao, #A57D36); border-color:transparent; color:#fff}
.ka-ag-xlsx .ka-ag-xlsx-b:hover{filter:brightness(1.06)}
/* ═══════════════════════════════════════════════════════════════════════
   28 · TIEMPOS (3.152.0)
   Reportes → Tiempos, el índice de Citas y Tiempos, el bloque del Resumen y
   «Sus tiempos» en la ficha. Todo con los colores de siempre (tokens del
   01 y el dorado del 21): de día y de noche sin nada aparte.
   ═══════════════════════════════════════════════════════════════════════ */

/* El índice de la pestaña: 1 · 2 · 3 · 4, cada uno lleva a su parte. */
.ka-ti-indice{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.ka-ti-indice a{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; border:1px solid var(--linea2); background:var(--sup); color:var(--tinta); font-size:13px; font-weight:500; text-decoration:none; transition:border-color 150ms ease}
.ka-ti-indice a em, .ka-ti-num, .ka-ci-parte em{font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--kao, #A57D36); color:#fff; font-size:11px; font-weight:700; letter-spacing:0}
.ka-ti-indice a:active{transform:scale(.97); transition:transform 120ms cubic-bezier(0.23,1,0.32,1)}
@media (hover:hover) and (pointer:fine){ .ka-ti-indice a:hover{border-color:var(--kao, #A57D36)} }
.ka-bloque .ka-ti-num, .ka-ci-parte em{margin-right:2px; position:relative; top:-1px}
.ka-ti-guia{margin:-4px 0 6px; font-size:12.5px}

/* Las cápsulas (las de siempre, con el número que se toca abajo). */
.ka-ti-caps{margin-bottom:14px}
.ka-ti-caps .ka-kpi small{display:block; margin-top:6px; font-size:12px; color:var(--tenue); line-height:1.45}
.ka-ti-caps .ka-kpi .ka-v a.ka-emb-n{font-size:inherit}
.ka-ti-ver{margin:4px 0 0}

/* ¿En cuánto agendan?: una barra partida y las cuatro tarjetas. */
.ka-ti-barra{display:flex; height:10px; border-radius:99px; overflow:hidden; gap:2px; margin:2px 0 12px; background:var(--sup2)}
.ka-ti-barra i{display:block; min-width:4px}
.ka-ti-t-mismo{--t:var(--tinta)}
.ka-ti-t-semana{--t:var(--sec)}
.ka-ti-t-mes{--t:var(--kao, #A57D36)}
.ka-ti-t-mas{--t:var(--alerta)}
.ka-ti-barra i{background:var(--t)}
.ka-ti-tramos{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:0 0 4px}
.ka-ti-tramo{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; padding:12px 14px; border-radius:12px; background:var(--sup2); color:inherit; text-decoration:none; border:1px solid transparent; transition:border-color 150ms ease}
.ka-ti-tramo span{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--sec)}
.ka-ti-tramo span i{width:9px; height:9px; border-radius:3px; background:var(--t); flex:none}
.ka-ti-tramo b{font-size:22px; font-variant-numeric:tabular-nums; color:var(--tinta)}
.ka-ti-tramo small{grid-column:1 / -1; font-size:12px; color:var(--tenue)}
a.ka-ti-tramo[href]{cursor:pointer}
a.ka-ti-tramo[href]:active{transform:scale(.98); transition:transform 120ms cubic-bezier(0.23,1,0.32,1)}
.ka-ti-tramo.on{border-color:var(--kao, #A57D36); background:var(--kao-suave, var(--sup2))}
@media (hover:hover) and (pointer:fine){ a.ka-ti-tramo[href]:hover{border-color:var(--linea)} }

/* ¿Cada cuánto vuelven? y Las que más vuelven. */
.ka-ti-tabla td small{display:block; font-size:11.5px; color:var(--tenue); font-weight:400}
.ka-ti-tabla tr.ka-ti-todas td{background:var(--sup2)}
.ka-ti-tabla tr.on td{background:var(--kao-suave, var(--sup2))}
.ka-ti-cn{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; background:var(--c, #9E9E9E); color:#fff; font-size:10px; font-weight:700; margin-right:7px; vertical-align:middle; position:relative; top:-1px}

/* «Cómo se cuenta». */
.ka-ti-como{display:grid; grid-template-columns:minmax(150px, 220px) 1fr; gap:8px 18px; margin:12px 0 4px; font-size:13px; line-height:1.5}
.ka-ti-como dt{font-weight:600; color:var(--tinta)}
.ka-ti-como dd{margin:0; color:var(--sec)}

/* La plata con un solo panel donde antes había dos. */
.ka-med-dos.ka-med-uno{grid-template-columns:1fr}

/* ─────────────── «Sus tiempos» en la ficha ─────────────── */
.ka-ti-fcaps{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin:0 0 6px}
.ka-ti-fcaps > div{padding:12px 14px; border-radius:12px; background:var(--sup2); min-width:0}
.ka-ti-fcaps span{display:block; font-size:12px; font-weight:600; color:var(--sec)}
.ka-ti-fcaps b{display:block; font-size:22px; font-variant-numeric:tabular-nums; margin:2px 0; color:var(--tinta)}
.ka-ti-fcaps small{display:block; font-size:11.5px; color:var(--tenue); line-height:1.4}

/* 3.152.2 · Sus procedimientos, uno tras otro (la línea de antes ponía un punto por visita). */
.ka-ti-antes{margin:10px 0 0; font-size:12.5px; color:var(--sec); line-height:1.5}
.ka-ti-antes b{color:var(--tinta); font-weight:600}
.ka-ti-procs{list-style:none; margin:12px 0 8px; padding:0}
.ka-ti-procs li{display:grid; grid-template-columns:104px 16px minmax(0,1fr); gap:12px; align-items:start; position:relative; padding:0 0 18px}
.ka-ti-procs li::before{content:''; position:absolute; left:123px; top:18px; bottom:0; width:2px; background:var(--kao-borde, var(--linea))}
.ka-ti-procs li:last-child::before{display:none}
.ka-ti-procs li > i{width:16px; height:16px; border-radius:50%; background:var(--c, #8E24AA); margin-top:2px; position:relative; z-index:1; box-shadow:0 0 0 3px var(--sup)}
.ka-ti-pd{font-size:12.5px; color:var(--sec); text-align:right; padding-top:2px; font-variant-numeric:tabular-nums}
.ka-ti-procs b{font-size:14px; color:var(--tinta); font-weight:600}
.ka-ti-procs small{display:block; color:var(--tenue); font-size:12px; margin-top:3px; line-height:1.45}
.ka-ti-tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--kao-suave, var(--sup2)); color:var(--kao, #A57D36); font-weight:600; margin-left:4px; vertical-align:1px}
.ka-ti-salto{display:table; margin:0 0 4px; font-size:12px; font-weight:700; color:var(--kao, #A57D36); background:var(--kao-suave, var(--sup2)); padding:3px 9px; border-radius:99px; font-variant-numeric:tabular-nums}
.ka-ti-acomp{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.ka-ti-acomp > span{font-size:11.5px; padding:3px 8px; border-radius:6px; background:var(--sup2); color:var(--sec)}
.ka-ti-acomp em{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; background:var(--c, #9E9E9E)}
.ka-ti-procs li.ka-ti-prox > i{background:var(--sup); border:2px dashed var(--c, #9E9E9E); box-sizing:border-box}

/* En el teléfono: la pestaña en una columna y la línea de arriba abajo. */
/* 3.152.3 · Su camino hasta la cirugía: los pasos en el orden en que pasaron. */
.ka-ti-camino{display:flex; list-style:none; margin:12px 0 4px; padding:4px 0 6px; overflow-x:auto; overscroll-behavior-x:contain}
.ka-ti-camino li{position:relative; flex:1 0 96px; text-align:center; padding-top:30px; font-size:12px}
.ka-ti-camino li::before{content:''; position:absolute; top:15px; left:-50%; right:50%; height:2px; background:var(--kao-borde, var(--linea))}
.ka-ti-camino li:first-child::before{display:none}
.ka-ti-camino li > i{position:absolute; top:8px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--kao, #A57D36); box-shadow:0 0 0 3px var(--sup)}
.ka-ti-camino li.ka-ti-cx > i{width:18px; height:18px; margin-left:-9px; top:6px; background:#8E24AA}
.ka-ti-camino b{display:block; font-weight:600; color:var(--tinta)}
.ka-ti-camino small{display:block; color:var(--tenue); font-size:11.5px; margin-top:2px}
.ka-ti-cd{position:absolute; top:-4px; left:-50%; right:50%; font-size:11px; font-weight:700; color:var(--kao, #A57D36); font-variant-numeric:tabular-nums}
.ka-ti-total{margin:4px 0 0; font-size:13px; color:var(--sec)}
.ka-ti-total b{display:inline-block; font-size:13px; color:var(--kao, #A57D36); background:var(--kao-suave, var(--sup2)); padding:3px 10px; border-radius:99px; margin-right:4px}
.ka-ti-total small, .ka-rec-falta{display:block; font-size:11.5px; color:var(--tenue); margin-top:4px}

@media (max-width: 760px){
  .ka-ti-tramos{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ka-ti-como{grid-template-columns:1fr; gap:2px}
  .ka-ti-como dd{margin-bottom:8px}
  .ka-ti-procs li{grid-template-columns:16px minmax(0,1fr); gap:10px}
  .ka-ti-procs li::before{left:7px}
  .ka-ti-pd{grid-column:2; grid-row:1; text-align:left; padding:0 0 2px; font-size:11.5px}
  .ka-ti-procs li > i{grid-column:1; grid-row:1 / span 2}
  .ka-ti-procs li > div{grid-column:2}
  .ka-ti-camino{flex-direction:column; overflow:visible}
  .ka-ti-camino li{flex:none; text-align:left; padding:0 0 12px 64px; min-height:34px}
  .ka-ti-camino li::before{top:-12px; left:51px; right:auto; width:2px; height:18px}
  .ka-ti-camino li > i, .ka-ti-camino li.ka-ti-cx > i{left:52px; top:1px}
  .ka-ti-cd{top:-8px; left:0; right:auto; width:40px; text-align:right}
}

/* Las columnas de números, alineadas con su título. */
.ka-ti-tabla th.ka-num, .ka-ti-tabla td.ka-num{text-align:right}
/* El primer título de Tiempos no se pega a la guía de arriba. */
.ka-ti-guia + .ka-bloque{margin-top:22px}

/* 3.152.1 · De qué hora son las cifras de Reportes. */
.ka-cuando-cifras em{font-style:normal; color:var(--kao, #A57D36)}
.ka-cuando-cifras a{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* 3.152.4 · Los grupos de «¿En cuánto se hacen un procedimiento?» (Cirugías · Inyectables y sueros · Otros). */
.ka-ti-tabla tr.ka-ti-grupo td{background:var(--sup2); font-weight:700; color:var(--sec); font-size:12.5px}
.ka-ti-tabla tr.ka-ti-grupo td:first-child{text-transform:uppercase; letter-spacing:.06em; font-size:11.5px}
/* ═══════════════════════════════════════════════════════════════════════
   29 · REPORTES EN EL TELÉFONO (3.152.6)
   Manoroz, 22 oct, desde el teléfono: «que las opciones de Resumen, De dónde
   vienen, Equipo, Citas aparezcan apiladas, mostradas, y no que tenga que
   deslizar»; en Tiempos «el más rápido · el más lento está empiñado»; en las
   listas «número 2, el nombre, y el procedimiento justificado a la derecha…
   debería aparecer bien justificado, bien organizado»; «algo que me haga
   saber que es interactivo»; y color por tipo «para que se vea la
   diferencia». Solo Reportes; en el computador cambian únicamente los
   puntitos de color de Tiempos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Los colores de Tiempos: cirugías, inyectables y sueros, otros ── */
.ka-ti-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c, #9E9E9E); margin-right:8px; vertical-align:1px; flex:none}
.ka-ti-leyenda{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 22px; font-size:12.5px; color:var(--sec)}
.ka-ti-leyenda span{display:inline-flex; align-items:center}
.ka-ti-tabla tr.ka-ti-grupo td:first-child{color:var(--c, var(--sec))}
[data-tema="oscuro"] .ka-ti-tabla tr.ka-ti-grupo td:first-child{color:var(--tinta)}

/* ── Las pestañas de Reportes, todas a la vista ── */
@media (max-width: 760px){
  .ka-rep-pest{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px;
    width:100%; overflow:visible; border-radius:16px; padding:3px;
  }
  .ka-rep-pest a{
    display:flex; align-items:center; justify-content:center; text-align:center;
    white-space:normal; line-height:1.2; min-height:40px; padding:8px 6px; border-radius:13px;
  }
  /* Si la última queda sola en su fila, ocupa la fila entera. */
  .ka-rep-pest a:last-child:nth-child(3n+1){grid-column:1 / -1}
}

/* ── En tarjetas (teléfono y tableta, como el resto de las tablas) ── */
@media (max-width: 900px){
  /* Las listas de personas: el número en un cuadrito al lado del nombre, el
     procedimiento debajo del nombre y cada dato con su rótulo a la izquierda
     y su valor a la derecha. El nombre lleva «›»: se toca y abre la ficha. */
  .ka-lista-t tr, .ka-ti-tabla tr{position:relative}
  .ka-lista-t td.ka-lista-ix, .ka-ti-tabla td.ka-lista-ix{
    position:absolute; top:14px; left:14px; display:grid; place-items:center;
    width:26px; height:26px; padding:0; margin:0; border:none; border-radius:8px;
    background:var(--sup2); color:var(--sec); font-size:12px; font-weight:600;
  }
  .ka-lista-t td.ka-lista-ix + td, .ka-ti-tabla td.ka-lista-ix + td{
    display:block; min-height:26px; padding:2px 0 10px 38px; margin-bottom:8px; border-bottom:1px solid var(--linea2);
  }
  .ka-lista-t td.ka-lista-ix + td > a, .ka-ti-tabla td.ka-lista-ix + td > a{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    color:var(--tinta); font-weight:600; font-size:15px; text-decoration:none;
  }
  .ka-lista-t td.ka-lista-ix + td > a b, .ka-ti-tabla td.ka-lista-ix + td > a b{font-weight:600}
  .ka-lista-t td.ka-lista-ix + td > a::after, .ka-ti-tabla td.ka-lista-ix + td > a::after{
    content:'Ver ficha ›'; flex:none; font-size:12px; font-weight:600; color:var(--kao, #A57D36);
  }
  .ka-lista-t td.ka-lista-ix + td small{display:block; margin-top:3px; font-size:12.5px}
  .ka-lista-t td[data-r]{justify-content:space-between; text-align:right}
  .ka-lista-t td[data-r]::before{width:auto; text-align:left}
  .ka-lista-t td[data-r="Su recorrido"]{text-align:left}

  /* Las tablas de Tiempos: el nombre arriba con su color, y los números en
     dos columnas, cada uno con su rótulo encima (nada se monta). */
  .ka-ti-tabla tr{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px;
    border-left:4px solid var(--c, var(--linea2)); padding:12px 14px 14px;
  }
  .ka-ti-tabla td, .ka-ti-tabla td.ka-num{display:block; padding:0; margin:0; border:none; text-align:left; min-width:0}
  .ka-ti-tabla td:not([data-r]){grid-column:1 / -1}
  .ka-ti-tabla td.ka-lista-ix{grid-column:auto} /* con columna, el cuadrito se mediría desde la columna y no desde la tarjeta */
  .ka-ti-tabla td:first-child:not(.ka-lista-ix){padding:0 0 8px; border-bottom:1px solid var(--linea2); font-size:15px; color:var(--tinta)}
  .ka-ti-tabla td.ka-lista-ix + td{margin:0}
  .ka-ti-tabla td[data-r]::before{display:block; width:auto; margin:0 0 3px; padding:0; font-size:10.5px; line-height:1.3; white-space:normal; text-align:left}
  .ka-ti-tabla td[data-r] b{font-size:16px}
  .ka-ti-tabla td[data-r] small{display:block; margin-top:2px; line-height:1.35; white-space:normal; overflow-wrap:anywhere}
  .ka-ti-tabla tr.ka-ti-todas td, .ka-ti-tabla tr.ka-ti-grupo td{background:transparent}
  .ka-ti-tabla tr.ka-ti-todas, .ka-ti-tabla tr.ka-ti-grupo{background:var(--sup2)}
  .ka-ti-tabla tr.ka-ti-grupo td:first-child{font-size:12px}
  .ka-ti-tabla tr.ka-ti-grupo td[data-r]{font-size:15px; font-weight:400; color:var(--txt)}
  .ka-ti-tabla tr.on{border-color:var(--kao, #A57D36); border-left-color:var(--c, var(--kao, #A57D36))}
}

/* ───────────── 3.153.0 · Ajustes → Colores y marca: paletas y colores de la página ─────────────
   Más aire: cada texto de ayuda va debajo de su título, los controles en fila
   y del mismo alto. La vista previa usa los colores que se están eligiendo. */
.ka-mc2-intro{line-height:1.55; margin:6px 0 18px; max-width:74ch}
.ka-mc2-ultimo{display:block; margin-top:6px; font-size:12.5px; color:var(--sec)}
.ka-mc .ka-mc-grid{gap:32px; grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr)}
.ka-mc-opciones{display:flex; flex-direction:column; gap:22px; min-width:0}
.ka-mc2-bloque{display:flex; flex-direction:column; gap:12px}
.ka-mc2-tit,.ka-mc-colores.ka-mc2-bloque legend{margin:0; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue)}
.ka-mc-colores.ka-mc2-bloque{flex-direction:row; flex-wrap:wrap; gap:12px}
.ka-mc-colores.ka-mc2-bloque legend{margin-bottom:10px}

.ka-mc2-paletas{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.ka-mc2-paleta{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px 14px; border-radius:14px; border:1px solid var(--linea2); background:var(--sup); color:var(--tinta); font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; transition:border-color 160ms ease, transform 120ms var(--ease-out)}
.ka-mc2-paleta:active{transform:scale(.97)}
.ka-mc2-paleta.on{border-color:var(--kao); box-shadow:0 0 0 1px var(--kao)}
@media (hover:hover) and (pointer:fine){.ka-mc2-paleta:hover{border-color:var(--kao-borde)}}
.ka-mc2-tiras{display:flex; gap:4px}
.ka-mc2-tiras i{display:block; width:22px; height:22px; border-radius:6px; background:var(--m); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.ka-mc2-tiras i.ka-mc2-vacio{background:repeating-linear-gradient(45deg,var(--sup2) 0 4px,var(--linea2) 4px 8px)}
.ka-mc2-pnombre{font-size:14px; font-weight:500; line-height:1.25}
.ka-mc2-paleta small{font-size:11.5px; color:var(--tenue)}

.ka-mc2-filas{gap:0}
.ka-mc2-filas .ka-mc2-tit{margin-bottom:6px}
.ka-mc2-fila{display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:14px 0; border-top:1px solid var(--linea3)}
.ka-mc2-texto{display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-mc2-texto label{font-size:15px; font-weight:500; color:var(--tinta)}
.ka-mc2-texto small{font-size:12.5px; line-height:1.45; color:var(--sec)}
.ka-mc2-control{display:flex; align-items:center; gap:10px}
.ka-mc2-selector{flex:none; width:44px; height:44px; padding:0; border:1px solid var(--linea2); border-radius:10px; background:none; cursor:pointer}
.ka-mc .ka-mc2-hex{flex:1 1 auto; width:auto; min-width:0; max-width:11em; height:44px; box-sizing:border-box; padding:0 10px; font-size:16px; font-family:ui-monospace,Menlo,monospace; text-transform:uppercase; border:1px solid var(--linea2); border-radius:10px; background:var(--sup); color:var(--tinta)}
.ka-mc2-hex::placeholder{text-transform:none; font-family:var(--fuente); color:var(--tenue)}
.ka-mc2-quitar{flex:none; height:44px; white-space:nowrap}
.ka-mc2-nota{margin:10px 0 0; font-size:12.5px; line-height:1.5}

.ka-mc2-guardar-paleta{gap:8px; padding:16px; border-radius:14px; background:var(--sup2)}
.ka-mc2-guardar-paleta label{font-size:14px; font-weight:500}
.ka-mc2-guardar-paleta label small{font-weight:400; color:var(--tenue)}
.ka-mc2-guardar-paleta input{height:44px; box-sizing:border-box; padding:0 12px; font-size:16px; border:1px solid var(--linea2); border-radius:10px; background:var(--sup); color:var(--tinta)}
.ka-mc2-guardar-paleta > small{font-size:12.5px; line-height:1.45}

.ka-mc2-lado{display:flex; flex-direction:column; gap:16px; min-width:0}
.ka-mc2-selects{gap:14px}
.ka-mc2-selects label{display:flex; flex-direction:column; gap:6px}
.ka-mc2-selects select{font-size:16px}

/* La vista previa toma los colores de la página que se eligen (si no, los de fábrica). */
.ka-mc-pant[data-tema=claro]{background:var(--p-fondo,#F2F1EF); color:var(--p-tinta,#111)}
.ka-mc-pant[data-tema=oscuro]{background:var(--p-fondo-n,#161616); color:var(--p-tinta-n,#EEE)}
.ka-mc-pant .ka-mc-lado{background:var(--p-lateral,#0A0A0A)}
.ka-mc-pant[data-tema=oscuro] .ka-mc-lado{background:var(--p-lateral-n,#0A0A0A)}
.ka-mc-pant{min-height:168px}
.ka-mc2-tarjeta{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; background:var(--p-sup,#fff); min-width:120px}
.ka-mc-pant[data-tema=oscuro] .ka-mc2-tarjeta{background:var(--p-sup-n,#222)}
.ka-mc2-tarjeta em{font-style:normal; font-size:10.5px; opacity:.7}
.ka-mc2-tarjeta b{font-size:18px; font-weight:600; color:var(--p-kao,#A57D36)}
.ka-mc2-fila-botones{display:flex; align-items:center; gap:8px}

/* El logo: la vista, el texto y el botón en su sitio. */
.ka-mc-logo .ka-mc-logos{margin:8px 0 14px}
.ka-mc2-subir-fila{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.ka-mc2-archivo{display:flex; flex-direction:column; gap:6px; flex:1 1 260px; min-width:0}
.ka-mc2-archivo span{font-size:13px; font-weight:500}
.ka-mc2-archivo input{font-size:14px; padding:9px 10px; border:1px dashed var(--linea); border-radius:10px; background:var(--sup2)}
.ka-mc2-subir-fila .ka-btn{height:44px}

@media (max-width:900px){
  .ka-mc .ka-mc-grid{grid-template-columns:1fr}
  .ka-mc2-paletas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 3.155.0 · El logo, al lado de la vista previa. */
.ka-mc2-logo{display:flex; flex-direction:column; gap:12px; margin-top:6px; padding:18px; border-radius:16px; background:var(--sup2)}
.ka-mc2-logo-cab{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ka-mc2-logo .ka-mc-logos{margin:0; gap:10px}
.ka-mc2-logo .ka-mc-logos span{width:84px; height:84px}
.ka-mc2-logo .ka-mc-logos img{max-width:56px; max-height:56px}
.ka-mc2-logo .ka-mc2-nota{margin:0}
.ka-mc2-logo .ka-mc2-subir-fila{flex-direction:column; align-items:stretch}
.ka-mc2-logo .ka-mc2-archivo{flex:none}
.ka-mc2-logo .ka-mc2-archivo input{background:var(--sup)}
.ka-mc2-fabrica{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.ka-mc2-oculto{display:none}
/* 3.202.2 · El campo del archivo y el botón nunca se salen de la tarjeta del logo (en el teléfono se salían). */
.ka-mc2-archivo input{width:100%; min-width:0; max-width:100%; box-sizing:border-box}
.ka-mc2-subir-fila{min-width:0; max-width:100%}
.ka-mc2-subir-fila .ka-btn{max-width:100%; box-sizing:border-box}

/* ───────────── 3.154.0 · Ajustes con aire (todas las secciones) ─────────────
   Una sola capa para todo Ajustes: cada bloque respira, el texto de ayuda va
   separado de su título, los rótulos se leen (sin mayúsculas sostenidas), los
   campos tienen la misma altura, los botones van en fila y alineados, y las
   direcciones largas no se salen: van pequeñas, en una caja, listas para copiar. */
.ka-aj-contenido{min-width:0}
.ka-aj-contenido > form,.ka-aj-contenido > section,.ka-aj-contenido > .ka-panel{margin-bottom:22px}
.ka-aj-contenido .ka-panel{padding:28px 32px; border-radius:18px}
.ka-aj-contenido .ka-ph{margin-bottom:4px; padding-bottom:12px; gap:12px; flex-wrap:wrap}
.ka-aj-contenido .ka-ph h2{font-size:19px; letter-spacing:-.01em}
.ka-aj-contenido .ka-panel > p.ka-tenue,
.ka-aj-contenido .ka-panel > .ka-aj-campos > p.ka-tenue,
.ka-aj-contenido form > p.ka-tenue{font-size:14px; line-height:1.55; color:var(--sec); margin:10px 0 22px; max-width:76ch}
.ka-aj-contenido p.ka-tenue + p.ka-tenue{margin-top:-10px}

/* Campos: rótulo arriba, legible; el campo debajo; la ayuda debajo del campo. */
.ka-aj-contenido .ka-cl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px 20px; align-items:start}
.ka-aj-contenido .ka-cl-grid > label,
.ka-aj-contenido .ka-aj-campos label{display:flex; flex-direction:column; gap:8px; min-width:0}
.ka-aj-contenido .ka-cl-grid > label > span:first-child,
.ka-aj-contenido .ka-aj-campos label > span:first-child{font-size:13px; font-weight:500; line-height:1.35; letter-spacing:0; text-transform:none; color:var(--tinta)}
.ka-aj-contenido .ka-cl-grid small,
.ka-aj-contenido .ka-aj-campos label small{font-size:12.5px; line-height:1.45; color:var(--sec); text-transform:none; letter-spacing:0}
.ka-aj-contenido input[type=text],.ka-aj-contenido input[type=url],.ka-aj-contenido input[type=tel],.ka-aj-contenido input[type=email],
.ka-aj-contenido input[type=number],.ka-aj-contenido input[type=password],.ka-aj-contenido input[type=time],.ka-aj-contenido input[type=date],
.ka-aj-contenido select{min-height:44px; box-sizing:border-box; font-size:16px; border-radius:10px; max-width:100%}
.ka-aj-contenido textarea{font-size:16px; line-height:1.5; border-radius:10px; min-height:96px; max-width:100%; box-sizing:border-box}
.ka-aj-contenido fieldset{min-width:0}

/* Los formularios de Conectores y del escritorio (.ka-form): el rótulo es el texto del label. */
.ka-aj-contenido .ka-form{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px 20px; align-items:start; margin:18px 0 6px}
.ka-aj-contenido .ka-form > label{display:flex; flex-direction:column; justify-content:flex-start; gap:8px; min-width:0; font-size:13px; font-weight:500; line-height:1.35; letter-spacing:0; text-transform:none; color:var(--tinta)}
.ka-aj-contenido .ka-form > label input,.ka-aj-contenido .ka-form > label select,.ka-aj-contenido .ka-form > label textarea{font-weight:400; width:100%}

/* Lo que acompaña al título del bloque va debajo, no apretado a su lado. */
.ka-aj-contenido .ka-ph > .ka-tenue{flex-basis:100%; order:3; margin:2px 0 0; font-size:13.5px; line-height:1.5; text-align:left}

/* Los formularios que son un solo botón quedan en fila, uno al lado del otro. */
.ka-aj-contenido .ka-panel > form:not(:has(input:not([type=hidden]),select,textarea)){display:inline-flex; max-width:calc(50% - 12px); margin:4px 10px 12px 0; vertical-align:top}
.ka-aj-contenido .ka-panel > form:not(:has(input:not([type=hidden]),select,textarea)) .ka-btn{min-height:44px; padding-top:8px; padding-bottom:8px; line-height:1.3}
.ka-aj-contenido .ka-panel > form:not(:has(input:not([type=hidden]),select,textarea)) .ka-btn{margin:0}
.ka-aj-contenido .ka-panel > p + form:not(:has(input:not([type=hidden]),select,textarea)){margin-top:0}

/* Botones: en fila, separados, del mismo alto; nunca encimados. */
.ka-aj-contenido .ka-btn{min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:normal; text-align:center}
.ka-aj-contenido p:has(> .ka-btn),
.ka-aj-contenido div:has(> .ka-btn + .ka-btn){display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ka-aj-contenido .ka-btn + .ka-btn{margin-left:0}

/* Direcciones, tokens y códigos largos: pequeños, en su caja, se copian enteros. */
.ka-aj-contenido code,.ka-aj-contenido .ka-aj-url,.ka-aj-contenido input[readonly]{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; word-break:break-all; overflow-wrap:anywhere}
.ka-aj-contenido p > code:only-child,.ka-aj-contenido .ka-aj-url{display:block; max-width:62ch; padding:10px 12px; border-radius:10px; background:var(--sup2); border:1px solid var(--linea2); line-height:1.5; user-select:all; -webkit-user-select:all}

/* Nada se sale del bloque: tablas con su propio desplazamiento. */
.ka-aj-contenido .ka-panel{overflow-wrap:anywhere}
.ka-aj-contenido table{max-width:100%}
.ka-aj-contenido .ka-panel > table,.ka-aj-contenido .ka-tabla-envoltura{display:block; overflow-x:auto}

/* Enlaces que llevan a otra parte, en el color principal. */
.ka-aj-contenido .ka-panel a:not(.ka-btn){color:var(--kao); text-decoration:none; font-weight:500}
@media (hover:hover) and (pointer:fine){.ka-aj-contenido .ka-panel a:not(.ka-btn):hover{text-decoration:underline}}

/* El pie de cada bloque: el último cambio a la izquierda, Guardar a la derecha. */
.ka-aj-contenido .ka-aj-pie{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--linea3)}

@media (max-width:900px){
  .ka-aj-contenido .ka-panel > form:not(:has(input:not([type=hidden]),select,textarea)){display:flex; max-width:none; margin-right:0}
  .ka-aj-contenido .ka-panel > form:not(:has(input:not([type=hidden]),select,textarea)) .ka-btn{width:100%}
  .ka-aj-contenido .ka-panel{padding:20px 18px}
  .ka-aj-contenido .ka-cl-grid{grid-template-columns:1fr}
}

/* Interruptores: lo que se prende y se apaga. El texto a la izquierda, el
   interruptor a la derecha; toda la fila se toca. */
.ka-aj-interruptor{grid-column:1 / -1}
.ka-aj-sw{display:flex !important; flex-direction:row !important; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; border-radius:14px; background:var(--sup2); cursor:pointer; touch-action:manipulation}
.ka-aj-sw-texto{display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-aj-sw-texto b{font-size:15px; font-weight:500; color:var(--tinta)}
.ka-aj-sw-texto small{font-size:13px; line-height:1.45; color:var(--sec)}
.ka-aj-sw input[type=checkbox]{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.ka-aj-sw i{position:relative; flex:none; width:48px; height:28px; border-radius:14px; background:var(--apagado); transition:background-color 160ms ease}
.ka-aj-sw i::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform 180ms var(--ease-out)}
.ka-aj-sw input:checked + i{background:var(--kao)}
.ka-aj-sw input:checked + i::after{transform:translateX(20px)}
.ka-aj-sw input:focus-visible + i{outline:2px solid var(--tinta); outline-offset:2px}
.ka-aj-sw:active i::after{width:25px}

/* La semana del horario: horas del mismo alto que el resto. */
.ka-aj-semana input[type=time]{min-height:40px; padding:0 10px; border:1px solid var(--linea2); border-radius:10px; background:var(--sup); color:var(--tinta)}
.ka-aj-semana td,.ka-aj-semana th{padding-top:10px; padding-bottom:10px}
.ka-aj-semana input[type=checkbox]{width:20px; height:20px; accent-color:var(--kao)}

/* Las tablas de Ajustes: títulos de una línea, el color de cada persona. */
.ka-aj-contenido th{white-space:nowrap}
.ka-aj-contenido td small.ka-tenue{display:block; margin-top:4px; font-size:12px; line-height:1.4}
.ka-quien-nombre{display:inline-flex; align-items:center; gap:8px; margin-bottom:6px}
.ka-quien-color{width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px var(--linea)}
.ka-mc2-guardar-paleta label{display:block}

/* La clínica → Especialistas: cada uno en su recuadro. */
.ka-cl-esp{padding:16px 18px 18px; border-radius:14px; background:var(--sup2); margin-bottom:12px}
.ka-cl-esp-nuevo{background:transparent; border:1px dashed var(--linea)}
.ka-cl-esp-tit{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tenue); margin-bottom:12px}
.ka-cl-esp-nota{margin:6px 0 0 !important}
.ka-aj-contenido .ka-cl-grid > label.ka-cl-ancho{grid-column:1 / -1}
.ka-aj-contenido .ka-cl-fila{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:16px; align-items:end; margin-bottom:14px}
.ka-aj-contenido .ka-cl-ejemplo{margin-top:16px; padding:12px 14px; border-radius:12px; background:var(--sup2); font-size:14px; line-height:1.5}
.ka-aj-contenido .ka-cl-pie{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:4px 0 24px}
@media (max-width:900px){ .ka-aj-contenido .ka-cl-fila{grid-template-columns:1fr} }
.ka-cl-esp .ka-cl-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ka-aj-contenido .ka-cl-fila > label{display:flex; flex-direction:column; gap:8px; min-width:0}
.ka-aj-contenido .ka-cl-fila > label > span{font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--tinta)}
details.ka-banco > summary{cursor:pointer; list-style:none; padding:6px 0}
details.ka-banco > summary::-webkit-details-marker{display:none}
details.ka-banco > summary h3{display:inline; font-size:15px}
details.ka-banco > summary h3::before{content:"▸ "; color:var(--tenue)}
details.ka-banco[open] > summary h3::before{content:"▾ "}
details.ka-banco{margin-top:8px}

/* 3.155.0 · Asistente: la casilla en su renglón, y la tabla de precios con títulos. */
.ka-aj-contenido .ka-aj-campos label.ka-aj-check{flex-direction:row; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--sup2); font-size:14.5px; line-height:1.45; cursor:pointer}
.ka-aj-contenido .ka-aj-check input[type=checkbox]{flex:none; width:22px; height:22px; margin:0; accent-color:var(--kao)}
.ka-aj-precio{display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:12px; margin-bottom:10px}
.ka-aj-precio-cab{margin-bottom:6px}
.ka-aj-precio-cab span{font-size:13px; font-weight:500; color:var(--tinta)}
.ka-aj-precio input{width:100%}
.ka-aj-precio-mas{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 0}
@media (max-width:600px){ .ka-aj-precio{grid-template-columns:minmax(0,1fr) 120px} }

/* 3.155.0 · Elegir el modelo de Claude: tarjetas, con lo que cuesta cada uno. */
.ka-aj-modelos{border:0; padding:0; margin:18px 0 8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.ka-aj-modelos legend{font-size:13px; font-weight:500; color:var(--tinta); margin-bottom:10px; padding:0}
.ka-aj-modelo{display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:14px; border:1px solid var(--linea2); background:var(--sup); cursor:pointer}
.ka-aj-modelo:has(input:checked){border-color:var(--kao); box-shadow:0 0 0 1px var(--kao)}
.ka-aj-modelo input{margin-top:3px; accent-color:var(--kao)}
.ka-aj-modelo span{display:flex; flex-direction:column; gap:4px; min-width:0}
.ka-aj-modelo b{font-size:14.5px; font-weight:500}
.ka-aj-modelo b em{font-style:normal; font-weight:600; color:var(--kao); margin-left:4px; letter-spacing:.05em}
.ka-aj-modelo small{font-size:12.5px; line-height:1.4; color:var(--sec); overflow-wrap:anywhere}
.ka-aj-agente .ka-aj-check{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--sup2); font-size:14.5px; margin-top:14px}
.ka-aj-agente .ka-aj-check input{width:22px; height:22px; accent-color:var(--kao)}

/* 3.155.0 · «Cómo van los conectores»: tarjetas con su dibujo, en vez de una lista. */
.ka-aj-contenido .ka-salud-filas{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; border-top:0; margin-top:6px}
.ka-aj-contenido .ka-salud-fila{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; border:1px solid var(--linea2); border-radius:16px; background:var(--sup); font-size:13.5px}
.ka-aj-contenido .ka-salud-fila .ka-salud-punto{position:absolute; top:16px; right:16px; width:10px; height:10px}
.ka-aj-contenido .ka-salud-ico{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--kao-suave,var(--sup2)); color:var(--kao)}
.ka-aj-contenido .ka-salud-ico .kao-ico{width:22px; height:22px}
.ka-aj-contenido .ka-salud-nom{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ka-aj-contenido .ka-salud-nom b{font-size:15px}
.ka-aj-contenido .ka-salud-senal,.ka-aj-contenido .ka-salud-prob{font-size:13px; line-height:1.45; color:var(--sec)}
.ka-aj-contenido .ka-salud-acc{margin-top:auto; padding-top:4px}
.ka-aj-contenido .ka-salud-fila.ka-salud-apagado{opacity:1; background:var(--sup2)}
.ka-aj-contenido .ka-salud-fila.ka-salud-apagado .ka-salud-ico{background:var(--sup); color:var(--tenue)}
.ka-aj-contenido .ka-salud-fila.ka-salud-apagado .ka-salud-senal,.ka-aj-contenido .ka-salud-fila.ka-salud-apagado .ka-salud-prob{display:none}
.ka-aj-contenido .ka-salud-fila.ka-salud-falla{border-color:rgba(192,57,43,.45)}
@media (max-width:900px){ .ka-aj-contenido .ka-salud-filas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .ka-aj-contenido .ka-salud-filas{grid-template-columns:1fr} }

/* Conectores: la dirección para Meta y su botón en una sola fila, la ayuda debajo. */
.ka-aj-contenido .ka-panel > p:has(> code.ka-codigo){display:flex; align-items:center; gap:10px; margin:8px 0 4px}
.ka-aj-contenido code.ka-codigo{flex:1 1 auto; min-width:0; max-width:none !important; margin:0}
.ka-aj-contenido .ka-panel > p:has(> code.ka-codigo) + form:not(:has(input:not([type=hidden]),select,textarea)){margin-top:8px}
.ka-imp-tabla td{vertical-align:top; padding-top:12px; padding-bottom:12px; font-size:14px; line-height:1.45}
.ka-imp-tabla td:first-child{white-space:nowrap}
.ka-imp-tabla td:nth-child(2){font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--sec)}
.ka-resp-auto-fila{display:flex; align-items:center; gap:14px}
.ka-resp-auto-fila > div{flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-resp-auto-fila b{font-size:15px; font-weight:500}
.ka-resp-auto-fila small{font-size:13px}
.ka-resp-auto .ka-salud-ico{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--kao-suave,var(--sup2)); color:var(--kao)}

/* ───────────── 3.156.0 · Novedades: la estrella ✦ junto a la campanita ─────────────
   Pedido de Manoroz: que siempre titile, para que den ganas de entrar. Titila
   suave (la estrella crece un poco y brilla cada 3 s); con algo sin ver, además
   el puntito late. Con «reducir movimiento» del teléfono se queda quieta. */
.ka-nov-btn{position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--kao-borde,rgba(165,125,54,.3)); border-radius:11px; background:transparent; color:var(--kao-lado,var(--kao)); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.ka-nov-btn svg{width:19px; height:19px; transform-origin:50% 50%; animation:ka-nov-titila 3.2s var(--ease-in-out,ease-in-out) infinite}
.ka-nov-btn .ka-nov-chica{transform-origin:18.5px 17.8px; animation:ka-nov-chispa 3.2s ease-in-out infinite}
.ka-nov-btn:active{transform:scale(.95)}
.ka-nov-punto{position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--kao-lado,var(--kao)); box-shadow:0 0 0 2px var(--lateral,#0A0A0A)}
.ka-nov-btn.ka-nov-visto .ka-nov-punto{display:none}
.ka-nov-btn:not(.ka-nov-visto) .ka-nov-punto{animation:ka-nov-punto 1.6s ease-out infinite}
.ka-movil .ka-nov-btn{color:var(--lateral-t,#fff); border-color:rgba(255,255,255,.22)}
@keyframes ka-nov-titila{0%,72%,100%{transform:scale(1) rotate(0); opacity:.85} 82%{transform:scale(1.18) rotate(12deg); opacity:1} 90%{transform:scale(.96) rotate(0); opacity:.9}}
@keyframes ka-nov-chispa{0%,60%,100%{opacity:.35; transform:scale(.7)} 78%{opacity:1; transform:scale(1.15)}}
@keyframes ka-nov-punto{0%{box-shadow:0 0 0 2px var(--lateral,#0A0A0A),0 0 0 2px var(--kao-borde,rgba(165,125,54,.5))} 100%{box-shadow:0 0 0 2px var(--lateral,#0A0A0A),0 0 0 9px transparent}}
@media (hover:hover) and (pointer:fine){.ka-nov-btn:hover{background:rgba(255,255,255,.06)}}
@media (prefers-reduced-motion:reduce){.ka-nov-btn svg,.ka-nov-btn .ka-nov-chica,.ka-nov-btn .ka-nov-punto{animation:none}}
.ka-quien-b{display:flex; align-items:center; gap:8px}

/* El panel. */
.ka-nov{position:fixed; inset:0; margin:auto; height:fit-content; width:min(460px,calc(100vw - 32px)); max-height:min(80dvh,720px); padding:0; border:0; border-radius:20px; background:var(--sup); color:var(--tinta); box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.22); overflow:hidden}
.ka-nov[open]{display:flex; flex-direction:column}
.ka-nov::backdrop{background:rgba(10,16,22,.42)}
.ka-nov-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 22px 14px; border-bottom:1px solid var(--linea3)}
.ka-nov-cab h2{margin:0 0 2px; font-size:20px; letter-spacing:-.01em}
.ka-nov-cab small{font-size:12.5px}
.ka-nov-x{width:36px; height:36px; flex:none; border:0; border-radius:10px; background:var(--sup2); color:var(--tinta); font-size:20px; cursor:pointer}
.ka-nov-cuerpo{padding:16px 22px 22px; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px}
.ka-nov-v{padding:14px 16px; border-radius:14px; border:1px solid var(--linea2)}
.ka-nov-ultima{border-color:var(--kao-borde); background:var(--kao-badge-a,var(--sup2))}
.ka-nov-v-cab{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; font-size:12.5px}
.ka-nov-v ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.ka-nov-v li{font-size:14px; line-height:1.45}
.ka-nov-sumar p{margin:0 0 12px; font-size:14px; line-height:1.5}
@media (max-width:600px){ .ka-nov{width:100vw; max-width:100vw; max-height:88dvh; margin:auto 0 0; border-radius:20px 20px 0 0} }

/* ───────────── 3.157.0 · Lab: el laboratorio de mezclas ─────────────
   Pedido de Manoroz: «que se vea como un laboratorio, con engranajes y cosas de
   laboratorio». Papel cuadriculado, muestras en tubos de ensayo, engranajes que
   giran despacio y un matraz con burbujas. Con «reducir movimiento», quieto.
   Toma los colores de la clínica: el acento (--kao) y la barra (--lateral). */
.ka-lab{display:flex; flex-direction:column; gap:20px; padding-bottom:28px;
  background-image:linear-gradient(color-mix(in srgb,var(--lateral,#274E6A) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--lateral,#274E6A) 6%,transparent) 1px,transparent 1px);
  background-size:24px 24px; background-position:-1px -1px}
.ka-lab-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--kao)}
.ka-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Cabecera */
.ka-lab-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.ka-lab-titulo{display:flex; align-items:center; gap:18px; min-width:0}
.ka-lab-titulo h1{margin:2px 0 4px; font-size:32px; letter-spacing:-.02em; line-height:1.1}
.ka-lab-titulo p{margin:0; max-width:520px; font-size:14px; line-height:1.5; color:var(--sec)}
.ka-lab-dibujo{flex:none; stroke:var(--lateral,#274E6A); stroke-width:1.6; stroke-linejoin:round}
.ka-lab-dientes{stroke-width:3; stroke-linecap:round}
.ka-lab-dientes2{stroke-width:2.4; stroke-linecap:round}
.ka-lab-g1,.ka-lab-g2{transform-box:fill-box; transform-origin:50% 50%}
.ka-lab-g1{animation:ka-lab-gira 14s linear infinite}
.ka-lab-g2{animation:ka-lab-gira 10s linear infinite reverse}
.ka-lab-matraz{stroke:var(--kao)}
.ka-lab-liquido{fill:var(--kao); fill-opacity:.28; stroke:none}
.ka-lab-bur{fill:var(--kao); stroke:none; animation:ka-lab-burbuja 3.2s ease-in infinite}
.ka-lab-b2{animation-delay:1.1s}.ka-lab-b3{animation-delay:2.1s}
@keyframes ka-lab-gira{to{transform:rotate(360deg)}}
@keyframes ka-lab-burbuja{0%{transform:translateY(0); opacity:0} 20%{opacity:.85} 100%{transform:translateY(-26px); opacity:0}}
@media (prefers-reduced-motion:reduce){.ka-lab-g1,.ka-lab-g2,.ka-lab-bur{animation:none}}
.ka-lab-filtros{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.ka-lab-periodos{display:flex; padding:3px; border-radius:12px; background:var(--sup); box-shadow:inset 0 0 0 1px var(--linea2)}
.ka-lab-periodos a{padding:8px 14px; border-radius:9px; font-size:13px; color:var(--sec); text-decoration:none; white-space:nowrap}
.ka-lab-periodos a.on{background:var(--lateral,#274E6A); color:var(--lateral-t,#fff); font-weight:500}
.ka-lab-fechas{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sec); margin:0}
.ka-lab-fechas input[type=date]{padding:6px 9px; border-radius:9px; border:1px solid var(--linea2); background:var(--sup); color:var(--tinta); font:inherit}

/* Tarjetas */
.ka-lab-card{position:relative; padding:22px 24px; border-radius:18px; background:var(--sup); box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:12px; min-width:0}
.ka-lab-card h2{margin:0; font-size:18px; display:flex; align-items:center; gap:9px}
.ka-lab-card h2 .kao-ico{width:20px; height:20px; color:var(--kao); flex:none}
.ka-lab-ch{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.ka-lab-nota{margin:0; font-size:13px; line-height:1.5; color:var(--sec)}
.ka-lab-chip{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:color-mix(in srgb,var(--lateral,#274E6A) 12%,var(--sup)); color:var(--lateral,#274E6A); white-space:nowrap}
.ka-lab-pct{font-weight:600; color:var(--lateral,#274E6A); text-align:right}
.ka-lab-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.ka-lab-vacio{align-items:flex-start}
.ka-lab-vacio .kao-ico{width:30px; height:30px; color:var(--kao)}

/* Muestras en tubos */
.ka-lab-muestras{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.ka-lab-muestra{padding:16px 18px; border-radius:16px; background:var(--sup); box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05); display:grid; grid-template-columns:22px minmax(0,1fr); gap:3px 14px; align-items:end}
.ka-lab-tubo{grid-row:span 3; align-self:center; width:16px; height:64px; border:1.6px solid var(--lateral,#274E6A); border-top:0; border-radius:0 0 9px 9px; position:relative; overflow:hidden}
.ka-lab-tubo::before{content:""; position:absolute; top:0; left:-4px; right:-4px; height:1.6px; background:var(--lateral,#274E6A)}
.ka-lab-tubo i{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(color-mix(in srgb,var(--kao) 60%,#fff),var(--kao)); transition:height .6s var(--ease-out,ease-out)}
.ka-lab-muestra b{font-size:26px; font-weight:600; color:var(--lateral,#274E6A); line-height:1.1; font-variant-numeric:tabular-nums}
.ka-lab-muestra small{font-size:12px; color:var(--sec); line-height:1.35}

/* Pirámide */
.ka-lab-pir{display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; align-items:center}
.ka-lab-pir-dib{width:100%; height:auto}
.ka-lab-pir-dib text{font-size:13px; font-weight:600; fill:#fff; text-anchor:middle}
.ka-lab-pir-dib .n1{fill:var(--lateral,#274E6A)}
.ka-lab-pir-dib .n2{fill:color-mix(in srgb,var(--lateral,#274E6A) 75%,#fff)}
.ka-lab-pir-dib .n3{fill:var(--kao)}
.ka-lab-pir-dib .n4{fill:color-mix(in srgb,var(--kao) 28%,var(--sup))}
.ka-lab-pir-dib .t4{fill:var(--tinta)}
.ka-lab-pir-lista{display:flex; flex-direction:column}
.ka-lab-pir-fila{display:grid; grid-template-columns:80px minmax(0,1fr) 54px; gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--linea2); font-size:13.5px}
.ka-lab-pir-fila:first-child{border-top:0}
.ka-lab-pir-fila small{display:block; margin-top:2px; font-size:12px; color:var(--sec)}
.ka-lab-cabeza>b:first-child{color:var(--lateral,#274E6A)}
.ka-lab-cuerpo>b:first-child{color:color-mix(in srgb,var(--lateral,#274E6A) 75%,var(--tinta))}
.ka-lab-base>b:first-child{color:var(--kao)}
.ka-lab-cola>b:first-child{color:var(--sec)}

/* Preguntan contra se hacen */
.ka-lab-tabla{display:flex; flex-direction:column; font-size:13.5px}
.ka-lab-tr{display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(90px,1.4fr) 70px 70px 76px 92px 74px; gap:8px 14px; align-items:center; padding:9px 10px; margin:0 -10px; border-radius:10px; color:var(--tinta); text-decoration:none}
.ka-lab-tr span{font-variant-numeric:tabular-nums}
a.ka-lab-tr:hover{background:var(--sup2)}
a.ka-lab-tr.on{background:color-mix(in srgb,var(--kao) 12%,var(--sup))}
.ka-lab-th{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec); padding-bottom:4px}
.ka-lab-tr b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-lab-barra{position:relative; height:9px; border-radius:5px; background:var(--sup2); overflow:hidden}
.ka-lab-barra i{position:absolute; left:0; top:0; bottom:0; border-radius:5px}
.ka-lab-barra .p{background:color-mix(in srgb,var(--kao) 30%,var(--sup))}
.ka-lab-barra .h{background:var(--lateral,#274E6A)}
.ka-lab-ley{display:inline-block; width:9px; height:9px; border-radius:3px; margin:0 4px 0 8px; vertical-align:-1px}
.ka-lab-ley-p{margin-left:0; background:color-mix(in srgb,var(--kao) 30%,var(--sup))}
.ka-lab-ley-h{background:var(--lateral,#274E6A)}
.ka-lab-c.bien{color:#2E7D4F; font-weight:600}
.ka-lab-c.mal{color:#B0413A; font-weight:600}

/* Ruta */
.ka-lab-ruta{border:1px solid color-mix(in srgb,var(--kao) 40%,transparent); scroll-margin-top:80px}
.ka-lab-ruta-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.ka-lab-ruta-cols>div{display:flex; flex-direction:column; gap:6px; min-width:0}
.ka-lab-ruta-cols p{margin:0; font-size:13.5px; line-height:1.45}
.ka-lab-ruta-cols .ka-lab-mono{margin-top:6px}

/* Mezclas y lo que viene después */
.ka-lab-lista{display:flex; flex-direction:column; gap:10px}
.ka-lab-mez{padding:13px 14px; border-radius:14px; background:var(--sup2); display:flex; flex-direction:column; gap:5px}
.ka-lab-mez>div{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.ka-lab-mez b{font-size:14.5px; font-weight:500}
.ka-lab-mez small,.ka-lab-sig small{font-size:12.5px; color:var(--sec); line-height:1.45}
.ka-lab-sig{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:10px 0; border-top:1px solid var(--linea2)}
.ka-lab-sig:first-child{border-top:0}
.ka-lab-sig b{font-weight:500}

/* Dónde apostar */
.ka-lab-apuesta{background:var(--lateral,#274E6A); color:var(--lateral-t,#fff)}
.ka-lab-apuesta h2 .kao-ico{color:color-mix(in srgb,var(--kao) 55%,#fff)}
.ka-lab-apuesta .ka-lab-mono{color:color-mix(in srgb,var(--kao) 55%,#fff)}
.ka-lab-apuesta .ka-lab-nota{color:color-mix(in srgb,var(--lateral-t,#fff) 72%,transparent)}
.ka-lab-apuestas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ka-lab-ap{padding:16px; border-radius:14px; background:rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0}
.ka-lab-ap .ka-lab-chip{background:rgba(255,255,255,.12); color:color-mix(in srgb,var(--kao) 50%,#fff)}
.ka-lab-ap-n{font-size:16px; font-weight:600}
.ka-lab-ap p{margin:0; font-size:13px; line-height:1.5; color:color-mix(in srgb,var(--lateral-t,#fff) 82%,transparent)}
.ka-lab-precio{align-self:stretch; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.45}
.ka-lab-oro{color:color-mix(in srgb,var(--kao) 45%,#fff)}
.ka-lab-ver{font-size:12.5px; color:color-mix(in srgb,var(--lateral-t,#fff) 80%,transparent)}
.ka-lab-apuesta .ka-tenue{color:color-mix(in srgb,var(--lateral-t,#fff) 60%,transparent)}

/* Cómo se calcula */
.ka-lab-calc{flex-direction:row; align-items:center; gap:20px; flex-wrap:wrap}
.ka-lab-calc>.kao-ico{width:36px; height:36px; color:var(--kao); flex:none}
.ka-lab-calc-t{flex:1 1 320px; display:flex; flex-direction:column; gap:4px; min-width:0}
.ka-lab-param{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0; font-size:12.5px; color:var(--sec)}
.ka-lab-param label,.ka-lab-param>span{display:flex; flex-direction:column; gap:2px; padding:7px 11px; border-radius:10px; background:var(--sup2)}
.ka-lab-param label span{display:flex; align-items:center; gap:4px; color:var(--tinta)}
.ka-lab-param input{width:58px; padding:4px 6px; border-radius:7px; border:1px solid var(--linea2); background:var(--sup); color:var(--tinta); font:inherit}
.ka-lab-pie{margin:0; font-size:12.5px; line-height:1.5; color:var(--sec)}

/* Teléfono y pantallas medianas */
@media (max-width:1100px){
  .ka-lab-apuestas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-lab-ruta-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ka-lab-dos{grid-template-columns:minmax(0,1fr)}
  .ka-lab-muestras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-lab-pir{grid-template-columns:minmax(0,1fr)}
  .ka-lab-pir-dib{max-width:280px; margin:0 auto}
  .ka-lab-tr{grid-template-columns:minmax(0,1fr) 64px 64px 70px}
  .ka-lab-tr>:nth-child(2),.ka-lab-tr>:nth-child(6),.ka-lab-tr>:nth-child(7){display:none}
  .ka-lab-filtros{align-items:stretch; width:100%}
  .ka-lab-periodos{overflow-x:auto}
  .ka-lab-periodos a{flex:1; text-align:center}
}
@media (max-width:600px){
  .ka-lab-cab{align-items:stretch}
  .ka-lab-titulo{align-items:flex-start}
  .ka-lab-dibujo{width:60px; height:49px}
  .ka-lab-titulo h1{font-size:26px}
  .ka-lab-card{padding:18px 16px}
  .ka-lab-muestras{gap:10px}
  .ka-lab-muestra{padding:14px; grid-template-columns:16px minmax(0,1fr); gap:2px 10px}
  .ka-lab-tubo{width:12px; height:52px}
  .ka-lab-muestra b{font-size:21px}
  .ka-lab-apuestas,.ka-lab-ruta-cols{grid-template-columns:minmax(0,1fr)}
  .ka-lab-fechas{flex-wrap:wrap}
  .ka-lab-fechas label{flex:1}
  .ka-lab-fechas input[type=date]{width:100%}
  .ka-lab-tr{grid-template-columns:minmax(0,1fr) 54px 54px 58px; gap:6px 8px}
  .ka-lab-th{font-size:9px; letter-spacing:0}
  .ka-lab-pir-fila{grid-template-columns:62px minmax(0,1fr) 44px}
}
/* 3.202.4 · La pirámide: cada procedimiento con su marca, y dos cifras por nivel (plata y veces). */
.ka-lab-pir-fila2{grid-template-columns:80px minmax(0,1fr) 92px; align-items:start}
.ka-lab-pcs{display:flex; flex-wrap:wrap; gap:6px}
.ka-lab-pc{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--chip); font-size:12.5px; line-height:1.3; color:var(--tinta)}
.ka-lab-pc i{font-style:normal; font-size:12px}
.ka-lab-pc em{font-style:normal; font-size:10.5px; color:var(--sec); margin-left:2px}
.ka-lab-pc-mas{background:transparent; color:var(--sec); padding-left:2px}
.ka-lab-pct2{display:grid; justify-items:end; line-height:1.15; text-align:right}
.ka-lab-pct2 b{font-size:14px; font-weight:600; color:var(--lateral,#274E6A)}
.ka-lab-pct2 b.v{color:var(--kao); margin-top:4px}
.ka-lab-pct2 small{font-size:10.5px; color:var(--sec)}
.ka-lab-ley2{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--sec)}
.ka-lab-ley2 span{display:inline-flex; align-items:center; gap:5px}
.ka-lab-ley2 i,.ka-lab-ley2 em{font-style:normal}
@media (max-width:640px){ .ka-lab-pir-fila2{grid-template-columns:62px minmax(0,1fr) 64px} }
/* 3.202.5 · Las pacientes detrás del número (dentro de la ruta de un procedimiento). */
.ka-lab-tres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.ka-lab-tres > div{padding:12px 14px; border-radius:12px; background:var(--sup2); display:flex; flex-direction:column; gap:2px}
.ka-lab-tres b{font-size:24px; font-weight:600; line-height:1.15; color:var(--tinta); font-variant-numeric:tabular-nums}
.ka-lab-tres small{font-size:12px; line-height:1.4; color:var(--sec)}
.ka-lab-tabs{display:flex; flex-wrap:wrap; gap:6px}
.ka-lab-tabs a{display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; background:var(--chip); font-size:13px; color:var(--tinta); text-decoration:none}
.ka-lab-tabs a.on{background:var(--tinta); color:var(--sup)}
.ka-lab-gente{display:flex; flex-direction:column; max-height:520px; overflow-y:auto; overscroll-behavior:contain}
.ka-lab-g{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 140px minmax(0,1.3fr) 90px; gap:12px; align-items:center; padding:10px; margin:0 -10px; border-radius:10px; border-top:1px solid var(--linea2); font-size:13.5px; color:var(--tinta); text-decoration:none}
.ka-lab-g > *{min-width:0}
.ka-lab-g b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-lab-g-th{position:sticky; top:0; background:var(--sup); border-top:0; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-lab-sinpago{color:var(--sec); font-style:italic}
.ka-lab-ir{color:var(--kao); text-align:right; white-space:nowrap}
.ka-lab-gpie{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.ka-lab-gpie .ka-lab-nota{margin:0}
.ka-lab-todos{align-self:flex-start}
@media (hover:hover) and (pointer:fine){ a.ka-lab-g:hover{background:var(--sup2)} .ka-lab-tabs a:not(.on):hover{background:var(--linea2)} }
@media (max-width:640px){
	.ka-lab-tres{grid-template-columns:minmax(0,1fr)}
	.ka-lab-g-th{display:none}
	.ka-lab-g{grid-template-columns:minmax(0,1fr) auto; gap:2px 10px}
	.ka-lab-g > b{grid-column:1}
	.ka-lab-g > .ka-lab-ir{grid-row:1; grid-column:2}
	.ka-lab-g > span:not(.ka-lab-ir){grid-column:1 / -1; font-size:12.5px; color:var(--sec)}
	.ka-lab-gente{max-height:none}
}
.ka-lab-fuente{display:block; font-size:11px; color:var(--sec); font-style:normal}

/* ───────────── 3.201.0 · Ajustes → Configuración de la clínica ───────────── */
div.ka-conf{/* 3.202.12 · solo el div de Configuración: «ka-conf» también es la tabla de Confirmar citas */ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start}
.ka-conf-tarjeta{display:flex; flex-direction:column; gap:16px}
.ka-conf-dir{margin-bottom:20px} /* 3.205.4 · la dirección del CRM, a todo lo ancho */
.ka-conf-dir .ka-conf-grupos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.ka-conf-dir .ka-conf-grupo,.ka-conf-dir .ka-conf-grupo:nth-child(odd){background:var(--sup2)}
.ka-conf-dir .ka-conf-grupo b{overflow-wrap:anywhere}
.ka-conf-dir .ka-conf-nunca{background:var(--oro-l)}
.ka-conf-dir .ka-conf-boton{align-self:flex-start}
.ka-conf-form{display:flex; flex-direction:column; gap:14px}
.ka-conf-cab{display:flex; align-items:center; gap:12px}
.ka-conf-cab h2{margin:0; font-size:19px}
.ka-conf-cab > div{display:flex; flex-direction:column; gap:2px}
.ka-conf-ico{width:40px; height:40px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--oro-l); color:var(--oro-d)}
.ka-conf-ico-azul{background:var(--info-l); color:var(--info)}
.ka-conf-ico svg{width:20px; height:20px}
.ka-conf-grupos{display:flex; flex-direction:column; gap:2px}
.ka-conf-grupo{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; cursor:pointer}
.ka-conf-grupo:nth-child(odd){background:var(--papel-suave)}
.ka-conf-grupo input{width:18px; height:18px; margin:2px 0 0; flex-shrink:0}
.ka-conf-grupo > span{display:flex; flex-direction:column; gap:2px}
.ka-conf-grupo .ka-tenue{font-size:13px}
.ka-conf-nunca{display:flex; gap:12px; padding:14px 16px; border-radius:12px; background:var(--info-l); font-size:14px; line-height:1.5}
.ka-conf-nunca > div{display:flex; flex-direction:column; gap:4px}
.ka-conf-nunca svg{flex-shrink:0; margin-top:1px}
.ka-conf-boton{min-height:48px; justify-content:center}
.ka-conf-nombre{margin:-6px 0 0; text-align:center; font-size:13px}
.ka-conf-archivo{display:flex; flex-direction:column; gap:6px; font-size:14px}
.ka-conf-de{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--linea2)}
.ka-conf-tabla td{vertical-align:top}
.ka-conf-tabla input{width:18px; height:18px}
@media (max-width: 900px){
  div.ka-conf{grid-template-columns:minmax(0,1fr)}
  .ka-conf-dir .ka-conf-grupos{grid-template-columns:minmax(0,1fr)}
  .ka-conf-dir .ka-conf-boton{align-self:stretch}
}

/* ───────────── 3.201.0 · El logo que subió la clínica, en la barra ─────────────
   Manoroz: el logo va desde donde empieza el nombre de quien entró hasta el
   borde de la campanita, «siempre sí o sí», y nunca se sale. La barra y el
   renglón del nombre tienen el mismo aire a los lados (8px), así que el 100%
   del logo es justo ese ancho. Un logo muy alto se queda en 96px de alto,
   pegado a la izquierda. Sin logo subido, nada de esto aplica. */
.ka-side .ka-logo.ka-logo-ancho{width:100%; height:auto; flex:1 1 auto; min-width:0; justify-content:flex-start}
.ka-logo-ancho .ka-logo-img{width:100%; height:auto; max-height:96px; object-fit:contain; object-position:left center}
/* El color: el logo hace de máscara y el color va detrás. */
.ka-logo-tinta{display:block; width:100%; aspect-ratio:var(--logo-prop, 4); max-height:96px;
  background:var(--logo-color, #fff);
  -webkit-mask:var(--logo) left center / contain no-repeat; mask:var(--logo) left center / contain no-repeat}
/* En la barra del teléfono va a la altura de siempre. */
.ka-movil-marca .ka-logo-tinta{width:auto; height:26px; max-height:none}
/* Ajustes → Colores y marca: el color del logo. */
.ka-mc2-logo-color{border:0; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center}
.ka-mc2-logo-color legend{font-weight:600; font-size:13px; margin-bottom:6px; padding:0}
.ka-mc2-logo-color label{display:inline-flex; align-items:center; gap:6px; font-size:13px; min-height:32px}
.ka-mc2-logo-color input[type=color]{width:32px; height:28px; padding:0; border:0; background:none}
.ka-mc2-logo-color small{flex-basis:100%}
/* 3.201.2 · Con el logo subido, más aire debajo (Manoroz: «que se vea menos
   lleno») y los botones de Novedades y la campanita un poco más pequeños y
   del mismo tamaño, para que el rincón se vea parejo. Sin logo subido (la primera
   clínica, la muestra) la barra sigue igual. */
.ka-side:has(.ka-logo-ancho) .ka-marca{padding-bottom:40px}
/* En el teléfono se quedan del tamaño de siempre: ahí se tocan con el dedo. */
@media (hover:hover) and (pointer:fine){
  .ka-side:has(.ka-logo-ancho) .ka-quien-b .ka-nov-btn,
  .ka-side:has(.ka-logo-ancho) .ka-quien-b .ka-campana{width:30px; height:30px; min-width:30px; border-radius:9px}
  .ka-side:has(.ka-logo-ancho) .ka-quien-b .ka-nov-btn svg,
  .ka-side:has(.ka-logo-ancho) .ka-quien-b .ka-campana svg{width:15px; height:15px}
}

/* ───────────── 3.201.3 · El pie de la barra, de a dos ─────────────
   Manoroz: «en vez de tener cuatro así, juntamos en una misma línea de a dos».
   Arriba Ajustes y el día o la noche (el solecito de día, la luna de noche);
   abajo el sonido y cerrar sesión. Se gana alto para el menú de arriba. */
.ka-yo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.ka-yo .ka-yo-ajustes,.ka-yo #ka-sonido,.ka-yo .ka-tema-form,.ka-yo .ka-salir-form{margin:0; min-width:0}
.ka-yo .ka-lado-derechos{grid-column:1 / -1}
.ka-yo .ka-yo-ajustes,.ka-yo .ka-tema,.ka-yo #ka-sonido,.ka-yo .ka-salir{
  width:100%; height:36px; padding:0 9px; gap:7px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:flex-start;
  font-size:12px; line-height:1; border-radius:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-yo .kao-ico{width:15px; height:15px; flex:none}
.ka-yo .ka-tema-t,.ka-yo .ka-sonido-t,.ka-yo .ka-yo-ajustes .kao-t{overflow:hidden; text-overflow:ellipsis; min-width:0}
/* El ícono del tema: el sol de día, la luna de noche. */
.ka-tema-i{display:none; line-height:0; flex:none}
[data-tema="claro"] .ka-tema-sol{display:inline-flex}
:root:not([data-tema="claro"]) .ka-tema-luna{display:inline-flex}

/* ───────────── 3.201.5 · Ajustes → La clínica → Especialistas ───────────── */
.ka-esp-lista{display:flex; flex-direction:column; gap:10px; margin:12px 0}
.ka-esp{border-radius:14px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-esp > summary{list-style:none; display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer}
.ka-esp > summary::-webkit-details-marker{display:none}
.ka-esp-num{width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--oro-l); color:var(--oro-d); font-weight:600}
.ka-esp-quien{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.ka-esp-quien small{color:var(--sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ka-esp-acciones{display:flex; gap:6px; flex:none}
.ka-esp-acciones .ka-btn[disabled]{opacity:.35; cursor:default}
.ka-esp-quitar{color:var(--alerta)}
.ka-esp > .ka-cl-grid{padding:4px 14px 16px}
.ka-esp textarea{width:100%; box-sizing:border-box; font:inherit; resize:vertical}
.ka-esp-agregar{display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 18px; border-radius:12px;
  border:1.5px dashed var(--oro-m, var(--oro)); background:var(--papel-suave); color:var(--oro-d); font:inherit; font-weight:600; cursor:pointer}
.ka-esp .ka-cl-ancho{grid-column:1 / -1}

/* ───────────── 3.202.0 · Todo construible ───────────── */
/* Sin WhatsApp conectado: el aviso encima del cuadro de escribir. */
.ka-sin-conexion{margin:0 0 8px; padding:8px 12px; border-radius:10px; background:var(--info-l); color:var(--tinta); font-size:12.5px; line-height:1.45}
/* Ficha: «Ver todo y corregir» con aire, debajo de «Anotar el pago». */
.ka-fr-corregir{display:inline-flex; margin-top:10px}
/* El selector de emoji: la carita y su cajita. */
.ka-emo{display:inline-flex; align-items:center}
.ka-emo-btn{width:44px; height:42px; font-size:20px; line-height:1; border-radius:10px; border:1px solid var(--linea); background:var(--sup); cursor:pointer}
.ka-emo-btn:focus-visible{outline:2px solid var(--oro); outline-offset:2px}
.ka-emo-caja{position:absolute; z-index:9999; padding:10px; border-radius:14px; background:var(--sup); box-shadow:0 10px 30px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:8px}
.ka-emo-caja[hidden]{display:none}
.ka-emo-buscar{width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:9px 11px; border-radius:10px; border:1px solid var(--linea)}
.ka-emo-rejilla{display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:210px; overflow:auto}
.ka-emo-rejilla button{font-size:21px; height:36px; border:0; border-radius:8px; background:transparent; cursor:pointer}
.ka-emo-rejilla button:hover,.ka-emo-rejilla button:focus-visible{background:var(--chip)}
.ka-emo-quitar{align-self:flex-start; font:inherit; font-size:12.5px; border:0; background:transparent; color:var(--sec); cursor:pointer; padding:4px 2px}
/* Colores para escoger como muestras (los de Google, para que la agenda de la doctora se vea igual). */
.ka-colores-op{display:flex; flex-wrap:wrap; gap:6px}
.ka-colores-op label{position:relative; cursor:pointer}
.ka-colores-op input{position:absolute; opacity:0; width:1px; height:1px}
.ka-colores-op i{display:block; width:28px; height:28px; border-radius:8px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ka-colores-op input:checked + i{box-shadow:0 0 0 2px var(--sup), 0 0 0 4px var(--tinta)}
.ka-colores-op input:focus-visible + i{outline:2px solid var(--oro); outline-offset:3px}
/* Ajustes → Agenda → Tipos de cita, en tarjetas. */
.ka-tc2-lista{display:flex; flex-direction:column; gap:10px; margin:10px 0}
.ka-tc2-fila{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-tc2-cab{display:flex; align-items:center; gap:10px}
.ka-tc2-nombre{flex:1 1 auto; min-width:0; font:inherit; font-size:15px; font-weight:600; padding:10px 12px; border-radius:10px; border:1px solid var(--linea)}
.ka-tc2-num,.ka-tc2-fijo{font-size:12px; white-space:nowrap}
.ka-tc2-cab .ka-btn[disabled]{opacity:.35; cursor:default}
/* Cuerpo de la tarjeta: cada columna es «rótulo arriba + control de 42px», todos alineados arriba. */
.ka-tc2-cuerpo{display:grid; grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start}
.ka-tc2-cuerpo > *{min-width:0}
.ka-tc2-c{display:flex; flex-direction:column; gap:6px; margin:0}
.ka-tc2-et{font-size:12px; font-weight:500; line-height:16px; color:var(--sec)}
.ka-tc2-cuerpo input[type=text],.ka-tc2-cuerpo select{box-sizing:border-box; width:100%; height:42px; font:inherit; font-size:14px; padding:0 12px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-tc2-caja{box-sizing:border-box; min-height:42px; display:flex; align-items:center; padding:6px 10px; border-radius:10px; border:1px solid var(--linea); background:var(--sup)}
.ka-tc2-caja .ka-colores-op{gap:5px}
.ka-tc2-caja .ka-colores-op i{width:16px; height:16px; border-radius:5px}
.ka-tc2-caja .ka-colores-op input:checked + i{box-shadow:0 0 0 2px var(--sup), 0 0 0 3.5px var(--tinta)}
.ka-tc2-hace{box-sizing:border-box; min-height:42px; display:flex; align-items:center; padding:6px 12px; border-radius:10px; background:var(--chip); color:var(--sec); font-size:12.5px; line-height:1.35}
.ka-tc2-cab{min-height:42px}
.ka-tc2-cab .ka-btn.ka-mini{height:42px; min-width:42px; padding:0 12px}
.ka-tc2-nombre{height:42px; box-sizing:border-box; padding:0 12px}
@media (max-width:1100px){ .ka-tc2-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ka-tc2-color{grid-column:1 / -1} }
@media (max-width:640px){
	.ka-tc2-cuerpo{grid-template-columns:minmax(0,1fr)}
	.ka-tc2-cab{flex-wrap:wrap}
	.ka-tc2-nombre{flex-basis:calc(100% - 54px)}
	.ka-tc2-caja .ka-colores-op i{width:22px; height:22px; border-radius:6px}
	.ka-tc2-caja .ka-colores-op{gap:7px}
}
@media (pointer:coarse){ .ka-tc2-cuerpo input[type=text],.ka-tc2-cuerpo select,.ka-tc2-nombre{font-size:16px} }

/* 3.202.0 · «Con quién es la cita» */
.ka-con-quien{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;font-size:13px;color:var(--sec)}
.ka-con-quien select{font:inherit;font-size:15px;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta);max-width:360px}
.ka-imp-con{font:inherit;font-size:14px;width:100%;min-height:42px;padding:8px 10px;border-radius:10px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta);margin-bottom:6px}
.ka-emo-btn.ka-emo-vacio{filter:grayscale(1); opacity:.4}
.ka-emo-btn.ka-emo-vacio:hover{opacity:.8}
.ka-tc2-cab .ka-tc-arch{display:inline-flex; flex-direction:row; align-items:center; gap:6px; font-size:12.5px; color:var(--sec); white-space:nowrap; cursor:pointer}
.ka-tc2-cab .ka-tc-arch input{margin:0; width:16px; height:16px}
/* La cabecera de cada tarjeta termina siempre en el mismo sitio: n.º, flecha y «fijo/Archivar/Quitar» con ancho fijo. */
.ka-tc2-cab .ka-tc2-num{width:44px; text-align:right}
.ka-tc2-cab > :last-child{flex:0 0 96px; display:inline-flex; justify-content:flex-start; align-items:center}
.ka-tc2-cab .ka-esp-quitar{width:96px; justify-content:center}
@media (max-width:640px){
	.ka-tc2-cab .ka-tc2-num{margin-left:54px; width:auto; text-align:left}
	.ka-tc2-cab > :last-child{flex:0 0 auto; margin-left:4px}
}
.ka-tc2-cab .ka-tc-arch{margin:0; height:42px}
/* El gotero: el cuadrito del final, sin color y con el ícono de muestra; con color, el ícono queda encima. */
.ka-colores-libre i{display:grid; place-items:center; background:var(--c, transparent); box-shadow:inset 0 0 0 1px var(--linea); color:var(--sec)}
.ka-colores-libre:not(.con-color) i{background:repeating-linear-gradient(45deg, transparent 0 3px, var(--linea2) 3px 4px)}
.ka-colores-libre.con-color i{color:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ka-colores-libre.con-color i svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.ka-colores-libre i svg{width:11px; height:11px}
.ka-colores-pick{position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; border:0; cursor:pointer}
/* 3.202.0 · Una etiqueta con su color (Ajustes → Procedimientos y etiquetas). */
.ka-etq-puesta[style*="--etq"]{box-shadow:inset 3px 0 0 var(--etq)}
/* 3.202.0 · Con el cajón de «Antes y después» o «Cotización» abierto, el botón del Agente no tapa la equis de cerrar. */
body:has(.ka-lateral) .ka-ag-pill{display:none}

/* ───────────── 3.202.2 · Médicos y especialistas ↔ áreas de la agenda ───────────── */
.ka-ph h2 .ka-ph-sub{margin-left:6px; font-size:13px; font-weight:400; letter-spacing:0; color:var(--sec)}
.ka-enlace-otro{margin:6px 0 14px; padding:10px 14px; border-radius:10px; background:var(--chip); font-size:13px; line-height:1.45; color:var(--tinta)}
.ka-enlace-otro a{color:var(--oro-d, var(--oro)); font-weight:600}
.ka-cl-de{font-weight:400; color:var(--sec)}
.ka-esp-punto{display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--c); vertical-align:1px}
.ka-sd-cuerpo{grid-template-columns:minmax(0,.6fr) minmax(0,.6fr) minmax(0,1.6fr) minmax(0,1fr)}
.ka-sd-cuerpo.ka-sd-con-lugar{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,.9fr)}
.ka-aj-contenido .ka-aj-campos .ka-sd-color{display:block; width:100%}
.ka-sd-atienden{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:42px}
.ka-sd-persona{padding:6px 10px; border-radius:999px; background:var(--chip); font-size:12.5px; color:var(--tinta)}
@media (max-width:1100px){ .ka-sd-cuerpo,.ka-sd-cuerpo.ka-sd-con-lugar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ka-sd-cuerpo > .ka-sd-ancha{grid-column:1 / -1} }
@media (max-width:640px){ .ka-sd-tarjeta .ka-tc2-cab{flex-wrap:wrap; row-gap:4px} .ka-sd-tarjeta .ka-tc2-cab > :last-child{flex:0 0 calc(100% - 54px); margin-left:54px; height:28px} .ka-sd-cuerpo > .ka-tc2-c:not(:nth-child(-n+2)){grid-column:1 / -1} }
/* 3.202.2 · Los rótulos que no son <label> (Color, Quién atiende, En el CRM) se ven igual que los demás. */
.ka-aj-contenido .ka-aj-campos .ka-tc2-c > .ka-tc2-et,.ka-aj-contenido .ka-aj-campos label > .ka-tc2-et{font-size:13px; font-weight:500; line-height:1.35; color:var(--tinta)}
.ka-aj-contenido .ka-aj-campos .ka-tc2-cuerpo > div.ka-tc2-c{display:flex; flex-direction:column; gap:8px}
.ka-aj-contenido .ka-aj-campos .ka-tc2-cuerpo .ka-tc2-caja{min-height:44px; box-sizing:border-box}
.ka-aj-contenido .ka-aj-campos .ka-sd-cuerpo .ka-sd-color{height:44px}
/* 3.202.2 · El subtítulo chico del título va en la misma línea (base con base) y, en el teléfono, debajo. */
.ka-ph h2:has(> .ka-ph-sub){align-items:baseline; flex-wrap:wrap; column-gap:0; row-gap:2px}
@media (max-width:640px){ .ka-ph h2 > .ka-ph-sub{flex-basis:100%; margin-left:0} }
/* La cabecera de cada especialista en el teléfono: el título no se parte y los botones son más angostos. */
.ka-esp-quien b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:640px){ .ka-esp > summary{gap:8px; padding:12px} .ka-esp-num{width:28px; height:28px; font-size:13px} .ka-esp-quien b{font-size:15px} .ka-esp-acciones{gap:4px} .ka-esp-acciones .ka-btn.ka-mini{height:38px; padding:0 10px; min-width:38px} }
/* Los desplegables de la ficha del especialista miden lo mismo que los campos de texto. */
.ka-cl-especialistas details select{height:44px; box-sizing:border-box}

/* ───────────── 3.202.0 · Ajustes → Cotización ─────────────
   Tres columnas en el computador (tipos · el tipo · así va quedando), una sola
   en el teléfono. Rótulo arriba y control de 42 px, todo alineado arriba. */
.ka-ct-tres{margin-top:14px; display:grid; grid-template-columns:220px minmax(0,1fr) 280px; gap:18px; align-items:start}
.ka-ct-tres > *{min-width:0}
.ka-ct-rot{display:block; margin:0 0 8px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-ct-tipos{display:flex; flex-direction:column; gap:8px}
.ka-ct-lista{display:flex; flex-direction:column; gap:6px}
.ka-ct-tipo{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:0; border-radius:12px; background:var(--chip); color:var(--tinta); font:inherit; font-size:14px; text-align:left; cursor:pointer}
.ka-ct-tipo span:empty{display:none}
.ka-ct-tipo span{font-size:18px; line-height:1; min-width:18px}
.ka-ct-tipo b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-ct-tipo.on{background:var(--oro); color:#fff}
.ka-ct-tipo.ka-ct-archivado b{opacity:.55; text-decoration:line-through}
.ka-ct-agregar{margin-top:4px; min-height:44px; padding:8px 14px; font-size:14px; border-radius:12px}
.ka-ct-agregar svg{width:16px; height:16px}
.ka-ct-nota{font-size:12.5px; line-height:1.45}
.ka-ct-panel{display:flex; flex-direction:column; gap:18px; padding:18px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-ct-cab{display:grid; grid-template-columns:auto minmax(0,1fr) 170px; gap:12px; align-items:start}
.ka-ct-campo{display:flex; flex-direction:column; gap:6px; margin:0; font-size:12px; font-weight:500; line-height:16px; color:var(--sec)}
.ka-ct-panel input[type=text],.ka-ct-panel select,.ka-ct-panel textarea{box-sizing:border-box; width:100%; font:inherit; font-size:14px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-ct-panel input[type=text],.ka-ct-panel select{height:42px; padding:0 12px}
.ka-ct-panel input,.ka-ct-panel select,.ka-ct-panel textarea{margin:0}
.ka-ct-panel textarea{padding:10px 12px; line-height:1.45; resize:vertical; min-height:64px}
.ka-ct-parte{display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--linea2)}
.ka-ct-parte > b{font-size:14.5px; font-weight:600; color:var(--tinta)}
.ka-ct-parte > .ka-tenue{font-size:12.5px; line-height:1.45}
.ka-ct-bloques,.ka-ct-conceptos{display:flex; flex-direction:column; gap:8px}
.ka-ct-fila{display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:8px; align-items:center}
.ka-ct-fila-c{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr) 42px}
.ka-ct-x{width:42px; height:42px; border:0; border-radius:10px; background:transparent; color:var(--sec); font-size:20px; line-height:1; cursor:pointer}
.ka-ct-mas{align-self:flex-start; min-height:40px; padding:8px 14px; border-radius:10px; border:1.5px dashed var(--linea); background:transparent; color:var(--tinta); font:inherit; font-size:13px; font-weight:500; cursor:pointer}
.ka-ct-pie-tipo{display:flex; justify-content:flex-end; align-items:center; padding-top:12px; border-top:1px solid var(--linea2)}
.ka-ct-pie-tipo .ka-tc-arch{display:inline-flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--sec); cursor:pointer}
@media (hover:hover) and (pointer:fine){
	.ka-ct-tipo:not(.on):hover{background:var(--linea2)}
	.ka-ct-x:hover{background:var(--chip); color:var(--tinta)}
	.ka-ct-mas:hover{border-color:var(--oro)}
}
/* La hoja de muestra: proporción carta, letra chica, con el logo de la clínica. */
.ka-ct-vista{position:sticky; top:16px}
.ka-ct-hoja{display:flex; flex-direction:column; gap:8px; min-height:330px; padding:16px; border-radius:10px; background:#fff; color:#3D4A55; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08); font-size:10.5px; line-height:1.4}
.ka-ct-hoja-cab{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ka-ct-hoja-cab img{max-height:22px; max-width:110px; object-fit:contain}
.ka-ct-hoja-cab b{font-size:11px; color:#1F2A33}
.ka-ct-hoja-marca{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-ct-hoja-para b,.ka-ct-hoja-tit{color:#1F2A33}
.ka-ct-hoja-tit{font-size:12px}
.ka-ct-hoja-grupo{display:block; margin-top:4px; font-style:normal; font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8A949C}
.ka-ct-hoja-linea{display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid #EEE7DD}
.ka-ct-hoja-total{display:flex; justify-content:space-between; padding-top:6px; border-top:1px solid #D9CBB9; font-weight:600; color:#1F2A33}
.ka-ct-hoja-bloques{padding:6px 8px; border-radius:6px; background:#FAF7F2}
.ka-ct-hoja-bloques:empty{display:none}
.ka-ct-hoja-vence{margin-top:auto; color:#5B6670}
/* Se acomoda al ancho que de verdad tiene Ajustes (no al de la pantalla). */
.ka-ct{container-type:inline-size}
@container (max-width:1040px){
	.ka-ct-tres{grid-template-columns:minmax(0,1fr) 260px}
	.ka-ct-tipos{grid-column:1 / -1}
	.ka-ct-lista{flex-direction:row; flex-wrap:wrap}
	.ka-ct-tipo{flex:0 0 auto}
	.ka-ct-tipos{flex-direction:row; flex-wrap:wrap; align-items:center}
	.ka-ct-tipos .ka-ct-rot{width:100%}
	.ka-ct-agregar{margin-top:0}
	.ka-ct-tipos .ka-ct-nota{width:100%; margin:0}
}
@container (max-width:700px){
	.ka-ct-tres{grid-template-columns:minmax(0,1fr)}
	.ka-ct-lista{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; overscroll-behavior-x:contain; max-width:100%}
	.ka-ct-cab{grid-template-columns:auto minmax(0,1fr)}
	.ka-ct-cab > :last-child{grid-column:1 / -1}
	.ka-ct-fila-c{grid-template-columns:minmax(0,1fr) 42px}
	.ka-ct-fila-c > :nth-child(2),.ka-ct-fila-c > :nth-child(3){grid-column:1 / 2}
	.ka-ct-fila-c > .ka-ct-x{grid-row:1; grid-column:2}
	.ka-ct-fila-c{padding:10px; border-radius:12px; background:var(--chip)}
	.ka-ct-conceptos{gap:10px}
	.ka-ct-panel{padding:14px}
	.ka-ct-vista{position:static}
}
@media (pointer:coarse){ .ka-ct-panel input[type=text],.ka-ct-panel select,.ka-ct-panel textarea{font-size:16px} }

/* ───────────── 3.202.0 · Ajustes → Procedimientos y etiquetas ─────────────
   Una rejilla de columnas fijas: el encabezado y cada renglón comparten las
   mismas medidas, así todo queda en línea. Controles de 42 px. */
.ka-pr,.ka-et{container-type:inline-size}
.ka-pr-buscar input{box-sizing:border-box; width:100%; max-width:320px; height:42px; margin:0 0 10px; padding:0 12px; font:inherit; font-size:14px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-pr-cab,.ka-pr-fila{display:grid; grid-template-columns:44px minmax(0,1.6fr) minmax(0,.9fr) 52px minmax(0,1fr) 120px; gap:10px; align-items:center}
.ka-pr-cab{padding:0 12px 6px; font-size:12px; font-weight:500; color:var(--sec)}
.ka-pr-lista,.ka-et-lista{display:flex; flex-direction:column; gap:8px; margin:0 0 12px}
.ka-pr-fila{padding:8px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-pr-fila > *{min-width:0}
.ka-pr-fila input[type=text],.ka-pr-fila select,.ka-et-fila input[type=text]{box-sizing:border-box; width:100%; height:42px; min-height:0; margin:0; padding:0 12px; font:inherit; font-size:14px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-pr-fila select:disabled{opacity:.5}
.ka-pr-fam{display:flex; align-items:center; height:42px; padding:0 12px; border-radius:10px; background:var(--chip); color:var(--sec); font-size:13px}
.ka-pr-color{position:relative; display:block; width:52px; height:42px; margin:0; border-radius:10px; border:1px solid var(--linea); overflow:hidden; cursor:pointer}
.ka-pr-color input{position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); padding:0; border:0; cursor:pointer}
.ka-pr-color.ka-sin-color{background:repeating-linear-gradient(45deg, transparent 0 4px, var(--linea2) 4px 5px)}
.ka-pr-color.ka-sin-color input{opacity:0}
.ka-pr-fila .ka-tc-arch,.ka-et-cab .ka-tc-arch{display:inline-flex; align-items:center; gap:8px; height:42px; margin:0; font-size:13px; color:var(--sec); white-space:nowrap; cursor:pointer}
.ka-pr-fila .ka-esp-quitar,.ka-et-cab .ka-esp-quitar{height:42px}
.ka-pr-archivado .ka-pr-nombre{text-decoration:line-through; opacity:.6}
.ka-et-lista{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.ka-et-fila{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-et-cab{display:grid; grid-template-columns:44px minmax(0,1fr) 52px auto; gap:8px; align-items:center}
.ka-et-para{font-size:13px !important; color:var(--sec) !important}
.ka-et-anclada{font-size:12px}
@container (max-width:760px){
	.ka-pr-cab{display:none}
	.ka-pr-fila{grid-template-columns:44px minmax(0,1fr) auto; row-gap:8px}
	.ka-pr-fila > .ka-pr-color{justify-self:end}
	.ka-pr-fila > .ka-pr-nombre{grid-column:2 / 4}
	.ka-pr-fila > select[data-ka-pr-familia],.ka-pr-fila > .ka-pr-fam{grid-column:1 / 3}
	.ka-pr-fila > select[data-ka-pr-meses]{grid-column:1 / 3}
	.ka-pr-fila > .ka-tc-arch,.ka-pr-fila > .ka-esp-quitar{grid-column:3; justify-self:end}
	.ka-et-lista{grid-template-columns:minmax(0,1fr)}
	.ka-pr-buscar input{max-width:none}
}
@media (pointer:coarse){ .ka-pr-fila input[type=text],.ka-pr-fila select,.ka-et-fila input[type=text],.ka-pr-buscar input{font-size:16px} }
.ka-tc2-cab .ka-tc-arch,.ka-ct-pie-tipo .ka-tc-arch,.ka-pr-fila .ka-tc-arch,.ka-et-cab .ka-tc-arch{padding:0}
.ka-ct-pie-tipo .ka-tc-arch input,.ka-pr-fila .ka-tc-arch input,.ka-et-cab .ka-tc-arch input{margin:0; width:16px; height:16px}
.ka-et-lista,.ka-pr-buscar{margin-top:12px}

/* ───────────── 3.202.0 · Cargos y lo que puede cada uno ───────────── */
.ka-cg-tabla-env{overflow-x:auto; margin:12px 0 8px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linea2); overscroll-behavior-x:contain}
.ka-cg-tabla{width:100%; border-collapse:collapse; font-size:13px}
.ka-cg-tabla th,.ka-cg-tabla td{padding:10px 12px; border-bottom:1px solid var(--linea2); text-align:center; white-space:nowrap}
.ka-cg-tabla thead th{font-size:12px; font-weight:600; color:var(--sec); background:var(--chip)}
.ka-cg-tabla tbody th{text-align:left; font-weight:500; color:var(--tinta); white-space:normal; min-width:220px}
.ka-cg-tabla tr:last-child th,.ka-cg-tabla tr:last-child td{border-bottom:0}
.ka-cg-tabla td.si{color:var(--tinta); font-weight:600}
.ka-cg-tabla td.no{color:var(--sec); opacity:.6}
.ka-cg-t{display:block; margin:16px 0 8px; font-size:14.5px}
.ka-cg-lista{display:flex; flex-direction:column; gap:10px; margin-bottom:12px}
.ka-cg-fila{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-cg-cab{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:12px; align-items:end}
.ka-cg-campo{display:flex; flex-direction:column; gap:6px; margin:0; font-size:12px; font-weight:500; color:var(--sec)}
.ka-cg-campo input{box-sizing:border-box; width:100%; height:42px; margin:0; padding:0 12px; font:inherit; font-size:14px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-cg-cab .ka-esp-quitar{height:42px}
.ka-cg-permisos{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 14px}
.ka-cg-p{display:flex; align-items:center; gap:8px; min-height:34px; margin:0; font-size:13px; color:var(--tinta); cursor:pointer}
.ka-cg-p input{margin:0; width:16px; height:16px; flex:none}
@media (max-width:640px){ .ka-cg-cab{grid-template-columns:1fr} }
@media (pointer:coarse){ .ka-cg-campo input{font-size:16px} }
.ka-cg-tabla thead th:first-child{text-align:left}
.ka-cg-p input,.ka-an-check input,.ka-alta-op input{accent-color:var(--oro)}
.ka-cg-tabla tbody th,.ka-cg-tabla thead th:first-child{position:sticky; left:0; z-index:1; background:var(--sup)}
.ka-cg-tabla thead th:first-child{background:var(--chip)}
@media (max-width:640px){ .ka-cg-tabla tbody th{min-width:170px} }

/* 3.202.0 · Dentro de Ajustes, todo label va en columna (rótulo arriba). Las casillas
   de marcar van en fila: la casilla y su texto al lado, alineados a la izquierda. */
.ka-aj-contenido .ka-aj-campos label.ka-cg-p,
.ka-aj-contenido .ka-aj-campos label.ka-tc-arch,
.ka-aj-contenido .ka-aj-campos label.ka-an-check,
.ka-aj-contenido .ka-aj-campos label.ka-alta-op{flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; gap:10px}
.ka-aj-contenido .ka-aj-campos label.ka-cg-p > span:first-child,
.ka-aj-contenido .ka-aj-campos label.ka-tc-arch > span,
.ka-aj-contenido .ka-aj-campos label.ka-an-check > span{font-size:13.5px; font-weight:400; color:var(--tinta)}
.ka-aj-contenido .ka-aj-campos label.ka-cg-p{align-items:flex-start; padding:8px 10px; border-radius:10px; background:var(--chip); line-height:1.35}
.ka-aj-contenido .ka-aj-campos label.ka-cg-p input{margin-top:1px}
.ka-aj-contenido .ka-aj-campos label.ka-pr-color{display:block}
.ka-cg-permisos{gap:8px}

/* ───────────── 3.202.0 · Antes y después ───────────── */
.ka-an{container-type:inline-size}
.ka-an-dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; margin-top:12px}
.ka-an-fotos{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ka-an-foto{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3 / 4; margin:0; border-radius:14px; border:1.5px dashed var(--linea); background:var(--chip); overflow:hidden; cursor:pointer; text-align:center}
.ka-an-foto.con-foto{border-style:solid}
.ka-an-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ka-an-foto-vacia{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px; color:var(--sec)}
.ka-an-foto-vacia b{font-size:14px; color:var(--tinta)}
.ka-an-foto-vacia small{font-size:12px; line-height:1.35}
.ka-an-foto.con-foto .ka-an-foto-vacia{display:none}
.ka-an-foto input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.ka-an-datos{display:flex; flex-direction:column; gap:12px}
.ka-an-par{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ka-an-campo{display:flex; flex-direction:column; gap:6px; margin:0; font-size:12px; font-weight:500; line-height:16px; color:var(--sec)}
.ka-an-campo input[type=text],.ka-an-campo input[type=tel],.ka-an-campo select{box-sizing:border-box; width:100%; height:42px; margin:0; padding:0 12px; font:inherit; font-size:14px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-an-campo input[type=file]{font-size:13px}
.ka-an-check{display:flex; align-items:center; gap:10px; min-height:42px; margin:0; padding:0 12px; border-radius:10px; background:var(--chip); font-size:13.5px; color:var(--tinta); cursor:pointer}
.ka-an-check input{margin:0; width:16px; height:16px}
.ka-an-nota{font-size:12.5px; margin:0}
.ka-an-chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.ka-an-chips > *{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px; border:0; border-radius:999px; background:var(--chip); color:var(--tinta); font:inherit; font-size:13px; text-decoration:none; cursor:pointer}
.ka-an-chips > * b{font-weight:600; color:var(--sec)}
.ka-an-chips > .on{background:var(--oro); color:#fff}
.ka-an-chips > .on b{color:inherit; opacity:.8}
.ka-an-chips-cajon{margin:0 0 14px}
.ka-an-rejilla{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.ka-an-caso{display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--linea2); background:var(--sup)}
.ka-an-caso b{font-size:14px}
.ka-an-caso .ka-tenue{font-size:12.5px}
.ka-an-par-fotos{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.ka-an-par-fotos figure{position:relative; margin:0; aspect-ratio:3 / 4; border-radius:10px; overflow:hidden; background:var(--chip)}
.ka-an-par-fotos img{width:100%; height:100%; object-fit:cover}
.ka-an-par-fotos figcaption{position:absolute; left:6px; bottom:6px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:11px}
.ka-an-pie{display:flex; flex-wrap:wrap; gap:6px}
.ka-an-tabla > summary{cursor:pointer; font-weight:600; font-size:14px; padding:4px 0}
.ka-an-tabla[open] > summary{margin-bottom:12px}
@container (max-width:720px){
	.ka-an-dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){ .ka-an-par{grid-template-columns:1fr} }
@media (pointer:coarse){ .ka-an-campo input[type=text],.ka-an-campo input[type=tel],.ka-an-campo select{font-size:16px} }
.ka-an .ka-an-dos{margin-top:14px}

/* 3.202.0 · Equipo: la contraseña al crear la cuenta. */
.ka-alta-clave{margin:12px 0 0; padding:12px 14px; border:1px solid var(--linea2); border-radius:12px}
.ka-alta-clave legend{padding:0 6px; font-size:12px; font-weight:500; color:var(--sec)}
.ka-alta-op{display:flex; align-items:center; gap:8px; min-height:36px; margin:0; font-size:13.5px; color:var(--tinta); cursor:pointer}
.ka-alta-op input{margin:0}
.ka-alta-yo{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.ka-alta-fila{display:flex; gap:8px}
.ka-alta-fila input{flex:1 1 auto; min-width:0; height:42px; box-sizing:border-box; padding:0 12px; font:inherit; font-size:15px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-alta-fila .ka-btn{height:42px}
.ka-clave-una-vez{display:flex; flex-direction:column; gap:6px; margin:0 0 14px; padding:14px 16px; border-radius:12px; background:var(--info-l); color:var(--tinta); font-size:14px}
.ka-clave-una-vez code{font-size:15px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; padding:2px 6px; border-radius:6px; background:var(--sup)}
.ka-clave-una-vez small{color:var(--sec)}
@media (pointer:coarse){ .ka-alta-fila input{font-size:16px} }
.ka-clave-form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end}
.ka-clave-form label{display:flex; flex-direction:column; gap:6px; margin:0; font-size:12px; font-weight:500; color:var(--sec)}
.ka-clave-form input{box-sizing:border-box; width:100%; height:42px; padding:0 12px; font:inherit; font-size:15px; border-radius:10px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta)}
.ka-clave-form .ka-btn{height:42px}
.ka-panel-aviso{box-shadow:inset 0 0 0 2px var(--oro)}
@media (max-width:640px){ .ka-clave-form{grid-template-columns:1fr} }
@media (pointer:coarse){ .ka-clave-form input{font-size:16px} }

/* ───────────── 3.202.2 · Todo en línea ─────────────
   Regla general de los formularios: en una fila, los campos terminan a la misma
   altura aunque un rótulo ocupe dos renglones o tenga una ayuda debajo. El rótulo
   queda arriba y el campo baja hasta la línea de los demás. */
/* Solo cuando ninguna celda tiene algo debajo del campo (una ayuda, una casilla o un
   grupo): si no, esa celda estiraría la fila y bajaría a los demás. */
:is(.ka-form,.ka-cl-grid,.ka-aj-ag-fila):not(:has(> label > :is(input,select) ~ *, > fieldset, > label > input[type=checkbox], > label > input[type=radio], > div, > p)){align-items:stretch}
:is(.ka-form,.ka-cl-grid,.ka-aj-ag-fila):not(:has(> label > :is(input,select) ~ *, > fieldset, > label > input[type=checkbox], > label > input[type=radio], > div, > p)) > label{display:flex; flex-direction:column}
:is(.ka-form,.ka-cl-grid,.ka-aj-ag-fila):not(:has(> label > :is(input,select) ~ *, > fieldset, > label > input[type=checkbox], > label > input[type=radio], > div, > p)) > label > :is(input,select):last-child{margin-top:auto}
/* La ayuda chica debajo de un campo no va en mayúsculas como el rótulo. */
.ka-form label > small{text-transform:none; letter-spacing:0; font-size:11.5px; line-height:1.45}

/* Los campos de número, correo, teléfono, enlace y hora se ven como los de texto.
   :where() no pesa nada: cualquier estilo propio de una pantalla sigue mandando. */
:where(input[type=number],input[type=email],input[type=tel],input[type=url],input[type=time]){
	box-sizing:border-box; width:100%; border:1px solid var(--linea); border-radius:11px; padding:11px 14px; font:inherit; font-size:14px;
	background:var(--sup2); color:var(--tinta); font-weight:400; text-transform:none; letter-spacing:0}
/* Junto a un cuadro de texto grande no se baja: queda arriba, a la altura de los cuadros. */
.ka-banco-nuevo.ka-banco-nuevo .ka-form.ka-form.ka-form > label:has(> input[name=ficha]) > input[name=ficha]:last-child{margin-top:0}
/* Una casilla va al lado de su texto, alineada a la izquierda, nunca encima (Nueva paciente, Equipo…). */
.ka-form label:has(> input[type=checkbox]),.ka-form label:has(> input[type=radio]),
.ka-form fieldset label{flex-direction:row; align-items:flex-start; gap:9px; text-align:left; letter-spacing:0; text-transform:none; font-size:13px; color:var(--tinta)}
.ka-form label > input[type=checkbox],.ka-form label > input[type=radio]{flex:none; width:16px; height:16px; margin:1px 0 0}
.ka-form fieldset label{display:inline-flex; align-items:center; margin:0 14px 6px 0}
.ka-form fieldset label > input{margin:0}
/* Ficha → Cotizaciones: los botones de la hoja bajan de renglón y «No era real» abre
   dentro de su columna, sin salirse de la tarjeta. */
.ka-cots-t{width:100%; table-layout:auto}
.ka-cots-t .ka-cot-hoja{white-space:normal}
.ka-cots-t .ka-cot-hoja form,.ka-cots-t .ka-cot-hoja > .ka-btn{margin:0 4px 6px 0}
.ka-cot-limpiar summary{white-space:nowrap}
.ka-cot-limpiar[open] form,.ka-cot-limpiar[open] p{width:180px; max-width:100%}
.ka-cot-limpiar input[type="text"]{min-width:0; box-sizing:border-box}
.ka-cot-limpiar form .ka-btn{white-space:normal; text-align:left}
/* Ficha → Procedimientos que se ha hecho: el botón «Marcar» mide lo mismo que la fecha. */
.ka-hizo-poner .ka-btn{min-height:41px; box-sizing:border-box}
.ka-cots-t .ka-cot-hoja .ka-btn{white-space:nowrap}
@media (min-width:861px){ .ka-cots-t td.ka-cot-hoja:has(form){display:flex; flex-direction:column; align-items:stretch; gap:6px} .ka-cots-t .ka-cot-hoja form{display:block; margin:0} .ka-cots-t .ka-cot-hoja .ka-btn{width:100%; margin:0} }
@media (max-width:860px){ .ka-cot-limpiar[open] form,.ka-cot-limpiar[open] p{width:auto} }
/* Ficha → Estado: «¿Ya era paciente?» en su propio bloque, con el desplegable y «Cambiar» en una sola fila. */
.ka-ya-ficha{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--linea2)}
.ka-ya-ficha > .ka-pv-tag{grid-column:1 / -1; justify-self:start}
.ka-ya-ficha > select{margin:0; min-width:0}
.ka-ya-ficha > .ka-btn{height:100%; min-height:42px; margin:0; padding:0 16px; font-size:13px}
.ka-llego-ficha{padding-top:10px; border-top:1px solid var(--linea2)}
/* Equipo → Empezar de cero: el título y su explicación se leen de corrido, sin partirse en dos columnas. */
.ka-soltar > summary{display:block}
.ka-soltar > summary > *{display:inline}
/* Los códigos largos (Enlaces, Conectores) bajan de renglón en vez de salirse de la pantalla. */
code.ka-codigo{overflow-wrap:anywhere; word-break:break-word; white-space:normal}
/* Los campos para subir archivos nunca son más anchos que su caja. */
input[type=file]{max-width:100%; box-sizing:border-box}
/* Sesiones: el botón mide lo mismo que el desplegable de al lado. */
.ka-acc-fila .ka-btn{min-height:44px; box-sizing:border-box}
.ka-soltar > summary::before{display:inline-block; margin-right:8px}
.ka-ge-como code.ka-codigo{display:block; margin:8px 0; padding:10px 12px; border-radius:10px; background:var(--sup2); font-size:12.5px; line-height:1.5}
.ka-cg-tabla-env{min-width:0; max-width:100%; box-sizing:border-box}
/* Un bloque de Ajustes nunca es más ancho que su tarjeta (una tabla ancha se desplaza por dentro). */
:where(.ka-aj-campos){grid-template-columns:minmax(0,1fr)}
/* Tutoriales: en el teléfono la tarjeta mide lo que mide la pantalla (330 px no caben). */
.ka-tut-lista{grid-template-columns:repeat(auto-fill, minmax(min(330px,100%), 1fr))}
/* Inicio: un rótulo largo («Agendamientos del mes») baja de renglón dentro de su tarjeta. */
.ka-kpis-dia .ka-kpi-cab > .ka-l{min-width:0; overflow-wrap:break-word; hyphens:auto}
/* Equipo → Soltar la bandeja: la persona y su resumen ocupan el ancho; el campo y «Soltar» van debajo, en fila. */
.ka-soltar .ka-fila > div{flex:1 1 220px; min-width:0}
.ka-soltar .ka-fila > form.ka-enlinea{display:flex; gap:8px; align-items:center; flex:1 1 260px; min-width:0}
.ka-soltar .ka-fila > form.ka-enlinea input[type=text]{flex:1 1 auto; min-width:0; width:auto; min-height:44px; box-sizing:border-box}
.ka-soltar .ka-fila > form.ka-enlinea .ka-btn{flex:none; min-height:44px; box-sizing:border-box}
.ka-cg-permisos{grid-template-columns:repeat(auto-fill, minmax(min(260px,100%), 1fr))}
/* Embudo: la franja más angosta nunca es más chica que su cifra (con ventas grandes se salía). */
.ka-emb-fr{min-width:min(100%, 380px)}
/* 3.202.7 · El punto rojo, dentro de Ajustes, en la sección donde está el problema (a la derecha del nombre). */
.ka-aj-menu a .ka-aj-alerta{margin-left:auto; flex:none}
.ka-aj-menu a.on .ka-aj-alerta{box-shadow:0 0 0 2px #fff}
/* 3.202.9 · Conectores → Medición: el bloque «WhatsApp ↔ Meta». Si falta vincular, con el tono de aviso. */
.ka-capi-wa{margin:14px 0 10px; padding:12px 14px; border:1px solid var(--linea); border-radius:12px; background:var(--sup2)}
.ka-capi-wa.ka-capi-wa-falta{border-color:var(--warn); background:var(--warn-l)}
.ka-capi-wa > .ka-ge-bt{margin-top:0}
.ka-capi-wa form{margin:8px 0 6px}
.ka-capi-wa p:last-child{margin-bottom:0}
/* 3.202.14 · Calendario en el teléfono: un día de nombre largo («Miércoles 28 de octubre») baja de renglón en vez de salirse. */
@media (max-width: 900px){ .ka-cal-mando{min-width:0; flex-wrap:wrap} .ka-cal-mando .ka-cal-titulo{min-width:0; flex:1 1 auto; overflow-wrap:break-word} }

/* 3.203.2 · Ficha en el teléfono: el aviso de la ventana de 24 horas («Se le puede escribir · quedan 3 h») baja de renglón en vez de salirse de su caja. */
@media (max-width:900px){
  .ka-fi-dos .ka-ph{flex-wrap:wrap; row-gap:6px}
  .ka-fi-dos .ka-ph > .ka-chip{max-width:100%; white-space:normal}
}
/* ───────────── 3.202.16 · De dónde vino, en la conversación ─────────────
   Encima del mensaje con el que llegó: una tarjeta con el sello de su origen. En la
   lista, el mismo sello en chiquito. Ningún logo de terceros: nombre + ícono propio. */
.ka-origen{display:flex; gap:10px; align-items:stretch; margin:-2px 0 8px; padding:10px; border-radius:12px; background:var(--sup2); color:inherit; max-width:360px; box-shadow:inset 3px 0 0 var(--ka-o-c, var(--oro))}
.ka-burbuja a.ka-origen,.ka-burbuja a.ka-origen *{text-decoration:none}
.ka-origen-img{flex:none; width:58px; height:58px; border-radius:8px; object-fit:cover; background:var(--linea2)}
.ka-origen-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.ka-origen-t{font-weight:700; font-size:13.5px; line-height:1.3; color:var(--tinta)}
.ka-origen-l{font-size:12.5px; line-height:1.4; color:var(--sec)}
.ka-origen-l b{color:var(--tinta); font-weight:600}
.ka-origen-ref{font-size:11.5px; color:var(--tenue); font-variant-numeric:tabular-nums}
.ka-origen-ver{font-size:12.5px; font-weight:700; color:var(--tinta); margin-top:2px}
@media (hover:hover) and (pointer:fine){ a.ka-origen:hover .ka-origen-ver{text-decoration:underline} }
.ka-o-google{--ka-o-c:#4285F4} .ka-o-meta{--ka-o-c:#0082FB} .ka-o-ig{--ka-o-c:#DD2A7B} .ka-o-wa{--ka-o-c:#25D366} .ka-o-enlace{--ka-o-c:#C2410C} .ka-o-otro{--ka-o-c:#8A8F98}

/* El sello: nombre y su ícono, sobre el color de la marca (texto blanco con sombra suave). */
.ka-sello{display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:3px 9px 3px 7px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.4; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.28); font-style:normal; white-space:nowrap}
.ka-sello svg{width:13px; height:13px; flex:none}
.ka-sello .ka-sello-t{display:inline; margin:0; font-size:inherit}
.ka-sello-mini{font-size:10.5px; padding:2px 8px 2px 6px; gap:5px}
.ka-sello-mini svg{width:11px; height:11px}
.ka-g-google{background:linear-gradient(90deg,#34A853 0%,#34A853 8%,#FBBC04 20%,#FBBC04 46%,#1A73E8 60%,#1A73E8 100%)}
.ka-g-meta{background:linear-gradient(90deg,#0064E0,#0082FB)}
.ka-g-ig{background:linear-gradient(90deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4)}
.ka-g-wa{background:linear-gradient(90deg,#128C7E,#25D366)}
.ka-g-tiktok{background:#111}
.ka-g-yt{background:#E53935}
.ka-g-ref{background:#8B5CF6}
.ka-g-qr{background:#0F766E}
.ka-g-web{background:#B5651D}
.ka-g-enlace{background:#C2410C}
.ka-g-otro{background:#8A8F98}
/* Meta sin detalle: solo el contorno, porque llegó incompleto. */
.ka-sello.ka-sello-borde{background:transparent; color:#0064E0; text-shadow:none; box-shadow:inset 0 0 0 1.5px #0082FB}
[data-tema="oscuro"] .ka-sello.ka-sello-borde{color:#5AA9FF}
/* 3.202.17 · En la lista, el sello es un circulito al lado de las siglas: solo el ícono
   sobre el color de su origen; el nombre se lee al pasar el mouse (title). */
.ka-conv .ka-av-conv{position:relative}
.ka-av-conv .ka-sello-mini{position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; padding:0; gap:0; border-radius:50%; justify-content:center; text-shadow:none; box-shadow:0 0 0 2px var(--sup,#fff), 0 1px 3px rgba(0,0,0,.18)}
.ka-av-conv .ka-sello-mini svg{width:10px; height:10px}
.ka-av-conv .ka-sello-mini .ka-sello-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ka-av-conv .ka-sello-mini.ka-sello-borde{background:var(--sup,#fff); box-shadow:inset 0 0 0 1.5px #0082FB, 0 0 0 2px var(--sup,#fff)}
/* ═══════════════════════════════════════════════════════════════
   3.203.0 · Link: la página de la bio, con cada clic contado.
   La pantalla del CRM (la página pública lleva su propio estilo).
   ═══════════════════════════════════════════════════════════════ */
.ka-lk-estado{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--chip); color:var(--sec); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; vertical-align:1px}
.ka-lk-estado.on{background:var(--ok-l); color:var(--ok)}
.ka-lk-aviso{margin:0 0 16px; padding:12px 16px; border-radius:14px; background:var(--sup3); color:var(--tinta); font-size:13.5px}

.ka-lk-filtros{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ka-lk-cal{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--sup); border:1px solid var(--linea); border-radius:12px; padding:5px 6px 5px 12px; font-size:13px; color:var(--sec)}
.ka-lk-cal .kao-ico{width:16px; height:16px; flex:none}
.ka-lk-cal label{display:flex; align-items:center; gap:6px}
.ka-lk-cal input[type=date]{border:1px solid var(--linea); border-radius:8px; padding:5px 8px; font:inherit; color:var(--tinta); background:var(--sup)}
.ka-lk-caps .ka-lk-elegido{box-shadow:inset 0 0 0 1.5px var(--tinta)}

.ka-lk-barras{display:flex; align-items:flex-end; gap:4px; height:130px; padding:6px 2px 0}
.ka-lk-barras i{flex:1; min-width:3px; background:var(--tinta); opacity:.82; border-radius:4px 4px 2px 2px; transition:opacity .12s}
.ka-lk-barras i:hover{opacity:1}
.ka-lk-barras i:last-child{background:var(--kao, var(--tinta)); opacity:1}

.ka-lk-nuevo{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:4px 0 16px}
.ka-lk-nuevo input[type=text],.ka-lk-nuevo input[type=url],.ka-lk-nuevo select{flex:1 1 200px; min-width:0; border:1px solid var(--linea); border-radius:10px; padding:10px 12px; font:inherit; background:var(--sup); color:var(--tinta)}
.ka-lk-solo-web{display:none !important}
.ka-lk-es-web .ka-lk-solo-web{display:revert !important}
.ka-lk-es-web .ka-lk-solo-wa{display:none !important}
.ka-lk-foto-campo,.ka-lk-ck{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sec)}
.ka-lk-foto-campo input{max-width:190px; font-size:12px}

.ka-lk-t td{vertical-align:middle}
.ka-lk-t th{white-space:nowrap}
.ka-lk-ord{white-space:nowrap}
.ka-lk-fl{width:28px; height:28px; border-radius:50%; border:1px solid var(--linea); background:var(--sup); color:var(--tinta); display:inline-flex; align-items:center; justify-content:center; margin-right:4px; cursor:pointer; padding:0}
.ka-lk-fl svg{width:14px; height:14px}
.ka-lk-fl[disabled]{opacity:.3; cursor:default}
.ka-lk-mini{width:46px; height:46px; border-radius:11px; background:#111; color:var(--kao, #C8B4A6); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none}
.ka-lk-mini img{width:100%; height:100%; object-fit:cover}
.ka-lk-mini svg{width:22px; height:22px}
.ka-lk-nom b{font-weight:600}
.ka-lk-d{display:block; font-size:12px; color:var(--sec); margin-top:2px; overflow-wrap:anywhere}
.ka-lk-dest{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--chip); color:var(--sec); padding:1px 6px; border-radius:5px; margin-left:4px}
.ka-lk-n{font-variant-numeric:tabular-nums; font-weight:600}
.ka-lk-off td{opacity:.55}
.ka-lk-off td.ka-lk-acc{opacity:1}
.ka-lk-acc{white-space:nowrap; text-align:right}
.ka-lk-acc > form,.ka-lk-editar{display:inline-block; vertical-align:middle}
.ka-lk-editar > summary{list-style:none; cursor:pointer}
.ka-lk-editar > summary::-webkit-details-marker{display:none}
.ka-lk-editar[open]{display:block; text-align:left; margin-bottom:6px}
.ka-lk-ed{display:grid; gap:8px; margin-top:8px; padding:12px; border-radius:12px; background:var(--sup2); white-space:normal; min-width:240px}
.ka-lk-ed label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--sec)}
.ka-lk-ed label.ka-lk-ck{flex-direction:row}
.ka-lk-ed input[type=text],.ka-lk-ed input[type=url],.ka-lk-ed select{border:1px solid var(--linea); border-radius:8px; padding:8px 10px; font:inherit; font-size:13.5px; background:var(--sup); color:var(--tinta)}
.ka-lk-cifras{display:none}
.ka-lk-nota{margin:12px 0 0; font-size:12.5px}

.ka-lk-perfil{display:flex; gap:22px; align-items:flex-start}
.ka-lk-foto{position:relative; width:104px; height:104px; border-radius:50%; background:var(--sup3); color:var(--sec); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; overflow:hidden; cursor:pointer; box-shadow:0 0 0 3px var(--sup),0 0 0 4px var(--linea)}
.ka-lk-foto img{width:100%; height:100%; object-fit:cover}
.ka-lk-foto input{position:absolute; inset:0; opacity:0; cursor:pointer}
.ka-lk-pf{flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.ka-lk-pf label{display:flex; flex-direction:column; gap:6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-lk-pf input,.ka-lk-pf textarea{border:1px solid var(--linea); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; text-transform:none; letter-spacing:0; color:var(--tinta); background:var(--sup); resize:vertical}
.ka-lk-pf .ka-lk-ancho{grid-column:1/-1; margin:0}

.ka-lk-iconos{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center}
.ka-lk-iconos > p{flex-basis:100%; margin:0; font-size:12.5px; text-transform:none; letter-spacing:0}
.ka-lk-pf label.ka-lk-ico{flex-direction:row; align-items:center; gap:10px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--tinta)}
.ka-lk-ico > span:nth-child(2){display:flex; flex-direction:column; gap:4px}
.ka-lk-ico input[type=file]{border:0; padding:0; font-size:11.5px; max-width:200px}
.ka-lk-ico-v{width:40px; height:40px; border-radius:10px; background:var(--sup2); display:flex; align-items:center; justify-content:center; flex:none}
.ka-lk-ico-v svg,.ka-lk-ico-v img{width:24px; height:24px; object-fit:contain}
.ka-lk-rep-n{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:6px}
.ka-lk-rep-n > div{background:var(--sup2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px}
.ka-lk-rep-n b{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.ka-lk-rep-n span{font-size:12px; color:var(--sec)}
.ka-lk-rep-n small{font-size:11px; color:var(--tenue)}

@media (max-width:900px){
	table.ka-lk-t,table.ka-lk-t tbody{display:block !important; width:100%}
	table.ka-lk-t thead{display:none !important}
	table.ka-lk-t tr{display:grid !important; grid-template-columns:46px minmax(0,1fr) auto !important; grid-template-areas:"f t e" "f n n" "a a a"; gap:8px 12px; padding:14px 0; border-bottom:1px solid var(--linea); width:auto !important}
	table.ka-lk-t td{display:block !important; border:0 !important; padding:0 !important; width:auto !important; min-width:0; text-align:left}
	table.ka-lk-t td::before{display:none !important}
	table.ka-lk-t td.ka-lk-ord,table.ka-lk-t td.ka-lk-n{display:none !important}
	table.ka-lk-t td:nth-child(2){grid-area:f}
	table.ka-lk-t td.ka-lk-nom{grid-area:t}
	table.ka-lk-t td:nth-child(9){grid-area:e}
	table.ka-lk-t td.ka-lk-acc{grid-area:a; display:flex !important; gap:8px; flex-wrap:wrap}
	table.ka-lk-t td.ka-lk-cifras{grid-area:n; display:flex !important; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--sec)}
	.ka-lk-cifras b{color:var(--tinta); font-size:14px; margin-right:3px}
	.ka-lk-perfil{flex-direction:column; align-items:center}
	.ka-lk-pf{grid-template-columns:1fr; width:100%}
	.ka-lk-rep-n{grid-template-columns:repeat(3,minmax(0,1fr))}
	.ka-lk-barras{gap:2px}
}
/* ═══════════════════════════════════════════════════════════════
   3.204.0 · Reportes → De dónde vienen, ordenado: lo que llegó, el
   embudo por origen con su sello, Meta y Google cada uno en su
   tarjeta, y el recorrido. Prefijo ka-dv-.
   ═══════════════════════════════════════════════════════════════ */
body{--ka-dv-meta-l:#EAF3FF; --ka-dv-g-l:#F3F7FE; --ka-dv-aviso:#FFF4E5; --ka-dv-aviso-t:#7A4A00}
html[data-tema="oscuro"] body{--ka-dv-meta-l:rgba(0,130,251,.10); --ka-dv-g-l:rgba(26,115,232,.08); --ka-dv-aviso:rgba(251,188,4,.12); --ka-dv-aviso-t:#F5C66B}

.ka-dv-p{padding:22px 24px}
.ka-dv-h{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px}
.ka-dv-h h2{margin:0; font-size:19px; letter-spacing:-.01em}
.ka-dv-h p{margin:4px 0 0; color:var(--sec); font-size:13px}
.ka-dv-sec{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sec); margin:28px 0 12px; font-weight:600}
.ka-dv-nota{margin:12px 0 0; font-size:12.5px; color:var(--sec)}

/* El sello de cada origen */
.ka-dv-b{width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none}
.ka-dv-b svg{width:16px; height:16px}
.ka-dv-b-l{width:42px; height:42px}
.ka-dv-b-l svg{width:22px; height:22px}
.ka-dv-gorg{background:#5F6B7A}
.ka-dv-mano{background:#6B6B6B}
.ka-dv-escr{background:#0F766E}
.ka-dv-base{background:#8A7A66}

/* 1 · Lo que llegó */
.ka-dv-ks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ka-dv-k{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:14px; background:var(--sup2); min-width:0}
.ka-dv-ki{width:36px; height:36px; border-radius:10px; background:var(--sup); display:flex; align-items:center; justify-content:center; flex:none; color:var(--tinta); box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ka-dv-ki svg{width:19px; height:19px}
.ka-dv-kl{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-dv-k b{display:block; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums}
.ka-dv-k small{display:block; font-size:12px; color:var(--sec); margin-top:2px}

/* Los números que abren su lista */
.ka-dv-a{color:var(--tinta); font-weight:600; text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:4px}
.ka-dv-a.on{text-decoration-color:var(--tinta)}
@media (hover:hover) and (pointer:fine){ .ka-dv-a:hover{text-decoration-color:var(--tinta)} }

/* Las tablas */
.ka-dv-t{width:100%; border-collapse:collapse}
.ka-dv-t th{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec); font-weight:600; text-align:right; padding:0 12px 10px; white-space:nowrap; border-bottom:1px solid var(--linea)}
.ka-dv-t th:first-child{text-align:left; padding-left:0}
.ka-dv-t td{padding:12px; border-bottom:1px solid var(--linea2); vertical-align:middle}
.ka-dv-t td:first-child{padding-left:0}
.ka-dv-t tbody tr:last-child td{border-bottom:0}
.ka-dv-n{text-align:right; font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap}
.ka-dv-n small{display:block; font-size:11px; color:var(--sec); font-weight:400}
.ka-dv-s{color:var(--sec); font-size:13.5px}
.ka-dv-o{display:flex; align-items:center; gap:12px; min-width:0}
.ka-dv-o b{font-weight:600}
.ka-dv-o small{display:block; color:var(--sec); font-size:12px; margin-top:1px}
.ka-dv-bar{display:block; height:4px; border-radius:2px; background:var(--linea2); margin:6px 0 0 auto; width:72px; overflow:hidden}
.ka-dv-bar > i{display:block; height:100%}
.ka-dv-emb tfoot td{border-top:1.5px solid var(--tinta); padding-top:14px}
.ka-dv-tot td{border-top:1.5px solid var(--tinta)}
#ka-dv-lista{margin-top:16px}

/* 3 · La pauta: cada proveedor en su tarjeta */
.ka-dv-provs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; align-items:start}
.ka-dv-provs:has(.ka-dv-prov-ancha){grid-template-columns:1fr}
.ka-dv-provs > *{min-width:0}
.ka-dv-prov{position:relative; background:var(--sup); border-radius:18px; padding:0 24px 22px; overflow:hidden}
.ka-dv-prov::before{content:""; position:absolute; inset:0 0 auto 0; height:4px}
.ka-dv-prov > header{display:flex; align-items:center; gap:14px; margin:0 -24px 18px; padding:22px 24px 16px}
.ka-dv-prov > header > div{flex:1; min-width:0}
.ka-dv-prov h3{margin:0; font-size:18px}
.ka-dv-prov > header p{margin:2px 0 0; color:var(--sec); font-size:13px}
.ka-dv-prov-meta{box-shadow:inset 0 0 0 1.5px rgba(0,130,251,.35), 0 8px 24px rgba(0,100,224,.07)}
.ka-dv-prov-meta::before{background:linear-gradient(90deg,#0064E0,#0082FB)}
.ka-dv-prov-meta > header{background:var(--ka-dv-meta-l)}
.ka-dv-prov-google{box-shadow:inset 0 0 0 1.5px rgba(26,115,232,.22), 0 8px 24px rgba(26,115,232,.06)}
.ka-dv-prov-google::before{background:linear-gradient(90deg,#34A853 0 22%,#FBBC04 22% 55%,#1A73E8 55%)}
.ka-dv-prov-google > header{background:var(--ka-dv-g-l)}
.ka-dv-cs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.ka-dv-c{padding:12px 14px; border-radius:12px; background:var(--sup2); min-width:0}
.ka-dv-c > span{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-dv-c > b{display:block; font-size:20px; font-weight:600; letter-spacing:-.01em; margin-top:2px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.ka-dv-c > small{display:block; font-size:11.5px; color:var(--sec)}
.ka-dv-c-f > b{font-size:20px; white-space:nowrap; overflow-wrap:normal}
.ka-dv-falta{color:var(--sec)}
.ka-dv-t-c{margin-top:16px}
.ka-dv-t-c td{font-size:14px}
.ka-dv-aviso{margin:14px 0 0; padding:10px 14px; border-radius:12px; background:var(--ka-dv-aviso); color:var(--ka-dv-aviso-t); font-size:13px}

/* 4 · El recorrido y 5 · Anuncio por anuncio */
.ka-dv-rec td.ka-dv-n{font-weight:600}
.ka-dv-camp{display:flex; align-items:center; gap:10px}
.ka-dv-camp .ka-dv-b{width:24px; height:24px}
.ka-dv-camp .ka-dv-b svg{width:13px; height:13px}
.ka-dv-filtro{margin:0}
.ka-dv-filtro button{border:0; font:inherit; font-size:13px; cursor:pointer; padding:6px 14px; border-radius:999px; background:var(--sup2); color:var(--tinta); touch-action:manipulation}
.ka-dv-filtro button.on{background:var(--tinta); color:var(--sup)}
.ka-dv-p .ka-or-tabla td{padding-right:12px}
.ka-dv-p .ka-or-tabla td[data-r]{white-space:nowrap}
.ka-dv-mas > summary{cursor:pointer; font-size:15px; padding:4px 0}
.ka-dv-mas[open] > summary{margin-bottom:14px}
.ka-or-lam > header .ka-dv-b{margin-right:2px}

@media (max-width:900px){
	.ka-dv-p{padding:18px 16px}
	.ka-dv-h{flex-direction:column; align-items:flex-start}
	.ka-dv-ks{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
	.ka-dv-k{padding:12px; flex-direction:column; gap:8px}
	.ka-dv-k b{font-size:22px}
	.ka-dv-provs{grid-template-columns:1fr}
	.ka-dv-cs{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ka-dv-prov{padding:0 16px 18px}
	.ka-dv-prov > header{margin:0 -16px 16px; padding:18px 16px 14px}
	/* El embudo y el recorrido: una tarjeta por origen */
	table.ka-dv-emb, table.ka-dv-emb tbody, table.ka-dv-emb tfoot, table.ka-dv-rec, table.ka-dv-rec tbody{display:block; width:100%}
	table.ka-dv-emb thead, table.ka-dv-rec thead{display:none}
	table.ka-dv-emb tr, table.ka-dv-rec tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; padding:14px 0; border-bottom:1px solid var(--linea2)}
	table.ka-dv-emb td, table.ka-dv-rec td{border:0; padding:0; text-align:left; min-width:0}
	table.ka-dv-emb td:first-child, table.ka-dv-rec td:first-child{grid-column:1/-1}
	table.ka-dv-emb td.ka-dv-n::before, table.ka-dv-rec td.ka-dv-n::before{content:attr(data-r); display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--sec); margin-bottom:2px; font-weight:400}
	table.ka-dv-emb tfoot td{border-top:0}
	table.ka-dv-emb tfoot tr{border-top:1.5px solid var(--tinta); border-bottom:0}
	.ka-dv-tot{border-top:1.5px solid var(--tinta)}
	.ka-dv-tot td{border-top:0 !important}
	.ka-dv-bar{margin-left:0}
	/* Las campañas de Meta y de Google: el nombre arriba y sus tres números debajo */
	table.ka-dv-t-c, table.ka-dv-t-c tbody{display:block; width:100%}
	table.ka-dv-t-c thead{display:none}
	table.ka-dv-t-c tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 8px; padding:12px 0; border-bottom:1px solid var(--linea2)}
	table.ka-dv-t-c td{border:0; padding:0; text-align:left !important; min-width:0}
	table.ka-dv-t-c td:first-child{grid-column:1/-1; font-weight:600}
	table.ka-dv-t-c td[data-r]::before{content:attr(data-r); display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--sec); margin-bottom:2px}
	/* Anuncio por anuncio: los números que se tocan no se salen de su celda */
	.ka-dv-p .ka-or-tabla .ka-or-num{margin:-2px 0; padding:2px 4px; min-width:0}
}
/* ═══════════════════════════════════════════════════════════════
   3.205.0 · Reportes → Resumen, ordenado y vivo. Prefijo ka-rs-.
   Cómo va hoy por tipo de cita (riel de vidrio con el color de la
   agenda), el embudo con un tono por etapa, Conversaciones, el Link
   con el degradado de Instagram, Tiempos con el color de su etapa y
   Las que más dejaron en dorado. Líneas finas y nítidas, con un
   destello que pasa una vez al abrir y otra al pasar el mouse.
   ═══════════════════════════════════════════════════════════════ */
body{--ka-rs-riel:linear-gradient(180deg,#FAFAFA,#F1F1F3); --ka-rs-riel-b:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 1px 0 #fff; --ka-rs-brillo:rgba(255,255,255,.5); --ka-rs-rojo:#C5221F; --ka-rs-rojo-l:rgba(217,48,37,.08)}
html[data-tema="oscuro"] body{--ka-rs-riel:rgba(255,255,255,.06); --ka-rs-riel-b:inset 0 0 0 1px rgba(255,255,255,.08); --ka-rs-brillo:rgba(255,255,255,.25); --ka-rs-rojo:#F28B82; --ka-rs-rojo-l:rgba(242,139,130,.12)}

.ka-rs-p{padding:22px 24px}
.ka-rs-h{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px}
.ka-rs-h h2{margin:0; font-size:19px; letter-spacing:-.01em}
.ka-rs-h p{margin:4px 0 0; color:var(--sec); font-size:13px}
.ka-rs-ver{font-size:13px; color:var(--tinta); font-weight:600; white-space:nowrap; text-decoration:none}
.ka-rs-kl{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec)}
.ka-rs-ki{width:36px; height:36px; border-radius:10px; background:var(--sup); display:flex; align-items:center; justify-content:center; flex:none; color:var(--tinta); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ka-rs-ki svg{width:19px; height:19px}

/* ── Cómo va hoy ── */
.ka-rs-tot{display:flex; gap:10px; align-items:stretch; margin-bottom:18px; flex-wrap:wrap}
.ka-rs-tot-n{padding:10px 18px 10px 0; margin-right:6px; border-right:1px solid var(--linea)}
.ka-rs-tot-n b{display:block; font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1}
.ka-rs-tot-n span{font-size:12px; color:var(--sec)}
.ka-rs-tk{display:flex; flex-direction:column; justify-content:center; padding:10px 16px; border-radius:14px; background:var(--sup2); min-width:118px; color:var(--tinta); text-decoration:none}
.ka-rs-tk b{font-size:24px; font-weight:600; line-height:1.1}
.ka-rs-tk span{font-size:12px; color:var(--sec)}
.ka-rs-tk i{width:22px; height:5px; border-radius:999px; margin-bottom:6px; display:block}
.ka-rs-tk-vino i{background:linear-gradient(90deg,#6B6B6B,var(--tinta))}
.ka-rs-tk-no i{background:linear-gradient(90deg,#F28B82,#D93025)}
.ka-rs-tk-sm i{box-shadow:inset 0 0 0 1.5px #9AA0A6}
.ka-rs-tk-pv i{background:var(--linea)}
.ka-rs-tk.on{box-shadow:inset 0 0 0 1.5px var(--tinta); background:var(--sup)}
.ka-rs-cab{display:grid; grid-template-columns:200px 1fr 304px; gap:24px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec); padding:0 0 8px; border-bottom:1px solid var(--linea)}
.ka-rs-cab-ns{display:grid; grid-template-columns:repeat(4,1fr); text-align:center}
.ka-rs-cab-ns em{font-style:normal; white-space:nowrap}
.ka-rs-fila{display:grid; grid-template-columns:200px 1fr 304px; gap:24px; align-items:center; padding:11px 0; border-bottom:1px solid var(--linea2)}
.ka-rs-fila-on{background:linear-gradient(90deg,transparent,var(--sup2) 8%,var(--sup2) 92%,transparent)}
.ka-rs-tipo{display:flex; align-items:center; gap:10px; min-width:0}
.ka-rs-tipo > div{min-width:0}
.ka-rs-tipo b{display:block; font-weight:600; font-size:14.5px; line-height:1.25}
.ka-rs-tipo small{display:block; color:var(--sec); font-size:12px}
.ka-rs-dot{width:12px; height:12px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75) 0 18%,transparent 40%),var(--c)}
.ka-rs-ns{display:grid; grid-template-columns:repeat(4,1fr); text-align:center}
.ka-rs-n{font-variant-numeric:tabular-nums; font-size:15px; font-weight:600; color:var(--tinta); text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:4px; justify-self:center; padding:2px 8px; border-radius:8px}
.ka-rs-n-no{color:var(--ka-rs-rojo)}
.ka-rs-n.ka-rs-cero{color:var(--sec); text-decoration:none; font-weight:500}
.ka-rs-n.on{background:var(--tinta); color:var(--sup); text-decoration:none}

/* El riel de vidrio, fino y nítido; el color de la cita encima. */
.ka-rs-barra{display:flex; gap:2px; height:10px; padding:2px; border-radius:999px; background:var(--ka-rs-riel); box-shadow:var(--ka-rs-riel-b)}
.ka-rs-seg{position:relative; border-radius:999px; min-width:10px; overflow:hidden}
.ka-rs-vino{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c)); box-shadow:inset 0 1px 0 var(--ka-rs-brillo)}
.ka-rs-no{background:linear-gradient(180deg,#E8746C,#D93025); box-shadow:inset 0 1px 0 var(--ka-rs-brillo)}
.ka-rs-sm{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent)}
.ka-rs-pv{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c)); opacity:.3}
.ka-rs-ley{display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; font-size:12px; color:var(--sec)}
.ka-rs-ley span{display:inline-flex; align-items:center; gap:6px}
.ka-rs-ley i{width:18px; height:6px; border-radius:999px; display:inline-block}
.ka-rs-l-vino{background:linear-gradient(180deg,#B66DC8,#8E24AA)}
.ka-rs-l-no{background:linear-gradient(180deg,#E8746C,#D93025)}
.ka-rs-l-sm{box-shadow:inset 0 0 0 1.5px rgba(142,36,170,.55)}
.ka-rs-l-pv{background:#8E24AA; opacity:.3}

/* Las listas que se abren */
.ka-rs-lista{margin:8px 0 12px; padding:14px 16px; border-radius:14px; background:var(--sup2)}
.ka-rs-lista-h{display:flex; gap:10px; align-items:baseline; margin-bottom:8px}
.ka-rs-lista-h span{color:var(--sec); font-size:12.5px; flex:1}
.ka-rs-cerrar{font-size:12.5px; font-weight:600; color:var(--tinta)}
.ka-rs-per{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--linea2)}
.ka-rs-per > div{flex:1; min-width:0}
.ka-rs-per a{color:var(--tinta); text-decoration:none}
.ka-rs-per b{font-weight:600}
.ka-rs-per small{display:block; color:var(--sec); font-size:12px}
.ka-rs-per .ka-dv-b{width:24px; height:24px}
.ka-rs-per .ka-dv-b svg{width:13px; height:13px}
.ka-rs-acc{padding:6px 12px; border-radius:999px; background:var(--tinta); color:var(--sup)!important; font-size:12.5px; font-weight:600; white-space:nowrap}
.ka-rs-esp{font-size:12.5px; color:var(--ka-rs-rojo); font-weight:600; white-space:nowrap}
.ka-rs-mas{margin:8px 0 0; font-size:13px}

/* Lo que queda por hacer */
.ka-rs-pend{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--linea)}
.ka-rs-pend-t{flex-basis:100%; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sec); margin-bottom:2px}
.ka-rs-pill{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--sup2); font-size:13px; color:var(--tinta); text-decoration:none}
.ka-rs-pill svg{width:15px; height:15px}
.ka-rs-pill b{font-weight:700}
.ka-rs-pill-r{background:var(--ka-rs-rojo-l); color:var(--ka-rs-rojo)}

/* ── Conversaciones ── */
.ka-rs-cv{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ka-rs-c{display:flex; gap:12px; align-items:center; padding:14px; border-radius:14px; background:var(--sup2); color:var(--tinta); text-decoration:none; min-width:0}
.ka-rs-c b{display:block; font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15}
.ka-rs-c small{display:block; font-size:12px; color:var(--sec)}
.ka-rs-c.on{background:var(--sup); box-shadow:inset 0 0 0 1.5px var(--tinta)}
.ka-rs-c-r b{color:var(--ka-rs-rojo)}
.ka-rs-anillo{width:36px; height:36px; flex:none; transform:rotate(-90deg)}
.ka-rs-an-f{fill:none; stroke:var(--linea); stroke-width:4}
.ka-rs-an-v{fill:none; stroke-width:4; stroke-linecap:round}

/* ── Link de la bio: el degradado de Instagram, suave ── */
.ka-rs-link{position:relative; overflow:hidden}
.ka-rs-link::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#F4A261,#E1306C 50%,#9B5BC0); opacity:.85}
.ka-rs-link-h{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.ka-rs-link-h > div{flex:1; min-width:0}
.ka-rs-link-h h2{margin:0; font-size:19px}
.ka-rs-link-h p{margin:2px 0 0; color:var(--sec); font-size:13px}
.ka-rs-pasos{display:flex; align-items:stretch; gap:4px}
.ka-rs-paso{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px 8px; border-radius:14px; background:var(--sup2); color:var(--tinta); text-decoration:none; min-width:0}
.ka-rs-paso b{font-size:24px; font-weight:600; line-height:1.1; margin-top:8px}
.ka-rs-paso small{font-size:12px; color:var(--sec); line-height:1.3}
.ka-rs-paso-i{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(244,162,97,.16),rgba(225,48,108,.14) 50%,rgba(155,91,192,.16)); color:#C13584; box-shadow:inset 0 0 0 1px rgba(225,48,108,.14)}
.ka-rs-paso-i svg{width:18px; height:18px}
.ka-rs-paso.on{background:var(--sup); box-shadow:inset 0 0 0 1.5px rgba(225,48,108,.55)}
.ka-rs-flecha{display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--sec); font-size:11px; font-weight:600; width:34px; flex:none}
.ka-rs-flecha span{color:#C13584}
.ka-rs-flecha svg{width:16px; height:16px}
html[data-tema="oscuro"] .ka-rs-paso-i,html[data-tema="oscuro"] .ka-rs-flecha span{color:#F48FB1}
.ka-rs-link-d{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:20px; padding-top:18px; border-top:1px solid var(--linea)}
.ka-rs-spark{display:flex; align-items:flex-end; height:64px; margin-top:10px}
.ka-rs-spark i{flex:1; position:relative; height:100%}
.ka-rs-spark i::after{content:""; position:absolute; bottom:0; left:50%; width:4px; margin-left:-2px; height:100%; border-radius:999px; background:linear-gradient(180deg,#E1306C,#F4A261); opacity:.85}
.ka-rs-spark-t{display:block; margin-top:6px; font-size:12px; color:var(--sec)}
.ka-rs-bt{display:grid; grid-template-columns:130px 1fr 34px; gap:10px; align-items:center; margin-top:10px; font-size:13.5px}
.ka-rs-bt > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ka-rs-bt-b{position:relative; height:10px; padding:2px; border-radius:999px; background:var(--ka-rs-riel); box-shadow:var(--ka-rs-riel-b)}
.ka-rs-bt-b i{position:relative; display:block; height:100%; border-radius:999px; overflow:hidden; background:linear-gradient(90deg,#F4A261,#E1306C 60%,#9B5BC0); box-shadow:inset 0 1px 0 var(--ka-rs-brillo)}
.ka-rs-bt b{text-align:right; font-variant-numeric:tabular-nums}

/* ── Tiempos: cada paso con el color de su etapa ── */
.ka-rs-t1{--t:#655796} .ka-rs-t2{--t:#A57D36} .ka-rs-t3{--t:#7B1FA2} .ka-rs-t4{--t:#A452B8}
.ka-rs-linea{display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:12px 16px; border-radius:14px; background:var(--sup2); font-size:13px; flex-wrap:wrap}
.ka-rs-linea span{display:inline-flex; align-items:center; gap:7px; font-weight:600}
.ka-rs-linea span i{width:9px; height:9px; border-radius:50%; background:var(--t,var(--tinta))}
.ka-rs-linea em{flex:1; min-width:60px; font-style:normal; text-align:center; color:var(--sec); font-size:12px; border-bottom:1.5px dashed var(--linea); padding-bottom:3px}
.ka-rs-tis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ka-rs-ti{display:flex; flex-direction:column; padding:16px; border-radius:14px; background:var(--sup2); color:var(--tinta); text-decoration:none; min-width:0; box-shadow:inset 3px 0 0 color-mix(in srgb,var(--t) 70%,transparent)}
.ka-rs-ti-i{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:color-mix(in srgb,var(--t) 12%,var(--sup)); color:var(--t); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 22%,transparent)}
.ka-rs-ti-i svg{width:19px; height:19px}
.ka-rs-ti .ka-rs-kl{color:var(--t); font-weight:600}
.ka-rs-ti b{font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin-top:4px}
.ka-rs-ti small{font-size:12.5px; color:var(--sec); margin-top:2px}
.ka-rs-ti em{font-style:normal; font-size:12px; color:var(--t); font-weight:600; margin-top:10px}
html[data-tema="oscuro"] .ka-rs-ti-i,html[data-tema="oscuro"] .ka-rs-ti .ka-rs-kl,html[data-tema="oscuro"] .ka-rs-ti em{color:color-mix(in srgb,var(--t) 55%,#fff)}
html[data-tema="oscuro"] .ka-rs-ti-i{background:color-mix(in srgb,var(--t) 22%,transparent)}
html[data-tema="oscuro"] .ka-rs-linea span i{background:color-mix(in srgb,var(--t,#fff) 55%,#fff)}

/* ── El embudo del consultorio: un tono por etapa (solo la clínica; KliniApp guarda su celeste) ── */
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c1{--c:#3E5C7E; --c2:#7393B8}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c2{--c:#655796; --c2:#9D91C9}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c3{--c:#3C7A66; --c2:#7DB39F}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c4{--c:#A57D36; --c2:#D2AE68}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c5{--c:#9E5A40; --c2:#CF8E70}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c6{--c:#2E2E2E; --c2:#7A7A7A}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c1{--c:#5B7FA8; --c2:#8FB0D6}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c2{--c:#7F72B3; --c2:#B3A9DD}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c3{--c:#4F977F; --c2:#8FCAB5}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c5{--c:#B86F52; --c2:#E0A487}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) .ka-rx-c6{--c:#8A8A8A; --c2:#CFCFCF}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-embudo .ka-rx-et em{color:var(--c)}
#ka-embudo .ka-rx-ix{background:linear-gradient(180deg,var(--c2),var(--c)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#ka-embudo .ka-rx-pista{height:10px; padding:2px; background:var(--ka-rs-riel); box-shadow:var(--ka-rs-riel-b); overflow:hidden}
#ka-embudo .ka-rx-pista i{inset:2px auto 2px 2px; width:calc(var(--w) - 4px); background:linear-gradient(180deg,var(--c2),var(--c)); box-shadow:inset 0 1px 0 var(--ka-rs-brillo); overflow:hidden}
#ka-embudo .ka-pv-pista i{background:linear-gradient(90deg,transparent 0 var(--pv),rgba(255,255,255,.55) var(--pv) 100%),linear-gradient(180deg,var(--c2),var(--c)) !important}
#ka-embudo .ka-rx-pista i::after{display:none; animation:none}

/* ── Las que más dejaron, en dorado (solo la clínica) ── */
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-dejaron{position:relative; overflow:hidden}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-dejaron::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#CFA85A,#A57D36 50%,#E3C98A)}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-dejaron .ka-dej-n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(180deg,#D8B771,#A57D36); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px -3px rgba(165,125,54,.6)}
html:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-dejaron .ka-dej-dejo b{color:#8A6626}
html[data-tema="oscuro"]:not([data-edicion="kliniapp"]):not(:has(.ka-demo-franja)) #ka-dejaron .ka-dej-dejo b{color:#D8B771}
#ka-dejaron .ka-dej-barra{height:10px; padding:2px; border-radius:999px; background:var(--ka-rs-riel); box-shadow:var(--ka-rs-riel-b)}
#ka-dejaron .ka-dej-barra i{position:relative; height:6px; border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 0 var(--ka-rs-brillo)}

/* ── Vivas: un destello que cruza cada línea al abrir, y otra vez al pasar el mouse ── */
@keyframes ka-rs-destello{from{background-position:160% 0}to{background-position:-60% 0}}
@keyframes ka-rs-destello2{from{background-position:160% 0}to{background-position:-60% 0}}
.ka-rs-seg::before,#ka-embudo .ka-rx-pista i::before,.ka-rs-bt-b i::before,#ka-dejaron .ka-dej-barra i::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) no-repeat; background-size:250% 100%; background-position:160% 0;
  animation:ka-rs-destello 1.9s cubic-bezier(.77,0,.175,1) calc(var(--dd,.3s) + .5s) 1 both}
#ka-embudo .ka-rx-c1{--dd:.3s} #ka-embudo .ka-rx-c2{--dd:.42s} #ka-embudo .ka-rx-c3{--dd:.54s} #ka-embudo .ka-rx-c4{--dd:.66s} #ka-embudo .ka-rx-c5{--dd:.78s} #ka-embudo .ka-rx-c6{--dd:.9s}
.ka-rs-sm::before,.ka-rs-pv::before{opacity:.5}
@media (hover:hover) and (pointer:fine){
  .ka-rs-fila:hover .ka-rs-seg::before,#ka-embudo a.ka-rx-fila:hover .ka-rx-pista i::before,.ka-rs-bt:hover .ka-rs-bt-b i::before,#ka-dejaron .ka-dej-cli:hover .ka-dej-barra i::before{animation:ka-rs-destello2 1.4s cubic-bezier(.77,0,.175,1) 0s 1 both}
  .ka-rs-tk:hover,.ka-rs-c:hover,.ka-rs-paso:hover,.ka-rs-ti:hover{background:var(--sup)}
}
.ka-rs-fila:active .ka-rs-seg::before{animation:ka-rs-destello2 1.4s cubic-bezier(.77,0,.175,1) 0s 1 both}
@media (prefers-reduced-motion:reduce){
  .ka-rs-seg::before,#ka-embudo .ka-rx-pista i::before,.ka-rs-bt-b i::before,#ka-dejaron .ka-dej-barra i::before{animation:none; display:none}
}

/* ── El teléfono ── */
@media (max-width:900px){
  .ka-rs-p{padding:18px 16px}
  .ka-rs-h{flex-direction:column; align-items:flex-start}
  .ka-rs-tot-n{border-right:0; width:100%; padding:0}
  .ka-rs-tk{min-width:0; flex:1 1 40%}
  .ka-rs-cab{display:none}
  .ka-rs-fila{grid-template-columns:1fr; gap:8px}
  .ka-rs-n::before{display:block; white-space:nowrap; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--sec); font-weight:400; text-decoration:none}
  .ka-rs-n.on::before{color:inherit}
  .ka-rs-n-vino::before{content:"Vino"} .ka-rs-n-no::before{content:"No vino"} .ka-rs-n-sm::before{content:"Sin marcar"} .ka-rs-n-pv::before{content:"Por venir"}
  .ka-rs-cv,.ka-rs-tis{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr}
  .ka-rs-c{flex-direction:column; align-items:flex-start}
  .ka-rs-c b{font-size:22px}
  .ka-rs-pasos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px}
  .ka-rs-flecha{display:none}
  .ka-rs-link-d{grid-template-columns:1fr}
  .ka-rs-bt{grid-template-columns:110px 1fr 30px}
  .ka-rs-per{flex-wrap:wrap}
  .ka-rs-per > div{flex:1 1 60%}
  .ka-rs-acc{margin-left:36px}
  .ka-rs-lista-h{flex-direction:column; gap:2px}
  .ka-rs-linea em{min-width:40px}
}