/* CIOS - Sistema de Inteligencia Comercial
   Copyright (c) 2026 Angel. Todos los derechos reservados.
   Software propietario licenciado a PATFOOD para uso interno. Ver AVISO_LEGAL.md

   D4 - GRT (modelo). Todo con prefijo d4- y SOLO tokens de styles.css, para
   que los temas funcionen sin tocar nada aca. Las tablas reusan .tabla-ana /
   .col-txt / .ana-grupo, que es donde vive la regla de presentacion de la
   casa: aca no se redefine ninguna.

   FD4: la gramatica que los tres modelos COMPARTEN (cabecera, chips, cards,
   paneles, notas, estados, vacios, barra de filtros) vive en styles.css,
   seccion "DASHBOARDS MODELO"; definirla tres veces fue lo que desalineo a los
   tres. Aca queda solo lo que es de D4: la carga manual de las finanzas del
   mes y el cuadro de resultados de gerencia. */

/* ---------- carga manual de finanzas ----------
   Es la UNICA pantalla de escritura del modelo: se separa del dato con la
   capa fria y la trama punteada, la misma que marca lo que todavia no tiene
   carga. Escribir y leer no se ven igual.

   LA CARGA SE TIENE QUE ENCONTRAR SOLA (2026-08-04, pedido de gerencia: "que
   me diga donde subirlo, no se reconoce como ponerlo"). El boton subio al
   ENCABEZADO del bloque -- y toma jerarquia primaria el mes que falta cargar,
   en vez de quedar como el boton mas discreto del sistema debajo de las
   cards -- y cada card sin dato lleva el suyo. */
.d4-bloque-cab {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.d4-acciones { display: flex; gap: 8px; margin-bottom: 12px; }

/* el boton del hueco se apoya en el piso de la card, en el mismo renglon en el
   que las cards con dato llevan el rotulo de carga manual */
.d4-card-cta { margin-top: auto; padding-top: 10px; }

.d4-carga-nota {
  font-size: 13px; line-height: 1.5; color: var(--tinta); margin: 12px 0 0;
}

.d4-form {
  display: grid; gap: 12px; margin: 0 0 16px; padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  border: 1px dashed var(--borde-fuerte); border-radius: 8px;
  background: var(--fondo-suave);
}
/* el formulario se pinta siempre y se muestra o se esconde: abrirlo no rearma
   la vista, asi no se pierde la posicion de lectura. `display: grid` le gana al
   `hidden` del navegador, de ahi esta linea. */
.d4-form[hidden] { display: none; }
.d4-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.d4-campo span { color: var(--tinta-suave); font-weight: 600; letter-spacing: .02em; }
.d4-campo input {
  padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--campo-bg); color: var(--tinta); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.d4-campo-ancho { grid-column: 1 / -1; }
.d4-campo-ancho input { font-variant-numeric: normal; }
.d4-form-acciones {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.d4-form-ayuda { font-size: 11px; line-height: 1.45; color: var(--tinta-suave); }
/* ayuda POR CAMPO (la utilidad neta la calcula administracion, el umbral es el
   piso de caja): va debajo del input, en el piso legible, no en un tooltip que
   nadie abre mientras carga numeros */
.d4-campo-ayuda { font-size: 11px; line-height: 1.4; color: var(--tinta-suave); }

/* ---------- cuadro de resultados (el formato de gerencia) ----------
   Siete filas siempre: las que no tienen carga se leen en tinta apagada, sin
   trama ni color de semaforo -- que falte una carga no es una alarma del
   negocio. */
.d4-contadores {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.d4-contadores .tag-estado { display: inline-block; }
.d4-contadores-nota { font-size: 11px; line-height: 1.45; color: var(--tinta-suave); }

/* CINCO COLUMNAS Y NINGUNA BARRA HORIZONTAL. Lo que estiraba el cuadro era la
   prosa (la referencia de cada fila, hasta 140 caracteres) contra la regla de
   la casa `th, td { white-space: nowrap }`, que usan TODAS las tablas del CIOS
   y no se toca. Aca se abre el corte de linea SOLO en la columna de texto de
   este cuadro, acotada, y la referencia se fue al tooltip de la fila. */
.d4-cuadro th.col-txt, .d4-cuadro td.col-txt {
  white-space: normal; width: 26ch; min-width: 15ch;
}

/* el rotulo de la fila (que poblacion, quien cargo el numero y cuando): nota
   debajo del nombre, nunca compitiendo con el */
.d4-cuadro-sub {
  display: block; font-size: 11px; line-height: 1.4; color: var(--tinta-suave);
  font-weight: 400; white-space: normal; max-width: 26ch;
}
.tabla-ana tbody tr.d4-fila-hueca td { color: var(--tinta-suave); }

/* La flecha dice DIRECCION y va DENTRO del tag de estado: una columna entera
   para un triangulo es ancho que el cuadro no tiene. Toma el color del propio
   tag (currentColor), asi no entra ningun color nuevo ni puede contradecirlo.
   En las partidas de seguimiento (por cobrar, por pagar) va sin juicio: que
   suba lo que se debe no es verde ni rojo. */
.d4-cuadro .tag-estado .tendencia {
  font-size: inherit; margin-left: 6px; vertical-align: middle;
}
.d4-cuadro .tag-estado .flecha {
  border-left-width: 4px; border-right-width: 4px;
}
.d4-cuadro .tag-estado .flecha.sube { border-bottom: 6px solid currentColor; }
.d4-cuadro .tag-estado .flecha.baja { border-top: 6px solid currentColor; }
.d4-flecha-neutra { color: var(--tinta-suave); }
.d4-cuadro .d4-flecha-neutra .flecha.sube,
.d4-flecha-neutra .flecha.sube { border-bottom-color: var(--tinta-suave); }
.d4-cuadro .d4-flecha-neutra .flecha.baja,
.d4-flecha-neutra .flecha.baja { border-top-color: var(--tinta-suave); }