/* La paleta de Pepe sale del logo, y se define aquí, una sola vez: todas las
   demás hojas del panel usan estas variables y ninguna escribe un color a mano.

   Los seis colores del logo son las primitivas (turquesa, azul, violeta,
   magenta, naranja y el azul marino del rótulo, que es el color del texto).
   Los vivos pintan la marca: el degradado, la franja de la cabecera y la entrada.
   Para leer, cada uno tiene un tono firme que cumple contraste AA con letra o
   fondo, en claro y en oscuro. El color dice algo y siempre lo mismo, para que
   el vendedor aprenda a leer la pantalla sin que se la expliquen:
     violeta  las acciones y lo que Pepe propone
     turquesa lo que escuchó y detectó: los hechos con cita
     magenta  el coach, que es privado
     naranja  el freno y lo pendiente: "ojo, no lo prometas"
     rojo     lo rechazado (se distingue del magenta y del naranja)
   El degradado completo se reserva para donde se presenta la marca (la
   franja de la cabecera, la entrada, los encabezados y el botón principal del
   taller), nunca de relleno.

   Lo que se apaga (una junta cancelada, una inscripción retirada) baja su
   opacidad a `--apagado`, el tope hasta donde su texto sigue cumpliendo AA: en
   claro se apaga menos que en oscuro, donde el texto tiene más margen de
   contraste.

   El taller de cursos es claro siempre, como Learnia, aunque el sistema esté
   en oscuro: por eso la paleta clara también se declara en `.taller`, que la
   recupera aunque `:root` ya esté en oscuro. */
:root, .taller {
  --turquesa: #0bc3d3;
  --azul: #2a62dd;
  --violeta: #6e30f0;
  --magenta: #e41aaa;
  --naranja: #f7702e;
  --marino: #1a1262;
  --blanco: #ffffff;
  --negro: #000000;
  --marca: linear-gradient(90deg, var(--turquesa), var(--azul), var(--violeta), var(--magenta), var(--naranja));
  --marca-firme: linear-gradient(90deg, var(--cian-tinta), var(--azul-tinta), var(--acento), var(--coach), var(--naranja-firme));
  --marca-firme-vertical: linear-gradient(180deg, var(--cian-tinta), var(--azul-tinta), var(--acento), var(--coach), var(--naranja-firme));

  --fondo: #f7f5fe;
  --superficie: #ffffff;
  --texto: var(--marino);
  --tenue: #57537f;
  --borde: #e1def2;
  --borde-control: #7a76a6;
  --acento: var(--violeta);
  --acento-suave: #f0eafe;
  --azul-tinta: var(--azul);
  --azul-suave: #e8effd;
  --cian: #0a98a8;
  --cian-tinta: #07707d;
  --cian-suave: #e3f7f9;
  --coach: #c4128f;
  --coach-suave: #fdeaf6;
  --alerta: #b24a0b;
  --naranja-firme: #c2520c;
  --alerta-suave: #fff0e4;
  --peligro: #c41a2b;
  --peligro-suave: #fdecee;
  --sobre-acento: #ffffff;
  --sombra: rgb(26 18 98 / .22);
  --velo: rgb(26 18 98 / .55);
  --cristal: rgb(26 18 98 / .3);
  --apagado: .88;
  --pizarra: #1f3b2d;
  --pizarra-tiza: #f4f1e4;
  --pizarra-marco: #6b4a2b;
  --pizarra-clase: #cfe3c2;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e0c3a;
    --superficie: #17144f;
    --texto: #f1f0fc;
    --tenue: #a9a6d6;
    --borde: #2e2a74;
    --borde-control: #7d79bf;
    --acento: #b79cff;
    --acento-suave: #2a2078;
    --azul-tinta: #8cb0ff;
    --azul-suave: #16295e;
    --cian: #2ed8e6;
    --cian-tinta: #7be6ef;
    --cian-suave: #0f3a55;
    --coach: #ff8ad6;
    --coach-suave: #3d1650;
    --alerta: #ffa05c;
    --naranja-firme: #ffa05c;
    --alerta-suave: #3f2210;
    --peligro: #ff8d96;
    --peligro-suave: #40121e;
    --sobre-acento: #0e0c3a;
    --sombra: rgb(0 0 0 / .5);
    --velo: rgb(5 4 30 / .7);
    --cristal: rgb(5 4 30 / .35);
    --apagado: .75;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { accent-color: var(--acento); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
}

.barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: relative;
}
/* El degradado de la marca, solo aquí: como filo, nunca de fondo. */
.barra::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--marca);
}
.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; }
/* El plan y la IA que contesta se leen de corrido: en una ventana angosta
   bajan de renglón enteras, no se parten palabra por palabra. */
.marca .etiqueta { white-space: nowrap; }
/* La mascota de Pepe, sola. Su imagen es de fondo blanco: va en una pastilla
   clara también en el tema oscuro. */
.marca-logo {
  flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 12px;
  background: var(--blanco); border: 1px solid var(--borde);
}
.marca-logo img { display: block; width: 100%; height: 100%; }
.quien { color: var(--tenue); font-size: 14px; display: flex; gap: 8px; align-items: center; }

.etiqueta {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: var(--acento-suave); color: var(--acento); font-weight: 600;
}
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); }

.pestanas { display: flex; gap: 4px; padding: 8px 20px 0; overflow-x: auto; }
.pestanas button {
  border: 0; background: none; padding: 8px 14px; border-bottom: 2px solid transparent;
  color: var(--tenue); font: inherit; cursor: pointer;
}
.pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
/* Con poco ancho las nueve pestañas del administrador caben sin que la barra se desplace y recorte la última. */
@media (max-width: 900px) {
  .pestanas { padding: 8px 12px 0; gap: 2px; }
  .pestanas button { padding: 8px 10px; }
}

/* Las secciones dentro de una pestaña (Administración): mismas reglas que las
   pestañas, un escalón más chico. */
.subpestanas { display: flex; gap: 4px; margin: 0 0 12px; overflow-x: auto; }
.subpestanas button {
  border: 1px solid var(--borde-control); background: none; padding: 5px 12px; border-radius: 999px;
  color: var(--tenue); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.subpestanas button[aria-selected="true"] { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); font-weight: 600; }

main { padding: 16px 20px 40px; }
.columnas { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 16px; }
@media (max-width: 800px) { .columnas { grid-template-columns: 1fr; } }

.panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 16px;
  min-width: 0;
}
.panel h2 { font-size: 16px; margin: 0 0 10px; }
.panel h2 + .nota { margin-top: -6px; }
.panel h3 { font-size: 14px; margin: 16px 0 8px; color: var(--tenue); }
.vacio, .nota { color: var(--tenue); font-size: 13px; }

.lista { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.lista li { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; }
.lista.compacta li { padding: 4px 8px; font-size: 13px; }
.seleccionable li { cursor: pointer; }
.seleccionable li:hover, .seleccionable li.activa { border-color: var(--acento); background: var(--acento-suave); }
.lista .sub { display: block; color: var(--tenue); font-size: 13px; }

/* Lo que ya sabemos de la empresa: la lista de antecedentes, su texto y el componente para agregarlos. */
.grupo { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.grupo legend { color: var(--tenue); font-size: 13px; font-weight: 600; padding: 0 4px; }
.grupo label { display: grid; gap: 4px; font-size: 13px; color: var(--tenue); }
.antecedente .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.antecedente a.sub { overflow-wrap: anywhere; }
.texto-del-antecedente { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; margin: 6px 0 0; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); font: inherit; font-size: 13px; }
/* La columna se fija a lo que cabe: el selector de archivos no encoge por debajo de su ancho natural y, sin esto, ensancharía el componente más allá de su columna. */
.agregador-de-antecedentes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.agregador-de-antecedentes textarea { width: 100%; box-sizing: border-box; }
.agregador-de-antecedentes .fila { min-width: 0; }
.agregador-de-antecedentes .fila input { min-width: 0; max-width: 100%; }
.agregador-de-antecedentes details { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.agregador-de-antecedentes summary { cursor: pointer; font-size: 13px; color: var(--acento); font-weight: 600; }
.agregador-de-antecedentes details[open] summary { margin-bottom: 8px; }
.aviso-de-lectura { color: var(--alerta); }
.antecedentes-por-registrar { margin-bottom: 8px; }

.hallazgo { display: grid; gap: 4px; }
.hallazgo .cita { color: var(--tenue); font-style: italic; font-size: 13px; }
.hallazgo .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* Un hecho es lo que Pepe ESCUCHÓ y puede citar: turquesa, el color de
   "Escucha. Detecta.". Una hipótesis no es una alarma —es algo sin
   confirmar— así que va en gris y con el borde punteado; el naranja queda
   reservado para el freno, que sí es una advertencia. */
.hallazgo.hipotesis { border-left: 3px dashed var(--tenue); }
.hallazgo.hecho { border-left: 3px solid var(--cian); }

/* Las cinco partes de un hallazgo, cada una con su etiqueta. El color dice
   qué tan firme es: turquesa lo que se escuchó, gris punteado lo supuesto, violeta
   lo que Pepe propone, naranja lo que no se promete sin el técnico. */
.hallazgo .parte { display: grid; gap: 1px; font-size: 14px; }
.hallazgo .parte .encabezado { display: flex; gap: 6px; align-items: center; }
.hallazgo .parte .titulo { color: var(--tenue); font-size: 12px; }
.hallazgo .parte.falta .texto { color: var(--tenue); font-style: italic; }
.etiqueta.hecho { background: var(--cian-suave); color: var(--cian-tinta); }
.etiqueta.hipotesis { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
.etiqueta.requiere_validacion { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.incompleto { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
/* La nota para el vendedor es lo único del hallazgo que el cliente no puede
   ver en su pantalla: lleva el magenta de lo privado, como el coach. */
.etiqueta.privada { background: var(--coach-suave); color: var(--coach); }
.hallazgo .parte.privada { border-left: 3px solid var(--coach); padding-left: 8px; }
/* El acceso a la pantalla del cliente, con la advertencia de qué enseña. */
.pantalla-cliente { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.etiqueta.rechazado { background: none; color: var(--peligro); border: 1px solid var(--peligro); }

/* Los consejos de Pepe en vivo, aparte de lo que detectó. Violeta lo que
   propone; naranja el freno ("no lo prometas"). No llevan cita ni nivel: no son
   algo que el cliente haya dicho. Traen lo que escribió el vendedor (su
   objetivo) o el modelo: una liga se parte en vez de ensanchar la página. Y
   la lista tiene tope, con lo más reciente arriba: sin él, cada consejo
   empuja hacia abajo lo que el cliente dijo. */
#vivo-consejos { max-height: 40vh; overflow-y: auto; }
.lista .consejo { display: grid; gap: 2px; border-left: 3px solid var(--acento); overflow-wrap: anywhere; }
.lista .consejo .etiqueta { justify-self: start; }
.lista .consejo.freno { border-left-color: var(--alerta); background: var(--alerta-suave); }
.lista .consejo.freno .etiqueta { background: none; color: var(--alerta); border: 1px solid var(--alerta); }

.freno {
  padding: 10px 12px; border-radius: 8px; background: var(--alerta-suave); color: var(--alerta);
  font-weight: 600; margin: 8px 0;
}
.freno.libre { background: var(--cian-suave); color: var(--cian-tinta); }
/* Libre, pero con una promesa técnica a un clic de detenerla: el naranja del
   "no lo prometas", sin el peso de un freno ya puesto. */
.freno.por-ahora { border: 1px dashed var(--alerta); font-weight: 500; }

/* La protección de una cuenta que trajo un embajador. Vigente es un dato
   (violeta, como lo que hay que saber); por vencer y vencida piden que alguien
   se mueva, y llevan el naranja del "ojo". Vencida va con filo entero: falta
   una decisión. Sirve igual en la ficha, en "Mover hoy" y en Embajadores. */
.proteccion { font-size: 14px; }
p.proteccion { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--acento); border-radius: 0 6px 6px 0; }
p.proteccion.por-vencer { border-left: 3px dashed var(--alerta); }
p.proteccion.vencida { border-left-color: var(--alerta); background: var(--alerta-suave); }
.lista li.proteccion { border-left: 3px solid var(--acento); }
.lista li.proteccion.por-vencer { border-left: 3px dashed var(--alerta); }
.lista li.proteccion.vencida { border-left-color: var(--alerta); background: var(--alerta-suave); }
.proteccion.por-vencer .etiqueta, .proteccion.vencida .etiqueta { background: var(--alerta-suave); color: var(--alerta); }
.proteccion.vencida .etiqueta { background: none; border: 1px solid var(--alerta); }
.embajadores .lista li { display: grid; gap: 6px; }
.embajadores .fila { align-items: end; }

/* Lo que Pepe hizo con lo último que se le dio, y su aviso si lo hay. */
.resultado { margin: 8px 0 12px; font-size: 14px; }
.aviso.en-linea { margin: 8px 0; }
.aviso.en-linea button { margin-left: 6px; }

/* El acordeón por bloques, con los mismos colores que los hallazgos. */
.acordeon .bloque { border-left: 3px solid var(--acento); padding-left: 10px; margin: 10px 0; }
.acordeon .bloque h4 { margin: 0 0 6px; font-size: 13px; color: var(--tenue); }
.acordeon .bloque.perfil { border-left-color: var(--borde); }
.acordeon .bloque.sabemos { border-left-color: var(--cian); }
.acordeon .bloque.hipotesis { border-left: 3px dashed var(--tenue); }
.acordeon .bloque.evitar { border-left-color: var(--alerta); }
.acordeon .bloque.evitar h4 { color: var(--alerta); }
.acordeon li { display: grid; gap: 2px; }
.acordeon .etiqueta { justify-self: start; background: var(--cian-suave); color: var(--cian-tinta); }
.acordeon .pregunta { color: var(--acento); font-size: 13px; }
/* El objetivo personal lo escribe el vendedor, y puede traer una liga. */
.acordeon .nota { overflow-wrap: anywhere; }

/* El expediente de la cuenta, con los colores de siempre: turquesa lo que el
   cliente dijo (trae su cita), gris punteado lo que el vendedor cree, violeta lo
   que Pepe propone y espera decisión. */
.expediente .bloque { border-left: 3px solid var(--borde); padding-left: 10px; margin: 10px 0; }
.expediente .bloque h4, .expediente .anotar h4 { margin: 0 0 6px; font-size: 13px; color: var(--tenue); }
.expediente .bloque.dijo { border-left-color: var(--cian); }
.expediente .bloque.habla { border-left: 3px dashed var(--tenue); }
.expediente .bloque.por-decidir { border-left-color: var(--acento); }
.expediente .renglon { display: grid; gap: 2px; }
.expediente .renglon .encabezado { display: flex; gap: 6px; align-items: center; }
.expediente .renglon .titulo { color: var(--tenue); font-size: 12px; }
.expediente .renglon .cita { color: var(--tenue); font-style: italic; }
.expediente .renglon .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.expediente .anotar { border-top: 1px solid var(--borde); margin-top: 10px; padding-top: 8px; }

/* Una junta en "Mi semana", con su plan. Lo pendiente lleva el naranja del
   "ojo"; lo hecho se apaga, para que se lea primero lo que falta. Una junta
   cancelada o ya pasada no compite con las que vienen. */
.junta {
  border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px; display: grid; gap: 6px;
}
.junta.dia { border-left-color: var(--cian); }
.junta.despues { border-left: 3px dashed var(--alerta); }
.junta.cancelado { border-left: 3px dashed var(--tenue); opacity: var(--apagado); }
.junta .cabecera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.junta p { margin: 0; }
.junta .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.junta .editor:empty { display: none; }
.junta .editor { border-top: 1px solid var(--borde); padding-top: 8px; }
.junta h4, .propuesta h4, .juntas h4 { margin: 8px 0 4px; font-size: 13px; color: var(--tenue); }
.etiqueta.equipo { background: none; color: var(--tenue); border: 1px solid var(--borde); }
.plan li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.plan li.pendiente { border-color: var(--alerta); }
.plan li.hecho { color: var(--tenue); }

/* Lo que Pepe no entendió de una junta contada: se ve, para llenarlo antes
   de confirmar. */
.propuesta { margin-top: 12px; }
.propuesta .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
label.falta { color: var(--alerta); }
label.falta input, label.falta select { border-color: var(--alerta); }

/* La matriz de producto: una capacidad por renglón que se abre. Un campo sin
   contenido se ve faltar (gris, punteado): es lo que Grow o el admin todavía
   no escriben, no algo que la capacidad "no tenga". */
.matriz .carpeta + .carpeta { border-top: 1px solid var(--borde); margin-top: 14px; }
.matriz .capacidad { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; margin: 0 0 6px; }
/* Lo que aquí se captura trae ligas (la evidencia de un caso, una táctica con
   su enlace): una cadena sin espacios se parte en vez de ensanchar el panel. */
.matriz .capacidad summary { cursor: pointer; overflow-wrap: anywhere; }
.matriz .capacidad .sub { color: var(--tenue); font-size: 13px; }
.matriz .cuerpo { display: grid; gap: 8px; margin-top: 10px; }
.matriz .campo { display: grid; gap: 2px; border-left: 3px solid var(--acento); padding-left: 10px; font-size: 14px; overflow-wrap: anywhere; }
.matriz .campo .titulo { color: var(--tenue); font-size: 12px; }
.matriz .campo ul { margin: 0; padding-left: 18px; }
.matriz .campo.falta { border-left: 3px dashed var(--tenue); }
.matriz .campo.falta .texto { color: var(--tenue); font-style: italic; }
.matriz .acciones, .guia .acciones, #guia-formulario .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* La guía de Pepe: lo que está en vigor se lee primero; lo tapado o apagado
   se apaga, como lo ya hecho en el plan de una junta. */
.guia .bloque { border-left: 3px solid var(--coach); padding-left: 10px; margin: 10px 0; }
.guia .bloque h4 { margin: 0 0 6px; font-size: 13px; color: var(--tenue); }
.guia .entrada { display: grid; gap: 2px; overflow-wrap: anywhere; }
.guia .entrada.apagada { opacity: var(--apagado); border-style: dashed; }
.guia .entrada .objeto { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--tenue); }

.bitacora .evento { display: grid; gap: 2px; }
.bitacora .objeto { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--tenue); word-break: break-all; }

.interacciones textarea { margin-bottom: 6px; }
/* El detalle de una interacción se lee con los renglones con que se escribió
   ("Acuerdos:" y su lista), y una liga larga no ensancha la ficha. */
.interacciones .detalle { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
label.en-linea { margin-bottom: 0; flex: 1 1 200px; }
.fila > label { flex: 1 1 200px; margin-bottom: 0; }

.formulario { display: grid; gap: 8px; }
.formulario.en-linea { grid-template-columns: 1fr auto; }

/* La cuenta en la ficha: sus datos en una fila y sus personas en lista. */
.cuenta { border-top: 1px solid var(--borde); margin-top: 12px; }
.fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.fila input, .fila > select { flex: 1 1 140px; width: auto; }
/* Un selector mide, por lo menos, lo que su opción más larga: con el nombre
   de un curso propio (hasta 160 caracteres) ensancharía la página entera. */
.fila > select { min-width: 0; }
.casilla { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.casilla input { width: auto; }
.contacto { display: grid; gap: 4px; }
.contacto .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde-control); border-radius: 8px;
  background: var(--fondo); color: var(--texto);
}
/* El navegador pinta el texto de ayuda de un campo en un gris suyo (#757575), que sobre el fondo del panel no llega a 4.5:1:
   se pide con el tono tenue, que sí cumple en claro, en oscuro y en el taller. */
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: 1; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--tenue); margin-bottom: 8px; }
.quien select { width: auto; }
button {
  padding: 8px 14px; border: 0; border-radius: 8px; background: var(--acento); color: var(--sobre-acento);
  cursor: pointer; font-weight: 600;
}
button.secundario { background: none; color: var(--acento); border: 1px solid var(--acento); }
button.peligro { background: none; color: var(--peligro); border: 1px solid var(--peligro); }
button.chico { padding: 3px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
.panel > button { margin-top: 8px; }

.chat { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; margin-bottom: 12px; }
.burbuja { padding: 8px 12px; border-radius: 10px; max-width: 80%; white-space: pre-wrap; }
.burbuja.usuario { justify-self: end; background: var(--acento-suave); }
.burbuja.asistente { justify-self: start; border: 1px solid var(--borde); }

.aviso {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 8px;
  background: var(--alerta-suave); color: var(--alerta);
}
/* El aviso global flota fijo sobre la ventana: pintado al principio de la
   página, quien pulsa un botón al fondo de la ficha no lo ve y cree que el
   botón no hizo nada. Los avisos en línea (.aviso.en-linea) se quedan donde
   están. Va por encima del taller de cursos (taller.css), que tapa la página
   entera: ahí debajo nadie lo vería. */
#aviso {
  position: fixed; top: 12px; left: 20px; right: 20px; z-index: 70; margin: 0;
  border: 1px solid var(--alerta); box-shadow: 0 6px 20px var(--sombra);
}

.tabla { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14px; }
.tabla th, .tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.tabla th { color: var(--tenue); font-weight: 600; }

pre.bloque {
  white-space: pre-wrap; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 8px; padding: 10px; font-size: 13px; max-height: 280px; overflow: auto;
}

/* El coach es lo privado, y se distingue por color: magenta, el de "Guía".
   Que se vea distinto del resto ayuda a recordar que nadie más lo lee. */
#vista-coach .panel { border-color: var(--coach); }
#vista-coach .panel h2 { color: var(--coach); }
#vista-coach .chat { background: var(--coach-suave); border-radius: 8px; padding: 10px; }

/* "Tu práctica", también magenta: es del vendedor y de nadie más. Lo que
   está por practicar lleva el filo entero; lo ya logrado se apaga y va
   punteado, como lo hecho en el plan de una junta. Son números y textos de
   Pepe, pero el curso sugerido es una clave larga: se parte en vez de
   ensanchar el panel. */
.practica .brecha { display: grid; gap: 4px; border-left: 3px solid var(--coach); overflow-wrap: anywhere; }
.practica .brecha.lograda { border-left: 3px dashed var(--tenue); color: var(--tenue); }
.practica .brecha .encabezado { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.practica .brecha .parte { display: grid; gap: 1px; font-size: 14px; }
.practica .brecha .parte .titulo { color: var(--tenue); font-size: 12px; }
.practica .brecha .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.etiqueta.lograda { background: var(--cian-suave); color: var(--cian-tinta); }

/* El cierre en la ficha: los dos formularios van plegados, para que cerrar
   una oportunidad sea un paso que se abre y no un bloque siempre a la vista. */
.cierre { margin-bottom: 8px; }
.cierre-formulario { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
.cierre-formulario summary { cursor: pointer; font-size: 13px; color: var(--acento); font-weight: 600; }
.cierre-formulario[open] summary { margin-bottom: 8px; }
.cierre-formulario .vendidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; margin-bottom: 8px; }

/* Lo que la página esconde con `hidden` se queda escondido aunque su etiqueta
   tenga un `display` propio: un `label` lo tiene, y sin esto el selector de
   cortes de Métricas —que es solo del admin— se le pintaría a cualquiera. */
[hidden] { display: none !important; }

/* Las métricas. El embudo es una lista de escalones, cada uno con su medidor:
   el elemento nativo, porque el panel no admite estilos en línea (CSP). */
.periodo { align-items: end; }
.periodo label { flex: 0 1 180px; margin-bottom: 0; }
.metricas h2 { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--borde); }
.embudo li { display: grid; gap: 2px; }
.embudo .escalon { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 3ch; gap: 10px; align-items: center; }
.embudo meter { width: 100%; height: 14px; }
meter { appearance: none; background: var(--borde); border-radius: 6px; }
meter::-webkit-meter-bar { background: var(--borde); border: 0; border-radius: 6px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--acento); border-radius: 6px; }
meter::-moz-meter-bar { background: var(--acento); border-radius: 6px; }
.embudo .cuantas { text-align: right; font-variant-numeric: tabular-nums; }
.con-pepe .aviso { margin: 8px 0 0; }

/* Training. El avance es un medidor nativo con su texto (sin estilos en
   línea). Completado lleva el turquesa de lo logrado; en progreso, el violeta de lo
   que se está haciendo; sin iniciar, gris. */
.training .avance { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin: 6px 0; }
.training .avance meter { width: 100%; height: 12px; }
.training .avance .etiqueta.completado { background: var(--cian-suave); color: var(--cian-tinta); }
.training .avance .etiqueta.sin-iniciar { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
.training .encabezado { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.training .lista li { display: grid; gap: 4px; }
.training .acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.training .continuar { display: grid; gap: 6px; padding: 8px 10px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 8px 8px 0; }
.training .titulo { color: var(--tenue); font-size: 12px; }
.training .perfil ul { margin: 0; padding-left: 18px; }
/* Los datos sueltos de la ficha de un curso (para quién es, horas, origen de
   la inscripción) van cada uno en su renglón. */
.training .panel > .sub, .training .panel > div > .sub { display: block; color: var(--tenue); font-size: 13px; }

/* El reproductor: el objetivo arriba, la ficha rápida siempre a un clic, los
   pasos como lista (el activo con el filo violeta, lo hecho apagado) y un solo
   bloque a la vista. */
.reproductor .objetivo { font-size: 15px; margin: 0 0 8px; }
.reproductor .ficha { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.reproductor .ficha summary { cursor: pointer; color: var(--acento); font-weight: 600; font-size: 13px; }
.reproductor .ficha .campo { display: grid; gap: 1px; margin: 6px 0; border-left: 3px solid var(--acento); padding-left: 10px; font-size: 14px; }
.reproductor .pasos { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.reproductor .pasos button { padding: 4px 10px; border: 1px solid var(--borde-control); border-radius: 999px; background: none; font-size: 13px; font-weight: 400; color: var(--tenue); }
.reproductor .pasos li.hecho button { border-style: dashed; color: var(--cian-tinta); }
.reproductor .pasos li.activo button { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); font-weight: 600; }
.reproductor .paso { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 6px; }
.reproductor .paso h3 { margin: 0; color: var(--texto); font-size: 16px; }
/* Un párrafo conserva los saltos de renglón que se tecleó (una lista con guion, un renglón aparte): el servidor los guarda tal cual. */
.reproductor .texto p { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.reproductor .texto ul { margin: 0; padding-left: 18px; }
.reproductor audio { width: 100%; }
.reproductor details summary { cursor: pointer; color: var(--acento); font-size: 13px; }
.reproductor .recurso a { color: var(--acento); font-weight: 600; overflow-wrap: anywhere; }

/* La pantalla con sus puntos señalados: la imagen es el lienzo y cada punto
   es un botón colocado encima en porcentaje (la posición se asigna por el
   CSSOM, no con un atributo style). El activo lleva el filo del acento. El
   número cae sobre una captura que nadie conoce de antemano (clara u oscura),
   así que su letra lleva un halo del color de la tarjeta: se lee sobre
   cualquier imagen, en los dos temas. */
.reproductor .lienzo { position: relative; display: inline-block; max-width: 100%; }
.reproductor .lienzo img { display: block; max-width: 100%; border-radius: 8px; border: 1px solid var(--borde); }
.reproductor .punto {
  position: absolute; padding: 0; border: 2px solid var(--cian); background: color-mix(in srgb, var(--cian) 15%, transparent); border-radius: 6px;
  color: var(--texto); font-weight: 700; font-size: 13px; cursor: pointer;
  text-shadow: 0 0 2px var(--superficie), 0 0 2px var(--superficie), 0 0 3px var(--superficie), 0 0 3px var(--superficie);
}
.reproductor .punto.activo { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 25%, transparent); box-shadow: 0 0 0 2px var(--acento-suave); }
.reproductor .narracion { display: grid; gap: 4px; margin-top: 8px; }
.reproductor .narracion p { margin: 0; }
.reproductor .navegacion { justify-content: space-between; }

/* La práctica y el examen dentro del reproductor. Lo que se contesta va en
   su propio recuadro; lo que Pepe dice y lo que se esperaba aparecen solo
   después, cada uno con su filo (Pepe en el color del coach, lo esperado en
   el turquesa de lo logrado). Correcta/incorrecta y aprobado/no aprobado llevan
   etiqueta, nunca solo color. */
.reproductor .pregunta, .reproductor .instruccion { font-weight: 600; margin: 6px 0; white-space: pre-line; overflow-wrap: anywhere; }
.reproductor .caso .sub { display: block; color: var(--tenue); font-size: 13px; }
.reproductor .parte { display: grid; gap: 2px; margin: 6px 0; }
.reproductor .parte .titulo { color: var(--tenue); font-size: 12px; }
.reproductor .parte > span:not(.titulo) { white-space: pre-line; overflow-wrap: anywhere; }
.reproductor .parte ul { margin: 0; padding-left: 18px; }
.reproductor .respuesta { margin-top: 8px; }
.reproductor .respuesta textarea, .reproductor .reactivos textarea, .reproductor .reactivos input:not([type="radio"]):not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
.reproductor .contestado { display: grid; gap: 8px; }
.reproductor .contestado .pepe { border-left: 3px solid var(--coach); padding-left: 10px; }
.reproductor .contestado .modelo { border-left: 3px solid var(--cian); padding-left: 10px; }
.reproductor .contador { display: block; margin-top: 4px; font-size: 12px; color: var(--tenue); text-align: right; }
.reproductor .contador.pasado { color: var(--peligro); font-weight: 600; }
.reproductor .casillas { display: grid; gap: 4px; }
.reproductor .pares { display: grid; gap: 6px; }
.reproductor .pares label { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.reproductor .ordenable { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.reproductor .ordenable li { display: flex; gap: 6px; align-items: center; }
.reproductor .ordenable li span { flex: 1; }
.etiqueta.correcta, .etiqueta.aprobado { background: var(--cian-suave); color: var(--cian-tinta); }
.etiqueta.incorrecta, .etiqueta.no-aprobado { background: none; color: var(--peligro); border: 1px solid var(--peligro); }
.etiqueta.pendiente { background: var(--alerta-suave); color: var(--alerta); }
.reproductor .examen .reactivos { padding-left: 20px; margin: 8px 0; display: grid; gap: 10px; }
.reproductor .examen .reactivos li { display: grid; gap: 4px; }
.reproductor .examen .intentos .reactivos { list-style: none; padding: 0; gap: 2px; }
.reproductor .examen .intentos .reactivos li { display: flex; gap: 8px; font-size: 13px; }
.reproductor .examen .intentos .reactivos li.correcta { color: var(--cian-tinta); }
.reproductor .examen .intentos .reactivos li.incorrecta { color: var(--peligro); }
.reproductor .examen .resumen { font-weight: 600; margin: 6px 0; }
.reproductor .examen .resumen.aprobado { color: var(--cian-tinta); }
.reproductor .examen .resumen.no-aprobado { color: var(--peligro); }

/* El tutor del módulo: un panel lateral del reproductor con el hilo del
   módulo, en el color del coach (es igual de privado). */
.reproductor .tutor { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--coach-suave); display: grid; gap: 6px; }
.reproductor .tutor h3 { margin: 0; }
.reproductor .tutor .etiqueta { justify-self: start; }
.reproductor .tutor .chat { max-height: 40vh; background: var(--superficie); border-radius: 8px; padding: 8px; margin: 0; }
.reproductor .tutor .en-linea { display: flex; gap: 6px; }
.reproductor .tutor .en-linea input { flex: 1; }

/* La tarjeta que ofrece la retroalimentación del tutor al terminar un ejercicio: junto al ejercicio, con el turquesa de lo logrado. */
.reproductor .retroalimentacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--cian); border-radius: 10px; background: var(--cian-suave); }
.reproductor .retroalimentacion span { flex: 1; min-width: 180px; }

/* Administración → Training: cada persona con sus perfiles (casillas) y sus
   cursos; una inscripción retirada se apaga. Por revisar: cada abierta con la
   pregunta, lo que contestó, lo que Pepe propone y los dos botones. */
.revision li { display: grid; gap: 4px; }
.revision .parte { display: grid; gap: 2px; }
.revision .parte .titulo { color: var(--tenue); font-size: 12px; }
.revision .propuesta { color: var(--coach); font-size: 13px; }
.equipo .persona { display: grid; gap: 6px; }
.equipo .perfiles-de-venta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.equipo .lista.compacta li { display: grid; gap: 4px; }
.equipo li.retirada { opacity: var(--apagado); }
#training-equipo .avance { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
#training-equipo .avance meter { width: 100%; height: 12px; }

/* Practicar con Pepe. Las tres prácticas como tarjetas; los escenarios por
   comprador; la simulación es el chat del coach con el escenario arriba y,
   al cerrar, la rúbrica como tabla (cada criterio con su evidencia). El
   ensayo lleva la etiqueta del coach (privado); la formal, la del equipo. */
.training .practicas li { display: grid; gap: 4px; }
.training .perfil-de-escenarios h4 { margin: 12px 0 6px; font-size: 14px; color: var(--tenue); }
.training .escenarios li p { margin: 2px 0; }
.training .abridor { display: grid; gap: 6px; }
.training .abridor .casilla { font-size: 13px; color: var(--tenue); }
.training .mias h3 { margin: 14px 0 6px; }
.training .mias li { display: grid; gap: 4px; }
.simulacion { display: grid; gap: 8px; }
.simulacion .escenario { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 8px 8px 0; }
.simulacion .escenario h3 { margin: 0; color: var(--texto); }
.simulacion .escenario p { margin: 4px 0 0; }
.simulacion .chat { max-height: 45vh; }
.simulacion .formulario textarea { width: 100%; box-sizing: border-box; }
.cierre { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.cierre h3 { margin: 0; }
.cierre .etiqueta { justify-self: start; }
.cierre .propuesta { margin: 0; color: var(--coach); font-weight: 600; }
.cierre .rubrica td.evidencia { color: var(--tenue); font-style: italic; }
.cierre .parte { display: grid; gap: 2px; }
.cierre .parte .titulo { color: var(--tenue); font-size: 12px; }
.cierre .parte ul { margin: 0; padding-left: 18px; }
.cierre .parte.freno, .objeciones .parte.freno { border-left: 3px solid var(--alerta); padding-left: 10px; }
.simulacion-bloque .instruccion { font-weight: 600; margin: 6px 0; }
.objeciones li { display: grid; gap: 4px; }
.objeciones .parte { display: grid; gap: 2px; }
.objeciones .parte .titulo { color: var(--tenue); font-size: 12px; }
.formales li { display: grid; gap: 4px; }
.formales .propuesta { color: var(--coach); font-size: 13px; }
.formales .detalle .chat { max-height: 35vh; }

/* Las certificaciones. Cada requisito en su renglón, con lo cumplido en turquesa
   y lo que falta marcado; en Administración, lo que hay por certificar y lo
   ya otorgado. La constancia es una hoja sobria, pensada para imprimirse. */
.certificaciones { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.requisitos { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.requisitos .requisito { display: grid; gap: 2px; padding-left: 10px; border-left: 3px solid var(--borde); }
.requisitos .requisito.cumplido { border-left-color: var(--cian); }
.requisitos .requisito.falta { border-left-color: var(--alerta); }
.requisitos .requisito button { justify-self: start; }
.certificadas .certificacion { display: grid; gap: 4px; }
.certificadas .certificacion p { margin: 0; font-size: 13px; }
.por-certificar li, .otorgadas li { display: grid; gap: 4px; }
.por-certificar details summary, #training-por-certificar > details summary { cursor: pointer; color: var(--acento); font-size: 13px; }
.otorgadas .acciones input { flex: 1; min-width: 180px; }
.por-certificar .detalle .chat, .otorgadas .detalle .chat { max-height: 35vh; }
.constancia { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 28px 20px; border: 2px solid var(--borde); border-radius: 12px; }
.constancia h2 { margin: 8px 0 0; font-size: 26px; }
.constancia .certifica { margin: 0; font-size: 20px; font-weight: 600; }
.constancia .folio { font-family: ui-monospace, monospace; font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
/* «Gestionar Cursos»: los cursos propios del espacio, cada uno con el paso
   editorial en que va. El alta y el tablero se abren aparte, a pantalla
   completa, con su propio tema (taller.css). */
.etiqueta.borrador { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
.etiqueta.revision { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.publicado { background: var(--cian-suave); color: var(--cian-tinta); }

/* Quien aprende: el aula de un curso ULX con su nombre y su color (los de
   Learnia), y los pasos de un módulo agrupados por actividad. */
.etiqueta.aula { color: var(--sobre-acento); background: var(--aula, var(--acento)); }
.aula-onboarding { --aula: var(--cian-tinta); }
.aula-explora { --aula: var(--azul-tinta); }
.aula-interactua { --aula: var(--acento); }
.aula-transforma { --aula: var(--alerta); }
.training .modulos li.con-aula { border-left: 4px solid var(--aula); padding-left: 10px; }
.training .actividades-del-modulo { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.training .actividades-del-modulo li { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
/* Quien está inscrito abre una actividad desde su fila; la casilla de la derecha dice si ya la completó. */
.training .fila-de-actividad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; background: none; color: var(--texto); font-size: 13px; font-weight: 400; text-align: left; }
.training .fila-de-actividad:hover { border-color: var(--acento); background: var(--acento-suave); }
.training .fila-de-actividad strong { font-weight: 600; }
.training .casilla-de-actividad { margin-left: auto; width: 20px; height: 20px; display: inline-grid; place-items: center; border: 2px solid var(--borde-control); border-radius: 5px; font-size: 13px; font-weight: 700; color: var(--sobre-acento); }
.training .fila-de-actividad.hecha .casilla-de-actividad { background: var(--cian-tinta); border-color: var(--cian-tinta); }
.reproductor .pasos li.de-actividad { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

/* Recomendado para ti: cada recomendación con el filo del coach (es Pepe
   quien aconseja) y su razón entera; un texto largo se parte, no ensancha.
   La ficha de un perfil de venta, un campo debajo del otro. La analítica del
   admin: la tabla por curso se desplaza sola si no cabe (con un ancho mínimo,
   para que sus celdas no se aplasten), y a cada persona se le marca el
   abandono. */
.training .recomendaciones li { border-left: 3px solid var(--coach); padding-left: 10px; overflow-wrap: anywhere; }
.training .recomendaciones .etiqueta { justify-self: start; }
.training .ficha-de-perfil section ul { margin: 0; padding-left: 18px; }
.training .ficha-de-perfil h3 { margin: 14px 0 4px; font-size: 14px; }
.analitica .tabla-ancha { overflow-x: auto; }
.analitica .tabla-ancha .tabla { min-width: 640px; }
.analitica .tabla td:not(:first-child), .analitica .tabla th:not(:first-child) { font-variant-numeric: tabular-nums; }
.analitica .persona { display: grid; gap: 4px; }
.analitica .encabezado { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.analitica .etiqueta.completado { background: var(--cian-suave); color: var(--cian-tinta); }
.analitica .etiqueta.sin-iniciar { background: none; color: var(--tenue); border: 1px dashed var(--tenue); }

/* «Imprimir» saca solo la constancia: mientras lleva la marca, en el papel no
   queda nada más que ella y lo que la contiene (lo demás ni ocupa lugar, para
   que no salgan hojas en blanco), y va en negro sobre blanco: el tema oscuro
   del panel, impreso sin fondos, dejaría letras claras sobre papel claro. */
@media print {
  body:has(.constancia.imprimiendo) *:not(:has(.constancia.imprimiendo), .constancia.imprimiendo, .constancia.imprimiendo *) { display: none; }
  body:has(.constancia.imprimiendo), body:has(.constancia.imprimiendo) * { background: var(--blanco); color: var(--negro); }
  body:has(.constancia.imprimiendo) *:has(.constancia.imprimiendo) { margin: 0; padding: 0; border: none; box-shadow: none; }
  .constancia.imprimiendo { border: none; }
  .constancia.imprimiendo .acciones { display: none; }
}

/* El CRM: la empresa con todo adentro. La lista lleva en cada renglón lo que se
   necesita para decidir a cuál abrir; en la ficha, lo que quien vende aprecia de
   una persona va con filo punteado y su rótulo, como toda hipótesis: es lo que
   él cree, no lo que ella dijo. Lo que Pepe entendió de una reunión (y caduca)
   se marca igual, con su fecha a la vista. */
.vacio-crm { border: 1px dashed var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; display: grid; gap: 8px; }
.vacio-crm h3 { margin: 0; }
/* Con cientos de empresas la lista no se come la página: tiene su propio desplazamiento, y «Nueva empresa» y la ficha siguen cerca. */
#crm-empresas { max-height: min(70vh, 640px); overflow-y: auto; padding: 2px; }
#crm-nueva .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
#crm-empresas li { display: grid; gap: 2px; }
#crm-empresas li:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
#crm-empresas .proteccion { padding: 2px 6px; border-left: 3px solid var(--acento); border-radius: 0 6px 6px 0; }
#crm-empresas .proteccion.por-vencer { border-left: 3px dashed var(--alerta); }
#crm-empresas .proteccion.vencida { border-left-color: var(--alerta); background: var(--alerta-suave); }
#crm-empresas .etiqueta { justify-self: start; }
#crm-empresas .vacio .chico { justify-self: start; margin-top: 4px; }
.etiqueta.decisor { background: none; color: var(--tenue); border: 1px solid var(--borde); }
/* Buscar, filtrar y ordenar la lista. Los atajos van a la vista; los filtros, plegados, y lo que está activo se ve siempre como fichas
   que se quitan una a una: quien mira no tiene que abrir nada para saber por qué ve lo que ve. */
.atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fila.orden label { flex: 0 0 auto; margin-bottom: 0; }
.fila.orden select { flex: 1 1 160px; }
#crm-filtros { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
#crm-filtros summary { cursor: pointer; color: var(--acento); font-size: 13px; font-weight: 600; }
#crm-filtros[open] summary { margin-bottom: 8px; }
#crm-filtros-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-height: min(40vh, 340px); overflow-y: auto; padding: 2px; }
#crm-filtros-cuerpo fieldset { border: 1px solid var(--borde); border-radius: 8px; margin: 0; padding: 4px 10px 6px; min-width: 0; display: grid; gap: 2px; align-content: start; }
#crm-filtros-cuerpo legend { color: var(--tenue); font-size: 12px; font-weight: 600; padding: 0 4px; }
#crm-filtros-cuerpo .casilla { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
#crm-filtros-cuerpo .fila { margin: 0; flex-wrap: nowrap; min-width: 0; }
#crm-filtros-cuerpo .fila input { width: 0; min-width: 0; flex: 1 1 0; }
#crm-filtros-cuerpo input[aria-invalid="true"] { border-color: var(--peligro); }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.fichas .ficha { border-radius: 999px; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
#crm-conteo { margin: 0 0 8px; }
#crm-ficha .acciones { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#crm-ficha h3 { margin: 18px 0 6px; padding-top: 10px; border-top: 1px solid var(--borde); }
#crm-ficha .plegado { margin: 8px 0; }
#crm-ficha summary { cursor: pointer; color: var(--acento); font-size: 13px; }
.apreciacion { display: grid; gap: 2px; margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--tenue); border-radius: 8px; }
.apreciacion .sub { display: block; }
.etiqueta.apreciacion { justify-self: start; background: none; color: var(--tenue); border: 1px dashed var(--tenue); }
.de-la-persona { display: grid; gap: 4px; margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 6px; }
.de-la-persona h5, .reunion h5 { margin: 6px 0 2px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; }
.de-la-persona ul { margin: 0; }
.de-la-persona .cita, .reunion .cita { display: block; color: var(--tenue); font-style: italic; }
.reunion { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; }
.reunion[open] { border-color: var(--acento); }
.reunion .salio { display: grid; gap: 2px; margin-top: 6px; border-top: 1px solid var(--borde); padding-top: 6px; }
.reunion .entendido { border-left: 3px dashed var(--tenue); padding-left: 10px; margin-top: 8px; }
.reunion .caduca { color: var(--alerta); }
.reuniones .lista > li { padding: 4px; }
.lista li.cerrada { opacity: var(--apagado); }
.freno.detenida { font-size: 13px; font-weight: 500; }
.historial .detalle { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.nuevo-contacto { border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 8px; }

/* Clientes y prospectos: las filas que se agregan y se quitan (centros de trabajo, otros medios de contacto) y la condición de una empresa. */
.filas-editables { display: grid; gap: 6px; margin-bottom: 6px; }
.fila-editable { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fila-editable > input, .fila-editable > select { flex: 1 1 140px; min-width: 0; }
.condicion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.etiqueta.prospecto { border: 1px dashed var(--tenue); background: none; color: var(--tenue); }
/* Una casilla dentro de un grupo se lee en una línea: la regla de las etiquetas del grupo las apila. */
.grupo label.casilla { display: flex; }