/* ============================================================================
   SIG_V1 — Bloque de firma ESTÁNDAR (2026-09-18)
   ----------------------------------------------------------------------------
   Un único diseño de firma para TODO el sistema: pantalla, impresión y PDF.
   Se carga después de css/rediseno.css, así que puede usar sus tokens.

   Marcado que produce js/nucleo/firma-estandar.js (SigFirma):

     <div class="sig-firmas">
       <div class="sig-firma">
         <div class="sig-firma__trazo"><img src="..." alt="Firma de ..."></div>
         <div class="sig-firma__linea"></div>
         <div class="sig-firma__nombre">JUAN PEREZ</div>
         <div class="sig-firma__cargo">SUPERVISOR</div>
         <div class="sig-firma__fecha">18/09/2026</div>
       </div>
     </div>

   REGLA DURA del proyecto: fondo claro => letra oscura. Aquí el fondo del
   bloque es blanco/transparente y toda la letra es oscura. No se usa nunca
   blanco sobre celeste.

   Las firmas ya guardadas NO se tocan: el componente muestra lo que haya
   (imagen base64, ruta de archivo, o sólo el nombre escrito a máquina).
   ============================================================================ */

:root {
  --sig-firma-ancho:      190px;  /* ancho del cajetín                */
  --sig-firma-alto-trazo:  64px;  /* alto reservado al trazo/imagen   */
  --sig-firma-gap:         16px;  /* separación entre cajetines       */
  --sig-firma-linea:      #0f1b33;
  --sig-firma-nombre:     #0f1b33;
  --sig-firma-cargo:      #41506b;
  --sig-firma-meta:       #6b7a94;
}

/* ─── Grupo de firmas ─────────────────────────────────────────────────── */
.sig-firmas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--sig-firma-gap);
  margin-top: 24px;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Variantes de reparto: 2, 3 o 4 firmas por fila ocupando todo el ancho. */
.sig-firmas--justificado { justify-content: space-between; }
.sig-firmas--col2 .sig-firma,
.sig-firmas--col3 .sig-firma,
.sig-firmas--col4 .sig-firma { flex: 1 1 0; }

/* ─── Cajetín ─────────────────────────────────────────────────────────── */
.sig-firma {
  width: var(--sig-firma-ancho);
  max-width: 100%;
  text-align: center;
  font-family: var(--font-ui, 'Plus Jakarta Sans', 'Exo 2', 'Segoe UI', Arial, sans-serif);
  background: transparent;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Zona del trazo: alto fijo para que todos los cajetines queden alineados
   tanto si hay imagen de firma como si la hoja se firma a mano. */
.sig-firma__trazo {
  height: var(--sig-firma-alto-trazo);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.sig-firma__trazo img {
  max-height: calc(var(--sig-firma-alto-trazo) - 4px);
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Línea de firma: SIEMPRE presente, con o sin imagen. */
.sig-firma__linea {
  border-top: 1.2px solid var(--sig-firma-linea);
  margin: 0 0 5px;
}

.sig-firma__nombre {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sig-firma-nombre);
  min-height: 13px;         /* reserva el renglón aunque venga vacío */
  word-break: break-word;
}
.sig-firma__cargo {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sig-firma-cargo);
  margin-top: 1px;
}
.sig-firma__fecha {
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sig-firma-meta);
  margin-top: 1px;
}

/* Cajetín vacío (nadie firmó todavía): mismo hueco, sin ruido visual. */
.sig-firma--vacia .sig-firma__nombre { color: var(--sig-firma-meta); font-weight: 600; }

/* ─── Editor: el mismo cajetín con sus controles debajo ───────────────── */
.sig-firma-editor { width: var(--sig-firma-ancho); max-width: 100%; }
.sig-firma-editor .sig-firma { width: 100%; }
.sig-firma-editor__acciones {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.sig-firma-editor__btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border: 1px solid var(--c-brand-300, #90b8d8);
  border-radius: var(--r-xs, 6px);
  background: var(--c-brand-50, #f0f5fb);
  color: var(--c-brand-900, #0a1e50);   /* fondo claro => letra oscura */
  cursor: pointer;
}
.sig-firma-editor__btn:hover { background: var(--c-brand-100, #e3ecf7); }
.sig-firma-editor__btn--quitar {
  border-color: #e2b6b6;
  background: var(--c-danger-bg, #fbe6e6);
  color: var(--c-danger, #c02020);
}

/* ─── Tema oscuro (sólo pantalla; la impresión va siempre en claro) ───── */
body.tema-oscuro .sig-firma,
body.modo-oscuro .sig-firma,
html[data-tema="oscuro"] .sig-firma {
  --sig-firma-linea:  #c6d3e6;
  --sig-firma-nombre: #eef3fa;   /* fondo oscuro => letra clara */
  --sig-firma-cargo:  #c2cfe2;
  --sig-firma-meta:   #9fb0c8;
}

/* ─── Móvil (coherente con css/movil.css: una columna) ────────────────── */
@media (max-width: 700px) {
  .sig-firmas { gap: 14px; }
  .sig-firma,
  .sig-firma-editor { width: 100%; }
  .sig-firmas--col2 .sig-firma,
  .sig-firmas--col3 .sig-firma,
  .sig-firmas--col4 .sig-firma { flex: 1 1 100%; }
  .sig-firma__nombre { font-size: 12px; }
  .sig-firma__cargo  { font-size: 11px; }
  .sig-firma__fecha  { font-size: 10.5px; }
}

/* ─── Impresión / PDF ─────────────────────────────────────────────────── */
@media print {
  .sig-firmas {
    gap: 10mm;
    margin-top: 10mm;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .sig-firma {
    width: 48mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sig-firma,
  .sig-firma__nombre,
  .sig-firma__cargo,
  .sig-firma__fecha {
    /* En papel se imprime siempre en claro con letra oscura. */
    background: transparent !important;
  }
  .sig-firma__nombre { color: #0f1b33 !important; font-size: 8pt; }
  .sig-firma__cargo  { color: #41506b !important; font-size: 7.5pt; }
  .sig-firma__fecha  { color: #55647d !important; font-size: 7pt; }
  .sig-firma__linea  { border-top-color: #0f1b33 !important; }
  .sig-firma__trazo  { height: 17mm; }
  .sig-firma__trazo img { max-height: 16mm; }
  .sig-firma-editor__acciones { display: none !important; }
}