/* Mi Perfil (/perfil-admin y /perfil-empleado).
   Vivía en un bloque <style> dentro del .razor, contra lo que manda CLAUDE.md: esos bloques
   no tienen scope —un selector suelto ahí restila los diálogos que la página abre— y el banco
   visual no puede reproducir el componente para compararlo.
   Colores por TOKEN, nunca hex: los prefijos --ic- y --lc- voltean con data-theme y un hex no.
   Esta pantalla se usa al aire libre, donde la legibilidad ya está al límite.

   OJO al redactar aquí: los prefijos van SIN comodín. Escritos con «*» y separados por una
   barra, el asterisco pegado a la barra cerraba este comentario antes de tiempo y el navegador se
   comía la PRIMERA REGLA de la hoja. Medido en el banco, no deducido. Lo vigila
   ComentariosCssCerradosTests. */

.perf-card {
        background: var(--ic-surface);
        border: 1px solid var(--ic-border, rgba(148,163,184,0.1));
        border-radius: 16px;
        padding: 1.75rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: 420px;
        margin: 0 auto;
    }

    .perf-avatar {
        width: 72px; height: 72px; border-radius: 50%;
        font-size: 1.75rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 4px;
    }
    .perf-avatar--admin { background: rgba(var(--lc-accent-rgb),0.18); color: var(--ic-primary); }
    .perf-avatar--emp   { background: rgba(var(--lc-neutral-rgb), 0.12); color: var(--lc-neutral); }

    .perf-name { font-size: 1.125rem; font-weight: 700; color: var(--ic-text); letter-spacing: -0.02em; }

    .perf-fields {
        width: 100%;
        display: flex; flex-direction: column; gap: 2px;
        margin-top: 8px; margin-bottom: 4px;
    }

    .perf-field {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ic-border, rgba(148,163,184,0.06));
    }
    .perf-field:last-child { border-bottom: none; }

    .perf-field__icon {
        width: 32px; height: 32px; border-radius: 9px;
        background: rgba(148,163,184,0.06);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .perf-field__body { display: flex; flex-direction: column; gap: 1px; }
    .perf-field__label { font-size: .6875rem; color: var(--ic-muted); }
    .perf-field__val   { font-size: .875rem; font-weight: 500; color: var(--ic-text); }

    /* Chips de rol reutilizados */
    [class^="emp-rol--"] { font-size: .6875rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
    .emp-rol--admin    { background: rgba(var(--lc-accent-rgb),0.15); color: var(--ic-primary); border: 1px solid rgba(var(--lc-accent-rgb),0.25); }
    .emp-rol--empleado { background: rgba(var(--lc-neutral-rgb), 0.12); color: var(--lc-neutral); border: 1px solid rgba(var(--lc-neutral-rgb), 0.2); }
    .emp-rol--cliente  { background: rgba(var(--lc-teal-rgb), 0.12); color: var(--lc-teal); border: 1px solid rgba(var(--lc-teal-rgb), 0.22); }

    @@keyframes ic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }