/* Firma de Carlos PC's + Zidark. Pie de página de toda web o app que hacemos.
   Variantes: .firma (fondo claro) y .firma.firma--oscura (fondo oscuro: cambia las imágenes por las -fondo-oscuro). */
.firma{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;padding:22px 20px;color:#4b5563;font-size:12px;line-height:1.3;border-top:1px solid #d9dde3}
.firma-bloque{display:flex;align-items:center;gap:12px}
.firma-etq{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.firma img{display:block;width:auto}
.firma .f-cpc{height:32px}
.firma .f-zid{height:28px}
.firma-sep{width:1px;height:28px;background:#c4c9d1}
.firma-cliente{flex-basis:100%;text-align:center;margin:0}
.firma--oscura{color:#e5e7eb;border-top-color:rgba(255,255,255,.22)}
.firma--oscura .firma-sep{background:rgba(255,255,255,.3)}
.firma--compacta{padding:12px 16px;gap:8px 18px}
.firma--compacta .f-cpc{height:28px}.firma--compacta .f-zid{height:26px}
@media (max-width:560px){.firma-sep{display:none}.firma{gap:14px 24px}.firma-bloque{flex-direction:column;gap:6px;text-align:center}}

/* Dentro de una caja de acceso (login) */
.firma--login{margin-top:26px;padding:20px 0 0}
.firma--login .f-cpc{height:34px}.firma--login .f-zid{height:30px}

.firma a{color:inherit;text-decoration:underline;text-underline-offset:2px}


/* Adaptación al tema de la app: color del texto por variables y logo según tema */
.firma { color: var(--texto-tenue); border-top-color: var(--borde); }
.firma-sep { background: var(--borde); }
.firma .f-oscuro { display: none; }
:root[data-theme="dark"] .firma .f-claro { display: none; }
:root[data-theme="dark"] .firma .f-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .firma .f-claro { display: none; }
  :root:not([data-theme]) .firma .f-oscuro { display: block; }
}