/* diseno-inicio.css — EL INICIO. Usa los tokens y la escala de diseno.css.
   El Inicio (#tablero): cabecera con el saludo y «+ Nueva factura», los
   primeros pasos (mientras falten), cuatro números, el gráfico con el
   certificado (si toca), los vencimientos y a quién se facturó a la par, y
   últimos documentos. «Necesita tu atención» se fue a la campana el 30/9/2026
   (Mario). Lo de la V3 (6/10/2026) está al final. */

.tablero { gap: 16px; }
.tablero [hidden] { display: none !important; }
.tablero .dn-cabecera { margin-bottom: 0; }

/* Las tarjetas del Inicio: título en tinta, sin la barrita verde. */
.tablero .tarjeta { margin: 0; min-width: 0; }
.tablero .cabecera-doc { align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-4); }
.tablero .cabecera-doc h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--texto); }
.tablero .cabecera-doc h2::before { display: none; }
.tablero .cabecera-doc > div { min-width: 0; }

/* ------------------------------------------------------- los números -- */
.dn-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Sin los gastos (el cajero, 1/10/2026) quedan dos números: de a dos, a todo el ancho. */
.dn-numeros.sin-gastos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
button.dn-kpi {
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
button.dn-kpi:hover { border-color: var(--azul); box-shadow: var(--sombra-media); }
button.dn-kpi.destacado:hover { border-color: var(--tinta-2); }
.dn-kpi b { overflow-wrap: anywhere; }
.dn-kpi em.tenue { color: var(--tenue); }
.dn-kpi.mala b { color: var(--rojo); }
@media (max-width: 1100px) { .dn-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* EN EL TELÉFONO, DOS Y DOS (17/9/2026): apilados de a uno, los cuatro números
   medían 92 px más que la pantalla y «Necesita tu atención» —lo que hay que
   hacer hoy— empezaba fuera de lo visible. De a dos caben los cuatro y la
   tarjeta queda a la vista. Debajo de 360 px sí se apilan: ahí no caben. */
@media (max-width: 360px)  { .dn-numeros, .dn-numeros.sin-gastos { grid-template-columns: 1fr; } }

/* -------------------------------------------------- las dos columnas -- */
/* DOS COLUMNAS, CADA UNA CON SU PILA (17/9/2026). A la derecha lo angosto —lo
   que hay que atender y a quién se le facturó, una pegada a la otra— y a la
   izquierda el gráfico. «Últimos documentos» NO va aquí: va abajo, a todo el
   ancho de la página, porque sus seis columnas no caben en dos tercios. */
.dn-columnas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  /* Las dos columnas miden lo mismo (estiradas, que es lo de fábrica): la del
     gráfico se estira hasta donde llegue la otra. */
}
.dn-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* La derecha primero en el DOM (para el teléfono) y a la derecha en pantalla. */
.dn-columnas > .dn-col:first-child { grid-column: 2; grid-row: 1; }
/* SIN HUECO DEBAJO DEL GRÁFICO (Mario, 18/9/2026, con captura: «ese hueco
   […] se ve muy feo»). La tarjeta del gráfico ocupa la columna entera; el
   gráfico de adentro se redibuja al alto que le toca (tablero.js). */
.dn-columnas > .dn-col:last-child { grid-column: 1; grid-row: 1; grid-template-rows: minmax(0, 1fr); }
@media (max-width: 1000px) {
  /* Una sola columna. Las tarjetas salen sueltas —`display: contents` en las
     dos cajas— para poder ordenarlas dentro de `.tablero`, que es una pila:
     primero el calendario, después los últimos documentos, y el gráfico de
     último. Los cuatro números y la cabecera se quedan arriba (order 0). */
  .dn-columnas, .dn-col { display: contents; }
  /* El certificado (también `.dn-vencimientos`) y los vencimientos, de
     primeros y en el orden del DOM (30/9/2026). */
  .tablero .dn-vencimientos { order: 1; }
  .tablero .dn-ultimos { order: 2; }
  .tablero .dn-quien { order: 3; }
  .tablero .dn-grafico { order: 4; }
}

/* --------------------------------------------------------- el gráfico -- */
/* La caja del gráfico es absoluta: mide lo que la tarjeta le deje y no la
   empuja, así el redibujo no vuelve a disparar al observador. */
.dn-grafico { display: flex; flex-direction: column; }
.dn-grafico .cuerpo { flex: 1; position: relative; min-height: 300px; padding: 0; }
.dn-grafico .grafico { position: absolute; inset: 10px 14px 0; }
.dn-grafico .grafico svg { width: 100%; height: 100%; display: block; }
.tablero .grafico .reja { stroke: var(--borde); stroke-dasharray: 3 4; opacity: .7; }
.tablero .grafico .reja.base { stroke-dasharray: none; opacity: 1; }
.tablero .grafico .eje { fill: var(--tenue); font-size: 11px; font-variant-numeric: tabular-nums; }
.tablero .grafico .ingreso { fill: var(--verde); }
.tablero .grafico .gasto { fill: var(--azul); opacity: .55; }
.tablero .grafico .columna { fill: transparent; }
.tablero .grafico .columna:hover { fill: var(--azul-suave); opacity: .6; }
/* EL NUMERITO DE CADA BARRA (Mario, 25/9/2026): el globito sale al instante
   encima del puntero con el monto exacto. No atrapa el mouse, así que no
   parpadea al moverse sobre la barra. */
.tablero .grafico .dn-globo {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(15, 42, 74, .18);
}
.tablero .grafico .dn-globo[hidden] { display: none; }
.tablero .leyenda { gap: 6px; font-size: 12.5px; }
.tablero .leyenda .marca { width: 10px; height: 10px; border-radius: 3px; }
.tablero .leyenda .marca.ingreso { background: var(--verde); }
.tablero .leyenda .marca.gasto { background: var(--azul); opacity: .55; margin-left: 10px; }

/* El IVA estimado del mes: lo cobrado y lo acreditado en dos renglones, con
   los colores del gráfico —verde las ventas, azul los gastos— (Mario, 29/9/2026). */
.dn-kpi .iva-desglose { display: grid; gap: 1px; justify-items: center; }
.dn-kpi em.iva-cobrado { color: var(--verde); font-weight: 600; }
.dn-kpi em.iva-acreditado { color: var(--azul); font-weight: 600; }
.dn-pie { margin: 0; padding: 4px 16px 12px; font-size: 12px; color: var(--tenue); }

/* ------------------------------------------ vencimientos y certificado -- */
/* Los renglones de los vencimientos y la línea del certificado. Eran los de
   «Necesita tu atención», que se fue a la campana (30/9/2026): el nombre de
   la lista se quedó. */
.dn-atencion-lista { display: flex; flex-direction: column; }
.tablero .dn-vencimientos .dn-renglon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
}
.dn-atencion-lista > :last-child { border-bottom: 0; }
/* La línea del certificado es un botón: lleva a renovarlo. */
.dn-vencimientos button.dn-renglon { cursor: pointer; }
.dn-vencimientos button.dn-renglon:hover { background: var(--papel-2); }
.dn-renglon-texto { display: grid; justify-items: start; gap: 1px; min-width: 0; text-align: left; }
.dn-renglon-texto strong { font-weight: 600; font-size: 13.5px; }
.dn-renglon-texto small { color: var(--tenue); font-size: 12px; line-height: 1.4; }
.dn-renglon-lado { display: flex; align-items: center; gap: 8px; flex: none; }
.dn-renglon-lado .pastilla { white-space: nowrap; }
.dn-renglon-lado .boton.chico { padding: 4px 10px; font-size: 12.5px; pointer-events: none; }
.dn-vencimientos button.dn-renglon:hover .boton.chico { border-color: var(--texto); background: var(--papel); }
.dn-atencion-nota { margin: 0; padding: 4px 16px 0; font-size: 12px; }
@media (max-width: 420px) {
  .dn-vencimientos .dn-renglon { flex-wrap: wrap; }
}

/* ------------------------------------------------ a quién se facturó -- */
/* `.barra` también es la barra de arriba de la app en diseno.css: acá se
   devuelve a barrita. */
.tablero .quien .barra {
  height: 6px; box-shadow: none; position: static; z-index: auto;
  background: var(--gris-suave); border-radius: 3px; padding: 0;
}
.tablero .quien .barra .relleno { background: var(--verde); }
.tablero .quien { margin-bottom: 12px; }
.tablero .quien:last-child { margin-bottom: 0; }
.tablero .quien .entre span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablero .quien .entre strong { flex: none; }

/* `.aviso` suelto de estilo.css (caja con sombra) se le pega a la pastilla
   ámbar: acá se le quita. */
.tablero .pastilla.aviso { box-shadow: none; border-radius: 999px; }

/* Mario, 17/9/2026: los cuatro números centrados, y el gráfico con su
   título centrado (la leyenda baja al renglón de abajo, también centrada). */
.dn-grafico > .cabecera-doc { flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.dn-grafico > .cabecera-doc h2 { width: 100%; text-align: center; }
.dn-grafico > .cabecera-doc .leyenda { justify-content: center; }
.dn-grafico .dn-pie { text-align: center; }

/* =========================================================================
   VERSIÓN 3 (6/10/2026) — el Inicio
   ========================================================================= */

/* ------------------------------------------------------------ la cabecera -- */
/* El saludo a la izquierda, la cinta de la membresía en el campo de en medio
   (app.js la cuelga de último) y «+ Nueva factura» en la esquina (sugerencia
   3, aceptada por Mario el 4/10/2026). */
.tablero .dn-cabecera { gap: var(--e-3) var(--e-4); }
.tablero .dn-cabecera > div:first-child { min-width: 0; }
.tablero .dn-cabecera .cinta-barra { order: 1; }
.tablero .dn-nueva { order: 2; flex: none; margin-left: auto; padding: 9px 18px; font-size: var(--t-texto); white-space: nowrap; }

/* -------------------------------------------------------- los cuatro números -- */
.dn-numeros { gap: var(--e-3); }
.tablero .dn-kpi { padding: var(--e-4); gap: var(--e-1); }
.tablero .dn-kpi b { font-size: var(--t-cifra); }
/* En el teléfono van de a dos: la cifra cede un poco para que un millón quepa en su renglón. */
@media (max-width: 700px) {
  .tablero .dn-kpi { padding: var(--e-3); }
  .tablero .dn-kpi b { font-size: clamp(17px, 5.4vw, var(--t-cifra)); }
}

/* ---------------------------------------------------------- primeros pasos -- */
/* MÁS CORTA: el título con su cuenta, la barra de avance, los pasos en un
   renglón y UN botón (sugerencia 3, aceptada por Mario el 4/10/2026). Antes
   eran tres filas con su «Falta…» cada una: media pantalla del teléfono. */
.tablero .tarjeta.primeros-pasos { border-left: 1px solid var(--borde-tarjeta); }
.tablero .primeros-pasos .cuerpo {
  display: grid; gap: var(--e-3); justify-items: center; text-align: center;
  padding: var(--e-4) var(--e-5) var(--e-5);
}
.pasos-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-3); }
.tablero .primeros-pasos .pasos-cabeza h3 { margin: 0; padding: 0; border: 0; font-size: 17px; }
.tablero .primeros-pasos .pasos-cabeza h3::before { content: none; }
.pasos-cuenta {
  padding: 2px 10px; border-radius: 999px; background: var(--gris-suave);
  color: var(--tenue); font: 650 var(--t-nota) var(--fuente-titulo); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pasos-barra { width: 100%; max-width: 520px; height: 8px; border-radius: 999px; background: var(--gris-suave); overflow: hidden; }
.pasos-barra span { display: block; height: 100%; border-radius: inherit; background: var(--verde); transition: width .25s ease-out; }
.tablero .pasos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin: 0; border: 0; border-radius: 0; overflow: visible; }
.tablero .paso {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--papel); color: var(--texto);
  font: inherit; font-size: 13px; line-height: 1.3;
  transition: background-color .12s ease, border-color .12s ease;
}
.tablero .paso:hover { background: var(--papel-2); border-color: var(--borde-tarjeta); }
.tablero .paso strong { font-weight: 550; }
.tablero .paso-marca {
  flex: none; width: 20px; height: 20px; line-height: 18px;
  border: 1.5px solid var(--borde-fuerte); border-radius: 50%;
  color: var(--tenue); font-size: 12px; font-weight: 700; text-align: center;
}
.tablero .paso.sigue { border-color: var(--verde); }
.tablero .paso.sigue .paso-marca { border-color: var(--verde); color: var(--verde); }
.tablero .paso.hecho { background: var(--papel); border-color: var(--borde); }
.tablero .paso.hecho strong { color: var(--tenue); font-weight: 450; }
.tablero .paso.hecho .paso-marca { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.tablero .primeros-pasos .pasos-sigue { margin: 0; max-width: 60ch; }
.tablero .primeros-pasos .boton.primario { padding: 9px 20px; font-size: var(--t-texto); }
@media (prefers-reduced-motion: reduce) { .pasos-barra span { transition: none; } }

/* ------------------------------------------------------ últimos documentos -- */
.dn-ultimos .envoltorio-tabla { overflow-x: auto; }
.dn-ultimos .envoltorio-tabla table { min-width: 560px; width: 100%; border-collapse: collapse; }
.dn-ultimos th, .dn-ultimos td { padding: 10px var(--e-3); }
.dn-ultimos td { font-size: 13.5px; }
/* El número corto (Mario, 4/10/2026: «solo 3024»): se lee, no se descifra. */
.dn-ultimos .dn-numero-corto { font: 650 14px var(--fuente-titulo); font-variant-numeric: tabular-nums; color: var(--texto); }
.dn-ultimos td.dn-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dn-ultimos td.dn-cliente { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-ultimos td.numero { text-align: center; white-space: nowrap; font-weight: 600; }
/* Los dos estados, uno debajo del otro: el de Hacienda y el de pago (Mario,
   6/10/2026: «que diga su estado»; aquí desde el 7/10/2026). Como en el Archivo. */
.dn-ultimos .dn-estados { display: grid; gap: var(--e-1); justify-items: center; }
.dn-ultimos tbody tr:last-child td { border-bottom: 0; }
.dn-ultimos .dn-vacio { padding: 28px var(--e-4); }

/* EN EL TELÉFONO, TARJETAS (sugerencia 1, aceptada por Mario el 4/10/2026:
   «me gusta como se ve pero el numero de factura debe ser visible, solo el
   consecutivo final»). La tabla de seis columnas medía 709 px en un marco de
   353 y se corría de lado sin que se notara que había más. Es la MISMA tabla:
   aquí cada renglón se acomoda como una tarjeta —el cliente y el total
   arriba; el tipo con su número, la fecha y el estado abajo— y los títulos de
   columna quedan solo para el lector de pantalla. En la compu sigue la tabla. */
@media (max-width: 700px) {
  .dn-ultimos .envoltorio-tabla { overflow: visible; }
  .dn-ultimos .envoltorio-tabla table { display: block; min-width: 0; }
  .dn-ultimos thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .dn-ultimos .envoltorio-tabla { position: relative; }
  .dn-ultimos tbody { display: block; }
  .dn-ultimos tbody tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    /* Los dos estados (el de Hacienda y, debajo, el de pago: 7/10/2026) van en
       la columna del total, y el nombre del cliente ocupa esa misma altura a
       la izquierda: como en el Archivo, la tarjeta no crece por llevar dos. */
    grid-template-areas:
      "cliente cliente cliente total"
      "cliente cliente cliente estado"
      "tipo    numero  fecha   estado";
    align-items: end;
    gap: 6px var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borde);
  }
  /* Sin la zebra de las tablas: aquí cada documento es su tarjeta y la raya ya separa. */
  .dn-ultimos tbody tr:nth-child(even):not(.total) { background: transparent; }
  .dn-ultimos tbody tr:last-child { border-bottom: 0; border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
  .dn-ultimos tbody tr:active { background: var(--papel-2); }
  .dn-ultimos tbody td {
    display: block; padding: 0; border: 0; background: transparent;
    text-align: left; font-size: var(--t-nota); color: var(--tenue); max-width: none;
  }
  .dn-ultimos td.dn-u-cliente {
    grid-area: cliente; align-self: start; max-width: none;
    color: var(--texto); font: 650 14px/1.3 var(--fuente-titulo);
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
  .dn-ultimos td.dn-u-cliente .nota { margin: 1px 0 0; font: 400 12px/1.35 var(--fuente-texto); color: var(--tenue); overflow-wrap: anywhere; }
  .dn-ultimos td.dn-u-total { grid-area: total; align-self: start; padding-left: var(--e-2); text-align: right; color: var(--texto); font-size: 15px; font-weight: 650; white-space: nowrap; }
  .dn-ultimos td.dn-u-tipo { grid-area: tipo; }
  .dn-ultimos td.dn-u-numero { grid-area: numero; }
  .dn-ultimos td.dn-u-numero .dn-numero-corto { font-size: 13.5px; }
  .dn-ultimos td.dn-u-numero .dn-numero-corto::before { content: "N.º "; font-weight: 450; color: var(--tenue); }
  .dn-ultimos td.dn-u-fecha { grid-area: fecha; }
  /* El puntito, con el mismo aire a los dos lados (7/10/2026), como en el Archivo. */
  .dn-ultimos td.dn-u-fecha::before { content: "·"; margin-inline: calc(var(--e-1) - var(--e-2)) var(--e-1); }
  .dn-ultimos td.dn-u-estado { grid-area: estado; justify-self: end; }
  .dn-ultimos td.dn-u-estado > .dn-estados { justify-items: end; }
  /* LO QUE NO ES UNA FACTURA DICE SU TIPO EN SU RENGLÓN (7/10/2026), como en el
     Archivo. «Nota de crédito N.º 17 · 05/10/2026» no cabe en un renglón junto
     al estado en un teléfono de 320 a 360 px: medido en Edge, la pastilla
     tapaba la fecha. «Factura N.º 3024 · 06/10/2026» sí cabe, y se queda así. */
  .dn-ultimos tbody tr.dn-u-aparte {
    grid-template-areas:
      "cliente cliente cliente total"
      "tipo    tipo    tipo    estado"
      "numero  numero  fecha   estado";
  }
  /* Sin el azulito de la fila de escritorio: en el teléfono no hay ratón. */
  .dn-ultimos tbody tr:hover td { background: transparent; }

  /* La cabecera: el saludo y el botón caben en un renglón; debajo de 360, se apilan. */
  .tablero .dn-nueva { padding: 9px 14px; }
}
@media (max-width: 359px) {
  .tablero .dn-cabecera { flex-wrap: wrap; }
  .tablero .dn-nueva { margin-left: 0; width: 100%; }
}