/**
 * ===============================================
 * CLIENTES · FICHA CON EL DISEÑO DE PROVEEDORES (Z52)
 * Reutiliza css/proveedores-detalle.css (clases pd-*). Aquí solo complementos (cd-*).
 * ===============================================
 */

/* La etiqueta de estado del cliente dentro del encabezado oscuro: opaca y legible */
.cd-overlay .pd-subtitulo > .estado-cliente { opacity: 1; padding: 4px 10px; font-size: 12px; }

/* Insignia de estado dentro de un dato */
.cd-overlay .pd-dato-valor .estado-cliente { align-self: flex-start; }

/* Contador de documentos en el título de la tarjeta */
.cd-contador {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
}

.cd-contador.cd-contador-ok { background: #d1fae5; color: #065f46; }

/* Marca "Principal" en contactos */
.cd-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #e0eef4;
    color: var(--primary-dark, #30586B);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Lista de emails de facturación */
.cd-lista-emails {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.cd-lista-emails li { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.cd-lista-emails i { color: var(--primary-medium, #407C94); }

/* Enlaces dentro de la ficha */
.cd-overlay .pd-dato-valor a,
.cd-overlay .pd-tabla a { color: #2563eb; text-decoration: none; }
.cd-overlay .pd-dato-valor a:hover,
.cd-overlay .pd-tabla a:hover { text-decoration: underline; }

/* Cambios del historial (renderDetallesCambios de clientes-detalle.js) */
.cd-overlay .timeline-cambios {
    list-style: none;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.8rem;
}

.cd-overlay .timeline-cambios li { overflow-wrap: anywhere; }
.cd-overlay .cambio-campo { color: #6b7280; margin-right: 4px; }
.cd-overlay .cambio-antes { color: #9ca3af; text-decoration: line-through; }
.cd-overlay .cambio-flecha { color: #9ca3af; margin: 0 4px; }
.cd-overlay .cambio-despues { font-weight: 600; color: #111827; }