/* ============================================================================
   app.css — la plataforma por dentro (demo.html).
   Los colores y tipografías salen de marca.css.
   ========================================================================= */

body.app { background: var(--paper); }

/* ------------------------------------------------------------- estructura */
.layout { display: flex; min-height: 100vh; }

.lateral{
  width: 246px; flex: 0 0 246px; background: var(--ink); color: var(--sidetx);
  padding: 22px 0 30px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca { padding: 0 20px 22px; }
.lateral .empresa{
  padding: 16px 20px; margin: 0 12px 18px; border-radius: 8px;
  background: rgba(255,255,255,.05);
}
.lateral .empresa .et{
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #6D7A8C;
  font-weight: 700; margin-bottom: 5px;
}
.lateral .empresa .nom { color: var(--white); font-weight: 700; font-size: 15.5px; }
.lateral .empresa .sub { font-size: 12.5px; color: var(--sidetx); margin-top: 2px; }

.grupo{
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: #5C687A; padding: 16px 20px 7px;
}
/* La raya separa «Tus datos» de las tres preguntas del negocio: es
   mantenimiento, no análisis. Va sin texto a propósito — un cuarto rótulo le
   daría la misma jerarquía que a los otros tres. Si esta regla no llegara, se
   pierde la línea y nada más: el <div> está vacío. */
.raya{ height: 1px; background: rgba(255,255,255,.11); margin: 18px 20px 5px; }
.lateral button.item{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: calc(100% - 24px); margin: 1px 12px; padding: 9px 14px;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; color: #C6CEDA; text-align: left;
}
.lateral button.item:hover { background: rgba(255,255,255,.06); color: var(--white); }
.lateral button.item.activo { background: rgba(227,213,176,.14); color: var(--goldlt); font-weight: 700; }

/* El icono y el texto van pegados y el globo queda del otro lado, que es lo que
   ya hacía el `justify-content: space-between` del botón. Los dibujos son de
   trazo y heredan `currentColor`, así que se prenden solos cuando el renglón
   está activo: no hay una versión dorada y otra gris de cada uno. */
.lateral .item .et { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lateral .item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.lateral .item.activo svg { opacity: 1; }

.lateral .globo{
  background: var(--clay); color: var(--white); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
  flex: 0 0 auto;
}
/* Dorado es una tarea; rojo es lo que cuesta plata no leer. «Tres datos por
   vencer» es una tarea, y pintarla del color de una urgencia le saca sentido
   al color en las dos. */
.lateral .globo.a { background: var(--gold); }
.lateral .pieaviso{
  margin: 26px 20px 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; line-height: 1.5; color: #6D7A8C;
}
.lateral .pieaviso a { color: var(--sidetx); }
/* El aviso de versión nueva: una línea en el lateral, no un cartel que tape.
   Dorado y no rojo: no es un problema, es una novedad. */
.lateral .nueva-version{
  display: block; margin: 18px 20px 0; padding: 0;
  color: var(--goldlt); font-size: 12px; line-height: 1.45;
  /* La dirección de la página de descarga es una palabra sola y más larga que
     el lateral: sin esto se sale por el costado en vez de cortarse. */
  overflow-wrap: anywhere;
}

.principal { flex: 1 1 auto; min-width: 0; }

.barra{
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 20px 34px; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.barra h1 { font-size: 25px; }
.barra .sub { color: var(--muted); font-size: 14.5px; margin: 3px 0 0; }
.barra .barra-txt { min-width: 0; }

/* A la derecha van dos cosas y por eso hay un envoltorio: los chips de fecha y
   la cuenta. Sin él, `space-between` los separaría a los dos extremos y los
   chips quedarían flotando en el medio de la barra. */
.barra .barra-der { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

/* Los chips dicen hasta cuándo llegan los datos y qué mes se está mirando, que
   son las dos preguntas que alguien se hace antes de creerle a un número de la
   pantalla. No dicen que esto es una demo: eso va una sola vez, chico, en el
   pie del sitio. */
.barra .chips { display: flex; align-items: center; gap: 8px; }
.chip{
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font-size: 12.5px; color: var(--muted);
}
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
/* El chip del recorrido. Dorado y no rojo: no es un problema, es una aclaración
   —los números que se están mirando son de ejemplo—. Tiene que leerse sin
   pedirle atención a nadie y sin desaparecer nunca. */
.chip.recorrido { background: var(--goldbg); border-color: var(--goldln); color: var(--gold); font-weight: 700; }
.chip svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* La cuenta, arriba a la derecha: quién está adentro de la plataforma. */
.barra .cuenta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.barra .cuenta .quien { font-size: 13.8px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.barra .cuenta .avatar{
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 15px;
}

.hoja { padding: 26px 34px 60px; }

@media (max-width: 900px){
  .layout { display: block; }
  .lateral{
    width: auto; flex: none; height: auto; position: static;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px;
  }
  .lateral .marca, .lateral .empresa { padding: 0 8px; margin: 0 8px 0 0; background: none; }
  /* La raya se cae junto con los rótulos de grupo: en angosto el menú es una
     fila que se envuelve, y una línea horizontal de 1 px metida ahí adentro no
     separa nada, corta un renglón por la mitad. */
  .lateral .empresa .et, .lateral .empresa .sub, .lateral .grupo,
  .lateral .raya, .lateral .pieaviso { display: none; }
  .lateral button.item { width: auto; margin: 2px; padding: 7px 11px; font-size: 13px; }
  .barra, .hoja { padding-left: 16px; padding-right: 16px; }
  .barra .cuenta .quien { display: none; }
  /* Los chips se caen antes que el nombre de la cuenta: el mes y la fecha de
     corte también están escritos adentro de las pantallas, así que en angosto
     no se pierde información, se pierde una repetición. */
  .barra .chips { display: none; }
}

/* ----------------------------------------------------------------- piezas */
.tarjeta{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radio);
  padding: 20px 22px; margin-bottom: 16px;
}
.tarjeta > h3 { font-size: 18px; margin-bottom: 2px; }
.tarjeta > .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.rejilla { display: grid; gap: 16px; }
@media (min-width: 700px){ .rejilla.dos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px){ .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px){ .rejilla.cuatro { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 1049px){ .rejilla.cuatro { grid-template-columns: 1fr 1fr; } }

/* KPI ---------------------------------------------------------------- */
.kpi{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radio);
  padding: 17px 19px 16px;
}
.kpi .et{
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin-bottom: 8px;
}
.kpi .val { font-family: var(--serif); font-weight: 700; font-size: 29px; color: var(--ink); line-height: 1.05; }
.kpi .pie { font-size: 13px; margin-top: 7px; color: var(--muted); }
.kpi .pie .up   { color: var(--green); font-weight: 700; }
.kpi .pie .down { color: var(--clay);  font-weight: 700; }

/* renglón de dato («Tus datos») -------------------------------------- */
.dato{
  display: flex; align-items: flex-start; gap: 13px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.dato:last-child { border-bottom: 0; padding-bottom: 2px; }
/* Hasta el 9 de septiembre de 2026 había un sello a la izquierda con el ritmo
   (MES, 3M, 1×). Se fue: el ritmo lo dice el título de la tarjeta que agrupa
   los renglones, y el renglón queda en dos líneas. */
.dato .txt { flex: 1 1 auto; min-width: 0; }
.dato .nom { font-size: 14.8px; font-weight: 700; color: var(--ink); }
.dato .nom .val { font-weight: 400; color: var(--muted); }
.dato .det { font-size: 12.8px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.dato .est { flex: 0 0 auto; margin-top: 1px; }

/* El signo de pregunta: cerrado no dice nada; abierto dice de dónde sale el
   dato y qué habilita. Mismo dibujo que en la puerta del programa. Los dos
   tamaños van escritos porque el botón hereda el del renglón y un «?» de
   14,8 px con borde redondo se ve como un huevo. */
.ayuda{
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; vertical-align: -3px; border-radius: 50%;
  border: 1px solid var(--goldln); background: var(--goldbg); color: var(--gold);
  font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; padding: 0;
}
.ayuda[aria-expanded="true"] { background: var(--gold); color: var(--white); }
.ayuda-texto{
  display: none; margin: 7px 0 4px; padding: 10px 14px;
  background: var(--goldbg); border: 1px solid var(--goldln); border-radius: 8px;
  font-size: 13px; line-height: 1.5; color: var(--ink2);
}
.ayuda-texto.abierta { display: block; }

/* La etiqueta de estado. Los tonos son los mismos tres de un aviso: ámbar es
   una tarea y rojo es lo que cuesta plata, así que un dato por vencer nunca
   se pinta de rojo. */
.etq{
  display: inline-block; font-size: 11px; font-weight: 700; white-space: nowrap;
  border-radius: 999px; padding: 3px 10px; border: 1px solid transparent;
}
.etq.g { background: #EAF2EE; color: var(--green); border-color: #CFE3D8; }
.etq.a { background: var(--goldbg); color: var(--gold); border-color: #E6D9B8; }
.etq.r { background: #F7EAE7; color: var(--clay); border-color: #E8CDC7; }
.etq.n { background: var(--paper); color: var(--muted); border-color: var(--line); }

/* Dónde se carga el dato ---------------------------------------------
   El 1 de septiembre de 2026 la pantalla dejó de ser «un informe de lo que no
   hiciste» (palabras de Lucas) y pasó a tener, en cada renglón, el lugar donde
   se pone lo que falta. Estas reglas son ese lugar.

   Van adentro de `.txt`, o sea debajo del nombre y del detalle, y NO como una
   cuarta columna: el renglón ya tiene tres cosas de ancho fijo —sello, texto,
   estado— y una cuarta las aplasta en el celular. Debajo, el campo hereda la
   sangría del texto y la etiqueta de estado sigue siendo la última palabra del
   renglón, que es lo que se lee de un barrido vertical.

   Ojo con una cosa: el campo se dibuja SIEMPRE, esté el dato o no. Un campo que
   aparece solo cuando falta resuelve la mitad del pedido —cargar— y deja afuera
   la otra mitad —editar lo que ya pusiste—. Por eso el que está lleno tiene que
   verse tranquilo (fondo papel, sin borde de color) y no gritar como uno vacío. */
.dato .acc{
  margin-top: 9px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px 14px;
}
.dato .acc .campo{ display: block; }
.dato .acc .campo > span{
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
/* «opcional» va en la misma línea que la etiqueta pero sin versalitas ni
   negrita: es lo único que distingue un campo que se puede dejar vacío de uno
   que la plataforma está esperando. */
.dato .acc .campo > span i{
  font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); opacity: .8;
}
.dato .acc .campo input{
  width: 152px; box-sizing: border-box;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px;
}
.dato .acc .campo input:focus{
  outline: none; border-color: var(--gold); background: var(--white);
}
/* Lo que se escribió y no se entendió. No se borra ni se corrige solo: se
   devuelve tal cual se tipeó y se marca, porque adivinar qué quiso decir es
   inventarle un número a la empresa. */
.dato .acc .campo.mal input{
  border-color: var(--clay); background: var(--claybg); color: var(--clay);
}

/* El control de subir. Es un <label> con el <input type=file> escondido
   adentro: el botón nativo no se puede pintar y sale distinto en cada
   navegador, y esta pantalla tiene nueve renglones donde cada uno se vería de
   otra forma. Escondido con `position:absolute` y no con `display:none`,
   porque un input escondido con display no se puede abrir desde el teclado. */
.dato .acc .subir{
  position: relative; overflow: hidden; display: inline-block; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--gold);
  background: var(--goldbg); border: 1px solid var(--goldln); border-radius: 7px;
  padding: 8px 13px;
}
.dato .acc .subir:hover{ background: #F5EDD9; }
.dato .acc .subir input[type=file]{
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
/* El nombre del archivo que se acaba de elegir. Va al lado del botón y no
   adentro: el botón sigue diciendo lo que hace, y esto dice lo que pasó. */
.dato .acc .marca{
  font-size: 12.8px; color: var(--muted); padding-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; max-width: 260px; white-space: nowrap;
}

@media (max-width: 620px){
  .dato { flex-wrap: wrap; }
  .dato .est { flex-basis: 100%; }
  .dato .acc .campo input { width: 100%; }
  .dato .acc .campo { flex: 1 1 140px; }
}

/* avisos ------------------------------------------------------------- */
.aviso{
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 11px; background: var(--white);
}
.aviso .ttl{
  font-weight: 700; color: var(--ink); font-size: 15.5px;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.aviso .ttl .cuando { font-weight: 400; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.aviso .bd { font-size: 14.6px; line-height: 1.55; margin-top: 5px; }
/* El cuerpo de un aviso ahora viene en párrafos, porque sale de una plantilla
   de WhatsApp. Sin esto el navegador les pone el margen por defecto y el aviso
   queda con un hueco arriba y otro abajo. */
.aviso .bd p { margin: 0 0 9px; }
.aviso .bd p:last-child { margin-bottom: 0; }
.aviso .calc{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.4px; color: var(--muted); margin-top: 9px;
  border-top: 1px dashed var(--line); padding-top: 8px;
}
/* El botón que lleva a otro lado: de la advertencia al escenario que la
   contesta, y del panel «Lo que viene» de Inicio a las trece semanas enteras.
   Estaba escrito como `.aviso .accion`, o sea que solo existía adentro de un
   aviso; se desanidó el día que Inicio necesitó uno suelto. Es el mismo dibujo
   en los dos lugares a propósito: si un botón lleva a otra pantalla, se tiene
   que ver igual esté donde esté. */
.accion{
  margin-top: 11px; border: 1px solid var(--line); background: var(--white);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink);
}
.accion:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.aviso.r { border-left-color: var(--clay);  background: var(--claybg); }
.aviso.a { border-left-color: var(--gold);  background: var(--goldbg); }
.aviso.g { border-left-color: var(--green); background: var(--greenbg); }

/* tabla -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th{
  text-align: left; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 0 10px 9px 0; border-bottom: 1px solid var(--line);
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line2); vertical-align: top; }
th.r, td.r { text-align: right; padding-right: 0; }
tr.total td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; color: var(--ink); padding-top: 11px; }
td .nota-fila { display: block; font-size: 12.6px; color: var(--muted); margin-top: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* barra apilada -------------------------------------------------------
   Una barra sola partida en tramos. El redondeo va en el contenedor y no en
   cada tramo: si lo llevara cada uno, los cortes de adentro quedarían
   redondeados y la barra se leería como seis barras pegadas. */
.apilada { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.apilada i { display: block; height: 100%; }

.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* gráficos ------------------------------------------------------------
   Dos tipos, y no es indistinto cuál va dónde: **barras** para el resultado
   mes a mes, que son seis cantidades cerradas que se comparan entre sí, y
   **línea** para la caja semana a semana, que es una trayectoria. El dibujo
   es un SVG escrito a mano en un lienzo de 1000 de ancho; acá solo se le dan
   los colores y el ancho al que se estira. Los tamaños de letra de adentro
   del SVG están en unidades del lienzo, no en píxeles: por eso son números
   grandes. */
.graf { display: block; width: 100%; height: auto; margin: 4px 0 2px; overflow: visible; }

.g-bar        { fill: var(--ink); }
.g-bar.ultimo { fill: var(--gold); }
/* La fila de referencia de una barra horizontal —«los otros N»— no compite con
   las que se están mirando: está para dimensionar, no para leerse. */
.g-bar.tenue  { fill: var(--line); }

/* El gráfico de caja es el de la propuesta en PDF: trazo fino, puntos chicos
   y el terreno en dos bandas planas. Los anchos de acá están calculados para
   que, al escalarse a una tarjeta de ~660 px, den lo mismo que en el PDF
   impreso: la línea de 1,1 pt sobre 150 mm de ancho equivale a 2,6 de las
   1000 unidades del lienzo, y el punto de 0,9 pt de radio a 3,4.

   No subir estos valores. Una línea gruesa con puntos grandes tapa la forma
   de la curva, que es lo único que hay que leer en una trayectoria de
   catorce semanas.                                                          */
.g-linea { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-cero  { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 6 6; opacity: .7; }
.g-marca { stroke: var(--clay); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .75; }

/* Las bandas dicen de qué lado del cero está la curva sin competirle. Van
   casi al ras del papel a propósito: si se ven como color, están mal. */
/* las trayectorias del peso de cada gasto (lineas() en ui.js): el color se
   pasa por estilo porque es lo que une la línea con su rótulo */
.g-peso { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.g-mes  { font-size: 15px; fill: var(--muted); text-anchor: middle; }
.fr-nom { font-size: 14px; font-weight: 600; fill: var(--ink); }
.fr-val { font-size: 15px; fill: var(--ink2); text-anchor: end; }
/* Las dos marcas del eje de cada franja: el techo y el piso de su banda. Chicas
   y grises a propósito — son la referencia para leer la línea, no un dato que
   compita con ella. */
.fr-eje { font-size: 11px; fill: var(--muted); text-anchor: end; }
/* Cuánto se movió cada renglón, a la derecha del todo. Pintado, porque es lo
   único de la tarjeta que es una buena o una mala noticia: un gasto que sube
   sobre las ventas es malo y uno que baja es bueno, y en los clientes es al
   revés según qué se mire, así que **quién lo dice es el que llama**
   (`subirEsMalo`) y no este archivo. */
.fr-dif { font-size: 14px; font-weight: 600; fill: var(--muted); text-anchor: end; }
.fr-dif.mal  { fill: var(--clay); }
.fr-dif.bien { fill: var(--green); }

.g-banda     { stroke: none; }
.g-banda.pos { fill: var(--green); opacity: .05; }
.g-banda.neg { fill: var(--clay);  opacity: .06; }

.g-pt        { fill: var(--ink); }
.g-pt.pos    { fill: var(--ink); }
.g-pt.neg    { fill: var(--clay); }
.g-pt.hito   { fill: var(--clay); }
.g-pt.ultimo { fill: var(--gold); }

.g-val{
  fill: var(--ink); font-family: var(--sans); font-size: 32px; font-weight: 700;
  text-anchor: middle;
}
.g-val.ultimo { fill: var(--gold); }
/* El mes que no bajó de ARCA: no hay barra, hay un guión apagado. Un mes sin
   dato y un mes en cero no se pueden ver parecido. */
.g-val.sindato { fill: var(--line); font-weight: 400; }

.ejes { display: flex; gap: 5px; }
.ejes .e { flex: 1 1 0; text-align: center; font-size: 10.5px; color: var(--muted); }
.ejes .e.roja { color: var(--clay); font-weight: 700; }

/* controles ---------------------------------------------------------- */
.controles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip{
  border: 1px solid var(--line); background: var(--white); border-radius: 999px;
  padding: 7px 15px; font-family: var(--sans); font-size: 13.5px; cursor: pointer; color: var(--ink2);
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 700; }

/* La celda de una palanca desplegable. Se esconde con display:none y no se
   borra: el HTML de las once está siempre escrito, así abrir una no rehace la
   página ni le saca la barra de abajo del dedo a la que se está arrastrando. */
.celda.oculta { display: none; }

/* Las dos ofertas de Evaluar un proyecto son celdas a lo ancho, una debajo de
   la otra: cada una trae su bajada y sus dos palancas (plazo y tasa). La
   separación va acá y no en la celda misma porque una celda cerrada es
   display:none y su margen desaparece con ella, así que abrir la de abajo con
   la de arriba cerrada no deja un hueco de más. */
.ofertas .celda { margin-top: 20px; }
.ofertas .celda .sub { margin-top: 0; }

/* el ritmo de la cola -------------------------------------------------
   Una línea por semana en la pantalla de Advertencias: a la izquierda la
   semana, a la derecha qué salió. Es una lista y no una tabla a propósito —
   una tabla de tres columnas con una sola cosa por celda pesa más de lo que
   ordena—, y el renglón de la urgente se marca con el mismo barrote de la
   izquierda que usa un aviso rojo, porque quiere decir lo mismo. */
.ritmo { list-style: none; margin: 0; padding: 0; }
.ritmo li{
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0 9px 11px; border-bottom: 1px solid var(--line2);
  border-left: 3px solid transparent; font-size: 14.4px;
}
.ritmo li:last-child { border-bottom: none; }
.ritmo li.urg { border-left-color: var(--clay); }
.ritmo .sem{
  flex: 0 0 150px; color: var(--muted); font-size: 12.8px; white-space: nowrap;
}
.ritmo .que { flex: 1 1 auto; }
.ritmo .que b { font-weight: 700; }
.ritmo .nada { color: var(--muted); font-style: italic; }
.ritmo .resto { color: var(--muted); font-size: 12.8px; white-space: nowrap; }
@media (max-width: 620px){
  .ritmo li { display: block; }
  .ritmo .sem { display: block; margin-bottom: 3px; }
  .ritmo .resto { white-space: normal; }
}

/* «Esto ya lo sé»: el motivo, que es el dato que más vale de todo el ciclo.
   Se despliega y no está siempre abierto, que es la regla de la casa: lo que
   se muestra siempre es la lista, lo que se abre es lo que él pidió ver. */
.silencio { margin-top: 11px; }
.silencio label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.fila-silencio { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-silencio input{
  flex: 1 1 260px; min-width: 0; font-family: var(--sans); font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--white); color: var(--ink);
}
.fila-silencio input:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }
.fila-silencio .accion { margin-top: 0; }

/* solapas ------------------------------------------------------------
   Las categorías del panel de control y las tres formas de mirar el
   resultado. Solo se prende y apaga la clase .on: los tres paneles están
   siempre escritos en la página, así cambiar de solapa no redibuja nada y
   no se pierde la palanca que se está arrastrando. */
.solapas{
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.sol{
  border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.6px; color: var(--muted);
  padding: 9px 14px 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.sol:hover { color: var(--ink); background: var(--paper); }
.sol.on{
  color: var(--ink); font-weight: 700; border-bottom-color: var(--gold);
  background: none;
}
.sol:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.panelsol { display: none; }
.panelsol.on { display: block; }
.panelsol > .sub{
  color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -4px 0 16px;
}

/* El rotulito dorado que separa bloques adentro de una tarjeta. */
.rotulo{
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); margin-bottom: 10px;
}
.rotulo.separado{ margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

/* palancas -----------------------------------------------------------
   Cada palanca es una celda de la grilla: cuantas más columnas entren, más
   corta queda la solapa. Antes la celda era un grupo entero de palancas y por
   eso la pantalla se hacía larguísima. */
.palancas{
  display: grid; gap: 22px 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.palancas.sueltas > .palanca { margin-bottom: 0; }
/* Una celda que guarda dos palancas que se cargan juntas —cuánta gente y con
   qué sueldo— ocupa dos columnas, así las dos quedan una al lado de la otra en
   vez de apiladas en una columna de 260 px. Abajo de ese ancho no hay dos
   columnas que ocupar, y la regla no se aplica. */
@media (min-width: 620px){ .palancas > .celda.doble { grid-column: span 2; } }
.palanca { margin-bottom: 16px; }
.palanca:last-child { margin-bottom: 0; }
.palanca .cab{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.palanca .cab label { font-size: 13.6px; color: var(--ink2); }
.palanca .cab .v{
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink);
  white-space: nowrap;
}
.palanca .nota { font-size: 12.2px; color: var(--muted); line-height: 1.45; margin-top: 3px; }

/* La barra. Se dibuja a mano en los dos motores de navegador porque el
   control que viene de fábrica no se puede pintar con los colores de la
   marca de ninguna otra forma. */
.palanca input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 5px 0 0; background: none; cursor: pointer;
  display: block;
}
.palanca input[type=range]:focus { outline: none; }
.palanca input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 3px rgba(138,109,47,.35);
}
.palanca input[type=range]::-webkit-slider-runnable-track{
  height: 4px; border-radius: 999px; background: var(--line);
}
.palanca input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.palanca input[type=range]::-moz-range-track{
  height: 4px; border-radius: 999px; background: var(--line);
}
.palanca input[type=range]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line);
}
.palanca input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 3px rgba(138,109,47,.35);
}

/* celular -------------------------------------------------------------
   El mensaje como le llega al dueño. Todas las clases llevan prefijo `celu-`
   porque `.barra` y `.cab` ya significan otra cosa adentro de la app. */
.celu{
  width: 300px; max-width: 100%; margin: 0 auto; background: var(--ink);
  border-radius: 30px; padding: 10px; box-shadow: 0 16px 36px rgba(19,28,43,.20);
}
.celu-scr{
  background: #EAE4DC; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 420px;
}
.celu-top{
  background: #0F4C42; color: var(--white); padding: 10px 12px;
  display: flex; align-items: center; gap: 9px;
}
.celu-av{
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.celu-av img { width: 17px; height: 17px; display: block; }
.celu-quien b { display: block; font-size: 13.5px; line-height: 1.25; }
.celu-quien i { display: block; font-style: normal; font-size: 11px; color: #A9CFC6; }

.celu-chat{
  flex: 1 1 auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px;
}
.celu-msg{
  background: var(--white); border-radius: 9px; padding: 8px 10px 6px;
  font-size: 12.5px; line-height: 1.45; max-width: 90%; align-self: flex-start;
  box-shadow: 0 1px 1px rgba(19,28,43,.08);
}
.celu-msg b { color: #0F4C42; }
.celu-msg.mio { background: #D7F5C8; align-self: flex-end; }
.celu-hora { display: block; font-size: 10px; color: #8A8A8A; text-align: right; margin-top: 3px; }

/* Los párrafos de adentro de una burbuja. Una plantilla de WhatsApp es UN
   mensaje con varios párrafos, no varios mensajes: el espacio entre párrafos
   tiene que ser más chico que el espacio entre burbujas para que se lea así. */
.celu-p { margin: 0 0 7px; }
.celu-p:last-child { margin-bottom: 0; }

/* El botón de la plantilla. En WhatsApp va abajo de todo, separado por una
   línea y centrado, y es lo único del mensaje que se puede tocar. */
.celu-btn{
  display: block; margin: 5px -10px -6px; padding: 7px 10px 5px;
  border-top: 1px solid rgba(19,28,43,.10); color: #1A7BE0;
  text-align: center; font-size: 12.5px;
}

/* La aclaración de abajo del celular: qué parte es plantilla y qué parte es
   conversación. Es la única nota de la pantalla y explica lo que se está
   viendo, que es distinto de explicar el diseño. */
.nota-celu { font-size: 14.6px; margin: 16px 0 0; }

.piehoja{
  font-size: 12.6px; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 13px; margin-top: 22px; line-height: 1.55;
}

/* ------------------------------------------------------ la tarjeta apagada
   El lugar de una tarjeta que no se puede dibujar. La escribe `apagada()` de
   `ui.js`, y el porqué está ahí; acá está el cómo se ve, que es una decisión
   aparte y no menor: **tiene que leerse como un lugar reservado y nunca como
   una tarjeta rota**. El que abre la pantalla no sabe qué es un `null`.

   Por eso: el fondo es el mismo papel de la hoja y no el blanco de las demás
   —o sea que no parece una tarjeta vacía, parece un hueco previsto—, el borde
   va punteado, y el título queda en gris. Es la única tarjeta del producto que
   no tiene un número adentro, así que no compite por la atención con las que
   sí lo tienen: se ve última aunque esté primera.

   Vivió un día en el CSS de una sola de las dos carpetas y estaba mal
   archivada: la escribe `ui.js`, que es un archivo compartido, así que la
   necesitan las dos por igual. La regla que queda: lo que dibuja un archivo
   compartido no puede vivir en el CSS de una sola carpeta. */
.tarjeta.apagada{
  background: transparent;
  border: 1px dashed var(--line);
  box-shadow: none;
}
.tarjeta.apagada > h3{
  color: var(--muted);
  font-weight: 400;
}
/* El motivo se lee entero, así que no va al tamaño de una nota al pie: es lo
   único que esta tarjeta tiene para decir. El margen de abajo de `.tarjeta .sub`
   existe para separar el subtítulo del contenido, y acá no hay contenido. */
.tarjeta.apagada > .sub{
  font-size: 14.6px;
  margin: 0;
  max-width: 62ch;
}

/* Los botones de modo de Rentabilidad (barra/torta). */
.modos { display:flex; gap:8px; margin:0 0 12px; }
.modos .chip:disabled { opacity:.45; cursor:default; }

/* Los selectores que viven en los títulos de la tabla del cierre: se aprieta
   el título y la lista se abre abajo. */
.sel-caja { position: relative; display: inline-block; }
.sel{
  border: 0; background: none; padding: 0; cursor: pointer;
  /* el navegador no deja que un botón herede la letra del título de columna:
     hay que pedirle cada cosa (la versalita y el espaciado no viajan solos) */
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.sel:hover { color: var(--gold); }
.sel-flecha { flex: none; }
.sel-menu{
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 6;
  display: flex; flex-direction: column; min-width: 175px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 5px;
}
.sel-op{
  border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink2);
  padding: 8px 12px; border-radius: 7px; white-space: nowrap;
}
.sel-op:hover { background: var(--line2); }
.sel-op.on { color: var(--ink); font-weight: 700; }
.sel-op:disabled { opacity: .45; cursor: default; }
.sel-op:disabled:hover { background: none; }

/* Las notas al pie de la posición de IVA: lo que el número no dice. Chicas y
   grises, pero no ocultas — son la mitad del sentido de la tarjeta. */
.nota-iva { font-size: 13.8px; line-height: 1.55; color: var(--muted); margin: 14px 0 0; }
.nota-iva b { color: var(--ink2); }