/* =====================================================================
   Identidad visual PROSEPAGO para el panel de clientes.
   Tokens y reglas: skill prosepago-brand (referencia: PEjecutivos).
   En las páginas con la plantilla se carga DESPUÉS de sus hojas para
   ganar con la misma especificidad; el login la usa sola.
   ===================================================================== */

:root {
    --pp-blue: #1d8fff;
    --pp-blue-600: #0f79ef;
    --pp-blue-700: #0a63d6;
    --pp-navy: #0a1e38;
    --pp-navy-2: #0c2a52;
    --pp-ink: #15263d;
    --pp-slate: #5d6f86;
    --pp-gold: #e2bd5c;
    --pp-gold-700: #b8955a;
    --pp-sky: #eef6ff;
    --pp-sky-2: #f6faff;
    --pp-line: #d8e8fb;
    --pp-card-edge: #e4eefb;
    --pp-page: #e9f1fb;
    --pp-alert: #d6455e;
    --pp-shadow: 0 10px 30px rgba(13, 60, 120, .10);
    --pp-gradient: linear-gradient(135deg, var(--pp-blue) 0%, var(--pp-blue-600) 55%, var(--pp-blue-700) 100%);
    --pp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pp-display: "Sora", "Inter", system-ui, sans-serif;
    --pp-mono: Consolas, "SFMono-Regular", ui-monospace, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--pp-sans);
    color: var(--pp-ink);
    line-height: 1.6;
    background: var(--pp-page) radial-gradient(1200px 600px at 80% -10%, #dcebfe 0%, var(--pp-page) 55%) no-repeat fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--pp-blue-600); }
a:hover { color: var(--pp-blue-700); }
a:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--pp-blue); color: #fff; }

/* ---------- Botones ---------- */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font: 600 15px/1.2 var(--pp-sans);
    color: #fff;
    background: var(--pp-gradient);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 121, 239, .28);
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, opacity .15s;
}

.pp-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 121, 239, .34); }
.pp-btn:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; }
.pp-btn[disabled] { opacity: .7; cursor: progress; transform: none; }

.pp-btn-sec {
    color: var(--pp-blue-700);
    background: #fff;
    border: 1px solid var(--pp-line);
    box-shadow: none;
}

.pp-btn-sec:hover { color: var(--pp-blue-700); background: var(--pp-sky-2); box-shadow: none; }

.pp-btn-block { width: 100%; }

.pp-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pp-actions > .pp-btn { flex: 1 1 0; }

/* ---------- Formularios ---------- */
.pp-campo { margin-bottom: 16px; }

.pp-campo label,
.pp-etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-slate);
}

.pp-input,
.pp-campo input {
    width: 100%;
    padding: 12px 14px;
    font: 400 15px/1.4 var(--pp-sans);
    color: var(--pp-ink);
    background: var(--pp-sky-2);
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.pp-input:focus,
.pp-campo input:focus {
    outline: none;
    background: #fff;
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 4px rgba(29, 143, 255, .15);
}

.pp-campo .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--pp-alert);
}

.pp-ayuda { margin-top: 6px; font-size: 13px; color: var(--pp-slate); }

/* contraseña con botón de ver/ocultar */
.pp-clave { position: relative; }
.pp-clave input { padding-right: 52px; }

.pp-btn-icono {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    color: var(--pp-slate);
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pp-btn-icono:hover { color: var(--pp-blue-700); background: var(--pp-sky); }
.pp-btn-icono:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 1px; }

.pp-clave .pp-btn-icono { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }

/* código de 6 dígitos */
.pp-campo input.pp-pin {
    text-align: center;
    font: 600 24px/1.2 var(--pp-mono);
    letter-spacing: .5em;
    padding-left: calc(14px + .5em);
    font-variant-numeric: tabular-nums;
}

.pp-campo input.pp-pin::placeholder { color: #b5c6db; }

/* ---------- Avisos ---------- */
.pp-error {
    margin: 0 0 18px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-alert);
    background: #fdecef;
    border: 1px solid rgba(214, 69, 94, .3);
    border-radius: 12px;
}

.pp-error ul { margin: 0; padding-left: 18px; }
.pp-error.validation-summary-valid { display: none; }

.pp-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pp-blue-700);
    background: var(--pp-sky);
    border: 1px solid var(--pp-line);
    border-radius: 12px;
}

.pp-info img { width: 40px; height: 40px; flex: none; }

/* ícono oficial de Google Authenticator sobre cuadro blanco, como el de la app */
.pp-info img.pp-app-icono {
    width: 44px;
    height: 44px;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(13, 60, 120, .08);
}
.pp-info strong { color: var(--pp-ink); }

.pp-exito {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 22px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #17803d;
    background: #e3f7ec;
    border: 1px solid rgba(23, 128, 61, .22);
    border-radius: 12px;
}

.pp-exito > i { font-size: 22px; line-height: 1; margin-top: 1px; }
.pp-exito strong { display: block; font-weight: 600; }
.pp-exito span { color: var(--pp-ink); }

/* requisitos de contraseña que se palomean al escribir */
.pp-reglas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--pp-slate);
}

.pp-reglas li { display: flex; align-items: center; gap: 6px; transition: color .15s; }
.pp-reglas i { font-size: 15px; }
.pp-reglas li.cumple { color: #17803d; }
.pp-reglas li.falta { color: var(--pp-alert); }

/* =====================================================================
   Login: formulario (40%) + panel promocional (60%)
   ===================================================================== */
.pp-login {
    display: grid;
    grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr);
    min-height: 100vh;
}

/* ---------- Lado del formulario ---------- */
.pp-login-form {
    display: flex;
    flex-direction: column;
    padding: 40px 48px 28px;
    background: #fff;
    border-right: 1px solid var(--pp-card-edge);
}

.pp-login-caja {
    width: 100%;
    max-width: 380px;
    margin: auto;
    padding-block: 24px;
}

.pp-login-marca img {
    display: block;
    height: 52px;
    width: auto;
    max-width: 100%;
}

.pp-modulo {
    display: block;
    margin-top: 12px;
    font: 600 13px/1.3 var(--pp-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-slate);
}

.pp-login h1 {
    margin: 36px 0 4px;
    font: 700 26px/1.25 var(--pp-display);
    color: var(--pp-ink);
}

.pp-lead { margin: 0 0 24px; color: var(--pp-slate); }
.pp-lead strong { color: var(--pp-ink); }

.pp-regresar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.pp-regresar:hover { text-decoration: underline; }
.pp-login .pp-regresar + h1 { margin-top: 12px; }

.pp-login-olvido { display: flex; justify-content: flex-end; margin: -4px 0 20px; font-size: 14px; font-weight: 500; }

.pp-pasos { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: paso; }

.pp-pasos li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 36px;
    color: var(--pp-slate);
    line-height: 1.5;
}

.pp-pasos li::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font: 700 12px/1 var(--pp-display);
    color: var(--pp-navy);
    background: var(--pp-gold);
    border-radius: 50%;
}

.pp-pasos strong { color: var(--pp-ink); }

.pp-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 22px;
    padding: 16px;
    background: var(--pp-sky-2);
    border: 1px solid var(--pp-line);
    border-radius: 16px;
}

.pp-qr img { display: block; width: 184px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; }

.pp-login-pie {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--pp-slate);
}

/* ---------- Panel promocional ---------- */
.pp-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px clamp(40px, 6vw, 96px);
    color: #fff;
    background: var(--pp-gradient);
    overflow: hidden;
}

.pp-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 360px at 100% 0%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(480px 320px at 0% 100%, rgba(10, 30, 56, .22) 0%, rgba(10, 30, 56, 0) 70%);
    pointer-events: none;
}

.pp-promo > * { position: relative; }

.pp-promo-contenido { width: 100%; max-width: 620px; margin: 0 auto; }

.pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
}

.pp-blip { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }

/* imágenes (wwwroot/images/login/promo) */
.pp-carrusel { margin: 28px 0 0; }

.pp-diapositivas {
    position: relative;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .10);
    box-shadow: 0 24px 48px rgba(6, 34, 80, .28);
}

.pp-diapositivas img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}

.pp-diapositivas img.activa { opacity: 1; }

.pp-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.pp-puntos button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: width .15s, background .15s;
}

.pp-puntos button[aria-current="true"] { width: 26px; background: #fff; }
.pp-puntos button:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; }

.pp-promo h2 {
    margin: 32px 0 10px;
    font: 700 clamp(28px, 2.6vw, 38px)/1.2 var(--pp-display);
    color: #fff;
}

.pp-promo-lead { margin: 0 0 28px; max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, .88); }

.pp-beneficios { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.pp-beneficios li { display: flex; align-items: flex-start; gap: 14px; }

.pp-beneficios i {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
}

.pp-beneficios strong { display: block; font-weight: 600; }
.pp-beneficios span { font-size: 14px; color: rgba(255, 255, 255, .82); }

/* con imágenes el texto se compacta para que quepa todo */
.pp-promo.con-imagenes h2 { margin-top: 24px; font-size: clamp(24px, 2.2vw, 32px); }
.pp-promo.con-imagenes .pp-promo-lead { margin-bottom: 0; }
.pp-promo.con-imagenes .pp-beneficios { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1299px) {
    .pp-login-form { padding: 32px 36px 24px; }
}

@media (max-width: 767px) {
    .pp-login { display: block; }
    .pp-promo { display: none; }

    .pp-login-form {
        min-height: 100vh;
        padding: 24px 16px;
        background: transparent;
        border: 0;
    }

    .pp-login-caja {
        max-width: 440px;
        padding: 28px 24px;
        background: #fff;
        border: 1px solid var(--pp-card-edge);
        border-radius: 22px;
        box-shadow: var(--pp-shadow);
    }

    .pp-login h1 { margin-top: 28px; }
    .pp-login-pie { margin-top: 20px; }
}

@media (max-width: 479px) {
    .pp-login-caja { padding: 24px 20px; }
    .pp-login-marca img { height: 44px; }
    .pp-login h1 { font-size: 22px; }
}

/* =====================================================================
   Panel (Views/Shared/_Layout.cshtml) sobre la plantilla Bootstrap 4 / iq-.
   Adaptado de PEjecutivos (prosepago-brand.css): mismas reglas para la plantilla.
   ===================================================================== */
/* site-examples.css (estilos de ejemplo de DataTables) le pone Helvetica al body con !important */
body.pp-panel { font-family: var(--pp-sans) !important; color: var(--pp-ink); }

.pp-panel h1, .pp-panel h2, .pp-panel h3, .pp-panel h4, .pp-panel h5, .pp-panel h6 {
    font-family: var(--pp-display);
    color: var(--pp-ink);
}

.text-primary { color: var(--pp-blue-600) !important; }
.bg-primary { background: var(--pp-gradient) !important; }
.badge-primary { background: var(--pp-blue-600); }

/* ---------- Menú lateral ---------- */
.iq-sidebar,
.iq-sidebar .iq-sidebar-logo {
    background: linear-gradient(180deg, var(--pp-navy) 0%, var(--pp-navy-2) 100%);
    color: #cfe0f7;
}

.iq-sidebar { box-shadow: none; display: flex; flex-direction: column; }

/* Scroll nativo del menú (antes smooth-scrollbar): ocupa lo que queda debajo del logo */
.iq-sidebar #sidebar-scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.iq-sidebar #sidebar-scrollbar::-webkit-scrollbar { width: 6px; }
.iq-sidebar #sidebar-scrollbar::-webkit-scrollbar-track { background: transparent; }
.iq-sidebar #sidebar-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 6px; }

.iq-sidebar .iq-sidebar-logo { padding: 22px 12px 14px 24px; }
.iq-sidebar-logo a { align-items: center; text-decoration: none; }

.pp-sidebar-brand { display: flex; flex-direction: column; gap: 8px; }
.pp-sidebar-brand img { height: auto; width: 170px; max-width: 100%; }
.pp-sidebar-brand .pp-module {
    font: 600 10.5px/1.3 var(--pp-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(207, 224, 247, .65);
}
.iq-sidebar-logo img.pp-sidebar-icon { display: none; height: 38px; width: 38px; }

/* Menú colapsado (80px): solo el candado */
body.sidebar-main .iq-sidebar:not(:hover) .pp-sidebar-brand { display: none; }
body.sidebar-main .iq-sidebar:not(:hover) img.pp-sidebar-icon { display: block; }
body.sidebar-main .iq-sidebar:not(:hover) .iq-sidebar-logo { padding-left: 21px; }

.iq-menu-bt { background: rgba(255, 255, 255, .08); border-radius: 10px; }
.iq-sidebar .line-menu { background: #fff; }
.wrapper-menu { color: #fff; }
.wrapper-menu:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 3px; border-radius: 6px; }

.iq-sidebar-menu .iq-menu li { padding: 0 12px; }
.iq-sidebar-menu .iq-menu li a {
    color: #cfe0f7;
    border-radius: 12px;
    padding: 11px 16px;
    margin: 2px 0;
    font-weight: 500;
}
.iq-sidebar-menu .iq-menu li a i:not(.iq-arrow-right) { font-size: 19px; }
.iq-sidebar-menu .iq-menu li > a::before { display: none; }
.iq-sidebar-menu .iq-menu li a:hover,
.iq-sidebar-menu .iq-menu li.pp-abierto > a {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}
.iq-sidebar-menu .iq-menu li a:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: -3px; }
.iq-sidebar-menu .iq-menu > li.active > a {
    color: #fff;
    background: var(--pp-gradient);
    box-shadow: 0 8px 18px rgba(15, 121, 239, .35);
}

/* Submenús: la opción actual en blanco con marca dorada (el grupo ya va resaltado) */
.iq-sidebar-menu .iq-menu li ul { padding-left: 32px; }
.iq-sidebar-menu .iq-menu li ul ul { padding-left: 14px; }
.iq-sidebar-menu .iq-menu li ul li { padding: 0; }
.iq-sidebar-menu .iq-menu li ul li a { background: transparent; color: #b9cde8; padding: 9px 14px; font-size: 14px; }
.iq-sidebar-menu .iq-menu li ul li a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.iq-sidebar-menu .iq-menu li ul li.active > a {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 3px 0 0 var(--pp-gold);
}
.iq-sidebar-menu .iq-menu .iq-menu-title { color: rgba(207, 224, 247, .5); }
.iq-sidebar-menu .iq-menu li a .badge {
    background: var(--pp-gold);
    color: var(--pp-navy);
    border-radius: 999px;
    font-weight: 700;
}
body.sidebar-main .iq-sidebar:not(:hover) .iq-sidebar-menu .iq-menu li { padding: 0 10px; }

/* La plantilla le da 280px al menú, pero en <1300px lo esconde con left:-260px:
   quedaban 20px del menú encima del contenido. Mismo ancho que usa al abrirlo. */
@media (max-width: 1299px) {
    .iq-sidebar { width: 260px; }
    /* Botón del menú y título justo después del logo (el logo mide 229px con su margen) */
    .iq-top-navbar .iq-navbar-custom { position: relative; }
    .iq-top-navbar .iq-navbar-custom nav.navbar { position: static; }
    .iq-top-navbar .iq-navbar-custom .iq-menu-bt { left: 241px; right: auto; top: 18px; margin: 0; }
    body.pp-panel .iq-top-navbar .iq-navbar-custom .navbar-breadcrumb.pp-titulo { display: block; margin-left: 76px; }
}

/* ---------- Barra superior ---------- */
.iq-top-navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(8px);
    box-shadow: 0 1px 0 var(--pp-line), 0 6px 20px rgba(13, 60, 120, .06);
}
.iq-top-navbar .iq-sidebar-logo { background: transparent; }
.iq-top-navbar .top-logo img { height: 40px; width: auto; }
.iq-top-navbar .iq-navbar-custom .iq-menu-bt { background: var(--pp-sky); }
.iq-top-navbar .iq-navbar-custom .iq-menu-bt .line-menu { background: var(--pp-blue-600); }

/* Saludo + nombre de la página (antes breadcrumb) */
/* alineado con el texto de las tarjetas (tarjeta + 24px de relleno), no pegado al menú */
.iq-top-navbar .iq-navbar-custom .navbar-breadcrumb.pp-titulo { margin: 14px 0 0 54px; line-height: 1.25; }
.pp-titulo .pp-saludo { display: block; font-size: 12.5px; color: var(--pp-slate); }
.pp-titulo .pp-saludo b { color: var(--pp-ink); font-weight: 600; }
.pp-titulo .pp-pagina { margin: 2px 0 0; font: 700 19px/1.25 var(--pp-display); color: var(--pp-ink); }

.navbar-list li.iq-full-screen > a { color: var(--pp-slate); font-size: 19px; }
.navbar-list li.iq-full-screen > a:hover { color: var(--pp-blue-700); }

/* Usuario: logo del cliente o iniciales + menú */
.navbar-list li.pp-usuario > a.pp-usuario-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    line-height: 73px;
    color: var(--pp-slate);
    background: transparent !important;
}
.navbar-list li.pp-usuario > a.pp-usuario-toggle:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: -8px; border-radius: 14px; }
.pp-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--pp-line);
}
.pp-avatar.pp-iniciales {
    display: grid;
    place-items: center;
    font: 700 14px/1 var(--pp-display);
    color: #fff;
    background: var(--pp-gradient);
    border: 0;
}
.iq-user-dropdown { width: 280px; }
.iq-user-dropdown .iq-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--pp-card-edge); box-shadow: var(--pp-shadow) !important; }
.pp-usuario-cabecera { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--pp-sky-2); border-bottom: 1px solid var(--pp-line); line-height: 1.35; }
.pp-usuario-cabecera .pp-etiqueta { margin: 0; font-size: 10.5px; }
.pp-usuario-cabecera b { color: var(--pp-ink); font-weight: 600; overflow-wrap: anywhere; }
.pp-usuario-opciones { display: flex; flex-direction: column; padding: 8px; }
.pp-usuario-opciones a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--pp-ink);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}
.pp-usuario-opciones a i { font-size: 18px; color: var(--pp-slate); }
.pp-usuario-opciones a:hover { background: var(--pp-sky); color: var(--pp-ink); text-decoration: none; }
.pp-usuario-opciones a.pp-salir,
.pp-usuario-opciones a.pp-salir i { color: var(--pp-alert); }
.pp-usuario-opciones a.pp-salir:hover { background: #fdecef; color: var(--pp-alert); }

@media (max-width: 767px) {
    body.pp-panel .iq-top-navbar .iq-navbar-custom .navbar-breadcrumb.pp-titulo { display: none; }
}
/* Celular: logo más chico y el botón del menú enseguida */
@media (max-width: 479px) {
    .iq-top-navbar .iq-sidebar-logo img { max-width: 150px; height: auto; }
    .iq-top-navbar .iq-navbar-custom .iq-menu-bt { left: 182px; }
}

/* ---------- Tarjetas ---------- */
.iq-card {
    background: #fff;
    border: 1px solid var(--pp-card-edge);
    border-radius: 22px;
    box-shadow: var(--pp-shadow);
}
.iq-card .iq-card-header {
    border-bottom: 1px solid var(--pp-line);
    padding: 0 24px;
    border-radius: 22px 22px 0 0;
}
.iq-card .iq-card-body { padding: 20px 24px; }
.iq-card .card-title,
.iq-card .iq-card-header h4 {
    font-family: var(--pp-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--pp-ink);
    margin-bottom: 0;
}
.iq-card .iq-card-body h4 {
    font-family: var(--pp-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pp-ink);
}
.iq-card .iq-card-body h5 { font-family: var(--pp-sans); font-size: 13px; font-weight: 600; color: var(--pp-slate); }
.iq-bg-primary { background: var(--pp-sky) !important; color: var(--pp-blue-600) !important; }
.iq-card-icon { border: 1px solid var(--pp-line); }

/* ---------- Botones de la plantilla ---------- */
.btn {
    border-radius: 12px;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s, background-color .15s;
}
.btn:focus-visible { outline: 3px solid var(--pp-gold); outline-offset: 2px; }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background: linear-gradient(135deg, var(--pp-blue) 0%, var(--pp-blue-700) 100%);
    border: 0;
    box-shadow: 0 8px 18px rgba(15, 121, 239, .28);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--pp-blue-600) 0%, var(--pp-blue-700) 100%);
    box-shadow: 0 10px 22px rgba(15, 121, 239, .34);
    transform: translateY(-1px);
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--pp-blue-700);
    background: #fff;
    border: 1px solid var(--pp-line);
    box-shadow: none;
}
.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--pp-blue-700);
    background: var(--pp-sky-2);
    border-color: var(--pp-line);
    box-shadow: none;
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active { background: var(--pp-alert); border-color: var(--pp-alert); }
.btn-danger:hover,
.btn-danger:focus { background: #bf3a51; border-color: #bf3a51; }

/* ---------- Formularios de la plantilla ---------- */
.form-control {
    background-color: var(--pp-sky-2);
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    color: var(--pp-ink);
}
.form-control:focus {
    background-color: #fff;
    border-color: var(--pp-blue);
    box-shadow: 0 0 0 4px rgba(29, 143, 255, .15);
    color: var(--pp-ink);
}
.form-control:disabled,
.form-control[readonly] { background-color: var(--pp-sky); }
.pp-panel label { font-weight: 600; color: var(--pp-ink); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pp-blue-600);
    border-color: var(--pp-blue-600);
}

/* ---------- Tablas y DataTables ---------- */
.table { color: var(--pp-ink); }
.table thead th {
    background: var(--pp-sky-2);
    color: var(--pp-slate);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--pp-line);
    vertical-align: middle;
}
.table td { vertical-align: middle; }
/* ---------- Gráficas y tablas (mismo esquema que el panel de ejecutivos) ---------- */
/* contenedor de alto fijo: Chart.js con maintainAspectRatio:false ocupa todo el alto */
.pp-chart { position: relative; height: 260px; }
.pp-chart canvas { max-width: 100%; }
/* sin registros (gráfica o tabla): dice qué no hay */
.pp-empty { margin: 0; padding: 24px; text-align: center; color: var(--pp-slate); }
.pp-card-note { font-size: 12.5px; color: var(--pp-slate); }
.pp-money { font-family: Consolas, "SFMono-Regular", ui-monospace, monospace; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-num { font-variant-numeric: tabular-nums; font-weight: 600; }
/* DataTables copia la clase de la columna al encabezado: el título no va en monoespaciada */
.table thead th.pp-money, .table thead th.pp-num { font-family: var(--pp-sans); font-weight: 700; }
.iq-card .table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Pantallas con resumen (Transacciones): mismo esquema que el panel de ejecutivos ---------- */
.pp-dash { display: flex; flex-direction: column; gap: 24px; padding-bottom: 12px; }
.pp-dash .iq-card, .pp-dash .pp-kpis { margin-bottom: 0; }
.pp-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pp-dash-head h2 { font-family: var(--pp-display); font-size: 26px; font-weight: 700; color: var(--pp-ink); margin: 0; }
.pp-dash-head p { margin: 4px 0 0; color: var(--pp-slate); }
.pp-dash-label { margin: 0 0 10px; font-family: var(--pp-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-slate); }
.pp-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pp-dash-grid > * { min-width: 0; }
.pp-span-2 { grid-column: 1 / -1; }
@media (max-width: 991px) { .pp-dash-grid { grid-template-columns: 1fr; } }

/* "comparado con" + ícono que explica las comparaciones (popover de Bootstrap) */
.pp-comparado { white-space: nowrap; }
.pp-info-btn {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pp-sky);
    color: var(--pp-blue-600);
    font-size: 15px;
    line-height: 1;
    vertical-align: -5px;
    cursor: help;
}
.pp-info-btn:hover, .pp-info-btn:focus { background: var(--pp-blue-600); color: #fff; outline: none; }
.popover { max-width: 340px; border: 1px solid var(--pp-line); border-radius: 14px; box-shadow: var(--pp-shadow); font-family: var(--pp-sans); }
.popover-header { background: var(--pp-sky-2); border-bottom: 1px solid var(--pp-line); border-radius: 14px 14px 0 0; font-size: 13px; font-weight: 700; color: var(--pp-ink); }
.popover-body { font-size: 13px; color: var(--pp-ink); }
.pp-info-lista { margin: 0 0 8px; padding-left: 18px; }
.pp-info-lista li { margin-bottom: 4px; color: var(--pp-slate); }
.pp-info-lista li b { color: var(--pp-ink); }
.pp-info-lista li.pp-info-actual { color: var(--pp-blue-700); }
.pp-info-lista li.pp-info-actual b { color: var(--pp-blue-700); }
.pp-info-nota { margin: 0; font-size: 12px; color: var(--pp-slate); }

/* Filtros: botones de periodo y campos */
.pp-filtros { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.pp-periodos { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-periodo { margin: 0; cursor: pointer; }
.pp-periodo input { position: absolute; opacity: 0; pointer-events: none; }
.pp-periodo span {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--pp-line);
    background: var(--pp-sky-2);
    color: var(--pp-ink);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
.pp-periodo:hover span { border-color: var(--pp-blue); }
.pp-periodo input:checked + span { background: var(--pp-gradient); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(15, 121, 239, .25); }
.pp-periodo input:focus-visible + span { outline: 3px solid var(--pp-gold); outline-offset: 2px; }
.pp-filtros-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.pp-rango { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-rango[hidden] { display: none; }
.pp-rango label, .pp-filtro { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-slate); }
.pp-rango .pp-input { width: auto; padding: 8px 12px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.pp-filtro .bootstrap-select > .dropdown-toggle {
    height: 40px;
    background: var(--pp-sky-2);
    border: 1px solid var(--pp-line);
    border-radius: 12px;
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.pp-filtros-exportar { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pp-filtros-aviso { margin: 0; font-size: 12.5px; color: var(--pp-gold-700); }
.pp-filtros-aviso[hidden] { display: none; }

/* Buscar transacción: campo de texto amplio */
.pp-busqueda-texto { flex: 1 1 320px; }
.pp-busqueda-texto .pp-input { padding: 9px 14px; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pp-alerta-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fff4dc; border: 1px solid rgba(184, 149, 90, .35); color: #8a5a00; font-size: 13px; }

/* Desgloses con barra de porcentaje */
.pp-status-table td { vertical-align: middle; }
.pp-status-share { width: 38%; min-width: 150px; }
.pp-share { display: flex; align-items: center; gap: 10px; }
.pp-share-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--pp-sky); overflow: hidden; }
.pp-share-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pp-blue), var(--pp-blue-700)); }
.pp-share span { min-width: 44px; text-align: right; font-size: 12.5px; color: var(--pp-slate); font-variant-numeric: tabular-nums; }

/* Tabla de transacciones: compacta para que quepan las columnas; el folio abre el detalle */
.pp-tabla-transacciones { font-size: 13.5px; }
.pp-tabla-transacciones td, .pp-tabla-transacciones th { padding: 10px 8px; }
.pp-folio { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pp-blue-600); text-decoration: underline; text-decoration-color: rgba(15, 121, 239, .35); text-underline-offset: 3px; }
.pp-folio:hover, .pp-folio:focus { color: var(--pp-blue-700); text-decoration-color: currentColor; }

/* Liquidaciones: 4 indicadores en una fila, depósito en azul y detalle (modal) como en el panel de ejecutivos */
@media (min-width: 1200px) { .pp-kpis.pp-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-pago { color: var(--pp-blue-700); font-weight: 600; }
.pp-liq-ecuacion { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 16px 24px; background: var(--pp-sky-2); border-bottom: 1px solid var(--pp-line); }
.pp-liq-ecuacion > div:not(.pp-liq-op) { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--pp-card-edge); border-radius: 14px; }
.pp-liq-ecuacion > [hidden] { display: none !important; }
.pp-liq-ecuacion span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-slate); }
.pp-liq-ecuacion b { font-family: var(--pp-display); font-size: 20px; color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-liq-ecuacion small { font-size: 12px; color: var(--pp-slate); }
.pp-liq-op { align-self: center; font-family: var(--pp-display); font-size: 24px; font-weight: 700; color: var(--pp-slate); }
/* mismo peso que ".pp-liq-ecuacion > div:not(.pp-liq-op)" (fondo blanco) y declarada después, para que gane el azul */
.pp-liq-ecuacion > div.pp-liq-total { background: var(--pp-gradient); border-color: transparent; box-shadow: 0 8px 18px rgba(15, 121, 239, .25); }
.pp-liq-ecuacion > div.pp-liq-total span, .pp-liq-ecuacion > div.pp-liq-total b { color: #fff; }
.pp-liq-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 24px; border-bottom: 1px solid var(--pp-line); font-size: 13px; color: var(--pp-slate); }
.pp-liq-datos b { color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.pp-detalle-scroll { max-height: 55vh; overflow: auto; }
.pp-detalle-table thead th { position: sticky; top: 0; z-index: 1; background: #fff; box-shadow: inset 0 -1px 0 var(--pp-line); white-space: nowrap; }
.pp-detalle-table tfoot th, .pp-detalle-table tfoot td { position: sticky; bottom: 0; background: var(--pp-sky-2); font-weight: 700; box-shadow: inset 0 1px 0 var(--pp-line); }
.pp-filtros-nota { margin: 0; font-size: 12.5px; color: var(--pp-slate); }
@media (max-width: 575px) { .pp-liq-op { display: none; } }

/* Detalle de una transacción (modal) */
.pp-detalle-sub { margin-top: 2px; font-size: 13px; color: var(--pp-slate); }
.pp-detalle-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--pp-line); }
.pp-detalle-importe { font-family: var(--pp-display); font-size: 32px; font-weight: 700; color: var(--pp-ink); }
.pp-detalle-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; margin: 0 0 20px; }
.pp-detalle-datos dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-slate); }
.pp-detalle-datos dd { margin: 2px 0 0; color: var(--pp-ink); overflow-wrap: anywhere; }
.pp-detalle-ancho { grid-column: span 2; }
@media (max-width: 767px) { .pp-detalle-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table td,
.table th,
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--pp-line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(238, 246, 255, .55); }
.table-hover tbody tr:hover,
.table tbody tr:hover { background-color: var(--pp-sky); }

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pp-blue-600);
    border-color: var(--pp-blue-600);
    color: #fff;
}
.page-link { color: var(--pp-blue-600); border-color: var(--pp-line); }
.page-item:first-child .page-link { border-radius: 10px 0 0 10px; }
.page-item:last-child .page-link { border-radius: 0 10px 10px 0; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--pp-sky-2);
    border: 1px solid var(--pp-line);
    border-radius: 10px;
}

/* ---------- Modales, alertas, listas ---------- */
.modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(10, 30, 56, .25);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--pp-line); padding: 18px 24px; }
.modal-footer { border-top: 1px solid var(--pp-line); background: var(--pp-sky-2); }
.modal-title { font-family: var(--pp-display); color: var(--pp-ink); }
.alert { border-radius: 12px; }
.list-group-item { border-color: var(--pp-line); }

/* ---------- Estados en píldora ---------- */
.pp-estatus {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pp-est-ok { background: #e3f7ec; color: #17803d; }
.pp-est-mal { background: #fdecef; color: var(--pp-alert); }
.pp-est-pendiente { background: #fff4dc; color: #8a5a00; }
.pp-est-neutro { background: var(--pp-sky); color: var(--pp-slate); }

/* ---------- Indicadores (KPI): Views/Shared/_Kpi.cshtml ---------- */
.pp-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.pp-kpis-cuerpo .pp-kpis { margin-bottom: 0; }

.pp-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--pp-card-edge);
    border-radius: 22px;
    box-shadow: var(--pp-shadow);
}
/* dentro de otra tarjeta no lleva sombra, solo borde */
.iq-card .pp-kpi { box-shadow: none; }

.pp-kpi-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-kpi-etiqueta { font-size: 13px; font-weight: 600; color: var(--pp-slate); }
.pp-kpi-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    font-size: 19px;
    border-radius: 12px;
    color: var(--pp-blue-700);
    background: var(--pp-sky);
}
.pp-kpi-valor {
    font: 700 28px/1.2 var(--pp-display);
    color: var(--pp-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.pp-kpi-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-kpi-nota { font-size: 12.5px; color: var(--pp-slate); }

.pp-kpi-principal {
    color: #fff;
    background: var(--pp-gradient);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(15, 121, 239, .30);
}
.iq-card .pp-kpi-principal { box-shadow: 0 10px 22px rgba(15, 121, 239, .24); }
.pp-kpi-principal .pp-kpi-etiqueta,
.pp-kpi-principal .pp-kpi-nota { color: rgba(255, 255, 255, .85); }
.pp-kpi-principal .pp-kpi-valor { color: #fff; }
.pp-kpi-principal .pp-kpi-icono { color: #fff; background: rgba(255, 255, 255, .18); }
.pp-kpi-principal .pp-estatus { background: rgba(255, 255, 255, .18); color: #fff; }

@media (max-width: 1199px) {
    .pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .pp-kpis { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pp-kpi-valor { font-size: 24px; }
}

/* ---------- Pie de página ---------- */
.iq-footer {
    background: transparent !important;
    box-shadow: none;
    border-top: 1px solid var(--pp-line);
    color: var(--pp-slate);
    font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}