/* ==========================================================================
   KONTEO · la app en pergamino (06-app-naturalista) · 2 de 3: Facturas, Ventas,
   Asesoría y la mesa de la gestoría. Las variables salen de tokens-naturalista.css
   (importada en estilo.css). El semáforo, solo para el dinero; «mira esto», en dorado.
   ========================================================================== */

/* ========================================================================== */
/*  FACTURAS (02-camara)                                                       */
/* ========================================================================== */
.cabeza-mes { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-top: 6px; }
.bajo-cifra { font-size: 13px; color: var(--k-crema-2); margin-top: 10px; }
.bajo-cifra b { color: var(--k-crema); font-weight: 500; }
.bajo-cifra b.mal { color: var(--k-mal); } .bajo-cifra b.ojo { color: var(--k-ojo); }
.mes-linea { display: flex; align-items: baseline; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-crema); font-weight: 600; }
.mes-linea .cuantas { margin-left: auto; color: var(--k-apagado); letter-spacing: .14em; font-weight: 500; }
.buscar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--k-filete); padding: 0 4px 0 13px; min-height: 48px; transition: border-color var(--k-t-rapido); }
.buscar:focus-within { border-color: var(--k-oro); }
.buscar svg { width: 17px; height: 17px; flex: none; stroke: var(--k-oro); fill: none; stroke-width: 1.4; stroke-linecap: round; }
/* 16 px o más: por debajo, el iPhone hace zoom al escribir */
.buscar input { flex: 1; min-width: 0; background: none; border: 0; color: var(--k-crema); font: 400 16px/1 var(--k-texto); padding: 14px 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
.buscar input::placeholder { color: var(--k-apagado); }
.buscar input:focus { outline: none; }
.buscar input::-webkit-search-cancel-button { display: none; }
.buscar .limpiar { border: 0; background: none; color: var(--k-crema-2); font-size: 15px; cursor: pointer; min-height: 44px; min-width: 44px; }
/* los filtros: un carril que rueda de lado a propósito, dentro de su hueco y sin sacar a nadie de la pantalla */
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -20px 0; padding: 2px 20px; overscroll-behavior-x: contain; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; border: 1px solid var(--k-filete); background: none; color: var(--k-crema-2); font: 600 12.5px/1 var(--k-texto);
  padding: 0 14px; min-height: 44px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px;
  transition: border-color var(--k-t-rapido) var(--k-curva), color var(--k-t-rapido) var(--k-curva); }
.filtros button .n { font-variant-numeric: tabular-nums; color: var(--k-apagado); }
.filtros button[aria-selected="true"] { border-color: var(--k-oro); color: var(--k-oro-luz); }
.filtros button[aria-selected="true"] .n { color: var(--k-oro); }
/* la lista, por semanas y con su suma; la cabecera del grupo se queda arriba al bajar */
.lista { display: flex; flex-direction: column; }
.grupo-cab { position: sticky; top: -12px; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 16px 0 8px; margin-top: 4px; background: var(--k-tinta); border-bottom: 1px solid var(--k-filete-2);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; }
.grupo-cab .suma { color: var(--k-crema-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; font-weight: 500; }
.fac { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--k-filete-2); background: none; color: inherit; padding: 12px 0; cursor: pointer; min-height: 60px;
  transition: background var(--k-t-rapido) var(--k-curva); }
.fac:active { background: rgba(var(--k-linea-rgb), .06); }
.fac .pt { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid transparent; }
.fac .pt.ojo { border-color: var(--k-ojo); } .fac .pt.mal { border-color: var(--k-mal); background: var(--k-mal); }
.fac .pt.cola { border-color: var(--k-crema-2); border-style: dotted; }
.fac .quien { grid-column: 2; grid-row: 1; font-size: 15px; color: var(--k-crema); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac .imp { grid-column: 3; grid-row: 1 / 3; align-self: center; font-family: var(--k-display); font-size: 18px; color: var(--k-crema); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fac .imp.nada { color: var(--k-apagado); }
.fac .cuando { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--k-apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac .cuando .ojo { color: var(--k-ojo); } .fac .cuando .mal { color: var(--k-mal); } .fac .cuando .yo { color: var(--k-crema-2); }
.fac.nueva { animation: nueva var(--k-t-lento) var(--k-curva) both; }
@keyframes nueva { 0%, 65% { box-shadow: inset 2px 0 0 var(--k-dorado); } 100% { box-shadow: inset 2px 0 0 rgba(var(--k-dorado-rgb), 0); } }
.pie-lista { font-size: 12.5px; color: var(--k-apagado); padding: 16px 0 4px; text-align: center; }

/* ========================================================================== */
/*  VENTAS (nueva): el mes, día a día, con su cierre de caja                   */
/*  Una cifra grande (lo vendido), el mes en su rejilla y las semanas.         */
/*  Las barras no llevan color: el color es del semáforo del dinero.           */
/* ========================================================================== */
.heroe-v { padding-top: 6px; }
.mes-v { display: flex; flex-direction: column; gap: 6px; }
.sem-cab, .rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sem-cab span { text-align: center; font-size: 10px; letter-spacing: .16em; color: var(--k-apagado); font-weight: 600; }
.celda {
  position: relative; min-width: 0; height: 58px; padding: 6px 0 0; border: 1px solid var(--k-filete-2); background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--k-crema-2);
  transition: background var(--k-t-rapido) var(--k-curva), border-color var(--k-t-rapido) var(--k-curva);
}
.celda:active { background: rgba(var(--k-linea-rgb), .06); }
.celda .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.celda .v { font-size: 10.5px; line-height: 1; color: var(--k-crema); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.celda .b { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 2px; background: rgba(var(--k-texto-rgb), .1); }
.celda .b::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: rgba(var(--k-texto-rgb), .5); transform-origin: left center; transform: scaleX(0); }
.rejilla.crece .celda .b::after { transform: scaleX(1); transition: transform var(--k-t-medio) var(--k-curva); transition-delay: calc(var(--i, 0) * 18ms + 120ms); }
.celda.mejor .b::after { background: var(--k-crema); }
/* el día sin cierre: el anillo ámbar de la cabecera de Hoy (el cierre que falta es dinero sin contar) */
.celda.falta { border-color: rgba(var(--k-ojo-rgb), .8); }      /* 3,4:1 sobre el papel: el contorno se lee */
.celda.falta .n { box-shadow: inset 0 0 0 1.2px var(--k-ojo); color: var(--k-ojo); }
.celda.falta .v { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--k-ojo); }
.celda.cerrado, .celda.futuro { cursor: default; border-color: transparent; }
.celda.cerrado .n, .celda.futuro .n { color: var(--k-apagado); opacity: .6; }
.celda.cerrado .v { color: var(--k-apagado); }
.celda.hoy { border-color: var(--k-oro-linea); }
.celda.hoy .n { color: var(--k-oro); }
.celda.hoy .v { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--k-oro); }
.celda.vacia { visibility: hidden; }
.celda.nuevo { animation: nueva var(--k-t-lento) var(--k-curva) both; }
.celda.nuevo .b::after { animation: crece var(--k-t-medio) var(--k-curva) both; }   /* el día recién guardado: su barra crece desde su base */
.leyenda-v { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--k-crema-2); margin-top: 4px; }
.leyenda-v span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-v i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lv-z { border-bottom: 2px solid rgba(var(--k-texto-rgb), .5); border-radius: 0 !important; height: 6px !important; }
.lv-falta { box-shadow: inset 0 0 0 1.2px var(--k-ojo); }
.lv-hoy { box-shadow: inset 0 0 0 1px var(--k-oro); }
/* las semanas: crecen desde su base, 45 ms detrás de la anterior */
.semanas { display: flex; flex-direction: column; gap: 4px; }
.semanas-v li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; font-size: 13px; color: var(--k-crema-2); border-bottom: 1px solid var(--k-filete-2); }
.semanas-v li small { display: block; font-size: 11px; color: var(--k-apagado); }
.semanas-v .b { height: 6px; background: rgba(var(--k-texto-rgb), .08); position: relative; }
.semanas-v .b::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); background: rgba(var(--k-texto-rgb), .42); transform-origin: left center; transform: scaleX(0); }
.semanas-v.crece .b::after { transform: scaleX(1); transition: transform var(--k-t-medio) var(--k-curva); transition-delay: calc(var(--i, 0) * var(--k-escalon) + 120ms); }
.semanas-v .n { font-family: var(--k-display); font-size: 16px; color: var(--k-crema); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ========================================================================== */
/*  ASESORÍA · la cara del hostelero (03-voz)                                  */
/* ========================================================================== */
.titulo-p { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.titulo-p h3 { font-size: 24px; }
.pliego .imp { font-size: 23px; }
.nota-pliego { font-size: 12px; color: var(--k-crema-2); line-height: 1.45; margin-top: var(--e2); border-top: 1px solid var(--k-filete-2); padding-top: 10px; }
.enlace-ges { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--k-oro-luz); font: 600 13.5px/1 var(--k-texto); letter-spacing: .02em; cursor: pointer; }
.enlace-ges span { font-size: 20px; color: var(--k-oro); }
.falta { display: flex; flex-direction: column; gap: 10px; }
.falta:empty { display: none; }
.acciones-linea { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.silencio { border-top: 1px solid var(--k-filete-2); border-bottom: 1px solid var(--k-filete-2); }
.cabecera-plegable { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; color: var(--k-crema-2);
  font: 600 12.5px/1 var(--k-texto); letter-spacing: .04em; padding: 0; min-height: 48px; cursor: pointer; }
.cabecera-plegable b { color: var(--k-crema); font-weight: 600; }
.cabecera-plegable .mas { font-size: 18px; color: var(--k-oro); transition: transform var(--k-t-rapido) var(--k-curva); }
.cabecera-plegable[aria-expanded="true"] .mas { transform: rotate(45deg); }
.cuerpo-plegable { padding-bottom: var(--e2); animation: sube var(--k-t-medio) var(--k-curva) both; }
.preguntado .etq, .historico .etq { display: block; margin-bottom: 2px; }
.historico { border-top: 1px solid var(--k-filete-2); padding-top: var(--e2); }
.lacre { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: none; cursor: pointer; border: 1px solid var(--k-oro);
  color: var(--k-crema); text-align: left; min-height: 64px; transition: background var(--k-t-rapido) var(--k-curva); }
.lacre:active { background: rgba(var(--k-linea-rgb), .05); }
.lacre .sello-l { width: 44px; height: 44px; flex: none; color: var(--k-oro); }
.lacre .sello-l svg { width: 100%; height: 100%; }
.lacre .txt b { display: block; font-size: 15px; font-weight: 600; }
.lacre .txt small { display: block; font-size: 11.5px; color: var(--k-crema-2); margin-top: 2px; line-height: 1.35; }
.lacre.pulsa .sello-l { animation: sella var(--k-t-medio) var(--k-curva) both; }
@keyframes sella { 40% { transform: scale(.86); } 100% { transform: none; } }

/* ========================================================================== */
/*  ASÍ LO VE TU GESTORÍA: la mesa del asesor, a la densidad de un teléfono    */
/*  En el ordenador es una tabla de 60 filas; aquí, la misma tinta en lista:   */
/*  cuatro cifras, y cada cliente se abre donde está.                          */
/* ========================================================================== */
.ges { gap: 14px; }
.ges-volver { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ges-volver button { border: 0; background: none; color: var(--k-oro); font: 600 13px/1 var(--k-texto); min-height: 44px; padding: 0 12px 0 0; cursor: pointer; }
.ges-explica { font-size: 13.5px; color: var(--k-crema-2); line-height: 1.5; }
.ges-cab { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--k-filete); padding-top: 14px; }
.ges-cab b { font-family: var(--k-display); font-weight: 400; font-size: 17px; letter-spacing: .16em; color: var(--k-oro-luz); }
.ges-cab span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; }
.ges-quien { font-size: 12px; color: var(--k-crema-2); margin-top: -6px; }
.ges-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--k-filete-2); border: 1px solid var(--k-filete-2); }
.ges-tile { background: var(--k-tinta-2); padding: 12px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ges-tile b { font-family: var(--k-display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--k-crema); font-variant-numeric: tabular-nums; }
.ges-tile span { font-size: 11.5px; color: var(--k-crema-2); line-height: 1.3; }
.ges-tile.bloquea b { color: var(--k-ojo); } .ges-tile.roto b { color: var(--k-mal); }
.ges-orden { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; margin-top: 4px; }
.ges-lista { border-top: 1px solid var(--k-filete); }
.ges-fila { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--k-filete-2);
  background: none; color: inherit; text-align: left; cursor: pointer; min-height: 60px; transition: background var(--k-t-rapido) var(--k-curva), padding var(--k-t-rapido) var(--k-curva); }
.ges-fila .nom { font-size: 14.5px; font-weight: 600; color: var(--k-crema); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ges-fila .nom small { font-weight: 400; font-size: 11px; color: var(--k-crema-2); letter-spacing: .04em; margin-left: 6px; }
.ges-fila .datos { grid-column: 1 / -1; font-size: 12px; color: var(--k-crema-2); font-variant-numeric: tabular-nums; }
.ges-fila[aria-expanded="true"] { box-shadow: inset 2px 0 0 var(--k-oro); padding-left: 12px; background: rgba(var(--k-linea-rgb), .04); }
.ges-fila.tuyo .nom::after { content: "tu bar"; margin-left: 8px; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--k-oro); font-weight: 600; }
.ges-detalle { padding: 6px 0 18px 12px; border-bottom: 1px solid var(--k-filete-2); box-shadow: inset 2px 0 0 var(--k-oro); animation: sube var(--k-t-medio) var(--k-curva) both; }
.ges-detalle .bloque { margin-top: var(--e3); }
.ges-detalle .bloque .etq { display: block; margin-bottom: 4px; }
.ges-detalle .acciones { display: flex; flex-direction: column; gap: 10px; margin-top: var(--e3); }
.ges-detalle .acciones .btn { width: 100%; font-size: 14px; }
.ges-margen, .explica { font-size: 12px; color: var(--k-crema-2); line-height: 1.55; }
.explica { margin-top: 12px; }
/* el sello de cierre: cuatro condiciones o no está cerrado */
.sello-cierre { border: 1px solid var(--k-oro-linea); padding: var(--e3); text-align: center; margin-top: var(--e2); }
.sello-cierre .aro { width: 66px; height: 66px; margin: 0 auto var(--e2); color: var(--k-oro); }
.sello-cierre .aro svg { width: 100%; height: 100%; }
.sello-cierre .estado { font-family: var(--k-display); font-size: 19px; color: var(--k-crema); }
.sello-cierre .folio-c { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--k-crema-2); margin-top: 5px; }
.condiciones { margin: var(--e3) 0 0; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.condiciones li { font-size: 12.5px; color: var(--k-crema-2); display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.condiciones li::before { content: "✓"; color: var(--k-bien); flex: none; font-weight: 700; }
.condiciones li.no::before { content: "—"; color: var(--k-apagado); }
.condiciones li.roto::before { content: "✗"; color: var(--k-mal); }
.sello-cierre.roto { border-color: rgba(var(--k-mal-rgb), .5); }
.sello-cierre.roto .aro { color: var(--k-mal); }
.cambio { border-left: 1px solid var(--k-mal); background: rgba(var(--k-mal-rgb), .06); padding: 11px 13px; margin-top: var(--e3); font-size: 12.5px; color: var(--k-crema-2); text-align: left; line-height: 1.5; }
.cambio b { color: var(--k-crema); display: block; margin-bottom: 3px; }
.borrador { border: 1px dashed var(--k-filete); padding: var(--e3); margin-top: var(--e3); text-align: left; animation: sube var(--k-t-medio) var(--k-curva) both; }
.borrador .etq { display: block; margin-bottom: 8px; }
.borrador .movilillo { border-left: 1px solid var(--k-oro); background: var(--k-tinta-2); padding: 12px 14px; font-size: 13.5px; color: var(--k-crema-2); line-height: 1.5; }
.borrador .movilillo b { color: var(--k-crema); display: block; margin-bottom: 3px; }
.borrador .pie-b { font-size: 12px; color: var(--k-crema-2); margin-top: 10px; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) { .sello-cierre .gira-l { transform-origin: 48px 48px; animation: gira 44s linear infinite; } }