/* ============================================================================
   AktivFlow · estilos compartidos
   ----------------------------------------------------------------------------
   Antes esto vivía copiado dentro de cada una de las 16 páginas: la paleta
   estaba repetida 16 veces y ya había divergido (unas definían --amber, otras
   --blue, otras ninguna). Acá está una sola vez.

   Se carga ANTES del <style> de cada página, así que cualquier página puede
   seguir pisando lo que necesite sin pelear con esto.
   ========================================================================== */

:root{
  --ink:#1c1e26;        /* texto principal            */
  --muted:#6b7280;      /* texto secundario           */
  --line:#e5e7eb;       /* bordes y separadores       */
  --bg:#f7f7fb;         /* fondo de la aplicación     */
  --brand:#5b4ee8;      /* color de marca             */
  --brand-soft:#eceafd; /* fondo suave de marca       */
  --green:#16a34a;      /* bien / confirmado          */
  --red:#dc2626;        /* error / detenido           */
  --amber:#a16207;      /* atención / requiere acción */
  --blue:#2563eb;       /* informativo                */
}

*{box-sizing:border-box}

body{
  margin:0;
  font:14px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* ---------------------------------------------------------------- barra ---- */
/* La cabecera se queda arriba al bajar por la lista. Ojo: doce pantallas la
   volvían a declarar en su propio <style> —una copia de esta regla, pero sin
   `position:sticky`— y como el <style> va después del <link>, ganaba la copia.
   Resultado: la cabecera no quedaba fija en NINGUNA pantalla, y las barras de
   filtros que se cuelgan de ella con `top: var(--alto-topbar)` quedaban
   flotando sobre un hueco. Si una pantalla necesita algo distinto, que agregue
   SOLO esa propiedad, sin repetir el resto. */
#topbar{
  display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fff;
  border-bottom:1px solid var(--line);flex-wrap:wrap;
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:700;color:var(--brand)}

/* Los íconos (webapp/iconos.js). Miden en `em`, así que crecen con la letra del
   sitio donde estén, y heredan el color: un ícono dentro de un aviso ámbar sale
   ámbar sin una regla más. El -0.14em los sienta en la línea de base del texto,
   que si no flotan un pelo altos. */
.icn{
  width:1.05em; height:1.05em; flex:none; vertical-align:-.14em;
  stroke:currentColor; fill:none;
}
/* El color dice algo o no se pone. Un ícono gris es un hecho más de la lista;
   uno ámbar o rojo es algo que hay que mirar. Los emoji pintaban de colores
   TODO —una lectura de perfil salía tan vistosa como un rebote—, que es la
   forma más rápida de que el color deje de significar nada. */
.icn.bien{color:var(--green)}
.icn.aviso{color:var(--amber)}
.icn.malo{color:var(--red)}
.icn.marca{color:var(--brand)}

/* El botón de menú del teléfono. Vive siempre en el HTML —lo agrega topbar.js—
   y acá se esconde: en el computador el menú va desplegado en su renglón. */
#hamb{
  display:none; margin-left:auto; order:1; flex-direction:column; gap:4px;
  width:38px; height:34px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:9px; cursor:pointer;
}
#hamb span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px}

/* El bloque de la derecha: empresa, Admin, correo y Salir. Lo agrega topbar.js
   cuando vuelve /api/me. */
#usuario{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:13px; flex-wrap:wrap;
}
#topbar.abierto #hamb{background:var(--brand-soft); border-color:#ddd8fb}

/* Filtrar no puede obligar a volver arriba: la barra donde se filtra se queda a
   la vista mientras se baja por la lista. Se cuelga de la cabecera, que mide lo
   suyo y lo publica en --alto-topbar (topbar.js), porque su alto cambia cuando
   el menú se parte en dos renglones. */
#head, .filtros{
  position:sticky; top:var(--alto-topbar,52px); z-index:15;
  background:var(--bg); padding-bottom:10px;
  /* la raya cierra el bloque pegado: sin ella la tarjeta que pasa por debajo
     se ve cortada por la mitad y parece un error de dibujo */
  box-shadow:0 1px 0 var(--line);
}

/* Menú en cuatro bloques. Cada bloque abre su lista; el bloque de la página
   actual queda marcado, así que siempre se ve dónde estás sin desplegar nada. */
#menu{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
#menu .bloque{position:relative}
#menu .cab{
  font:inherit;color:var(--muted);background:none;border:1px solid transparent;
  padding:6px 12px;border-radius:99px;cursor:pointer;display:flex;align-items:center;gap:6px;
}
#menu .cab:hover{background:var(--bg);color:var(--ink)}
#menu .cab .fl{font-size:9px;opacity:.6}
#menu .bloque.aqui .cab{background:var(--brand);color:#fff}
#menu .bloque.aqui .cab .fl{opacity:.85}
#menu .bloque.abierto .cab{background:var(--brand-soft);color:var(--brand)}
#menu .lista{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 10px 30px rgba(28,30,38,.12);z-index:30;
}
#menu .bloque.abierto .lista{display:block}
#menu .lista a{
  display:block;padding:8px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
#menu .lista a:hover{background:var(--bg)}
#menu .lista a.on{color:var(--brand);font-weight:600;background:var(--brand-soft)}

/* Compatibilidad: alguna página todavía escribe su <nav> a mano. */
nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:99px}
nav a.on{background:var(--brand);color:#fff}

@media (max-width:820px){
  #menu .lista{left:auto;right:0}
}

/* --- avisos (window.aviso / window.avisoError, en topbar.js) ---------------
   Abajo al centro, encima de todo, sin bloquear la página. Se apilan hacia
   arriba cuando hay más de uno. */
#afAvisos{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;
          display:flex;flex-direction:column-reverse;gap:8px;align-items:center;
          pointer-events:none;max-width:min(560px,calc(100vw - 32px))}
.afAviso{pointer-events:auto;cursor:pointer;background:#111827;color:#fff;
         padding:11px 18px;border-radius:10px;font-size:13.5px;line-height:1.45;
         box-shadow:0 8px 24px rgba(0,0,0,.22);
         /* los mensajes traen saltos de línea («3 de 5 evaluados:\n…») */
         white-space:pre-line;text-align:left;
         animation:afEntra .22s ease-out}
.afAviso.malo{background:#7f1d1d}
.afAviso.fuera{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
@keyframes afEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .afAviso{animation:none}
  .afAviso.fuera{transition:none}
}

/* ------------------------------------------------------- barra de estado ---- */
/* Franja delgada bajo el menú: qué se está haciendo ahora y qué viene. Ocupa un
   renglón entero de la cabecera (flex-basis:100%) y el detalle se despliega
   colgado, sin empujar nada: los filtros pegados de Prospectos y Señales se
   cuelgan de --alto-topbar y una cortina que crece cambiaría ese alto. */
#pulso{
  /* `order` y no la posición en el HTML: el bloque del usuario (empresa, Admin,
     Salir) lo agrega topbar.js DESPUÉS, cuando vuelve /api/me, así que sin esto
     la barra de estado quedaba en medio y empujaba «Salir» a un tercer renglón. */
  /* min-width:0 no es un detalle: el ancho mínimo automático de un item flex es
     el de su contenido, y con el botón del freno adentro eso daba 494 px. En una
     pantalla de 390 la barra desbordaba y arrastraba a TODAS las pantallas. */
  /* el ancho es 100% MÁS el relleno de la cabecera, porque los márgenes
     negativos corren la franja hacia los bordes pero no la ensanchan: con
     flex-basis:100% quedaba un trozo blanco de 32 px a la derecha */
  order:99; flex:0 0 calc(100% + 32px); min-width:0; position:relative;
  margin:-4px -16px -10px; padding:0 16px;
  border-top:1px solid var(--line); background:#fbfbfe;
  /* la franja es una fila: el resumen ocupa lo que haya y el freno de mano se
     queda a la derecha. La cortina va absoluta, fuera de esta fila. */
  display:flex; align-items:center; gap:10px;
}
/* Con el freno echado la franja entera cambia de color. Que se vea desde el
   otro lado de la oficina es la idea: el motor está detenido a propósito y
   nadie tiene que preguntarse por qué no pasa nada. */
#pulso.pausado{background:#fef2f2; border-top-color:#f6cfcf}
#pulso .p-cab{
  display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0;
  font:inherit; color:var(--ink); background:none; border:0;
  padding:7px 0; cursor:pointer; text-align:left;
}
#pulso .p-punto{
  width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted);
}
/* Verde: hay algo ejecutándose. Azul: quieto pero con trabajo por delante.
   Ámbar: quieto y con una razón (horario, pausa, cupo lleno). */
#pulso .p-punto.activo{background:var(--green); box-shadow:0 0 0 3px #16a34a22}
#pulso .p-punto.espera{background:var(--blue)}
#pulso .p-punto.frenado{background:var(--amber)}
#pulso .p-punto.pausa{background:var(--red); box-shadow:0 0 0 3px #dc262622}
#pulso .p-txt{
  flex:1 1 auto; min-width:0; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#pulso .p-hora{color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
#pulso .p-fl{color:var(--muted); flex:none; transition:transform .15s}
#pulso.abierto .p-fl{transform:rotate(180deg)}

/* El botón del freno. Discreto mientras todo anda —no es algo que uno quiera
   apretar sin querer— y rojo lleno cuando está echado, porque ahí sí es el
   estado más importante de la pantalla. */
#pulso .p-freno-btn{
  flex:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:4px 11px; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line); background:#fff; color:var(--muted);
}
#pulso .p-freno-btn:hover{border-color:#f0b4b4; color:var(--red)}
#pulso .p-freno-btn.on{background:var(--red); border-color:var(--red); color:#fff}
#pulso .p-freno-btn.on:hover{background:#b91c1c; border-color:#b91c1c; color:#fff}
#pulso .p-freno-btn[disabled]{opacity:.55; cursor:default}
#pulso .p-freno-btn .corto{display:none}

#pulso .p-detalle{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 12px 12px; box-shadow:0 12px 28px #1c1e2618;
  padding:12px 16px 14px; max-height:70vh; overflow:auto;
  display:grid; gap:12px;
}
/* `display:grid` pisa el display:none que el navegador le da a [hidden]: sin
   esta regla la cortina se ve siempre. */
#pulso .p-detalle[hidden]{display:none}
#pulso .p-bloque h4{
  margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700;
}
#pulso .p-fila{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:4px 0; border-bottom:1px solid #f1f1f6;
}
#pulso .p-fila:last-child{border-bottom:0}
#pulso .p-cuando{color:var(--muted); font-variant-numeric:tabular-nums; min-width:42px}
#pulso .p-que{font-weight:600}
#pulso .p-quien{color:var(--ink)}
#pulso .p-camp{color:var(--muted); font-size:12px}
#pulso .p-falta{margin-left:auto; color:var(--muted); font-size:12px}
#pulso .p-nada, #pulso .p-pie{margin:4px 0 0; color:var(--muted); font-size:12px}
#pulso .p-freno{
  padding:5px 9px; border-radius:8px; background:#fdf6e3; color:var(--amber);
  margin-bottom:5px; font-size:13px;
}
#pulso .p-chips{display:flex; flex-wrap:wrap; gap:6px}
#pulso .p-chip{
  padding:3px 9px; border-radius:99px; border:1px solid var(--line);
  background:#fff; font-size:12px; color:var(--muted);
}
#pulso .p-chip.lleno{border-color:#f0d9a8; background:#fdf6e3; color:var(--amber); font-weight:600}


/* ============================================================================
   EL TELÉFONO
   ----------------------------------------------------------------------------
   Esto se escribió mirando la aplicación en una pantalla de 390 px, que es lo
   que mide un teléfono normal. Lo que se veía:

     · la cabecera ocupaba 470 px de alto —marca, menú en dos renglones,
       selector de empresa, correo y «Salir»—: una pantalla entera de
       navegación antes de ver un solo dato;
     · la fila de filtros de Prospectos, nueve controles apilados, otros 700;
     · y recién ahí la tabla, de 917 px de ancho, cortada por la mitad: no se
       veían Etapa, ICP ni Próximo paso.

   O sea que para leer un prospecto había que pasar 1.200 px de scroll y
   después no estaba el dato. Lo de acá abajo no es maquillaje: es que las tres
   cosas quepan.

   Nada de esto toca el computador. Todo vive dentro de la consulta de medios.
   ========================================================================== */
@media (max-width: 760px){

  /* --- la cabecera, en un renglón ---------------------------------------- */
  #topbar{padding:8px 12px; gap:8px}
  #hamb{display:flex}
  /* el menú y el bloque del usuario se pliegan detrás del botón. `order` los
     manda debajo de la marca cuando se abren, sin importar en qué orden los
     haya agregado topbar.js (el del usuario llega después, con /api/me). */
  #topbar #menu, #topbar #usuario{display:none; flex:0 0 100%; order:50}
  #topbar.abierto #menu, #topbar.abierto #usuario{display:flex}
  #topbar #usuario{margin-left:0 !important; padding-bottom:4px}
  #menu{flex-direction:column; align-items:stretch; gap:0}
  #menu .bloque{width:100%}
  #menu .cab{width:100%; justify-content:space-between; padding:10px 4px}
  #menu .lista{left:0; right:0; min-width:0}
  /* algunas pantallas ponen su botón principal dentro de la cabecera
     («+ Nueva campaña»). Entre la marca y el botón de menú queda poco: se
     achica en vez de empujar a alguno de los dos fuera de la pantalla. */
  #topbar > button, #topbar > a.btn, #topbar > a.primary, #topbar > .primary{
    font-size:13px; padding:7px 11px;
  }

  /* --- la barra de estado ------------------------------------------------- */
  #pulso{flex-basis:calc(100% + 24px); margin-left:-12px; margin-right:-12px;
         padding:0 12px; gap:8px}
  #pulso .p-freno-btn .largo{display:none}
  #pulso .p-freno-btn .corto{display:inline}
  /* la hora se sacrifica antes que el resumen: el reloj del teléfono está tres
     centímetros más arriba */
  #pulso .p-hora{display:none}
  #pulso .p-detalle{border-radius:0; padding:12px}

  /* --- filas de filtros y de acciones ------------------------------------- */
  /* Un renglón que se desliza de lado, como las fichas de cualquier aplicación
     de teléfono. Apiladas ocupaban 700 px y empujaban la tabla fuera de la
     pantalla; así ocupan 48 y no se pierde ningún control: están todos, a un
     deslizamiento de distancia. */
  /* !important y no por gusto: cada pantalla repite estas reglas en su propio
     <style>, que va DESPUÉS de esta hoja y con la misma especificidad. Sin
     esto, la fila seguía apilándose aunque acá dijera lo contrario. */
  #filters, .filtros, #barraSel{
    flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:8px;
  }
  #filters::-webkit-scrollbar, .filtros::-webkit-scrollbar,
  #barraSel::-webkit-scrollbar{display:none}
  #filters > *, .filtros > *, #barraSel > *{flex:0 0 auto}
  #filters input, .filtros input{min-width:190px !important}
  #filters select, .filtros select{max-width:190px}

  /* --- tablas: cada fila, una tarjeta ------------------------------------- */
  /* Una tabla de nueve columnas en 390 px no se arregla con letra más chica: no
     entra. Cada fila pasa a ser una tarjeta y cada dato lleva su etiqueta
     delante, sacada del atributo data-col que pone la propia pantalla.

     La primera versión de esto entraba en la pantalla pero no se podía leer: el
     cargo y la empresa seguían con las reglas de la tabla —una línea, cortada
     con puntos suspensivos— y en una tarjeta eso deja «Gerente Planificación
     Financiera y Control de Ges…» y nunca se sabe de qué empresa es. En una
     tabla cortar es correcto, porque la columna tiene un ancho; en una tarjeta
     hay renglones de sobra y lo correcto es envolver. */
  table{table-layout:auto !important; width:100% !important; min-width:0 !important}
  table colgroup, table thead{display:none}
  /* La tarjeta es un flex que envuelve, no un bloque, para poder REORDENAR sin
     tocar el HTML: el orden de las columnas de una tabla es el que se lee de
     izquierda a derecha, y en una tarjeta el que se lee de arriba abajo es
     otro. La campaña iba segunda —antes que la etapa y el estado— y la fecha
     al final, sola; acá las dos bajan juntas al pie, que es su lugar. */
  table tbody tr{
    display:flex; flex-wrap:wrap; align-items:baseline;
    border:1px solid var(--line); border-radius:12px;
    background:#fff; padding:10px 12px; margin-bottom:8px;
  }
  table tbody td{
    display:flex; gap:10px; align-items:baseline;
    flex:0 0 100%; width:auto !important; order:3;
    border:0 !important; padding:2px 0 !important;
    /* a la izquierda, siempre. Las columnas de números van alineadas a la
       derecha en la tabla —correcto, ahí se comparan de arriba abajo— y en la
       tarjeta eso dejaba las etiquetas pegadas al centro y en distinto lugar
       en cada renglón, como si fueran datos de otra cosa. */
    text-align:left !important;
  }
  /* una celda vacía no deja una etiqueta sola: se va entera */
  table tbody td:empty{display:none}
  /* nada se corta adentro de una tarjeta: envuelve */
  table tbody td, table tbody td *{
    white-space:normal !important; overflow:visible !important;
    text-overflow:clip !important; max-width:100% !important;
  }
  table tbody td::before{
    content:attr(data-col); flex:0 0 92px; color:var(--muted); white-space:nowrap;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; line-height:1.6;
  }
  table tbody td:not([data-col])::before{content:none}
  /* el título arriba del todo, grande y sin etiqueta */
  /* flex:1 1 auto y no el 100% de las demás: así el título se sienta AL LADO de
     la casilla de selección. Con 100% la casilla quedaba sola en su renglón,
     como si fuera un dato más. */
  table tbody td[data-titulo]{
    display:block; order:1; flex:0 0 100%; min-width:0;
    font-size:15px; padding:0 0 6px !important;
  }
  /* el hueco para la casilla SOLO donde hay casilla: en Cuentas y Resultados no
     hay, y el nombre de la empresa quedaba indentado sin motivo */
  table tbody td.selCol + td[data-titulo]{padding-left:26px !important}
  table tbody td[data-titulo]::before{content:none}
  /* La casilla va ANCLADA a la esquina, no puesta en la fila.
     Como item de flex no funciona: si comparte renglón con el nombre, un nombre
     largo se lo lleva entero y la casilla queda sola arriba; y si el nombre
     ocupa el renglón completo, la casilla queda sola igual. Anclada, el nombre
     se le acomoda al lado midiendo lo que mida. */
  table tbody tr{position:relative}
  table tbody td.selCol{
    position:absolute; top:11px; left:12px; order:0; padding:0 !important;
  }

  /* Las píldoras van juntas en un renglón y sin etiqueta: «nuevo» y «en curso»
     ya se dicen solas, y tres renglones de una palabra cada uno era la mitad
     del alto de la tarjeta. */
  table tbody td[data-col="Etapa"], table tbody td[data-col="Secuencia"],
  table tbody td[data-col="ICP"]{
    order:2; flex:0 0 auto; padding:2px 8px 2px 0 !important;
  }
  table tbody td[data-col="Etapa"]::before,
  table tbody td[data-col="Secuencia"]::before{content:none}
  table tbody td[data-col="ICP"]::before{flex:0 0 auto; margin-right:2px}

  /* La campaña y la fecha son el pie de la tarjeta, no dos datos más: al final,
     juntas, en letra chica y gris. Repetir «CAMPAÑA · Campaña Comercial» en
     letra de dato, en cada una de las 472 tarjetas, era la línea más prominente
     y la que menos dice. */
  table tbody td[data-col="Campaña"], table tbody td[data-col="Enrolado"]{
    order:9; flex:0 0 auto; font-size:12px; color:var(--muted);
    padding:6px 6px 0 0 !important;
  }
  table tbody td[data-col="Campaña"]::before{content:none}
  table tbody td[data-col="Enrolado"]::before{
    content:"·"; flex:0 0 auto; font-size:12px; text-transform:none; letter-spacing:0;
  }
  #tableWrap{overflow-x:visible}

  /* --- números grandes (Resultados, Campañas) ------------------------------ */
  /* Seis fichas de un número cada una, apiladas de a una y cada una con el
     ancho de su texto: mil píxeles de scroll para leer seis cifras, y ninguna
     alineada con la de arriba. En dos columnas parejas entran todas en una
     pantalla y se pueden comparar de un vistazo, que es para lo que están. */
  .kpis, #resumen{
    display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important;
  }
  .kpi{min-width:0 !important; padding:10px 12px !important}
  .kpi b{font-size:20px}

  /* --- detalles que aparecen en varias pantallas -------------------------- */
  /* una fila «texto + botón»: el botón se va abajo en vez de estrujar el texto
     hasta dejarlo en una palabra por renglón */
  .paso .txt{flex:1 1 200px; min-width:0}
  .paso .ir{flex:0 0 100%; margin-left:34px}
  /* los diálogos ocupan la pantalla: centrados y angostos no se pueden usar, y
     la ficha del prospecto dejaba a la vista una astilla de 23 px de la lista
     de atrás que no sirve para nada y se toca sin querer */
  .modal, .drawer, dialog, #drawer{max-width:100% !important; width:100% !important}

  /* Las fichas de las fuentes de Señales llevan el aviso adentro («falta el
     ticket de Mercado Público»), que en el teléfono ocupa tres renglones. Una
     ficha con forma de píldora y tres renglones de texto se ve como un error
     de dibujo: acá va con esquinas normales, alineada arriba. */
  /* !important: la pantalla centra estas fichas en su propio <style>, que se
     carga después de esta hoja, y las cortas quedaban flotando al medio */
  .fuentes{flex-direction:column; align-items:stretch !important}
  .fuentes .f{border-radius:12px; align-items:flex-start; padding:9px 10px}
}