/* ============================================================================
   «Cifra a elegir» y «Grafica a elegir» (tren A3, plan «Inicio: mas widgets y botones»): los bloques del Inicio (y de «Mis paginas») que muestran UN dato a elegir. Lienzo aprobado: tableros 13 y 14 de
   «Inicio: widgets en tres tamanos» (CifraGrafica). Los dibuja public/inicio-cifras.js.
   Solo tokens de cuarto-oscuro.css (--piedra, --piedra-on, --tinta, --medio, --linea, --urge, --e-*, --t-*, --r-*): ningun color, sombra, tamano de letra ni duracion escritos a mano (paridad-cuarto-oscuro).
   Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Color solo si significa algo: --urge para el cambio que va en MALA direccion. Nada se anima.
   Cada bloque es UNA tarjeta de 16 px (como las otras especiales, .ia y .ib) que deja sitio arriba a la derecha al asa y al ···. Lo que decide el acomodo de adentro es el ancho de la PROPIA tarjeta (consulta
   de contenedor), nunca el de la ventana: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280.
   ============================================================================ */
.ci{ container-type:inline-size; container-name:ci; box-sizing:border-box; min-width:0; background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-4); }
.ci-t{ margin:0; padding-right:var(--e-7); font-size:var(--t-campo); line-height:24px; font-weight:600; color:var(--tinta); }
.ci-per{ margin-top:var(--e-1); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.ci-n{ margin-top:var(--e-2); font-size:var(--t-saludo); line-height:1.15; font-weight:600; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums; }
.ci-n-grande{ font-size:calc(var(--t-saludo) * 1.5); }
.ci-d{ margin-top:var(--e-1); font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.ci-d b{ font-weight:600; color:var(--tinta); }
.ci-d.mala b{ color:var(--urge); }
.ci-meta{ position:relative; height:4px; margin-top:var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.ci-meta i{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:var(--tinta); }
.ci-vacio, .ci-error{ padding:var(--e-4) 0 var(--e-2); font-size:var(--t-texto); color:var(--medio); }

/* La chispa: la linea de los ultimos periodos al lado del numero (mediano) o debajo (la grafica chica). */
.ci-fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e-5); }
.ci-chispa{ flex:none; width:min(220px, 45%); height:56px; color:var(--tinta); }
.ci-chispa-grafica{ width:100%; margin-top:var(--e-3); }
.ci-plano{ position:relative; width:100%; height:100%; color:var(--tinta); }
.ci-plano svg{ display:block; width:100%; height:100%; overflow:visible; }
.ci-trazo{ stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ci-rej{ stroke:var(--linea); stroke-width:1; }
/* La punta es de HTML y no de SVG: un circulo dentro de un SVG estirado al ancho del bloque seria un ovalo. */
.ci-punta{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:var(--r-pildora); background:var(--tinta); }

/* Una grafica: el dibujo, y debajo sus etiquetas. La grande lleva ademas el eje de la izquierda (techo, mitad y cero) y las lineas de la rejilla. */
.ci-graf{ display:block; padding-top:var(--e-4); }
.ci-graf .ci-plano{ height:130px; margin-top:var(--e-3); }
.ci-graf-grande{ display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:150px auto; column-gap:var(--e-3); }
.ci-graf-grande .ci-ejey{ grid-area:1 / 1; }
.ci-graf-grande .ci-plano{ grid-area:1 / 2; height:auto; margin-top:0; }
.ci-graf-grande .ci-ejex{ grid-area:2 / 2; }
.ci-ejey{ display:flex; flex-direction:column; justify-content:space-between; min-width:var(--e-6); text-align:right; font-size:var(--t-meta); line-height:16px; color:var(--medio); font-variant-numeric:tabular-nums; }
.ci-ejex{ display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); padding-top:var(--e-2); text-align:center; font-size:var(--t-meta); line-height:16px; color:var(--medio); }
.ci-ejex span{ white-space:nowrap; overflow:visible; }
.ci-cols{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); column-gap:var(--e-2); align-items:end; }
.ci-col{ position:relative; min-width:0; border-radius:var(--r) var(--r) 0 0; background:var(--piedra-on); }
.ci-col.hoy{ background:var(--tinta); }
.ci-cv{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding-bottom:2px; font-size:var(--t-meta); line-height:16px; color:var(--medio); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ci-rejh{ position:absolute; left:0; right:0; height:1px; background:var(--linea); }
.ci-prom{ position:absolute; left:0; right:0; border-top:1px dashed var(--medio); }

/* Grande: el numero a un lado y la grafica al otro. */
.ci-grande{ display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:var(--e-7); padding-top:var(--e-3); }
.ci-grande .ci-graf{ padding-top:0; }
@container ci (max-width:640px){
  .ci-grande{ grid-template-columns:minmax(0, 1fr); gap:var(--e-4); }
}
@container ci (max-width:420px){
  .ci-fila{ flex-direction:column; align-items:stretch; gap:var(--e-3); }
  .ci-chispa{ width:100%; }
}

/* La hoja «Configurar»: el dato como una pildora con «Cambiar ›», y la lista de datos agrupada. */
.ci-dato{ appearance:none; display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); width:100%; min-height:44px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font:inherit; font-size:var(--t-campo); text-align:left; cursor:pointer; }
.ci-dato small{ flex:none; font-size:var(--t-meta); color:var(--medio); }
.ci-grp{ margin:var(--e-4) 0 0; font-size:var(--t-meta); line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--medio); }
.ci-picker .ci-grp:first-child{ margin-top:0; }
.ci-op{ appearance:none; display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); width:100%; min-height:44px; margin:0; padding:0; border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
.ci-op small{ font-size:var(--t-meta); color:var(--medio); }
.ci-op.sel{ font-weight:600; }