/* ============================================================
   components/CopyChip.css
   ------------------------------------------------------------
   Componente compartido: "copy-chip" - identificador copiable
   (NSS, RFC, CURP, PersonalID, y cualquier valor futuro similar).
   Extrae y unifica el estilo que antes vivia duplicado en
   PersonalCards.css (.personal-copy-chip) y ContratosCard.css
   (.copy-chip). Fuente unica de verdad visual para todos los chips.

   Estructura del marcado (ver _CopyChip.cshtml y shared/copyChip.js):
     <span class="copy-chip">
        <i class="bi bi-... copy-chip-icon"></i>
        <span class="copy-chip-label">NSS:</span>
        <span class="copy-chip-value">123...</span>
        <button class="copy-chip-btn" data-copy-value="123...">
            <i class="bi bi-clipboard"></i>
        </button>
     </span>

   Variantes:
     - Por defecto: verde institucional sobre fondo claro (tarjetas
       de Personal, vista plana de Contratos, Detalles, asistente).
     - .copy-chip--on-dark: blanco translucido para fondos oscuros
       (p. ej. la cabecera agrupada de empleado, con gradiente).
   ============================================================ */

.copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem 0.2rem 0.6rem;
    background: rgba(0, 139, 111, 0.08);
    border: 1px solid rgba(0, 139, 111, 0.2);
    border-radius: 999px;
    font-size: 0.78rem;
    color: #064a38;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
}

.copy-chip-icon {
    opacity: 0.85;
}

.copy-chip-label {
    opacity: 0.75;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.copy-chip-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-chip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    line-height: 1;
    border: none;
    background: rgba(0, 139, 111, 0.12);
    color: #064a38;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    flex: 0 0 auto;
}

    .copy-chip-btn:hover,
    .copy-chip-btn:focus-visible {
        background: rgba(0, 139, 111, 0.22);
        transform: scale(1.05);
        outline: none;
    }

    .copy-chip-btn.copied {
        background: rgba(40, 167, 69, 0.85);
        color: #fff;
    }

/* --- Variante para fondos oscuros (cabecera agrupada de empleado) --- */
.copy-chip--on-dark {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

    .copy-chip--on-dark .copy-chip-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

        .copy-chip--on-dark .copy-chip-btn:hover,
        .copy-chip--on-dark .copy-chip-btn:focus-visible {
            background: rgba(255, 255, 255, 0.28);
        }

        .copy-chip--on-dark .copy-chip-btn.copied {
            background: rgba(40, 167, 69, 0.85);
        }

/* En mobile se amplia el area de toque del boton de copia (px para garantizar
   >=32px independiente del font-size base) y se holgura un poco el chip. */
@media (max-width: 575.98px) {
    .copy-chip-btn {
        width: 32px;
        height: 32px;
    }

    .copy-chip {
        padding: 0.3rem 0.55rem 0.3rem 0.65rem;
    }
}