/*
 * Selector de perfil de la sesión (prefijo .selp).
 *
 * Dos piezas, mismo lenguaje visual:
 *   - .selp-actual : el resumen que va dentro del menú "Bienvenido ...", en menu.php.
 *   - .selp        : el diálogo de elección que dibuja elegir_perfil_sistema()
 *                    (jquery/jquery.js) dentro de SweetAlert2.
 *
 * Se carga desde head.php en todas las pantallas, porque el diálogo se puede abrir desde
 * cualquiera. Los colores son los mismos del sistema de diseño .rcp (css/recepcion.css);
 * se repiten acá para no obligar a cargar esa hoja entera en todo el sistema.
 */

:root {
    --selp-ink: #14232b;
    --selp-ink-2: #4a5f6b;
    --selp-canvas: #eef2f5;
    --selp-surface: #ffffff;
    --selp-line: #d5dee5;
    --selp-accent: #0f6e7a;
    --selp-accent-soft: #e4f0f1;
    --selp-amber: #f2b134;
    --selp-danger: #b3261e;
}

/* ---------- Resumen dentro del menú del usuario ---------- */

/*
 * El contenedor lleva .dropdown-item para heredar el ancho y el padding del menú, pero no
 * es un ítem que se pueda elegir: se le quitan el hover y el nowrap de Bootstrap.
 */
.selp-actual {
    display: block;
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 10px;
    cursor: default;
    background: var(--selp-canvas);
}

.selp-actual:hover,
.selp-actual:focus {
    background: var(--selp-canvas);
    color: inherit;
}

.selp-actual__rot {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--selp-ink-2);
    margin-bottom: 5px;
}

.selp-actual__lugar {
    display: block;
    font-size: 12px;
    color: var(--selp-ink-2);
    margin-top: 5px;
}

.selp-actual__btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-top: 9px;
    padding: 6px 10px;
    border: 1px solid var(--selp-accent);
    border-radius: 4px;
    background: var(--selp-surface);
    color: var(--selp-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.selp-actual__btn:hover {
    background: var(--selp-accent);
    color: #fff;
}

/*
 * Recargar el perfil actual: la acción secundaria del bloque.
 *
 * Va en gris y no en el color de acento porque no cambia nada de lo que la persona ve; solo
 * vuelve a leer sus permisos. El botón principal sigue siendo cambiar de perfil.
 */
.selp-actual__btn--suave {
    margin-top: 6px;
    border-color: var(--selp-line);
    color: var(--selp-ink-2);
    font-weight: 500;
}

.selp-actual__btn--suave:hover {
    background: var(--selp-line);
    color: var(--selp-ink);
}

/* Cuántas pertenencias hay para elegir: el número es la razón para abrir el diálogo. */
.selp-actual__cuenta {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--selp-accent-soft);
    color: var(--selp-accent);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.selp-actual__btn:hover .selp-actual__cuenta {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.selp-actual__unico {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    color: var(--selp-ink-2);
}

/* ---------- Diálogo de elección ---------- */

.selp {
    text-align: left;
    color: var(--selp-ink);
    font-size: 13px;
    line-height: 1.45;
}

.selp-intro {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--selp-ink-2);
}

.selp-buscador {
    width: 100%;
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid var(--selp-line);
    border-radius: 4px;
    font-size: 13px;
    color: var(--selp-ink);
}

.selp-buscador:focus {
    outline: 2px solid var(--selp-accent);
    outline-offset: 1px;
}

.selp-lista {
    display: grid;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

/*
 * Cada ficha se lee de arriba abajo en el orden en que importa: qué perfil es, para qué
 * sirve, qué módulos abre y, al final, en qué lugar. El lugar va último a propósito: es
 * lo único que el selector anterior mostraba, y era lo que menos ayudaba a decidir.
 */
.selp-ficha {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--selp-line);
    border-left: 3px solid var(--selp-line);
    border-radius: 4px;
    background: var(--selp-surface);
    text-align: left;
    cursor: pointer;
}

.selp-ficha:hover {
    border-color: var(--selp-accent);
    background: var(--selp-accent-soft);
}

.selp-ficha:focus-visible {
    outline: 2px solid var(--selp-accent);
    outline-offset: 1px;
}

.selp-ficha--actual {
    border-left-color: var(--selp-accent);
    background: var(--selp-accent-soft);
    cursor: default;
}

.selp-ficha--inactivo {
    border-left-color: var(--selp-amber);
}

.selp-ficha__cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.selp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--selp-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.selp-chip--actual {
    background: var(--selp-accent);
}

.selp-marca {
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--selp-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.selp-marca--alerta {
    background: var(--selp-amber);
    color: var(--selp-ink);
}

.selp-ficha__descripcion {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--selp-ink-2);
}

/* Los módulos del menú que abre el perfil: es la respuesta corta a "¿qué voy a poder ver?" */
.selp-modulos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.selp-modulo {
    padding: 1px 7px;
    border: 1px solid var(--selp-line);
    border-radius: 3px;
    background: var(--selp-canvas);
    font-size: 11px;
    color: var(--selp-ink-2);
}

.selp-modulo--vacio {
    border-style: dashed;
    font-style: italic;
}

.selp-ficha__lugar {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--selp-line);
    font-size: 12px;
    color: var(--selp-ink);
}

.selp-pie {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--selp-ink-2);
}

/* La confirmación reusa las mismas piezas, apiladas y centradas. */
.selp-confirma {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selp-confirma .selp-ficha__lugar {
    border-top: 0;
    padding-top: 0;
    margin-top: 6px;
}

.selp-confirma .selp-pie {
    text-align: center;
}