/* ============================================================
   GB — Sistema de diseño
   Extraído del mockup de Claude Design para Serdigón.

   NO TOCA NINGUNA PANTALLA EXISTENTE. Todo lleva prefijo `gb-`, y las
   variables van bajo `.gb` en vez de `:root` para no pisar las que ya usa
   `index.html`. Una pantalla vieja sigue exactamente igual salvo que alguien
   le ponga la clase.

   Se aplica por ahora a: matriz obra × tipo, detalle por tipo, cola de
   comprobantes y adjuntar comprobante.
   ============================================================ */

/* ── Tipografía ────────────────────────────────────────────────
   IBM Plex Sans para texto, IBM Plex Mono para cifras. La mono no es
   decorativa: con `tabular-nums` las columnas de montos alinean por posición
   decimal, que es lo que permite comparar de un vistazo una columna de
   millones. Una proporcional deja los dígitos bailando.

   SE SIRVEN DESDE LA INSTANCIA, no desde Google. Las declara
   `static/fuentes/fuentes.css`, que `index.html` carga antes que esta hoja.

   Hasta el 2026-09-06 esto tenía un `@import` de `fonts.googleapis.com` y
   acá mismo estaba escrito el riesgo: "si la fuente no llega —servidor sin
   salida a internet, que es el caso de una droplet detrás de firewall— la
   pantalla se ve con la del sistema". Con la aplicación instalable en el
   teléfono ese riesgo pasó a ser seguro: una PWA tiene que abrir sin red.

   Y había un segundo motivo, menos visible: pedirle las fuentes a Google en
   cada carga le contaba a Google qué instancia usa qué, desde qué IP y a qué
   hora. Información de la contabilidad de un cliente saliendo a un tercero
   sin que nadie lo hubiera decidido.

   La pila de respaldo se queda igual: si el `.woff2` no llegara, la pantalla
   se sigue viendo con la del sistema en vez de en blanco. */

.gb {
  --gb-fuente:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gb-fuente-num:  "IBM Plex Mono", "DM Mono", ui-monospace, "Courier New", monospace;

  /* ── Escala tipográfica ──────────────────────────────────────
     Del mockup, redondeada a enteros: los 12,5px salen de un `rem` escalado y
     no aportan nada escritos a mano. */
  --gb-t-micro:  10px;   /* etiquetas de columna, unidades */
  --gb-t-chico:  11px;   /* chips, notas al pie */
  --gb-t-base:   12px;   /* tabla densa: filas y encabezados */
  --gb-t-medio:  13px;   /* texto de tarjeta, botones */
  --gb-t-titulo: 15px;   /* títulos de sección */
  --gb-t-cifra:  26px;   /* la cifra de una tarjeta de resumen */

  --gb-peso-normal: 400;
  --gb-peso-medio:  500;
  --gb-peso-fuerte: 600;

  /* ── Espaciado ───────────────────────────────────────────────
     Cuatro pasos. El mockup usa una tabla DENSA a propósito: 7px de alto de
     fila contra los 9 del encabezado. Un libro de bancos se lee de corrido y
     el aire de más obliga a scrollear por nada. */
  --gb-e1: 4px;
  --gb-e2: 8px;
  --gb-e3: 14px;
  --gb-e4: 20px;

  --gb-fila-y:  7px;    /* padding vertical de una celda */
  --gb-fila-x: 10px;
  --gb-cab-y:   9px;    /* el encabezado respira un poco más */

  --gb-radio-chico: 4px;   /* chips */
  --gb-radio:       6px;   /* botones, campos */
  --gb-radio-caja:  8px;   /* tarjetas */

  /* ── Neutros ─────────────────────────────────────────────────
     Del mockup. Tienen una pizca de azul —no son grises puros— y por eso se
     ven elegidos y no heredados. */
  --gb-fondo:      #eceef0;
  --gb-superficie: #ffffff;
  --gb-superficie2:#fafbfc;
  --gb-borde:      #d7dbe0;
  --gb-borde-suave:#f0f2f4;
  --gb-texto:      #1f2328;
  --gb-texto2:     #4b5158;
  --gb-tenue:      #6b7280;
  --gb-tenue2:     #9aa1ab;

  /* ── Marca ───────────────────────────────────────────────────
     LOS CUATRO SALEN DE marca.json, inyectados en `:root` al servir la página
     por `_con_marca()`. Acá solo se reexportan con respaldo: si alguien abre
     el CSS suelto, la pantalla sigue legible en vez de quedar sin color.

     Serdigón: grafito #111111, amarillo #EFC600. MT: sus rojos. */
  --gb-marca-oscuro: var(--marca-oscuro, #111111);
  --gb-marca-medio:  var(--marca-medio,  #2a2a2a);
  --gb-marca-claro:  var(--marca-claro,  #454545);
  --gb-marca-acento: var(--marca-acento, #efc600);

  /* Roles que no todos los perfiles declaran. El respaldo NO es un color
     nuevo: apunta a lo que ya se usaba, asi que un perfil que no los traiga
     —MT, nexo— sale exactamente igual que antes.

     `boton` es la unica parte donde un color de marca es FONDO con texto
     encima, y por eso viene con su color de texto al lado. Serdigon lo usa
     para su amarillo: blanco sobre #EFC600 da 1,65:1 y #111111 da 11,46:1.
     Un fondo de marca sin decir de que color va su texto es como se llega a
     blanco sobre amarillo. */
  --gb-marca-acento-oscuro: var(--marca-acento-oscuro, var(--gb-marca-medio));
  --gb-marca-neutro:        var(--marca-neutro, var(--gb-superficie2));
  --gb-boton:               var(--marca-boton, var(--gb-marca-medio));
  --gb-boton-texto:         var(--marca-boton-texto, #fff);

  /* ── Semántica contable — NO ES MARCA ────────────────────────
     Estos dos NO se derivan de la marca y no cambian entre instancias: son
     convenciones contables. El azul es "esto es un importe en dólares" y el
     rojo es "esto es negativo". Si dependieran del cliente, el mismo color
     significaría cosas distintas en dos pantallas del mismo producto.

     El ámbar de avisos tampoco: por eso el #b45309 que Serdigón pasó como
     color de marca NO se usa como marca. */
  --gb-dolar:    #1e40af;
  --gb-negativo: #b91c1c;

  --gb-ok:        #115e59;
  --gb-ok-fondo:  #ecfdf5;
  --gb-ok-borde:  #a7f3d0;
  /* El ambar de "sin clasificar" es semantico y por regla NO cambia entre
     instancias... salvo cuando choca con la marca, que es lo que pasa en
     Serdigon: el ambar por defecto tiene tono 42 grados y su amarillo de
     marca 50. A ocho grados de distancia, el chip de alerta se lee como un
     elemento de marca y el boton de marca como una alerta.

     Por eso el perfil puede pisarlo —y solo entonces—. Serdigon lo lleva a
     naranja quemado #9A3412, tono 15: deltaE 72,9 contra su amarillo. Sigue
     siendo un color de aviso, no de marca. */
  --gb-aviso:       var(--marca-aviso,       #92400e);
  --gb-aviso-fondo: var(--marca-aviso-fondo, #fffbeb);
  --gb-aviso-borde: var(--marca-aviso-borde, #fde3a7);
  --gb-manual:       #4b5158;
  --gb-manual-fondo: #f4f5f6;
  --gb-manual-borde: #e5e8ec;

  font-family: var(--gb-fuente);
  font-size: var(--gb-t-base);
  color: var(--gb-texto);
}

/* Cualquier número dentro de `.gb` alinea por columna. Se aplica al contenedor
   y no a cada celda: olvidarse en una columna es exactamente cómo se rompe la
   alineación de una tabla de montos. */
.gb { font-variant-numeric: tabular-nums; }


/* ── Tarjeta de cifra ──────────────────────────────────────────
   Un dato grande con su etiqueta arriba y su aclaración abajo. La aclaración
   no es decorativa: "Valuado a la tasa de cada día" es la diferencia entre un
   número que se puede defender y uno que hay que explicar cada vez. */
.gb-cifra {
  background: var(--gb-superficie);
  border: 1px solid var(--gb-borde);
  border-radius: var(--gb-radio-caja);
  padding: var(--gb-e3) var(--gb-e3) 12px;
  display: flex; flex-direction: column; gap: var(--gb-e1);
}
.gb-cifra-rotulo {
  font-size: var(--gb-t-micro);
  font-weight: var(--gb-peso-medio);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gb-tenue);
}
.gb-cifra-valor {
  font-family: var(--gb-fuente-num);
  font-size: var(--gb-t-cifra);
  font-weight: var(--gb-peso-medio);
  letter-spacing: -.5px;
  color: var(--gb-texto);
  line-height: 1.15;
}
.gb-cifra-valor.es-dolar    { color: var(--gb-dolar); }
.gb-cifra-valor.es-negativo { color: var(--gb-negativo); }
.gb-cifra-nota { font-size: var(--gb-t-chico); color: var(--gb-tenue); }


/* ── Tabla densa ───────────────────────────────────────────────
   Filas de 7px. Un libro de bancos se lee de corrido; el aire de más obliga a
   scrollear por nada. */
.gb-tabla-caja {
  background: var(--gb-superficie);
  border: 1px solid var(--gb-borde);
  border-radius: var(--gb-radio-caja);
  overflow-x: auto;          /* la tabla scrollea sola, la página no */
}
.gb-tabla { width: 100%; border-collapse: collapse; font-size: var(--gb-t-base); }
.gb-tabla th {
  padding: var(--gb-cab-y) var(--gb-fila-x);
  font-size: var(--gb-t-base);
  font-weight: var(--gb-peso-medio);
  color: var(--gb-tenue);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--gb-borde);
}
.gb-tabla td {
  padding: var(--gb-fila-y) var(--gb-fila-x);
  color: var(--gb-texto);
  border-bottom: 1px solid var(--gb-borde-suave);
  white-space: nowrap;
}
.gb-tabla tbody tr:last-child td { border-bottom: none; }
.gb-tabla tbody tr:hover td { background: var(--gb-superficie2); }

/* Columnas numéricas. La clase va en `th` y `td`. */
.gb-tabla .num, .gb-num {
  font-family: var(--gb-fuente-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gb-tabla .num.dolar { color: var(--gb-dolar); }
.gb-tabla .num.neg   { color: var(--gb-negativo); }
/* Un cero no es un dato: se apaga para que la vista caiga en lo que sí hay. */
.gb-vacio { color: var(--gb-tenue2); }

.gb-tabla tfoot td {
  background: var(--gb-superficie2);
  font-weight: var(--gb-peso-fuerte);
  border-top: 1px solid var(--gb-borde);
  border-bottom: none;
}
.gb-tabla .total { font-weight: var(--gb-peso-fuerte); }


/* ── Botón ─────────────────────────────────────────────────────
   El primario usa el color solido de la marca, con SU color de texto al lado.
   Por omision son el medio del degradado y blanco —que es lo que habia—, y
   un perfil puede cambiar el par: Serdigon pone su amarillo con texto
   #111111, porque blanco encima da 1,65:1. */
.gb-btn {
  font-family: var(--gb-fuente);
  font-size: var(--gb-t-medio);
  font-weight: var(--gb-peso-medio);
  padding: var(--gb-e2) var(--gb-e3);
  border-radius: var(--gb-radio);
  border: 1px solid var(--gb-borde);
  background: var(--gb-superficie);
  color: var(--gb-texto2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.gb-btn:hover { border-color: var(--gb-marca-medio); color: var(--gb-marca-medio); }
.gb-btn:focus-visible { outline: 2px solid var(--gb-marca-medio); outline-offset: 2px; }
.gb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.gb-btn[disabled]:hover { border-color: var(--gb-borde); color: var(--gb-texto2); }

.gb-btn-primario {
  background: var(--gb-boton);
  border-color: var(--gb-boton);
  color: var(--gb-boton-texto);
}
/* El hover cae al oscuro de la marca, que siempre aguanta blanco: es el
   arranque del degradado y ya se usa de fondo con texto blanco en toda la
   aplicacion. */
.gb-btn-primario:hover { background: var(--gb-marca-oscuro); border-color: var(--gb-marca-oscuro); color: #fff; }
.gb-btn-peligro:hover { border-color: var(--gb-negativo); color: var(--gb-negativo); background: #fef2f2; }
.gb-btn-chico { font-size: var(--gb-t-chico); padding: var(--gb-e1) var(--gb-e2); }


/* ── Chip de estado ────────────────────────────────────────────
   Cuatro estados, cada uno con su color, y ninguno depende de la marca: son
   semántica, igual que el azul de dólares. Un "conciliado" tiene que verse
   igual en las dos instancias. */
.gb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--gb-t-chico);
  font-weight: var(--gb-peso-medio);
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: var(--gb-radio-chico);
  border: 1px solid var(--gb-manual-borde);
  background: var(--gb-manual-fondo);
  color: var(--gb-manual);
  white-space: nowrap;
}
.gb-chip-sin-clasificar { background: var(--gb-aviso-fondo); border-color: var(--gb-aviso-borde); color: var(--gb-aviso); }
.gb-chip-conciliado     { background: var(--gb-ok-fondo);    border-color: var(--gb-ok-borde);    color: var(--gb-ok); }
.gb-chip-manual         { background: var(--gb-manual-fondo);border-color: var(--gb-manual-borde);color: var(--gb-manual); }
.gb-chip-sin-tasa       { background: #fef2f2;               border-color: #fecaca;               color: var(--gb-negativo); }
/* Neutro, para un tipo o rubro: no es un estado, no lleva color. */
.gb-chip-etiqueta { font-weight: var(--gb-peso-normal); text-transform: uppercase; font-size: var(--gb-t-micro); }


/* ── Piezas de composición ─────────────────────────────────────*/
.gb-panel {
  background: var(--gb-superficie);
  border: 1px solid var(--gb-borde);
  border-radius: var(--gb-radio-caja);
  overflow: hidden;
}
.gb-panel-cab {
  padding: var(--gb-e3);
  border-bottom: 1px solid var(--gb-borde);
  display: flex; align-items: baseline; gap: var(--gb-e2); flex-wrap: wrap;
}
.gb-titulo { font-size: var(--gb-t-titulo); font-weight: var(--gb-peso-fuerte); color: var(--gb-texto); }
.gb-sub    { font-size: var(--gb-t-chico); color: var(--gb-tenue); }
.gb-panel-cuerpo { padding: var(--gb-e3); }

.gb-rejilla { display: grid; gap: var(--gb-e3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gb-fila-controles { display: flex; gap: var(--gb-e2); align-items: center; flex-wrap: wrap; margin-bottom: var(--gb-e3); }

/* Selector de moneda: un grupo de botones donde solo uno está activo. */
.gb-monedas { display: inline-flex; gap: var(--gb-e1); }
.gb-moneda {
  font-family: var(--gb-fuente); font-size: var(--gb-t-chico);
  font-weight: var(--gb-peso-medio);
  padding: 5px 12px; border-radius: var(--gb-radio);
  border: 1px solid var(--gb-borde); background: var(--gb-superficie);
  color: var(--gb-tenue); cursor: pointer; transition: all .15s;
}
.gb-moneda:hover { color: var(--gb-marca-medio); border-color: var(--gb-marca-medio); }
.gb-moneda.activa { background: var(--gb-boton); border-color: var(--gb-boton); color: var(--gb-boton-texto); }

.gb-nota-pie { font-size: var(--gb-t-chico); color: var(--gb-tenue); margin-top: var(--gb-e2); }
.gb-sin-datos { text-align: center; padding: 44px var(--gb-e4); color: var(--gb-tenue); font-size: var(--gb-t-medio); }