/* ══════════════════════════════════════════════════════════════════════════
   Personas — usuarios, canales que alcanzan y responsabilidades que ejercen.

   Misma gramática que sst.css: una banda de color a la izquierda que codifica
   estado, contadores que filtran en vez de solo informar, y tipografía tabular
   en todo lo que sean cifras.

   El color aquí no es decoración: verde es vigente, ámbar caduca o es suplente,
   rojo es vacante o cuenta desactivada. Se lee antes que el texto.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --pe-tinta: #0f172a;
    --pe-suave: #64748b;
    --pe-tenue: #94a3b8;
    --pe-linea: #e2e8f0;
    --pe-acento: #6d28d9;
    --pe-acento-tenue: #f5f3ff;
    --pe-ok: #047857;
    --pe-aviso: #b45309;
    --pe-mal: #b91c1c;
}

/* ── Cabecera de pantalla ──────────────────────────────────────────────── */
.pe-head { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pe-head h1 { font-size: 1.5rem; font-weight: 700; color: var(--pe-tinta);
              margin: 0; letter-spacing: -.02em; }
.pe-head p { font-size: .84rem; color: var(--pe-suave); margin: .35rem 0 0;
             max-width: 62ch; line-height: 1.55; }
.pe-head__acc { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Indicadores: cada uno filtra ─────────────────────────────────────── */
.pe-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
           gap: .6rem; margin-bottom: .9rem; }
.pe-kpi { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem;
          border: 1px solid var(--pe-linea); border-left: 4px solid var(--c, var(--pe-acento));
          border-radius: 10px; background: #fff; cursor: pointer; text-align: left;
          width: 100%; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.pe-kpi:hover { box-shadow: 0 3px 14px rgba(15,23,42,.10); }
.pe-kpi.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--pe-acento)) 30%, transparent); }
.pe-kpi__v { font-size: 1.45rem; font-weight: 750; line-height: 1;
             color: var(--c, var(--pe-tinta)); font-variant-numeric: tabular-nums; }
.pe-kpi__l { font-size: .72rem; color: var(--pe-suave); line-height: 1.25; }

/* ── Barra de filtros ─────────────────────────────────────────────────── */
.pe-filtros { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
              margin-bottom: .9rem; }
.pe-filtros .rz-textbox, .pe-filtros .rz-dropdown { min-width: 12rem; }
.pe-lente { display: inline-flex; border: 1px solid var(--pe-linea); border-radius: 9px;
            overflow: hidden; background: #fff; }
.pe-lente button { border: 0; background: transparent; padding: .38rem .7rem;
                   font-size: .78rem; font-weight: 600; color: var(--pe-suave);
                   cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.pe-lente button + button { border-left: 1px solid var(--pe-linea); }
.pe-lente button.on { background: var(--pe-acento-tenue); color: var(--pe-acento); }
.pe-lente .rzi { font-size: 1rem; }

/* ── Rejilla de fichas ────────────────────────────────────────────────── */
.pe-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
              gap: .75rem; }

.pe-ficha { display: grid; grid-template-rows: 4px 1fr; border: 1px solid var(--pe-linea);
            border-radius: 12px; background: #fff; overflow: hidden;
            transition: box-shadow .15s, transform .15s; }
.pe-ficha:hover { box-shadow: 0 6px 20px rgba(15,23,42,.09); }
.pe-ficha__banda { background: var(--c, var(--pe-acento)); }
.pe-ficha__cu { padding: .8rem .9rem .7rem; display: flex; flex-direction: column; gap: .55rem;
                height: 100%; min-width: 0; }

.pe-ficha__id { display: flex; gap: .65rem; align-items: center; min-width: 0; }
.pe-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
             object-fit: cover; background: var(--pe-acento-tenue); color: var(--pe-acento);
             display: inline-flex; align-items: center; justify-content: center;
             font-weight: 700; font-size: .86rem; letter-spacing: .02em; }
.pe-avatar--sm { width: 1.9rem; height: 1.9rem; font-size: .7rem; }
.pe-ficha__n { min-width: 0; flex: 1; }
.pe-ficha__nom { font-weight: 650; font-size: .92rem; color: var(--pe-tinta);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ficha__mail { font-size: .76rem; color: var(--pe-suave);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pe-ficha__meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .75rem;
                  color: var(--pe-suave); }
.pe-ficha__meta span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-ficha__meta .rzi { font-size: .95rem; color: var(--pe-tenue); }

/* Al fondo de la ficha: en una rejilla las tarjetas se estiran a la mas alta, y con los botones
   pegados al contenido cada una los ponia a una altura distinta. */
.pe-ficha__acc { display: flex; gap: .25rem; justify-content: flex-end;
                 border-top: 1px dashed var(--pe-linea); padding-top: .5rem; margin-top: auto; }

/* ── Pastillas ────────────────────────────────────────────────────────── */
/* Los nombres de las figuras son largos de verdad —«Responsable del Sistema Interno de
   Informacion»— y sin recorte se salian de la ficha. El titulo completo queda en el `title`. */
.pe-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem;
           font-weight: 600; padding: .12rem .45rem; border-radius: 999px;
           border: 1px solid var(--pe-linea); color: var(--pe-suave); background: #fff;
           white-space: nowrap; max-width: 100%; min-width: 0; flex: 0 1 auto;
           overflow: hidden; text-overflow: ellipsis; }
.pe-chip > .rzi { flex: none; }
.pe-chip .rzi { font-size: .85rem; }
.pe-chip--rol { background: var(--pe-acento-tenue); border-color: #ddd6fe; color: #5b21b6; }
.pe-chip--ok { background: #ecfdf5; border-color: #a7f3d0; color: var(--pe-ok); }
.pe-chip--aviso { background: #fffbeb; border-color: #fde68a; color: var(--pe-aviso); }
.pe-chip--mal { background: #fef2f2; border-color: #fecaca; color: var(--pe-mal); }
.pe-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; min-width: 0; }

/* La pastilla de estado no se encoge: recortada a «en lín» no dice nada. */
.pe-ficha__id > .pe-chip { flex: none; }

/* ── Vacío ────────────────────────────────────────────────────────────── */
.pe-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: .5rem; padding: 3rem 1rem; color: var(--pe-tenue); text-align: center; }
.pe-vacio__t { font-size: .95rem; font-weight: 600; color: var(--pe-suave); }

/* ══ Panel de canales ═══════════════════════════════════════════════════ */
.pe-can { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: .7rem; }
.pe-can__top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pe-can__top .rz-textbox { flex: 1; min-width: 11rem; }

.pe-can__aviso { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .75rem;
                 border-radius: 10px; font-size: .8rem; line-height: 1.5;
                 background: var(--pe-acento-tenue); border: 1px solid #ddd6fe; color: #5b21b6; }
.pe-can__aviso .rzi { font-size: 1.1rem; flex: none; }

/* La lista scrollea sola. Antes crecía el diálogo entero y el botón de guardar
   quedaba fuera de pantalla justo cuando había muchos canales, que es cuando
   más falta hace. */
.pe-can__lista { flex: 1; min-height: 0; overflow-y: auto; padding-right: .2rem;
                 border: 1px solid var(--pe-linea); border-radius: 10px; }

.pe-can__grupo { position: sticky; top: 0; z-index: 1; background: #f8fafc;
                 border-bottom: 1px solid var(--pe-linea); padding: .35rem .7rem;
                 font-size: .7rem; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; color: var(--pe-suave);
                 display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pe-can__grupo button { border: 0; background: transparent; color: var(--pe-acento);
                        font-size: .68rem; font-weight: 700; cursor: pointer;
                        text-transform: none; letter-spacing: 0; }

.pe-can__f { display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem;
             border: 0; border-bottom: 1px solid #f1f5f9; cursor: pointer;
             width: 100%; text-align: left; background: transparent; font: inherit; }
.pe-can__f:disabled { cursor: default; }
.pe-can__f:focus-visible { outline: 2px solid var(--pe-acento); outline-offset: -2px; }
.pe-can__f:last-child { border-bottom: 0; }
.pe-can__f:hover { background: #fafafb; }
.pe-can__f.heredado { cursor: default; }
.pe-can__f > .rzi { color: var(--pe-tenue); font-size: 1.15rem; flex: none; }
.pe-can__t { flex: 1; min-width: 0; }
.pe-can__nom { font-size: .85rem; font-weight: 600; color: var(--pe-tinta); }
.pe-can__sub { font-size: .72rem; color: var(--pe-suave); display: flex; gap: .4rem;
               align-items: center; flex-wrap: wrap; margin-top: .1rem; }

.pe-can__pie { display: flex; justify-content: space-between; align-items: center;
               gap: .6rem; flex-wrap: wrap; }
.pe-can__cnt { font-size: .78rem; color: var(--pe-suave); font-variant-numeric: tabular-nums; }

/* ══ Responsabilidades ══════════════════════════════════════════════════ */
.pe-resp { display: flex; flex-direction: column; gap: .55rem; }
.pe-resp__f { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem;
              align-items: center; padding: .6rem .75rem; background: #fff;
              border: 1px solid var(--pe-linea); border-left: 3px solid var(--c, var(--pe-tenue));
              border-radius: 10px; }
.pe-resp__ic { width: 2rem; height: 2rem; border-radius: 8px; display: inline-flex;
               align-items: center; justify-content: center;
               background: color-mix(in srgb, var(--c, var(--pe-acento)) 10%, #fff);
               color: var(--c, var(--pe-acento)); }
.pe-resp__n { font-size: .88rem; font-weight: 650; color: var(--pe-tinta); }
.pe-resp__norma { font-size: .72rem; color: var(--pe-suave); font-style: italic; }
.pe-resp__q { font-size: .8rem; color: var(--pe-tinta); }
.pe-resp__q em { font-style: normal; color: var(--pe-tenue); }

/* Cuadro de cobertura: la vacante tiene que verse antes que lo cubierto. */
.pe-cuadro { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.pe-cuadro th { text-align: left; font-size: .7rem; text-transform: uppercase;
                letter-spacing: .05em; color: var(--pe-suave); font-weight: 700;
                padding: .45rem .6rem; border-bottom: 1px solid var(--pe-linea);
                position: sticky; top: 0; background: #fff; z-index: 1; }
.pe-cuadro td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #f1f5f9;
                vertical-align: middle; }
.pe-cuadro tr:hover td { background: #fafafb; }
.pe-cuadro__soc { font-weight: 650; color: var(--pe-tinta); }
.pe-cuadro__vac { color: var(--pe-mal); font-weight: 650; }
.pe-cuadro__wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--pe-linea);
                   border-radius: 12px; background: #fff; }

@media (max-width: 900px) {
    .pe-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Ficha de la persona (alta y edicion) ═══════════════════════════════ */
.pe-form { padding: .2rem .1rem; }
.pe-form__cab { display: flex; gap: 1rem; align-items: flex-start; }
.pe-form__cab-n { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
                  min-width: 0; }

/* Interruptor y acciones que no son un campo de texto: etiqueta a la izquierda con su
   explicacion, control a la derecha. Metidos en la rejilla de campos parecian campos y se
   pulsaban por error. */
.pe-form__linea { display: flex; align-items: center; justify-content: space-between;
                  gap: 1rem; padding: .6rem .75rem; margin-top: .6rem;
                  border: 1px solid var(--pe-linea); border-radius: 10px; background: #fff; }
.pe-form__linea-t { font-size: .84rem; font-weight: 650; color: var(--pe-tinta); }
.pe-form__linea-s { font-size: .74rem; color: var(--pe-suave); max-width: 52ch; line-height: 1.45; }

@media (max-width: 640px) {
    .pe-form__cab-n { grid-template-columns: 1fr; }
}