/* Fixpaq - Layout base (shell + sidebar + topbar + footer) */

/* No poner overflow-x en .fp-shell: el sidebar fijo en movil podria recortarse.
   La columna de contenido absorbe el recorte. */
.fp-shell {
    position: relative;
    display: grid;
    grid-template-columns: var(--fp-sidebar-width) 1fr;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}

/* ===========================
   SIDEBAR
   =========================== */
.fp-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    background: var(--fp-sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    overflow-x: hidden;
    box-sizing: border-box;
}

.fp-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--fp-slate-800);
}

.fp-sidebar__logo {
    width: 32px;
    height: 32px;
    background: var(--fp-primary-600);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.fp-sidebar__brand-text { line-height: 1.2; }
.fp-sidebar__brand-name { font-size: 14px; font-weight: 600; color: #fff; }
.fp-sidebar__brand-sub  { font-size: 10px; color: var(--fp-slate-500); }

.fp-sidebar__nav {
    flex: 1;
    padding: 10px 8px;
    overflow-x: hidden;
    overflow-y: auto;
}

.fp-sidebar__section-label {
    padding: 14px 10px 6px;
    font-size: 10px;
    color: var(--fp-slate-500);
    letter-spacing: 0.8px;
    font-weight: 600;
    text-transform: uppercase;
}

.fp-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: 6px;
    color: var(--fp-slate-400);
    font-size: 13px;
    text-decoration: none;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.fp-nav-item:hover {
    background: var(--fp-slate-800);
    color: #fff;
}

.fp-nav-item--active {
    background: var(--fp-slate-800);
    color: #fff;
    font-weight: 500;
}

.fp-nav-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: inherit;
    opacity: 0.85;
}

.fp-nav-item__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fp-nav-item:hover .fp-nav-item__icon,
.fp-nav-item--active .fp-nav-item__icon {
    opacity: 1;
}

.fp-nav-item--active .fp-nav-item__icon {
    color: #fff;
}

.fp-nav-item__label { flex: 1; }

.fp-nav-item__badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
}

.fp-nav-item__badge--warning { background: var(--fp-warning); }
.fp-nav-item__badge--danger  { background: var(--fp-danger); }

/* ===========================
   NAV GROUP (acordeón)
   =========================== */
.fp-nav-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .625rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--fp-slate-400);
    font: inherit;
    text-align: left;
}
.fp-nav-group__toggle:hover,
.fp-nav-group__toggle--active {
    background: var(--fp-sidebar-item-active);
}
.fp-nav-group__chevron {
    margin-left: auto;
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.fp-nav-group__toggle[aria-expanded="true"] .fp-nav-group__chevron {
    transform: rotate(180deg);
}
.fp-nav-group__items {
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.fp-nav-group__items[hidden] {
    display: none;
}
.fp-nav-item--nested {
    font-size: .8125rem;
    padding: .45rem .75rem;
}

/* Avatar reutilizado en el panel del menu de usuario (topbar) */
.fp-sidebar__avatar {
    width: 30px;
    height: 30px;
    background: var(--fp-primary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ===========================
   MAIN (topbar + content + footer)
   =========================== */
.fp-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    background: var(--fp-bg);
    /* Sin overflow aquí: los dropdowns del topbar salen hacia abajo; el recorte
       horizontal vive en .fp-content (y en el media query de body/html en móvil). */
    max-width: 100%;
}

/* ===========================
   TOPBAR
   =========================== */
.fp-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--fp-topbar-height);
    background: var(--fp-surface);
    padding: 0 20px;
    border-bottom: 1px solid var(--fp-border);
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.fp-topbar__search {
    flex: 1;
    max-width: 420px;
    position: relative;
    display: flex;
    align-items: center;
}

.fp-topbar__search-icon {
    position: absolute;
    left: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--fp-text-muted);
    pointer-events: none;
}

.fp-topbar__search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fp-topbar__search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--fp-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: var(--fp-slate-50);
    color: var(--fp-text);
    outline: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.fp-topbar__search-input:focus {
    border-color: var(--fp-primary-600);
    box-shadow: var(--fp-ring);
    background: var(--fp-surface);
}

.fp-topbar__search-kbd {
    position: absolute;
    right: 8px;
    font-family: var(--fp-font-mono);
    font-size: 10px;
    color: var(--fp-text-soft);
    background: var(--fp-slate-200);
    padding: 2px 6px;
    border-radius: 3px;
}

.fp-topbar__tenant {
    flex-shrink: 1;
    max-width: 220px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--fp-slate-50);
    border: 1px solid var(--fp-border);
}

.fp-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-topbar__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-text-soft);
    cursor: pointer;
    font-family: inherit;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.fp-topbar__icon-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fp-topbar__icon-btn:hover { background: var(--fp-surface-hover); }

.fp-topbar__notif-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: var(--fp-danger);
    border-radius: 8px;
    border: 2px solid var(--fp-surface);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Tarjeta de usuario en header */
.fp-topbar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 220px;
    padding: 4px 8px 4px 4px;
    margin: 0;
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    background: var(--fp-slate-50);
    color: var(--fp-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 150ms ease-out, border-color 150ms ease-out;
}

.fp-topbar__user:hover {
    background: var(--fp-surface-hover);
    border-color: var(--fp-slate-300);
}

.fp-topbar__user-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--fp-primary-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.fp-topbar__user-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.fp-topbar__user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-topbar__user-role {
    font-size: 11px;
    color: var(--fp-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-topbar__user-menu {
    flex-shrink: 0;
    color: var(--fp-text-muted);
}

/* ===========================
   CONTENT
   =========================== */
.fp-content {
    position: relative;
    z-index: 0;
    flex: 1;
    min-width: 0;
    padding: 20px;
    overflow-x: clip;
    max-width: 100%;
    box-sizing: border-box;
}

/* Cards y titulos largos dentro del area principal */
.fp-content .fp-card {
    max-width: 100%;
}

.fp-content h1 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===========================
   FOOTER
   =========================== */
.fp-footer {
    min-height: var(--fp-footer-height);
    padding: 10px 20px;
    border-top: 1px solid var(--fp-border);
    background: var(--fp-surface);
    font-size: 11px;
    color: var(--fp-text-soft);
    box-sizing: border-box;
}

.fp-footer__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fp-footer__left, .fp-footer__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-footer__sep { color: var(--fp-slate-300); }

.fp-footer__link {
    color: var(--fp-primary-600);
    text-decoration: none;
    font-weight: 500;
}

.fp-footer__link:hover { color: var(--fp-primary-700); }

.fp-footer__version {
    font-family: var(--fp-font-mono);
    background: var(--fp-slate-100);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--fp-text);
    font-weight: 600;
}

/* ===========================
   BOTON DE COLAPSO DEL SIDEBAR
   =========================== */
.fp-sidebar__toggle {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border: none;
    background: var(--fp-slate-800);
    border-radius: 5px;
    color: var(--fp-slate-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.fp-sidebar__toggle:hover {
    background: var(--fp-slate-700);
    color: #fff;
}

.fp-sidebar__toggle-icon {
    transition: transform 200ms ease-out;
}

/* ===========================
   ACENTO EN ITEM ACTIVO
   =========================== */
.fp-nav-item--active {
    position: relative;
}

.fp-nav-item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--fp-primary-600);
    border-radius: 0 2px 2px 0;
}

/* ===========================
   ESTADO COLAPSADO DEL SIDEBAR
   =========================== */
.fp-shell--collapsed {
    grid-template-columns: var(--fp-sidebar-width-collapsed) 1fr;
}

.fp-shell--collapsed .fp-sidebar__brand {
    justify-content: center;
    padding: 14px 8px;
    gap: 8px;
}

.fp-shell--collapsed .fp-sidebar__brand-text {
    display: none;
}

.fp-shell--collapsed .fp-sidebar__toggle {
    display: flex;
    margin-left: 0;
}

.fp-shell--collapsed .fp-sidebar__toggle-icon {
    transform: rotate(180deg);
}

.fp-shell--collapsed .fp-sidebar__section-label {
    display: none;
}

.fp-shell--collapsed .fp-nav-item {
    justify-content: center;
    padding: 10px 0;
}

.fp-shell--collapsed .fp-nav-item__label {
    display: none;
}

.fp-shell--collapsed .fp-nav-item__badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 16px;
    padding: 1px 4px;
    font-size: 9px;
    border: 2px solid var(--fp-sidebar-bg);
}

.fp-shell--collapsed .fp-nav-item {
    position: relative;
}

.fp-shell--collapsed .fp-nav-item--active::before {
    left: 0;
    top: 8px;
    bottom: 8px;
}

/* Separadores mas sutiles cuando esta colapsado */
.fp-shell--collapsed .fp-sidebar__nav {
    padding: 10px 8px;
}

.fp-shell--collapsed .fp-nav-group__toggle {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}
.fp-shell--collapsed .fp-nav-group__toggle .fp-nav-item__label,
.fp-shell--collapsed .fp-nav-group__chevron {
    display: none;
}
.fp-shell--collapsed .fp-nav-group__items {
    display: none !important;
}

/* ===========================
   BOTON HAMBURGUESA (MOVIL)
   =========================== */
.fp-topbar__mobile-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    border-radius: 6px;
    color: var(--fp-text-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-topbar__mobile-toggle:hover {
    background: var(--fp-surface-hover);
}

/* ===========================
   OVERLAY PARA CERRAR SIDEBAR EN MOVIL
   (absolute dentro del shell para no añadir una tercera columna al grid)
   =========================== */
.fp-shell__overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 40;
    pointer-events: none;
}

.fp-shell--mobile-open .fp-shell__overlay {
    pointer-events: auto;
}

/* ===========================
   RESPONSIVE: PANTALLAS CHICAS
   =========================== */
@media (max-width: 900px) {
    .fp-shell {
        grid-template-columns: 1fr;
    }

    .fp-shell--collapsed {
        grid-template-columns: 1fr;
    }

    .fp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--fp-sidebar-width);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 200ms ease-out;
    }

    .fp-shell--mobile-open .fp-sidebar {
        transform: translateX(0);
    }

    .fp-shell--mobile-open .fp-shell__overlay {
        display: block;
    }

    .fp-topbar__mobile-toggle {
        display: inline-flex;
    }

    /* En movil NO forzar el colapso con iconos, mostrar sidebar completo */
    .fp-sidebar__brand-text,
    .fp-sidebar__section-label,
    .fp-nav-item__label {
        display: initial !important;
    }

    .fp-sidebar__toggle {
        display: flex !important;
    }

    .fp-shell--collapsed .fp-sidebar__toggle-icon {
        transform: none;
    }

    /* Evitar scroll horizontal (sin overflow en .fp-shell → no recorta sidebar fijo) */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
        width: 100%;
    }

    .fp-main {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .fp-topbar {
        min-width: 0;
        flex-wrap: nowrap;
        padding: 0 12px;
        gap: 8px;
    }

    /* Buscador no se usa en movil */
    .fp-topbar__search {
        display: none;
    }

    .fp-topbar__actions {
        flex-shrink: 0;
        margin-left: auto;
    }

    .fp-content {
        padding: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .fp-breadcrumbs {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Footer en columna, sin desbordes */
    .fp-footer {
        padding: 12px 16px;
        text-align: center;
        font-size: 12px;
    }

    .fp-footer__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
    }

    .fp-footer__left {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .fp-footer__left .fp-footer__sep {
        display: none;
    }

    .fp-footer__right {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 14px;
    }

    .fp-footer__right .fp-footer__sep {
        display: none;
    }

    .fp-footer__version {
        flex: 0 1 auto;
        max-width: 100%;
    }
}

/* ===========================
   SISTEMA DE DROPDOWNS
   =========================== */
.fp-dropdown {
    position: relative;
}

.fp-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    box-shadow: var(--fp-shadow-md);
    padding: 6px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.fp-dropdown--open .fp-dropdown__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fp-dropdown__panel--wide { min-width: 340px; }

.fp-dropdown__header {
    padding: 10px 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-dropdown__header-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--fp-text-soft);
}

.fp-dropdown__item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--fp-radius-sm);
    text-decoration: none;
    color: var(--fp-text-body);
    transition: background 150ms ease-out;
    align-items: flex-start;
}

.fp-dropdown__item:hover {
    background: var(--fp-surface-hover);
    color: var(--fp-text);
}

.fp-dropdown__item--simple {
    align-items: center;
    font-size: 13px;
}

.fp-dropdown__item--simple svg {
    color: var(--fp-text-soft);
    flex-shrink: 0;
}

.fp-dropdown__item--danger {
    color: var(--fp-danger);
}

.fp-dropdown__item--danger:hover {
    background: var(--fp-danger-bg);
    color: var(--fp-danger-text);
}

.fp-dropdown__item--danger svg {
    color: var(--fp-danger);
}

.fp-dropdown__item-icon {
    width: 28px;
    height: 28px;
    background: var(--fp-slate-100);
    border-radius: var(--fp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-text-soft);
    flex-shrink: 0;
}

.fp-dropdown__item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
    line-height: 1.3;
}

.fp-dropdown__item-desc {
    font-size: 11px;
    color: var(--fp-text-soft);
    margin-top: 2px;
}

.fp-dropdown__sep {
    height: 1px;
    background: var(--fp-border);
    margin: 6px 2px;
}

.fp-dropdown__foot {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--fp-border);
    margin-top: 4px;
}

.fp-dropdown__foot-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--fp-text-soft);
    text-decoration: none;
}

.fp-dropdown__foot-link:hover { color: var(--fp-text); }
.fp-dropdown__foot-link--primary { color: var(--fp-primary-600); }
.fp-dropdown__foot-link--primary:hover { color: var(--fp-primary-700); }

/* ===========================
   NOTIFICACIONES (items del dropdown)
   =========================== */
.fp-notif {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: var(--fp-radius-sm);
    text-decoration: none;
    transition: background 150ms ease-out;
}

.fp-notif:hover { background: var(--fp-surface-hover); }

.fp-notif__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.fp-notif__dot--danger  { background: var(--fp-danger); }
.fp-notif__dot--warning { background: var(--fp-warning); }
.fp-notif__dot--info    { background: var(--fp-info); }

.fp-notif__body { flex: 1; min-width: 0; }

.fp-notif__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
    line-height: 1.3;
}

.fp-notif__desc {
    font-size: 11px;
    color: var(--fp-text-soft);
    margin-top: 2px;
}

.fp-notif__time {
    font-size: 10px;
    color: var(--fp-text-muted);
    margin-top: 4px;
}

/* ===========================
   MENU DE USUARIO (topbar)
   =========================== */
.fp-dropdown--user-topbar {
    flex-shrink: 0;
}

.fp-dropdown--user-topbar .fp-dropdown__panel--user {
    top: calc(100% + 6px);
    bottom: auto;
    left: auto;
    right: 0;
    min-width: 240px;
}

.fp-dropdown__user-header {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    align-items: center;
}

.fp-sidebar__avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.fp-dropdown__user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-text);
}

.fp-dropdown__user-email {
    font-size: 11px;
    color: var(--fp-text-soft);
}

@media (max-width: 900px) {
    .fp-topbar__user-text {
        display: none;
    }

    .fp-topbar__user {
        max-width: none;
        padding: 4px;
    }
}

/* ===========================
   BREADCRUMBS
   =========================== */
.fp-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px 4px;
    font-size: 12px;
    color: var(--fp-text-soft);
}

.fp-breadcrumbs__link {
    color: var(--fp-text-soft);
    text-decoration: none;
    transition: color 150ms ease-out;
}

.fp-breadcrumbs__link:hover { color: var(--fp-text); }

.fp-breadcrumbs__sep { color: var(--fp-slate-300); }

.fp-breadcrumbs__current {
    color: var(--fp-text);
    font-weight: 500;
}

/* ===========================
   FLASH MESSAGES
   =========================== */
.fp-flash-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.fp-flash {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--fp-radius-md);
    border: 1px solid;
    align-items: flex-start;
    animation: fp-flash-in 220ms ease-out;
}

@keyframes fp-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fp-flash--success {
    background: var(--fp-success-bg);
    border-color: var(--fp-success-border);
    color: var(--fp-success-text);
}

.fp-flash--warning {
    background: var(--fp-warning-bg);
    border-color: var(--fp-warning-border);
    color: var(--fp-warning-text);
}

.fp-flash--danger {
    background: var(--fp-danger-bg);
    border-color: var(--fp-danger-border);
    color: var(--fp-danger-text);
}

.fp-flash--info {
    background: var(--fp-info-bg);
    border-color: var(--fp-info-border);
    color: var(--fp-info-text);
}

.fp-flash__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.fp-flash__body { flex: 1; min-width: 0; }

.fp-flash__title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.fp-flash__message {
    font-size: 13px;
    line-height: 1.45;
}

.fp-flash__close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    border-radius: var(--fp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease-out, background 150ms ease-out;
}

.fp-flash__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.fp-flash--leaving {
    animation: fp-flash-out 220ms ease-in forwards;
}

@keyframes fp-flash-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(10px); }
}

/* ===========================
   PASSWORD TOGGLE (OJO)
   =========================== */
.fp-password {
    position: relative;
}

.fp-password input[type="password"],
.fp-password input[type="text"] {
    padding-right: 44px;
}

.fp-password__toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-text-soft);
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.fp-password__toggle:hover {
    background: var(--fp-surface-hover);
    color: var(--fp-text);
    border-color: var(--fp-slate-300);
}

.fp-password__toggle svg {
    width: 18px;
    height: 18px;
}

.fp-password__icon {
    display: none;
}

/* Default (oculto) -> mostrar solo "ojo" */
.fp-password:not([data-visible="true"]) .fp-password__icon--on {
    display: block;
}

/* Visible -> mostrar solo "ojo tachado" */
.fp-password[data-visible="true"] .fp-password__icon--off {
    display: block;
}

/* ===========================
   PAGE HEADER
   =========================== */
.fp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.fp-page-header__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--fp-text);
    letter-spacing: -0.3px;
    margin: 0;
}

.fp-page-header__subtitle {
    font-size: 13px;
    color: var(--fp-text-soft);
    margin: 4px 0 0;
}

/* ===========================
   METRIC CARDS
   =========================== */
.fp-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .fp-metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .fp-metric-grid { grid-template-columns: 1fr; }
}

.fp-metric {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-metric__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.fp-metric__label {
    font-size: 11px;
    color: var(--fp-text-soft);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.fp-metric__icon {
    width: 26px;
    height: 26px;
    border-radius: var(--fp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-metric--primary .fp-metric__icon { background: var(--fp-primary-50); color: var(--fp-primary-600); }
.fp-metric--warning .fp-metric__icon { background: var(--fp-warning-bg); color: var(--fp-warning); }
.fp-metric--success .fp-metric__icon { background: var(--fp-success-bg); color: var(--fp-success); }
.fp-metric--danger  .fp-metric__icon { background: var(--fp-danger-bg);  color: var(--fp-danger); }
.fp-metric--info    .fp-metric__icon { background: var(--fp-info-bg);    color: var(--fp-info); }

.fp-metric__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--fp-text);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.fp-metric__delta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.fp-metric__delta-value { font-weight: 600; }
.fp-metric__delta-icon--up   { color: var(--fp-success); }
.fp-metric__delta-icon--down { color: var(--fp-danger); }
.fp-metric__delta:has(.fp-metric__delta-icon--up)   .fp-metric__delta-value { color: var(--fp-success); }
.fp-metric__delta:has(.fp-metric__delta-icon--down) .fp-metric__delta-value { color: var(--fp-danger); }

.fp-metric__delta-label { color: var(--fp-text-muted); }

.fp-metric__hint {
    font-size: 11px;
    font-weight: 600;
}

.fp-metric__hint--soft    { color: var(--fp-text-soft); font-weight: 400; }
.fp-metric__hint--warning { color: var(--fp-warning); }
.fp-metric__hint--danger  { color: var(--fp-danger); }
.fp-metric__hint--success { color: var(--fp-success); }

/* ===========================
   DASHBOARD GRID (2 columnas)
   =========================== */
.fp-dashboard-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .fp-dashboard-row { grid-template-columns: 1fr; }
}

/* ===========================
   WIDGET GENERICO (card con header)
   =========================== */
.fp-widget {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: 16px;
}

.fp-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fp-widget__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-text);
    margin: 0;
}

.fp-widget__link {
    font-size: 12px;
    color: var(--fp-primary-600);
    font-weight: 500;
    text-decoration: none;
}

.fp-widget__link:hover { color: var(--fp-primary-700); }

.fp-widget__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===========================
   ITEM DE LISTA TIPO CITA
   =========================== */
.fp-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--fp-radius-sm);
    transition: background 150ms ease-out;
}

.fp-list-item:hover { background: var(--fp-slate-50); }

.fp-list-item__date {
    width: 36px;
    height: 36px;
    background: var(--fp-primary-50);
    border-radius: var(--fp-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-list-item__date--neutral { background: var(--fp-slate-100); }

.fp-list-item__date-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--fp-text-soft);
    line-height: 1;
}

.fp-list-item__date-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--fp-primary-600);
    line-height: 1.1;
}

.fp-list-item__date--neutral .fp-list-item__date-time { color: var(--fp-text); }

.fp-list-item__body { flex: 1; min-width: 0; }

.fp-list-item__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
    line-height: 1.3;
}

.fp-list-item__meta {
    font-size: 11px;
    color: var(--fp-text-soft);
    margin-top: 2px;
}

/* ===========================
   ITEM DE COBRO
   =========================== */
.fp-payment-item {
    padding: 9px 10px;
    border: 1px solid;
    border-radius: var(--fp-radius-sm);
}

.fp-payment-item--overdue { background: var(--fp-danger-bg);  border-color: var(--fp-danger-border); }
.fp-payment-item--soon    { background: var(--fp-warning-bg); border-color: var(--fp-warning-border); }
.fp-payment-item--neutral { background: var(--fp-slate-50);   border-color: var(--fp-border); }

.fp-payment-item__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.fp-payment-item__client {
    font-size: 13px;
    font-weight: 500;
    color: var(--fp-text);
}

.fp-payment-item__client--overdue { font-weight: 600; color: var(--fp-text); }

.fp-payment-item__amount {
    font-size: 13px;
    font-weight: 700;
}

.fp-payment-item--overdue .fp-payment-item__amount { color: var(--fp-danger-text); }
.fp-payment-item--soon    .fp-payment-item__amount { color: var(--fp-warning-text); }
.fp-payment-item--neutral .fp-payment-item__amount { color: var(--fp-slate-700); }

.fp-payment-item__status { font-size: 11px; }

.fp-payment-item--overdue .fp-payment-item__status { color: var(--fp-danger-text); }
.fp-payment-item--soon    .fp-payment-item__status { color: var(--fp-warning-text); }
.fp-payment-item--neutral .fp-payment-item__status { color: var(--fp-text-soft); }

/* ===========================================================
   DIFERENCIADOR CONTEXTO ADMIN (super-admin)
   =========================================================== */

/* Sidebar con fondo indigo oscuro */
.fp-shell--admin .fp-sidebar {
    background: var(--fp-admin-900);
    border-right-color: rgba(167, 139, 250, 0.06);
}

/* Borde inferior del brand con tinte indigo */
.fp-shell--admin .fp-sidebar__brand {
    border-bottom-color: var(--fp-admin-800);
}

/* Logo cambia a morado saturado */
.fp-shell--admin .fp-sidebar__logo {
    background: var(--fp-admin-600);
}

/* Brand name fila con wrap para el badge */
.fp-sidebar__brand-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Badge "ADMIN" junto al nombre */
.fp-sidebar__admin-badge {
    display: inline-block;
    background: var(--fp-admin-600);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
    text-transform: uppercase;
}

/* Subtitulo con tono mas suave en admin */
.fp-shell--admin .fp-sidebar__brand-sub {
    color: var(--fp-admin-300);
}

/* Banda MODO SUPER-ADMIN */
.fp-sidebar__admin-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.25) 0%, rgba(167, 139, 250, 0.15) 100%);
    border-bottom: 1px solid rgba(167, 139, 250, 0.2);
    color: var(--fp-admin-300);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fp-sidebar__admin-banner svg {
    color: var(--fp-admin-400);
    flex-shrink: 0;
}

/* Separadores de seccion con tinte indigo */
.fp-shell--admin .fp-sidebar__section-label {
    color: var(--fp-admin-400);
}

/* Border-top del foot del sidebar */
.fp-shell--admin .fp-sidebar__foot {
    border-top-color: var(--fp-admin-800);
}

/* Border del toggle del sidebar */
.fp-shell--admin .fp-sidebar__toggle {
    background: var(--fp-admin-800);
    color: var(--fp-admin-300);
}

.fp-shell--admin .fp-sidebar__toggle:hover {
    background: var(--fp-admin-700);
    color: #fff;
}

/* User card al fondo con tono admin */
.fp-shell--admin .fp-sidebar__user {
    background: var(--fp-admin-800);
}

.fp-shell--admin .fp-sidebar__user:hover {
    background: var(--fp-admin-700);
}

.fp-shell--admin .fp-sidebar__avatar {
    background: var(--fp-admin-600);
}

.fp-shell--admin .fp-sidebar__user-role {
    color: var(--fp-admin-300);
}

/* Nav items en admin: hover con tono indigo */
.fp-shell--admin .fp-nav-item:hover {
    background: var(--fp-admin-800);
    color: #fff;
}

/* Item activo usa fondo indigo-800 en lugar de slate-800 */
.fp-shell--admin .fp-nav-item--active {
    background: var(--fp-admin-800);
    color: #fff;
}

/* Acento lateral izquierdo del item activo: morado en vez de azul */
.fp-shell--admin .fp-nav-item--active::before {
    background: var(--fp-admin-600);
}

/* Icono del item activo: fondo morado */
.fp-shell--admin .fp-nav-item--active .fp-nav-item__icon {
    background: var(--fp-admin-600);
    border-color: var(--fp-admin-600);
}

/* ===========================================================
   Sidebar colapsado en admin: mantener coherencia
   =========================================================== */

/* Cuando esta colapsado, ocultar la banda MODO SUPER-ADMIN */
.fp-shell--admin.fp-shell--collapsed .fp-sidebar__admin-banner {
    padding: 8px 4px;
    font-size: 0;
}

.fp-shell--admin.fp-shell--collapsed .fp-sidebar__admin-banner svg {
    width: 14px;
    height: 14px;
}

/* Ocultar texto del badge en colapsado, mantener solo el fondo indicador */
.fp-shell--admin.fp-shell--collapsed .fp-sidebar__admin-badge {
    display: none;
}

/* Ajuste: en widget Tenants en riesgo del admin, el "157d" mas discreto */
.fp-shell--admin .fp-list-item__date-time {
    font-size: 11px;
    font-weight: 600;
}

.fp-shell--admin .fp-list-item__date-label {
    font-size: 8px;
}

/* Boton + primario (accion principal del topbar) */
.fp-topbar__icon-btn--primary {
    background: var(--fp-primary-600);
    border-color: var(--fp-primary-600);
    color: #fff;
}

.fp-topbar__icon-btn--primary:hover {
    background: var(--fp-primary-700);
    border-color: var(--fp-primary-700);
}

.fp-topbar__icon-btn--primary svg {
    color: #fff;
}

/* Ancho del dropdown del boton + */
.fp-dropdown--quick-add .fp-dropdown__panel {
    min-width: 220px;
}

/* Iconos dentro del dropdown del boton + (mas discretos) */
.fp-dropdown--quick-add .fp-dropdown__item svg {
    width: 14px;
    height: 14px;
    color: var(--fp-text-soft);
    flex-shrink: 0;
}

.fp-topbar__mobile-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Banner modo impersonación (super-admin en contexto tenant) */
.fp-impersonation-banner {
    background: var(--fp-warning-bg);
    color: var(--fp-warning-text);
    border-bottom: 1px solid var(--fp-warning-border);
}

.fp-impersonation-banner__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.35;
}

.fp-impersonation-banner__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.25);
    color: var(--fp-warning-text);
    border: 1px solid var(--fp-warning-border);
}

.fp-impersonation-banner__text {
    flex: 1 1 240px;
    color: var(--fp-warning-text);
}

.fp-impersonation-banner__text strong {
    font-weight: 600;
}

.fp-impersonation-banner__action {
    font-weight: 600;
    color: var(--fp-warning-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fp-impersonation-banner__action:hover {
    color: var(--fp-slate-900);
}