/* Generador de facturas — estilos propios */

.gf-form { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); }

.gf-cols {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) { .gf-cols { grid-template-columns: 1fr 1fr; } }

.gf-block {
  padding: 1.1rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.gf-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.gf-block__title {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-family: var(--sans);
  font-weight: 700;
}
.gf-block .field + .field,
.gf-block .field-row + .field,
.gf-block .field + .field-row,
.gf-block .field-row + .field-row { margin-top: 0.85rem; }

/* --- Logo --- */
.gf-logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.gf-logo__preview {
  width: 88px; height: 62px; flex: none;
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-in);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px;
}
.gf-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gf-logo__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- Líneas de concepto --- */
.gf-lineas { display: grid; gap: 0.55rem; }

.gf-linea {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  padding: 0.65rem;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--neu-out-sm);
  animation: gfIn 0.3s var(--ease-out) backwards;
}
@keyframes gfIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 720px) {
  .gf-linea {
    grid-template-columns: minmax(0, 1fr) 74px 106px 74px 96px 34px;
    align-items: end;
  }
}
.gf-linea .label { font-size: var(--t-xs); margin-bottom: 0.22rem; }
.gf-linea .input { padding: 0.55rem 0.7rem; font-size: var(--t-base); }
.gf-linea input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

.gf-linea__total {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 600;
  text-align: right;
  padding: 0.55rem 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.gf-quitar {
  width: 34px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-mute);
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.gf-quitar:hover { color: var(--err-text); background: color-mix(in srgb, var(--err) 12%, transparent); }
.gf-quitar svg { width: 17px; height: 17px; }
@media (max-width: 719px) {
  .gf-quitar { width: 100%; justify-self: end; }
  .gf-linea__total { text-align: left; }
}

/* --- Resumen --- */
.gf-resumen { position: sticky; top: 88px; }
@media (max-width: 859px) { .gf-resumen { position: static; } }

.gf-totales {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  font-size: var(--t-base);
  align-items: baseline;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.gf-totales dt { color: var(--text-soft); }
.gf-totales dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.gf-total-final {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--accent-fill), var(--accent-2-fill));
  color: var(--accent-ink);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 62%, transparent), var(--clay-inset);
}
.gf-total-final span { font-size: var(--t-sm); opacity: 0.9; }
.gf-total-final strong {
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}

.gf-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  justify-content: center;
}

/* --- Agenda de clientes --- */
.gf-agenda { display: flex; gap: 0.4rem; align-items: stretch; }
.gf-agenda .select { flex: 1; min-width: 0; }
.gf-agenda .chip { flex: none; }

/* --- Aviso sobre la serie --- */
.gf-aviso {
  margin-top: 0.8rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  background: color-mix(in srgb, var(--warn) 13%, var(--surface));
  border-left: 3px solid var(--warn);
  color: var(--text-soft);
}
.gf-aviso--ok {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-left-color: var(--ok);
}

/* --- Historial --- */
.gf-historial__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.gf-tabla { min-width: 560px; }
.gf-tabla td:last-child { text-align: right; white-space: nowrap; }
.gf-tabla .chip { padding: 0.24rem 0.6rem; font-size: var(--t-xs); }
.gf-tabla .gf-tipo {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.gf-historial[hidden], .gf-historial.hidden { display: none; }

/* =============================================================
   Ergonomía táctil (ver styles.css §9b para el porqué de la consulta)
   ============================================================= */
@media (max-width: 700px), (pointer: coarse) {
  /* En móvil la papelera ocupa el ancho de la línea, pero se quedaba en 38 px
     de alto: justo por debajo del dedo. */
  .gf-quitar { min-height: 44px; }

  /* 0,4 rem entre acciones dejaban dos pastillas a 6,4 px */
  .gf-logo__actions,
  .gf-mini-actions,
  .gf-agenda { gap: 0.55rem; }
  .gf-lineas { gap: 0.7rem; }

  /* Las dos filas de acciones del resumen las separa un margen de 0,3 rem
     escrito en el propio HTML: 4,8 px entre dos pastillas. Se compensa con
     relleno en vez de pelearse con la especificidad del estilo en línea. */
  .gf-mini-actions + .gf-mini-actions { padding-top: 0.3rem; }

  /* Suelo tipográfico */
  .gf-linea .label,
  .gf-tabla .chip,
  .gf-tabla .gf-tipo { font-size: var(--t-xs); }
}