/* ==========================================================
   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. */
.pulso-grilla {
    display: grid;
    gap: var(--e-4, 16px);
    align-items: stretch;
}

@media (min-width: 1000px) {
    .pulso-grilla { grid-template-columns: 1fr 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; }

.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));
}


/* ==========================================================
   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-color); }

.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;
}