/* ==========================================================
   CRM - PULSO

   Traqueo de acciones del equipo y bitacora de tareas.
   Ver js/pulso.js y sql/pulso.sql.

   ESTA HOJA NO DIBUJA TARJETAS.

   La primera version se hacia sus propias cajas (.pulso-bloque,
   con su borde, su radio y su fondo) y por eso Pulso se veia como
   una pestaña de otra aplicacion pegada adentro del CRM: el radio
   no era el mismo, no tenia el filo de luz de arriba, no se
   encendia en hover.

   Ahora las cajas son `.tarjeta-panel`, la misma clase que usan
   Mi Perfil y Hunter. Ese nombre esta en las listas de
   congruencia.css y ajustes.css, asi que el radio, el borde, el
   fondo, el aire interno, el filo de luz, el halo del acento y el
   formato del <h3> con su icono le llegan solos — y el dia que
   cambien, cambian aca tambien sin tocar este archivo.

   Lo que queda aca es lo que NO existe en ningun otro lado: como
   se reparten las tarjetas en la grilla y como se ven por dentro
   la linea de tiempo, la tabla del equipo y la bitacora.
   ========================================================== */


/* ==========================================================
   1. GRILLA

   Dos columnas en escritorio. "A quién le toca" y "Tareas de
   hoy" van al lado —son las dos cosas accionables del dia y se
   leen juntas—; el panel del equipo y la actividad ocupan el
   ancho entero, porque son una tabla y una lista larga y
   partirlas al medio no ayuda a nadie.
   ========================================================== */

/* `align-items: stretch` (el valor por defecto de grid, escrito
   aca para que se lea la intencion) es lo que hace que las dos
   tarjetas de una misma fila terminen a la misma altura aunque
   una tenga tres consultas y la otra ninguna. Antes decia
   `start`: cada tarjeta media lo que medía su contenido y la fila
   quedaba con un escalón. */
/* `minmax(0, 1fr)` Y NO `1fr`, Y `min-width: 0` EN LA TARJETA.

   Los dos dicen lo mismo desde los dos lados y hacen falta los dos.
   Una columna de grilla se mide, por defecto, contra el ANCHO MINIMO
   de lo que tiene adentro, y el minimo de la tabla del equipo son sus
   seis columnas con `white-space: nowrap`: 443px. En un telefono de
   375 eso empujaba la columna a 477 y, con ella, las seis tarjetas y
   la pagina entera — 134px afuera de la pantalla.

   Y no se podia ni arrastrar para verlos: index.css pone
   `overflow-x: hidden` en html y body, asi que lo que sobraba no
   quedaba a un deslizamiento de distancia, quedaba cortado.

   Con esto la columna puede achicarse por debajo de ese minimo y la
   tabla vuelve a scrollear adentro de su propia caja, que es lo que
   `.pulso-tabla-caja` siempre quiso hacer (ver el comentario de alla
   abajo): su `overflow-x: auto` no servia de nada mientras la caja
   pudiera empujar a la grilla para no tener que scrollear nunca. */
.pulso-grilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4, 16px);
    align-items: stretch;
}

.pulso-card { min-width: 0; }

@media (min-width: 1000px) {
    .pulso-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pulso-card--ancha { grid-column: 1 / -1; }
}

/* Estirar la CAJA no alcanza: el contenido queda arriba y el aire
   sobrante se junta abajo del todo. En columna, con el ultimo
   bloque empujado al pie, la tarjeta corta se ve deliberada en vez
   de "le faltó contenido" — el boton de accion queda apoyado abajo,
   alineado con el borde de su vecina. */
.pulso-card {
    display: flex;
    flex-direction: column;
}

.pulso-card > .pulso-acciones,
.pulso-card > .pulso-alta { margin-top: auto; }

#pulso-vencidos,
#pulso-tareas {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#pulso-vencidos > .pulso-acciones,
#pulso-tareas > .pulso-alta { margin-top: auto; }

/* La tarjeta de la bitacora es una sola linea: no tiene que
   estirarse para acompañar a nadie. */
.pulso-card--bitacora { display: block; }

/* Los controles que viven en el titulo de una tarjeta (el rango
   de dias, el filtro de persona, el boton de exportar) se empujan
   al otro extremo del <h3>, que ajustes.css ya deja en flex. */
.pulso-card > h3 > .pulso-rango,
.pulso-card > h3 > .pulso-h3-tools {
    display: flex;
    align-items: center;
    gap: var(--e-2, 8px);
    margin-left: auto;
}

/* El <h3> es de 13px y el select de 36: sin esto el titulo salta
   de alto respecto de la tarjeta de al lado. */
.pulso-card > h3 { min-height: 36px; }
.pulso-card > h3 .select-field { max-width: 13rem; }

/* El plegado del Dashboard (index.css) conserva `.chart-header`; acá
   la cabecera es el <h3>, asi que hay que devolverlo a la vista.
   Sin esto la tarjeta plegada queda completamente en blanco y no hay
   con que volver a abrirla.

   Las tres clases son a proposito y no de mas: la regla de index.css
   es `.dash-plegable.plegada > *:not(.chart-header)`, que pesa 0-3-0.
   Con `.pulso-card.plegada > h3` (0-2-1) perdia, el <h3> se ocultaba
   igual y la tarjeta quedaba en una barra vacia sin con que
   reabrirla. */
.pulso-card.dash-plegable.plegada > h3 { display: flex; margin-bottom: 0; }
.pulso-card.dash-plegable.plegada { min-height: 0; }

/* Sin tools al lado, el chevron se va solo al extremo del titulo.
   El flex-shrink es lo que lo salva en Acciones: ahi el <h3> lleva
   dos selects y el boton de exportar, y sin esto el chevron se
   aplastaba a ancho cero y parecia no existir. */
.pulso-card > h3 > .dash-plegar-btn {
    flex-shrink: 0;
    margin-left: auto;
}

/* Con tools presentes, el margin-left:auto ya lo pone el span; el
   chevron solo tiene que quedar despues, pegado. */
.pulso-card > h3 > .pulso-rango + .dash-plegar-btn,
.pulso-card > h3 > .pulso-h3-tools + .dash-plegar-btn {
    margin-left: var(--e-2, 8px);
}

/* EN CELULAR EL TITULO SE PARTE EN DOS RENGLONES.

   El <h3> es una fila que no se doblaba: titulo + los controles +
   el chevron. En "Pulso del equipo" esos controles son cuatro chips
   de rango, y en "Acciones" dos selects y el boton de exportar. A
   375px no entran, y como el chevron va ultimo era el chevron el que
   se iba 26px afuera de la pantalla — o sea, justo el boton con el
   que se pliega la tarjeta.

   Se permite el salto y los controles bajan enteros al segundo
   renglon, empujados a la derecha por el `margin-left: auto` que ya
   tenian. El chevron los sigue, que es donde uno lo busca.

   `flex-basis: 100%` en los tools y no `width`: el span sigue siendo
   flexible, solo que arranca pidiendo el renglon entero. */
@media (max-width: 640px) {
    .pulso-card > h3 { flex-wrap: wrap; row-gap: var(--e-2, 8px); }

    /* EL ORDEN IMPORTA MAS QUE EL DE LA FUENTE.

       En el HTML el chevron va ULTIMO, despues de los controles.
       Con los controles ocupando el renglon entero, eso lo empujaba
       a un tercer renglon el solo, pegado a la izquierda — se veia
       como un boton suelto en el medio de la nada.

       Con `order` el chevron se adelanta y se queda arriba, en la
       punta del titulo, que es donde esta en todas las demas
       tarjetas y donde la mano lo va a buscar. Los controles bajan
       enteros abajo. El DOM no se toca: el chevron sigue siendo el
       ultimo del <h3>, asi que el recorrido con teclado tampoco
       cambia de orden logico. */
    .pulso-card > h3 > .pulso-rango,
    .pulso-card > h3 > .pulso-h3-tools {
        order: 2;
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    .pulso-card > h3 > .dash-plegar-btn,
    .pulso-card > h3 > .pulso-rango + .dash-plegar-btn,
    .pulso-card > h3 > .pulso-h3-tools + .dash-plegar-btn {
        order: 1;
        margin-left: auto;
    }

    /* Los selects de Acciones se reparten el renglon en vez de
       quedarse en 13rem y desbordar de a uno. */
    .pulso-card > h3 .select-field {
        flex: 1 1 8rem;
        min-width: 0;
        max-width: none;
    }
}

.pulso-cargando,
.pulso-vacio {
    margin: 0;
    padding: var(--e-2, 8px) 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
}

.pulso-vacio.chico { padding: 2px 0; font-size: 12px; }

.pulso-nota {
    margin: 0 0 var(--e-3, 12px);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
}

.pulso-vacio code {
    padding: 1px 5px;
    border-radius: var(--r-sm, 10px);
    background: rgba(127, 127, 127, 0.18);
    font-size: 12px;
}

/* Los botones de accion de una tarjeta, separados de la lista de
   arriba. `.btn` ya trae su alto y su radio del sistema. */
.pulso-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2, 8px);
    margin-top: var(--e-3, 12px);
}


/* ==========================================================
   2. FILAS DE CAMPOS

   ESTE ES EL BUG QUE SE VEIA EN LA CAPTURA: sin align-items, un
   contenedor flex estira a los hijos (`stretch`). Los inputs y
   los botones del CRM tienen alto FIJO por !important
   (ajustes.css los clava en --h-md), asi que no pueden estirarse
   y quedan alineados arriba, cada uno a su manera. El resultado
   eran tres controles a tres alturas distintas en el mismo
   renglon.

   `center` lo resuelve para siempre, y sirve igual si el dia de
   mañana alguno de los tres cambia de alto.

   Y LA SEGUNDA MITAD DEL MISMO BUG: index.css le da
   `margin-top: 0.5rem !important` a todo `.btn-primary`. Es una
   regla vieja, pensada para un boton que cierra un formulario
   apilado en columna — ahi separa. En una fila horizontal no
   separa nada: corre el boton 4px para abajo respecto de sus
   companeros y deja el renglon torcido. Con align-items:center
   el margen sigue contando, porque centrar reparte el alto CON
   margenes incluidos.

   Va con !important y no alcanza con ser mas especifico: contra
   un !important solo gana otro !important, y de esos gana el que
   carga ultimo. pulso.css va despues de index.css en index.html,
   asi que este gana. Es el mismo juego que ya documenta el
   <head> del proyecto con rendimiento.css.
   ========================================================== */

.pulso-linea-campos {
    display: flex;
    align-items: center;
    gap: var(--e-2, 8px);
    flex-wrap: wrap;
}

.pulso-linea-campos > .input-field { flex: 1 1 12rem; min-width: 0; }
.pulso-linea-campos > .select-field { flex: 0 1 11rem; min-width: 0; }
.pulso-linea-campos > .btn { flex: 0 0 auto; }

/* Todo boton que Pulso pone en una fila junto a otra cosa. */
.pulso-linea-campos > .btn,
.pulso-acciones > .btn,
.pulso-sugerencia > .btn,
.pulso-card > h3 .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pulso-alta {
    margin-top: var(--e-3, 12px);
    padding-top: var(--e-3, 12px);
    border-top: 1px dashed var(--borde-luz, var(--border-color));
}

/* El checkbox tiene que ser hermano de .pulso-cuando para que el
   `:checked ~` la revele, asi que no puede ir adentro del <label>.
   Quedan los dos sueltos en el flujo, uno al lado del otro, y el
   `for` los vuelve a atar para el clic. */
.pulso-agenda { margin-top: var(--e-2, 8px); }

.pulso-agendar {
    color: var(--text-dim);
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}

/* Los campos de cuando solo existen si se va a agendar. Puro CSS
   sobre el estado del checkbox: no hace falta JS para algo que el
   navegador ya sabe. */
.pulso-cuando { display: none; margin-top: var(--e-2, 8px); }
#pulso-tarea-agendar:checked ~ .pulso-cuando { display: flex; }
.pulso-cuando > .input-field { flex: 0 1 10rem; }
.pulso-cuando > .select-field { flex: 0 1 8rem; }

#pulso-tarea-agendar {
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--primary);
    cursor: pointer;
}


/* ==========================================================
   3. A QUIEN LE TOCA
   ========================================================== */

.pulso-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pulso-fila {
    display: flex;
    align-items: center;
    gap: var(--e-2, 8px);
    padding: var(--e-2, 8px) 4px;
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
    cursor: pointer;
}

.pulso-fila:last-child { border-bottom: none; }
.pulso-fila:hover { background: rgba(127, 127, 127, 0.07); }

.pulso-fila-txt {
    display: flex;
    align-items: center;
    gap: var(--e-2, 8px);
    flex: 1;
    min-width: 0;
}

.pulso-fila-txt strong {
    font-weight: 500;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulso-atraso {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.15);
    color: var(--text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Tres dias sin tocar una consulta ya no es "un poco tarde". Se
   marca en rojo y no en un naranja intermedio: una escala de
   grados hace que todo parezca igual de urgente. */
.pulso-atraso.grave {
    background: color-mix(in srgb, #e5484d 20%, transparent);
    color: #ff8a8d;
}


/* ==========================================================
   4. TAREAS Y SU BITACORA
   ========================================================== */

.pulso-tareas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pulso-tarea {
    padding: var(--e-3, 12px) 0;
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
}

.pulso-tarea:first-child { padding-top: 0; }
.pulso-tarea:last-child { border-bottom: none; padding-bottom: 0; }

/* Grilla y no flex: la casilla ocupa su columna y el texto la suya,
   asi una descripcion larga envuelve contra el borde del titulo y no
   contra el de la casilla. */
.pulso-tarea-cab {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: var(--e-2, 8px);
}

.pulso-tarea-cab label { cursor: pointer; min-width: 0; }

/* El checkbox queda fuera de la regla de alto fijo de ajustes.css
   (que excluye [type=checkbox]), asi que se le da tamaño a mano
   para que no salga del tamaño del navegador. */
.pulso-tarea-cab input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* line-height 1.23 sobre 13px da 16px: exactamente el alto de la
   casilla, que es lo que hace que las dos se vean sobre la misma
   linea sin empujarlas con margenes a ojo. */
.pulso-tarea-cab strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.23;
}

.pulso-tarea-cab small {
    display: block;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 12px;
}

/* Tachada pero legible: la tarea cumplida sigue siendo parte del
   dia, y su bitacora es justamente lo que hay que poder leer
   despues de cumplirla. */
.pulso-tarea.hecha .pulso-tarea-cab strong {
    text-decoration: line-through;
    opacity: 0.55;
}

.pulso-bitacora {
    margin: var(--e-2, 8px) 0 0 24px;
    padding-left: var(--e-3, 12px);
    border-left: 2px solid var(--borde-luz, var(--border-color));
}

/* Plegada, la bitacora es un renglon tenue; solo pesa cuando se la
   abre. Con una linea por tarea la tarjeta vuelve a leerse de un
   vistazo, que es para lo que esta. */
.pulso-bitacora > summary,
.pulso-hechas > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 2px 0;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
    transition: color var(--t-medio, 200ms) ease;
}

.pulso-bitacora > summary::-webkit-details-marker,
.pulso-hechas > summary::-webkit-details-marker { display: none; }

.pulso-bitacora > summary:hover,
.pulso-hechas > summary:hover { color: var(--text-main); }

.pulso-bitacora > summary i,
.pulso-hechas > summary i { font-size: 11px; }

.pulso-bitacora[open] > summary { margin-bottom: var(--e-2, 8px); }

/* Las cumplidas del dia: presentes y contadas, pero fuera del camino
   de lo que todavia falta hacer. */
.pulso-hechas {
    margin-top: var(--e-3, 12px);
    padding-top: var(--e-3, 12px);
    border-top: 1px solid var(--borde-luz, var(--border-color));
}

.pulso-hechas[open] > summary { margin-bottom: var(--e-2, 8px); }

.pulso-apunte {
    display: flex;
    align-items: baseline;
    gap: var(--e-2, 8px);
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.5;
}

.pulso-apunte > span { flex: 1; min-width: 0; }

.pulso-apunte em {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 11px;
    font-style: normal;
}

/* El boton de borrar solo aparece con el puntero encima. En
   tactil no hay hover, asi que ahi se muestra siempre: sin esto,
   en el celular no habria forma de borrar un apunte. */
.pulso-apunte .btn-icono {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--t-medio, 200ms) ease;
}

.pulso-apunte:hover .btn-icono,
.pulso-apunte:focus-within .btn-icono { opacity: 1; }

@media (hover: none) {
    .pulso-apunte .btn-icono { opacity: 1; }
}

.pulso-bitacora .pulso-linea-campos { margin-top: var(--e-2, 8px); }


/* ==========================================================
   5. LINEA DE TIEMPO
   ========================================================== */

.pulso-linea {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pulso-evento {
    display: flex;
    align-items: baseline;
    gap: var(--e-3, 12px);
    padding: var(--e-2, 8px) 4px;
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
    font-size: 12px;
    line-height: 1.5;
}

.pulso-evento:last-child { border-bottom: none; }
.pulso-evento[data-lead] { cursor: pointer; }
.pulso-evento[data-lead]:hover { background: rgba(127, 127, 127, 0.07); }

.pulso-evento > i {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    color: var(--primary);
    font-size: 11px;
}

.pulso-evento > span { flex: 1; min-width: 0; color: var(--text-dim); }
.pulso-evento b,
.pulso-evento strong { color: var(--text-main); font-weight: 500; }

.pulso-evento small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    opacity: 0.75;
}

.pulso-evento time {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* La categoría de cada acción. En pantalla angosta se esconde: el
   ícono de la izquierda ya distingue una llamada de un mail, y
   ahí el ancho vale más para el texto de la acción. */
.pulso-cat {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.14);
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .pulso-cat { display: none; }
}

/* Los envíos —WhatsApp y mail— van marcados con el acento. Es el
   motor de la prospección y la categoría que más se busca en esta
   lista; el resto se mantiene neutro para que resalte. */
.pulso-evento.pulso-g-envio > i { color: var(--primary); }

.pulso-evento.pulso-g-envio .pulso-cat {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}

/* Las demás categorías comparten el gris del ícono: sin esto,
   cada renglón tira del ojo con el color de acento y la lista
   entera pesa lo mismo, que es como no jerarquizar nada. */
.pulso-evento:not(.pulso-g-envio) > i { color: var(--text-dim); }


/* ==========================================================
   6. PANEL DEL EQUIPO
   ========================================================== */

.pulso-chip {
    padding: 3px 10px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t-medio, 200ms) ease, border-color var(--t-medio, 200ms) ease;
}

.pulso-chip:hover { color: var(--text-main); }

.pulso-chip.activa {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* La tabla no se convierte en tarjetas en el celular: son seis
   numeros por persona y compararlos ENTRE filas es el punto de la
   tabla. Apilados en tarjetas se pierde justamente eso, asi que
   scrollea en horizontal dentro de su caja. */
.pulso-tabla-caja {
    overflow-x: auto;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: var(--r-md, 14px);
}

.pulso-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pulso-tabla th {
    padding: var(--e-2, 8px) var(--e-3, 12px);
    text-align: left;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
    white-space: nowrap;
}

.pulso-tabla td {
    padding: var(--e-2, 8px) var(--e-3, 12px);
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pulso-tabla tbody tr { cursor: pointer; }
.pulso-tabla tbody tr:last-child td { border-bottom: none; }
.pulso-tabla tbody tr:hover { background: rgba(127, 127, 127, 0.07); }

.pulso-tabla tbody tr.elegida {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.pulso-tabla td strong { display: block; font-weight: 500; font-size: 13px; }
.pulso-tabla td small { display: block; color: var(--text-dim); font-size: 11px; }

.pulso-tabla td.aviso { color: #f5a524; }
.pulso-tabla td.grave { color: #ff8a8d; font-weight: 600; }

.pulso-sugerencia {
    display: flex;
    align-items: center;
    gap: var(--e-3, 12px);
    flex-wrap: wrap;
    margin-top: var(--e-3, 12px);
    padding: var(--e-3, 12px) var(--e-4, 16px);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: var(--r-md, 14px);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.pulso-sugerencia > i { color: var(--primary); font-size: 15px; }

.pulso-sugerencia p {
    flex: 1 1 18rem;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}


/* ==========================================================
   7. RANKING DEL DIA

   Lo ve todo el equipo. Son numeros agregados: cuantas acciones
   hizo cada uno hoy, sin decir cuales — el detalle sigue siendo
   de admin y superadmin (ver sql/acciones-y-asignacion.sql).
   ========================================================== */

.pulso-ranking {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.pulso-rk {
    display: grid;
    /* posicion | nombre | barra | numero. La barra se lleva lo que
       sobra, que es lo que hace que las cuatro columnas queden
       alineadas entre filas por mas largo que sea un nombre. */
    grid-template-columns: 1.25rem minmax(6rem, 11rem) 1fr auto;
    align-items: center;
    gap: var(--e-3, 12px);
    padding: var(--e-2, 8px) 4px;
    border-bottom: 1px solid var(--borde-luz, var(--border-color));
}

.pulso-rk:last-child { border-bottom: none; }

.pulso-rk-pos {
    color: var(--text-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pulso-rk-nombre {
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulso-rk-nombre small {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 400;
}

.pulso-rk-barra {
    height: 6px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.15);
    overflow: hidden;
}

.pulso-rk-barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    /* Una barra que aparece de cero se lee como "esto se acaba de
       calcular"; una que ya esta puesta parece parte del fondo. */
    transition: width var(--t-lento, 400ms) ease;
}

.pulso-rk-num {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* La columna es `auto`, asi que sin un ancho minimo una fila con
       "8" la achica y su barra termina 9px mas a la derecha que la
       de la fila de arriba. Con 3ch entran hasta 999 acciones en un
       dia sin que el borde de las barras se mueva. */
    min-width: 3ch;
    text-align: right;
}

/* La propia fila, marcada. Sin esto hay que buscarse por nombre
   en una lista de seis, que es justo lo que un ranking no tiene
   que hacerte hacer. */
.pulso-rk.soy-yo .pulso-rk-nombre,
.pulso-rk.soy-yo .pulso-rk-num { color: var(--primary); }


/* ==========================================================
   8. LA ACLARACION DEL SELECT DE ASIGNACION

   Vive en la ficha de la consulta, no en Pulso, pero nace del
   mismo cambio: reasignar paso a ser de admin. Ver
   populateAssigneeSelect en js/leads.js.
   ========================================================== */

.asignar-ayuda {
    display: block;
    margin-top: 5px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
}

/* Un select deshabilitado tiene que PARECER deshabilitado. El
   navegador lo grisa solito, pero varias hojas del CRM le fijan
   color y fondo con !important, asi que hay que decirlo aca. */
#lead-assigned-to:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ==========================================================
   9. A QUIEN LE TOCA: DOS MITADES

   Izquierda lo tuyo (consultas atrasadas), derecha lo del equipo
   (como se reparten las acciones del dia). `auto-fit` con minimo
   de 260px y no dos columnas fijas: si la tarjeta esta angosta
   —el usuario puede achicarla desde "Editar diseño"— las dos
   mitades se apilan solas en vez de espicharse hasta ser
   ilegibles.
   ========================================================== */

/* `min(260px, 100%)` Y NO `260px` PELADO.

   El 260 es un piso: "no achiques una mitad por debajo de esto,
   mejor apilalas". Funciona mientras haya 260px para dar. En un
   telefono de 320 la tarjeta deja 260 justos de contenido y, con
   el aire de los modos que ponen mas padding, menos — ahi el piso
   deja de ser un piso y pasa a ser un ancho minimo que la columna
   reclama igual, saliendose 21px de la pantalla.

   `min(260px, 100%)` dice lo mismo pero sin mentir: el piso es 260
   cuando hay 260, y el ancho disponible cuando no lo hay. */
.pulso-mitades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--e-4, 14px);
    align-items: start;
}

/* La linea divisoria solo tiene sentido cuando de verdad hay dos
   columnas al lado. Apiladas, un borde izquierdo seria una raya
   suelta en el medio de la nada. */
@media (min-width: 900px) {
    .pulso-mitades > #pulso-torta {
        padding-left: var(--e-4, 14px);
        border-left: 1px solid var(--borde-luz, var(--border-color));
    }
}

.pulso-torta-caja {
    display: flex;
    align-items: center;
    gap: var(--e-4, 14px);
    flex-wrap: wrap;
}

/* Ancho fijo y no porcentual: un anillo que cambia de tamaño segun
   cuantos nombres tenga la leyenda al lado se ve como un error. */
.pulso-torta-svg {
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    overflow: visible;
}

/* La misma torta cuando es el grafico central del Dashboard (ver
   index.html y LeadsManager.updateDashboardMetrics en js/leads.js).
   Ahi vive en la columna del medio de una grilla de tres, entre los
   dos bloques de "Foco del equipo", asi que se apila: el anillo
   arriba y la leyenda debajo, en vez de uno al lado del otro.
   Apilado entra en una columna angosta y le deja a los costados el
   ancho que la torta no usa. */
#dashboard-torta.dashboard-torta-central .pulso-torta-caja {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e-4, 14px);
}

/* El resplandor detras del anillo, no una inclinacion en falso 3D:
   drop-shadow sigue el trazo real de los arcos (no el rectangulo del
   SVG), asi que el brillo tiene la misma forma de anillo y se lee
   como luz emanando, no como un cuadrado difuso detras. Es el mismo
   lenguaje que ya usan los anillos de "Reparto del equipo" y
   "Conversion del embudo" del diseño aprobado: profundidad por luz,
   no por geometria. */
#dashboard-torta.dashboard-torta-central .pulso-torta-svg {
    width: 172px;
    height: 172px;
    filter: drop-shadow(0 0 22px rgba(var(--acento-rgb), 0.32));
}

/* La leyenda toma el ancho de la columna y no el del texto: asi los
   porcentajes de todas las filas quedan alineados en la misma
   vertical y se comparan de un vistazo.

   Con el equipo entero adentro (sin "Otros", ver pintarTorta) pueden
   ser diez o quince filas, asi que se limita el alto y se scrollea
   adentro: la tarjeta no puede volver a crecer para abajo, que es
   justo lo que se estaba arreglando. */
#dashboard-torta.dashboard-torta-central .pulso-torta-leyenda {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
}

#dashboard-torta.dashboard-torta-central .pulso-torta-nombre,
#dashboard-torta.dashboard-torta-central .pulso-torta-valor,
#dashboard-torta.dashboard-torta-central .pulso-torta-pct {
    font-size: 13px;
}

/* El trazo grueso ES el anillo: sin relleno, el circulo se ve solo
   por su borde. El linejoin redondo evita el diente que queda entre
   dos porciones contiguas. */
.pulso-torta-arco {
    fill: none;
    stroke-width: 10;
    transition: stroke-width 140ms ease;
    /* Cada porcion se dibuja creciendo desde cero, en orden y de a
       una. Las variables (--largo, --resto, --vuelta, --turno) las
       escribe pintarTorta() en el style inline de cada arco; el
       atributo `stroke-dasharray` ya trae el valor final, asi que si
       el navegador no anima variables el anillo se ve entero igual,
       nunca vacio. `both` para que el estado inicial valga tambien
       durante el retardo: sin eso las porciones aparecen enteras y
       recien despues arrancan. */
    animation: pulso-torta-dibujar 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--turno, 0) * 90ms);
}

@keyframes pulso-torta-dibujar {
    from { stroke-dasharray: 0 var(--vuelta); }
    to   { stroke-dasharray: var(--largo) var(--resto); }
}

/* El anillo completo entra con una vuelta corta mientras se dibuja:
   ata las porciones entre si para que se lea como un solo objeto que
   aparece y no como seis rayas sueltas. */
.pulso-torta-svg {
    animation: pulso-torta-entrar 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: 50% 50%;
}

@keyframes pulso-torta-entrar {
    from { opacity: 0; transform: rotate(-12deg) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* La leyenda cae detras del anillo, una fila por vez y en el mismo
   orden que las porciones: el ojo va del arco al nombre solo. */
.pulso-torta-leyenda li {
    animation: pulso-torta-fila 380ms ease both;
    animation-delay: calc(220ms + var(--turno, 0) * 55ms);
}

@keyframes pulso-torta-fila {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Si la persona pidio menos movimiento en el sistema operativo, nada
   de esto corre: se ve el estado final y ya. Mismo criterio que
   Pulso.contarHasta() en js/pulso.js para el numero del medio. */
@media (prefers-reduced-motion: reduce) {
    .pulso-torta-arco,
    .pulso-torta-svg,
    .pulso-torta-leyenda li {
        animation: none;
    }
}

.pulso-torta-svg:hover .pulso-torta-arco { stroke-width: 9; }
.pulso-torta-arco:hover { stroke-width: 13; }

/* `--text-main` y no `--text-color`: esa variable no existe en ningun
   tema. Un `fill` con una variable indefinida no hereda ni cae al color
   del texto —cae al negro con el que nace todo SVG—, asi que el total
   quedaba en negro sobre el fondo oscuro y no se leia. El resto de la
   dona no lo delataba porque `--text-dim`, la del pie, si existe. */
.pulso-torta-total {
    text-anchor: middle;
    fill: var(--text-main);
    font-size: 19px;
    font-weight: 700;
}

.pulso-torta-pie {
    text-anchor: middle;
    fill: var(--text-dim);
    font-size: 8px;
    letter-spacing: 0.04em;
}

.pulso-torta-leyenda {
    flex: 1 1 8rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pulso-torta-leyenda li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.4;
}

.pulso-torta-punto {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* El nombre cede y el porcentaje no: un nombre largo se recorta con
   puntos suspensivos antes que empujar al numero fuera de la fila. */
.pulso-torta-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

/* El numero crudo al lado del porcentaje: el % dice como se reparte,
   pero "1%" de 117 y "1%" de 4.000 son dos cosas muy distintas, y ese
   dato ya estaba calculado. */
.pulso-torta-valor {
    flex-shrink: 0;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.pulso-torta-pct {
    flex-shrink: 0;
    min-width: 2.4em;
    text-align: right;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}