/*
 * KINO shared shell theme (white label).
 * Colors come from CSS variables injected per request (resources/views/filament/brand/head.blade.php).
 * Plain CSS on purpose: Filament v3 themes need Tailwind v3 while the app uses Tailwind v4.
 * Measures follow the Figma "KINO · Prototipo UI v1": frames 1440 x 1024, sidebar 264,
 * top bar 72, content padding 32/40, cards radius 24, spacing scale of 4 px.
 */

/* ---------- Base ---------- */
/* The Figma is light only; panels run with darkMode(false). Keep native controls light too. */
:root {
    color-scheme: light;
}

html:not(.dark) body.fi-body {
    background-color: var(--kb-background);
    color: var(--kb-text);
}

.fi-main-ctn {
    min-height: 100vh;
}

.fi-main-ctn > .fi-main {
    flex: 1 0 auto;
    height: auto !important;
}

/* ---------- Sidebar (Figma "Menú lateral") ---------- */
.fi-sidebar {
    background-color: var(--kb-sidebar) !important;
    color: var(--kb-sidebar-text);
}

@media (min-width: 1024px) {
    .fi-sidebar {
        box-shadow: none !important;
        border-inline-end: 0 !important;
    }
}

.fi-sidebar-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 20px 0 !important;
    background-color: var(--kb-sidebar) !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
}

.fi-sidebar .fi-logo {
    color: var(--kb-sidebar-text);
    height: auto !important;
}

.fi-sidebar-nav {
    padding: 0 20px 16px !important;
    gap: 4px !important;
    scrollbar-width: none;
}

.fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.fi-sidebar-nav-groups {
    margin-inline: 0 !important;
    gap: 4px !important;
}

.fi-sidebar-group-items {
    gap: 4px !important;
}

.kb-sidebar-role {
    margin: 22px 0 10px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kb-sidebar-muted);
}

.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-button .fi-sidebar-group-label {
    color: var(--kb-sidebar-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-group-icon,
.fi-sidebar .fi-sidebar-group-collapse-button,
.fi-sidebar-header button,
.fi-sidebar-header .fi-icon-btn {
    color: var(--kb-sidebar-muted) !important;
}

.fi-sidebar .fi-sidebar-item-button {
    justify-content: flex-start !important;
    min-height: 44px;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

.fi-sidebar .fi-sidebar-item-label {
    color: var(--kb-sidebar-text) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}

.fi-sidebar .fi-sidebar-item-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--kb-sidebar-text) !important;
    opacity: 0.92;
}

.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:focus-visible {
    background-color: rgb(255 255 255 / 0.08) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--kb-sidebar-active) !important;
    box-shadow: none;
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--kb-sidebar-text) !important;
    opacity: 1;
}

.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-item-grouped-border > div {
    background-color: rgb(255 255 255 / 0.25) !important;
}

/* Tenant (community) menu when a panel still shows it in the sidebar */
.fi-sidebar .fi-tenant-menu-trigger {
    background-color: rgb(255 255 255 / 0.08);
    border-radius: 12px;
    color: var(--kb-sidebar-text);
}

.fi-sidebar .fi-tenant-menu-trigger * {
    color: var(--kb-sidebar-text) !important;
}

/* Sidebar footer: sign out + community box */
.kb-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 20px 28px;
}

.kb-sidebar-footer__logout {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--kb-sidebar-text);
    font-size: 15px;
    line-height: 22px;
    text-align: start;
}

.kb-sidebar-footer__logout:hover,
.kb-sidebar-footer__logout:focus-visible {
    background-color: rgb(255 255 255 / 0.08);
    outline: none;
}

.kb-sidebar-footer__logout-icon {
    width: 20px;
    height: 20px;
}

.kb-sidebar-footer__community {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--kb-sidebar-active);
    color: var(--kb-sidebar-text);
    font-size: 14px;
    line-height: 20px;
}

.kb-sidebar-footer__community-detail {
    color: var(--kb-sidebar-muted);
}

/* ---------- Brand logo ---------- */
.kb-logo {
    display: inline-flex;
    align-items: center;
}

/* KINO official logotipo (Figma "Logo KINO", 93 x 24 at 1x). */
.kb-logo--img.kb-logo--kino {
    height: 24px;
}

.kb-logo--img.kb-logo--kino.kb-logo--sm {
    height: 20px;
}

.kb-logo--img.kb-logo--kino.kb-logo--lg {
    height: 32px;
}

.kb-logo--img {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.kb-logo--img.kb-logo--sm {
    height: 40px;
}

.kb-logo--img.kb-logo--lg {
    height: 88px;
}

/* ---------- Top bar (Figma "Barra superior web") ---------- */
html:not(.dark) .fi-topbar > nav {
    background-color: var(--kb-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--kb-border);
    --tw-ring-color: transparent;
}

.fi-topbar > nav {
    height: 72px !important;
    gap: 16px !important;
}

@media (min-width: 1024px) {
    .fi-topbar > nav {
        padding-inline: 40px !important;
    }
}

.kb-community__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    height: 52px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--kb-outline);
    border-radius: 12px;
    background: var(--kb-surface);
    text-align: start;
}

.kb-community__trigger:disabled {
    cursor: default;
}

.kb-community__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--kb-chip-lavender);
    color: var(--kb-link);
}

.kb-community__icon svg {
    width: 20px;
    height: 20px;
}

.kb-community__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kb-community__label {
    font-size: 12px;
    line-height: 16px;
    color: var(--kb-muted);
}

.kb-community__name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--kb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-community__chevron {
    width: 20px;
    height: 20px;
    margin-inline-start: 16px;
    color: var(--kb-text);
}

@media (max-width: 639px) {
    .kb-community__label,
    .kb-community__chevron {
        display: none;
    }

    .kb-community__trigger {
        height: 44px;
    }
}

/* Bell (database notifications) inside a circle */
.fi-topbar .fi-topbar-database-notifications-btn,
.fi-topbar [x-persist] > div > .fi-icon-btn,
.fi-topbar .fi-icon-btn[aria-label] {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--kb-subtle);
    color: var(--kb-text);
}

.fi-topbar .fi-user-menu img,
.fi-topbar .fi-user-menu .fi-avatar {
    width: 36px !important;
    height: 36px !important;
}

.kb-identity {
    display: none;
    flex-direction: column;
    margin-inline-start: -4px;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .kb-identity {
        display: flex;
    }
}

.kb-identity__name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--kb-text);
}

.kb-identity__detail {
    font-size: 12px;
    line-height: 16px;
    color: var(--kb-muted);
}

/* ---------- Footer (Figma "Pie web") ---------- */
.kb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 16px;
    border-top: 1px solid var(--kb-border);
    background: var(--kb-surface);
}

@media (min-width: 1024px) {
    .kb-footer {
        padding-inline: 40px;
    }
}

.kb-footer__note {
    font-size: 13px;
    color: var(--kb-muted);
}

/* ---------- Page ---------- */
@media (min-width: 1024px) {
    .fi-main {
        padding-inline: 40px !important;
    }
}

.fi-page > section {
    padding-block: 32px !important;
    row-gap: 24px !important;
}

.fi-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Cards: sections, widgets, tables */
html:not(.dark) .fi-section,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-widget > .fi-section,
html:not(.dark) .fi-fo-tabs,
html:not(.dark) .fi-in-tabs {
    border-radius: 24px !important;
    box-shadow: var(--kb-shadow-card) !important;
    --tw-ring-color: transparent !important;
    background-color: var(--kb-surface);
}

.fi-ta-ctn {
    overflow: hidden;
}

html:not(.dark) .fi-ta-header-cell {
    background-color: var(--kb-subtle);
}

/* Status chips: pills */
.fi-badge {
    border-radius: 9999px !important;
    padding-inline: 0.6rem;
    font-weight: 500;
}

/* Buttons: pill, primary uses the brand button color */
.fi-btn {
    border-radius: 9999px !important;
    font-weight: 500;
}

.fi-btn.fi-btn-color-primary:not(.fi-btn-outlined) {
    background-color: var(--kb-button) !important;
}

.fi-btn.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    filter: brightness(1.08);
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: 12px !important;
}

/* Modals and slide-overs */
.fi-modal-window {
    border-radius: 24px;
}

.fi-modal-slide-over-window {
    border-radius: 0;
}

/* ---------- Shared pieces (Figma 00 · Componentes) ---------- */
.kb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kb-page-header__text {
    min-width: 0;
}

.kb-page-header__title {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: var(--kb-text);
    letter-spacing: -0.01em;
}

.kb-page-header__subtitle {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--kb-muted);
}

.kb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.1s ease, background-color 0.1s ease;
}

.kb-btn:focus-visible {
    outline: 2px solid var(--kb-link);
    outline-offset: 2px;
}

.kb-btn--sm {
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
}

.kb-btn--primary {
    background: var(--kb-button);
    color: #fff;
}

.kb-btn--primary:hover {
    filter: brightness(1.1);
}

.kb-btn--key {
    background: var(--kb-accent);
    color: var(--kb-accent-text);
}

.kb-btn--key:hover {
    filter: brightness(0.97);
}

.kb-btn--outline {
    background: var(--kb-surface);
    color: var(--kb-link);
    border: 1px solid var(--kb-outline);
}

.kb-btn--outline:hover {
    background: var(--kb-subtle);
}

.kb-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--kb-link);
}

.kb-link:hover {
    text-decoration: underline;
}

.kb-eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kb-muted);
}

.kb-eyebrow--on-dark {
    color: rgb(255 255 255 / 0.85);
}

.kb-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 24px;
    background: var(--kb-surface);
    box-shadow: var(--kb-shadow-card);
}

.kb-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

.kb-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kb-card__heading {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-icon-tile {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--kb-chip-lavender);
    color: var(--kb-link);
}

.kb-icon-tile svg {
    width: 22px;
    height: 22px;
}

.kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px; /* App/Chip: Poppins Medium 12/16 */
    white-space: nowrap;
    color: var(--kb-ink);
    background: var(--kb-chip-lavender);
}

.kb-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--kb-chip-lavender-dot);
}

.kb-chip--blue { background: var(--kb-chip-blue); }
.kb-chip--blue::before { background: var(--kb-chip-blue-dot); }
.kb-chip--lime { background: var(--kb-chip-lime); }
.kb-chip--lime::before { background: var(--kb-chip-lime-dot); }
.kb-chip--yellow { background: var(--kb-chip-yellow); }
.kb-chip--yellow::before { background: var(--kb-chip-yellow-dot); }
.kb-chip--rose { background: var(--kb-chip-rose); }
.kb-chip--rose::before { background: var(--kb-chip-rose-dot); }
.kb-chip--gray { background: #ECEBEF; }
.kb-chip--gray::before { background: #8E8C96; }

.kb-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--kb-border);
    border-radius: 16px;
}

.kb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-text);
}

.kb-table th {
    padding: 12px 14px;
    background: var(--kb-subtle);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: start;
    color: var(--kb-muted);
    white-space: nowrap;
}

.kb-table td {
    height: 48px;
    padding: 8px 14px;
    border-top: 1px solid var(--kb-border);
    vertical-align: middle;
}

.kb-table__name {
    font-weight: 500;
}

.kb-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
}

.kb-empty__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 4px;
    border-radius: 9999px;
    background: var(--kb-chip-lavender);
    color: var(--kb-link);
}

.kb-empty__icon svg {
    width: 26px;
    height: 26px;
}

.kb-empty__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-empty__text {
    margin: 0 0 8px;
    max-width: 30ch;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

.kb-empty--compact {
    padding-block: 16px;
}

/* ---------- Resident home (Figma RW-03) ---------- */
.kb-home .fi-page > section,
.fi-page.kb-home > section {
    gap: 24px !important;
}

.kb-home__actions {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 768px) {
    .kb-home__actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kb-card--hero {
    gap: 4px;
    padding: 20px 24px 24px;
    background: linear-gradient(105deg, var(--kb-hero-from) 0%, var(--kb-hero-to) 100%);
    box-shadow: 0 8px 24px rgb(35 26 143 / 0.16);
}

.kb-card--hero .kb-card__title {
    margin-top: 2px;
    color: #fff;
}

.kb-card--hero .kb-card__text {
    color: rgb(255 255 255 / 0.85);
}

.kb-card--hero .kb-btn {
    align-self: flex-start;
    margin-top: 16px;
}

.kb-card--action {
    gap: 4px;
    padding: 20px 24px 24px;
}

.kb-card--action .kb-icon-tile {
    margin-bottom: 16px;
}

.kb-card--action .kb-btn {
    align-self: flex-start;
    margin-top: 16px;
}

.kb-home__lists {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1024px) {
    .kb-home__lists {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.kb-card--list {
    gap: 16px;
    padding: 20px;
}

.kb-notices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--kb-subtle);
    color: var(--kb-text);
}

.kb-notice:hover {
    filter: brightness(0.985);
}

.kb-notice__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--kb-surface);
    color: var(--kb-primary);
}

.kb-notice__icon svg {
    width: 20px;
    height: 20px;
}

.kb-notice__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.kb-notice__title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.kb-notice__detail {
    font-size: 13px;
    line-height: 18px;
    color: var(--kb-muted);
}

/* ---------- Login (Figma RW-01) ---------- */
.kb-auth-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    background-color: var(--kb-sidebar);
    color: var(--kb-sidebar-text);
}

.kb-auth-aside__headline {
    margin: 0;
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    max-width: 32rem;
}

.kb-auth-aside__subline {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: rgb(255 255 255 / 0.88);
    max-width: 30rem;
}

.kb-auth-aside__spacer {
    display: none;
}

body:has(.kb-auth-aside) {
    background-color: var(--kb-background) !important;
}

/* The brand panel already shows the logo; hide Filament's default header. */
body:has(.kb-auth-aside) .fi-simple-header {
    display: none;
}

body:has(.kb-auth-aside) .fi-simple-main-ctn {
    align-items: flex-start;
}

body:has(.kb-auth-aside) .fi-simple-main {
    max-width: 440px !important;
    padding: 32px !important;
    border-radius: 16px !important;
    box-shadow: var(--kb-shadow-card) !important;
    --tw-ring-color: transparent !important;
    margin-block: 2rem;
}

body:has(.kb-auth-aside) .fi-simple-page > section {
    gap: 16px !important;
}

body:has(.kb-auth-aside) .fi-fo-field-wrp-label span {
    font-size: 14px;
    font-weight: 500;
}

body:has(.kb-auth-aside) .fi-input-wrp {
    min-height: 44px;
    border-radius: 12px !important;
    --tw-ring-color: var(--kb-border) !important;
}

body:has(.kb-auth-aside) .fi-form-actions .fi-btn,
body:has(.kb-auth-aside) .fi-btn[type="submit"] {
    width: 100%;
    height: 44px;
    border-radius: 9999px !important;
}

.kb-auth-heading {
    margin-bottom: 4px;
}

.kb-auth-heading__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kb-link);
}

.kb-auth-heading__title {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    color: var(--kb-text);
}

.dark .kb-auth-heading__title {
    color: #fff;
}

@media (min-width: 1024px) {
    .kb-auth-aside {
        position: fixed;
        inset: 0 auto 0 0;
        width: 44%;
        padding: 64px;
        justify-content: space-between;
        z-index: 1;
    }

    .kb-auth-aside__headline {
        font-size: 32px;
        line-height: 40px;
    }

    .kb-auth-aside__spacer {
        display: block;
    }

    body:has(.kb-auth-aside) .fi-simple-layout {
        margin-inline-start: 44%;
        width: 56%;
    }

    body:has(.kb-auth-aside) .fi-simple-main-ctn {
        align-items: center;
    }
}

/* ---------- Staging QA fixes (mobile top bar, passes table) ---------- */
/* Below lg the menu button goes first and the community selector shrinks so the
   bell, language and avatar stay on screen (no horizontal overflow at 390 px). */
@media (max-width: 1023px) {
    .fi-topbar > nav {
        gap: 8px !important;
        padding-inline: 12px !important;
    }

    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn {
        order: -1;
        flex: none;
    }

    .fi-topbar .kb-community {
        flex: 1 1 auto;
        min-width: 0;
    }

    .fi-topbar .kb-community .fi-dropdown-trigger,
    .fi-topbar .kb-community__trigger {
        width: 100%;
        min-width: 0;
    }

    .fi-topbar > nav > :last-child {
        flex: none;
    }
}

@media (max-width: 639px) {
    .kb-community__icon {
        display: none;
    }

    .kb-community__trigger {
        padding-inline: 12px;
    }

    /* Passes table becomes stacked rows: name and status on top, validity below. */
    .kb-table thead {
        display: none;
    }

    .kb-table,
    .kb-table tbody {
        display: block;
    }

    .kb-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name status"
            "validity validity";
        gap: 4px 12px;
        padding: 12px 16px;
        border-top: 1px solid var(--kb-border);
    }

    .kb-table tbody tr:first-child {
        border-top: 0;
    }

    .kb-table td {
        padding: 0 !important;
        border: 0 !important;
    }

    .kb-table td:nth-child(1) {
        grid-area: name;
    }

    .kb-table td:nth-child(2) {
        grid-area: validity;
        color: var(--kb-muted);
        font-size: 14px;
        line-height: 20px;
    }

    .kb-table td:nth-child(3) {
        grid-area: status;
        align-self: start;
    }
}

/* Community menu stays above the top bar and inside the screen on phones. */
.kb-community .fi-dropdown-panel {
    z-index: 50;
    max-width: min(24rem, calc(100vw - 56px));
}

/* ==========================================================================
   Resident screens on Filament components (Figma RW-04..RW-37)
   Tabs, tables, badges as chips, empty states, forms, wizard, pagination.
   ========================================================================== */

/* Page header: SemiBold 32/40 title + grey subtitle */
.fi-header-heading {
    font-size: 32px !important;
    line-height: 40px !important;
    color: var(--kb-text);
}

.fi-header-subheading {
    margin-top: 4px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--kb-muted) !important;
}

/* Tabs (Accesos, Paquetería, Reservas): underline, no pill container */
html:not(.dark) .fi-tabs {
    background: transparent !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    padding: 0 !important;
    gap: 24px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--kb-border);
    width: 100%;
    max-width: none !important;
    margin-inline: 0 !important;
    justify-content: flex-start !important;
}

.fi-tabs .fi-tabs-item {
    border-radius: 0 !important;
    padding: 10px 2px !important;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    background: transparent !important;
}

.fi-tabs .fi-tabs-item .fi-tabs-item-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--kb-muted) !important;
}

.fi-tabs .fi-tabs-item.fi-active {
    border-bottom-color: var(--kb-button);
}

.fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--kb-link) !important;
    font-weight: 600;
}

/* Tables: card with a bordered inner list, uppercase grey headers, 48 px rows */
html:not(.dark) .fi-ta-header-cell {
    background-color: var(--kb-subtle);
}

.fi-ta-header-cell-label,
.fi-ta-header-cell button span {
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kb-muted) !important;
}

html:not(.dark) .fi-ta-table > tbody,
html:not(.dark) .fi-ta-table > thead {
    --tw-divide-opacity: 1;
}

html:not(.dark) .fi-ta-table tr {
    border-color: var(--kb-border) !important;
}

html:not(.dark) .fi-ta-row:hover {
    background-color: color-mix(in srgb, var(--kb-soft) 35%, transparent) !important;
}

.fi-ta-text-item-label {
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-text);
}

.fi-ta-text-item-label.font-semibold {
    color: var(--kb-ink);
}

.fi-ta-col-wrp .fi-ta-text .text-gray-500 {
    color: var(--kb-muted) !important;
}

.fi-ta-actions .fi-link,
.fi-ta-actions .fi-ac-link-action {
    color: var(--kb-link) !important;
    font-weight: 600;
}

.fi-ta-actions .fi-link .fi-icon,
.fi-ta-actions .fi-link svg {
    display: none;
}

/* Search and filters in the table header */
.fi-ta-header-toolbar {
    border-color: var(--kb-border) !important;
}

.fi-ta-search-field .fi-input-wrp {
    border-radius: 9999px !important;
}

/* Filament badges read as Figma chips: soft fill + dot, ink text */
.fi-badge {
    gap: 6px !important;
    min-height: 24px;
    font-size: 12px !important;
    line-height: 16px !important;
    color: var(--kb-ink) !important;
    background: var(--kb-chip-lavender) !important;
    --tw-ring-color: transparent !important;
}

.fi-badge .fi-badge-icon {
    display: none;
}

.fi-badge::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--kb-chip-lavender-dot);
}

.fi-badge.fi-color-success { background: var(--kb-chip-lime) !important; }
.fi-badge.fi-color-success::before { background: var(--kb-chip-lime-dot); }
.fi-badge.fi-color-warning { background: var(--kb-chip-yellow) !important; }
.fi-badge.fi-color-warning::before { background: var(--kb-chip-yellow-dot); }
.fi-badge.fi-color-danger { background: var(--kb-chip-rose) !important; }
.fi-badge.fi-color-danger::before { background: var(--kb-chip-rose-dot); }
.fi-badge.fi-color-info { background: var(--kb-chip-blue) !important; }
.fi-badge.fi-color-info::before { background: var(--kb-chip-blue-dot); }
.fi-badge.fi-color-gray { background: #ECEBEF !important; }
.fi-badge.fi-color-gray::before { background: #8E8C96; }

/* Navigation badges in the sidebar keep the plain look */
.fi-sidebar .fi-badge::before {
    display: none;
}

/* Empty states: 60 px lavender icon circle, SemiBold title, grey text */
.fi-ta-empty-state {
    padding-block: 48px !important;
}

.fi-ta-empty-state-icon-ctn {
    width: 60px !important;
    height: 60px !important;
    background: var(--kb-chip-lavender) !important;
}

.fi-ta-empty-state-icon-ctn .fi-ta-empty-state-icon {
    width: 26px !important;
    height: 26px !important;
    color: var(--kb-link) !important;
}

.fi-ta-empty-state-heading {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--kb-text) !important;
}

.fi-ta-empty-state-description {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--kb-muted) !important;
}

/* Outlined buttons: lavender outline pill */
.fi-btn.fi-btn-outlined,
.fi-btn.fi-color-gray {
    --tw-ring-color: var(--kb-outline) !important;
    color: var(--kb-link) !important;
}

/* Forms (Nuevo pase, Perfil, Reservas): labels, fields, radios as chips */
.fi-fo-field-wrp-label span,
.fi-fo-field-wrp-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500 !important;
    color: var(--kb-text);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: var(--kb-muted) !important;
}

html:not(.dark) .fi-input-wrp {
    --tw-ring-color: var(--kb-border) !important;
    min-height: 44px;
}

html:not(.dark) .fi-input-wrp:focus-within {
    --tw-ring-color: var(--kb-button) !important;
}

.fi-fo-field-wrp-error-message {
    color: #C2410C !important;
}

html:not(.dark) .fi-fo-field-wrp:has(.fi-fo-field-wrp-error-message) .fi-input-wrp {
    --tw-ring-color: #EC754D !important;
}

/* Radio groups render as selectable chips (Figma "Chip seleccionable") */
.fi-fo-radio:not(:has(p)) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
}

.fi-fo-radio:not(:has(p)) > div,
.fi-fo-radio:not(:has(p)) > label {
    margin: 0 !important;
}

.fi-fo-radio:not(:has(p)) label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--kb-outline);
    border-radius: 9999px;
    background: var(--kb-surface);
    color: var(--kb-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.fi-fo-radio:not(:has(p)) label:has(input:checked) {
    background: var(--kb-button);
    border-color: var(--kb-button);
    color: #FFFFFF;
}

.fi-fo-radio:not(:has(p)) label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fi-fo-radio:not(:has(p)) label:has(input:checked)::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Radios with descriptions (visit type): selectable cards */
.fi-fo-radio:has(p) > div {
    padding: 14px 16px;
    border: 1px solid var(--kb-border);
    border-radius: 16px;
    background: var(--kb-surface);
}

.fi-fo-radio:has(p) > div:has(input:checked) {
    border-color: var(--kb-button);
    background: color-mix(in srgb, var(--kb-soft) 45%, var(--kb-surface));
}

/* Wizard (Nuevo pase): Figma "Pasos" stepper */
html:not(.dark) .fi-fo-wizard {
    border-radius: 24px !important;
    box-shadow: var(--kb-shadow-card) !important;
    --tw-ring-color: transparent !important;
}

.fi-fo-wizard-header {
    border-color: var(--kb-border) !important;
}

.fi-fo-wizard-header-step-icon-ctn {
    border-radius: 9999px !important;
}

.fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-icon-ctn,
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn {
    background: var(--kb-button) !important;
    border-color: var(--kb-button) !important;
    color: #FFFFFF !important;
}

.fi-fo-wizard-header-step-label {
    font-weight: 600 !important;
}

/* Section headings inside forms and infolists */
.fi-section-header-heading {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: var(--kb-text);
}

/* Pagination */
.fi-pagination-item-button {
    border-radius: 9999px !important;
}

html:not(.dark) .fi-pagination-items {
    --tw-ring-color: var(--kb-border) !important;
    border-radius: 9999px !important;
}

html:not(.dark) .fi-pagination-item.fi-active .fi-pagination-item-button {
    background: var(--kb-soft) !important;
    color: var(--kb-link) !important;
}

/* Inline footnote under tables (Figma RW-05) */
.kb-footnote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

.kb-footnote svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--kb-link);
}

/* Payments hero (Figma RW-18 / RW-22) */
.kb-balance {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .kb-balance {
        grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
        align-items: stretch;
    }
}

.kb-balance__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 210px;
    padding: 24px;
    border-radius: 20px;
    background: var(--kb-sidebar);
    color: #FFFFFF;
    box-shadow: var(--kb-shadow-card);
}

.kb-balance__label {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    opacity: 0.85;
}

.kb-balance__amount {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kb-balance__detail {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    opacity: 0.85;
}

.kb-balance__hero .kb-btn {
    margin-top: auto;
}

.kb-balance__ok {
    display: flex;
}

/* Reservations zones (Figma RW-24) */
.kb-zones {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kb-zones__title {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-zones__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .kb-zones__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kb-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    border-radius: 20px;
}

.kb-zone__top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.kb-zone .kb-btn {
    margin-top: 8px;
}

.kb-zone__desc {
    color: var(--kb-muted);
}

/* Table headings (Estado de cuenta, Mis reservas) */
.fi-ta-header-heading {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: var(--kb-text);
}

/* Row actions read as indigo links ("Ver pase", "Cancelar reserva"), Figma RW-05/RW-29 */
.fi-ta-actions .fi-link,
.fi-ta-actions .fi-link .fi-link-label,
.fi-ta-actions a.fi-link span {
    color: var(--kb-link) !important;
    font-weight: 600 !important;
}

/* Wizard: number inside the active/completed step stays white */
.fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-icon-ctn *,
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn * {
    color: #FFFFFF !important;
}

/* Radio cards keep their label above them */
.fi-fo-radio:has(p) {
    gap: 8px !important;
    margin-top: 8px;
}

/* Perfil (Figma RW-32) */
.kb-profile__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1024px) {
    .kb-profile__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kb-profile__card {
    gap: 12px;
    padding: 24px;
}

.kb-profile__who {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kb-border);
}

.kb-profile__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--kb-chip-lavender);
    color: var(--kb-link);
    font-size: 18px;
    font-weight: 600;
}

.kb-profile__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--kb-button);
}

.kb-profile__mark img {
    width: 24px;
    height: 24px;
}

.kb-rows {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kb-border);
}

.kb-rows__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 20px;
}

.kb-rows__row dt {
    color: var(--kb-muted);
}

.kb-rows__row dd {
    margin: 0;
    font-weight: 500;
    color: var(--kb-text);
    text-align: end;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Nuevo pase (Figma RW-08 / RW-09): two cards, chips, error state
   ------------------------------------------------------------------ */
.kb-pass-grid {
    align-items: start;
}

html:not(.dark) .kb-pass-card.fi-section {
    border-radius: var(--kb-radius-xl) !important;
    box-shadow: var(--kb-shadow-card) !important;
    --tw-ring-color: transparent !important;
}

.kb-pass-card .fi-section-header {
    padding: 24px 24px 0 !important;
}

.kb-pass-card .fi-section-header-heading {
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: var(--kb-ink, var(--kb-text));
}

.kb-pass-card .fi-section-content-ctn {
    border-top: 0 !important;
}

.kb-pass-card .fi-section-content {
    padding: 16px 24px 24px !important;
}

.kb-pass-label-note {
    color: var(--kb-muted);
    font-weight: 400;
}

/* RW-09: required-field errors read as the Figma coral border + plain message */
.kb-pass-card .fi-fo-field-wrp-error-message {
    color: var(--kb-text) !important;
    font-size: 14px;
}

.kb-pass-card .fi-fo-field-wrp:has(.fi-fo-radio) .fi-fo-field-wrp-error-message::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19L12 4z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19L12 4z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kb-pass-error-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--kb-radius-lg);
    background: var(--kb-chip-rose);
    color: var(--kb-text);
    font-size: 14px;
    line-height: 20px;
}

.kb-pass-error-summary__icon {
    width: 18px;
    height: 18px;
    color: var(--kb-chip-rose-dot);
    flex-shrink: 0;
}

/* Selected chip keeps white text on the brand fill (labels render their text in a nested span) */
.fi-fo-radio:not(:has(p)) label:has(input:checked),
.fi-fo-radio:not(:has(p)) label:has(input:checked) * {
    color: #FFFFFF !important;
}

/* ==========================================================================
 * Administración (Figma AW-*), redesign switch on
 * ========================================================================== */

/* Sidebar groups (Comunidad, Reportes y sistema) below the Figma items */
.fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
    margin-top: 12px;
}

.fi-sidebar .fi-sidebar-group-button {
    padding-inline: 8px;
}

/* Figma "Tarjeta de métrica": label + icon tile, Dato/Grande value, caption */
.kb-metrics {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .kb-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .kb-metrics {
        grid-template-columns: repeat(var(--kb-metric-count, 4), minmax(0, 1fr));
    }
}

.kb-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'label icon'
        'value value'
        'caption caption';
    align-items: start;
    row-gap: 4px;
    min-width: 0;
    padding: 20px 20px 24px;
    border-radius: var(--kb-radius-xl);
    background: var(--kb-surface);
    box-shadow: var(--kb-shadow-card);
    color: var(--kb-text);
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

a.kb-metric:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--kb-sidebar) 14%, transparent);
}

a.kb-metric:focus-visible {
    outline: 2px solid var(--kb-primary);
    outline-offset: 2px;
}

.kb-metric__label {
    grid-area: label;
    padding-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

.kb-metric__icon {
    grid-area: icon;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.kb-metric__icon svg {
    width: 18px;
    height: 18px;
}

.kb-metric__value {
    grid-area: value;
    margin-top: 12px;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kb-text);
    white-space: nowrap;
}

@media (min-width: 1536px) {
    .kb-metric__value {
        font-size: 40px;
        line-height: 48px;
    }
}

.kb-metric__caption {
    grid-area: caption;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

.kb-admin-home .kb-home__lists {
    margin-top: 0;
}

.kb-admin-home .kb-table td {
    white-space: normal;
}

/* Live access cards (admin Accesos, Portería): light cards in the Figma language */
.guard-access-card,
.guard-access-empty {
    background: var(--kb-surface) !important;
    border: 1px solid var(--kb-border) !important;
    border-radius: var(--kb-radius-xl) !important;
    box-shadow: var(--kb-shadow-card) !important;
    color: var(--kb-text) !important;
}

.guard-access-card--entry { border-top: 3px solid var(--kb-chip-lime-dot) !important; }
.guard-access-card--exit { border-top: 3px solid var(--kb-chip-blue-dot) !important; }
.guard-access-card--biometric { border-top: 3px solid var(--kb-chip-lavender-dot) !important; }

.guard-access-title,
.guard-access-identifier,
.guard-access-direction__value,
.guard-access-detail__value,
.guard-access-detail--resident .guard-access-detail__value,
.guard-access-time strong {
    color: var(--kb-text) !important;
}

.guard-access-label,
.guard-access-point,
.guard-access-time,
.guard-access-context-chip strong,
.guard-access-image__placeholder {
    color: var(--kb-muted) !important;
}

.guard-access-plate-row,
.guard-access-detail,
.guard-access-context-chip {
    background: var(--kb-background) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text) !important;
}

.guard-access-image,
.guard-access-media-frame {
    background: var(--kb-background) !important;
    border-color: var(--kb-border) !important;
}

.guard-access-new { color: var(--kb-ink) !important; background: var(--kb-chip-blue) !important; border-color: transparent !important; }
.guard-access-badge--success { color: var(--kb-ink) !important; background: var(--kb-chip-lime) !important; border-color: transparent !important; }
.guard-access-badge--warning { color: var(--kb-ink) !important; background: var(--kb-chip-yellow) !important; border-color: transparent !important; }
.guard-access-badge--danger { color: var(--kb-ink) !important; background: var(--kb-chip-rose) !important; border-color: transparent !important; }

/* Admin Accesos (Figma AW-06): filters as selectable chips instead of underline tabs */
html:not(.dark) .fi-resource-access-events .fi-tabs {
    border-bottom: 0;
    gap: 8px !important;
}

.fi-resource-access-events .fi-tabs .fi-tabs-item {
    height: 36px;
    padding: 0 16px !important;
    margin-bottom: 0;
    border: 1px solid var(--kb-outline) !important;
    border-radius: var(--kb-radius-pill) !important;
    background: var(--kb-surface) !important;
}

.fi-resource-access-events .fi-tabs .fi-tabs-item .fi-tabs-item-label {
    color: var(--kb-text) !important;
    font-weight: 500;
}

.fi-resource-access-events .fi-tabs .fi-tabs-item.fi-active {
    border-color: var(--kb-button) !important;
    background: var(--kb-button) !important;
}

.fi-resource-access-events .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: #fff !important;
}

.fi-resource-access-events .fi-tabs .fi-tabs-item.fi-active::before {
    content: '';
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background: currentColor;
    color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer widgets (live access cards under the log) keep the page rhythm */
.fi-page-footer-widgets {
    margin-top: 8px;
}

/* Row actions as indigo links for every color (Figma AW-12 "Entregar", AW-19 "Aprobar / Rechazar") */
.fi-ta-actions .fi-link > span,
.fi-ta-actions .fi-link .fi-link-icon {
    color: var(--kb-link) !important;
}

.fi-ta-actions .fi-link > span {
    font-weight: 600 !important;
}

/* Figma AW-15 "Cartera por edad" + "Estado por unidad" */
.kb-portfolio {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1024px) {
    .kb-portfolio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.kb-aging {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-aging__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

.kb-aging__label { color: var(--kb-text); }

.kb-aging__amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kb-text);
}

.kb-aging__track {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: var(--kb-radius-pill);
    background: var(--kb-soft);
    overflow: hidden;
}

.kb-aging__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--kb-button);
}

.kb-aging__bar--warning { background: var(--kb-chip-yellow-dot); }
.kb-aging__bar--danger { background: var(--kb-chip-rose-dot); }

/* Figma AW-26 "Equipo": initials avatar in a lavender circle */
.kb-team .kb-notice {
    cursor: default;
}

.kb-team__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--kb-chip-lavender);
    color: var(--kb-link);
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .kb-team {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* === KINO v1 Visitante, Contratista, Superadmin === */
/* Visitante · Inicio: hero card with the current authorization, list card below. */
.kb-visitor-home .fi-page > section,
.fi-page.kb-visitor-home > section {
    max-width: 1096px;
}

.kb-visitor-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kb-visitor-hero .kb-card__title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.kb-visitor-hero .kb-chip {
    margin-top: 16px;
}

/* Superadministración: operational pages (logs, queues, reports) built with plain Tailwind
   cards read as KINO cards; dark log consoles keep their terminal look. */
.fi-panel-super-admin .fi-page .bg-white.rounded-lg,
.fi-panel-super-admin .fi-page .bg-white.rounded-md {
    border-radius: var(--kb-radius-xl) !important;
    border-color: var(--kb-border) !important;
    box-shadow: var(--kb-shadow-card) !important;
}

.fi-panel-super-admin .fi-page .border-gray-200,
.fi-panel-super-admin .fi-page .border-gray-300 {
    border-color: var(--kb-border) !important;
}

.fi-panel-super-admin .fi-wi-stats-overview-stat-value {
    font-weight: 600;
    color: var(--kb-ink);
}
/* === KINO v1 Portería === */
/* Figma PW-* (Portería web, 1280 x 800): 48 px buttons, two cards on Validar, result banners. */
.kb-guard .kb-btn {
    height: 48px;
}

.kb-guard .kb-btn--sm {
    height: 40px;
}

.kb-guard .kb-btn--block {
    width: 100%;
}

.kb-guard .kb-btn--text {
    padding-inline: 12px;
    background: transparent;
    color: var(--kb-link);
    font-weight: 600;
}

.kb-guard .kb-btn--text:hover {
    text-decoration: underline;
}

.kb-guard-validate__grid {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1024px) {
    .kb-guard-validate__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.kb-guard-card {
    padding: 20px;
    gap: 16px;
}

.kb-guard-card__body,
.kb-guard-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* PW-03 hero: Índigo noche block, white circle with the scan icon */
.kb-guard-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: 20px;
    background: var(--kb-sidebar);
    color: #fff;
    text-align: center;
}

.kb-guard-hero__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--kb-sidebar);
}

.kb-guard-hero__icon svg {
    width: 26px;
    height: 26px;
}

.kb-guard-hero__title {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}

.kb-guard-hero__text {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: rgb(255 255 255 / 0.85);
}

/* Figma "Campo": label Medium 14, 48 px box, lavender border, coral on error */
.kb-guard-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-guard-field__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--kb-text);
}

.kb-guard-field__input {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--kb-border);
    border-radius: 12px;
    background: var(--kb-surface);
    font-size: 16px;
    color: var(--kb-text);
    text-transform: uppercase;
}

.kb-guard-field__input::placeholder {
    color: var(--kb-muted);
    text-transform: none;
}

.kb-guard-field__input:focus {
    outline: none;
    border-color: var(--kb-link);
    box-shadow: 0 0 0 1px var(--kb-link);
}

.kb-guard-field__input--error,
.kb-guard-field__input--error:focus {
    border-color: var(--kb-chip-rose-dot);
    box-shadow: 0 0 0 1px var(--kb-chip-rose-dot);
}

.kb-guard-field__error {
    font-size: 12px;
    line-height: 16px;
    color: #B4232C;
}

/* PW-04 / PW-06 / PW-21 result banner (Portería/Resultado) */
.kb-guard-result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    background: var(--kb-chip-lavender);
}

.kb-guard-result--warn {
    background: var(--kb-chip-yellow);
}

.kb-guard-result--deny {
    background: var(--kb-chip-rose);
}

.kb-guard-result__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--kb-primary);
    color: #fff;
}

.kb-guard-result--warn .kb-guard-result__icon {
    background: var(--kb-chip-yellow-dot);
}

.kb-guard-result--deny .kb-guard-result__icon {
    width: 40px;
    height: 40px;
    background: var(--kb-chip-rose-dot);
}

.kb-guard-result__icon svg {
    width: 24px;
    height: 24px;
}

.kb-guard-result__title {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: var(--kb-ink);
}

.kb-guard-result--deny .kb-guard-result__title,
.kb-guard-result--warn .kb-guard-result__title {
    font-size: 20px;
    line-height: 28px;
}

.kb-guard-result__detail {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-ink);
}

/* PW-04 rows: label grey left, value SemiBold right */
.kb-guard-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.kb-guard-rows__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 22px;
}

.kb-guard-rows__row dt {
    color: var(--kb-muted);
}

.kb-guard-rows__row dd {
    margin: 0;
    font-weight: 500;
    color: var(--kb-text);
    text-align: end;
}

.kb-guard-help {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--kb-text);
}

.kb-guard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

/* PW-05 / PW-09 success card */
.kb-guard-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.kb-guard-done__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--kb-primary);
    color: #fff;
}

.kb-guard-done__icon svg {
    width: 28px;
    height: 28px;
}

.kb-guard-done__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--kb-text);
}

.kb-guard-done__text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

/* PW-02 / PW-10 / PW-15 skeleton: lavender bars with pill radius */
.kb-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-skeleton__block,
.kb-skeleton__bar {
    display: block;
    border-radius: 999px;
    background: var(--kb-soft);
    animation: kb-skeleton-pulse 1.2s ease-in-out infinite;
}

.kb-skeleton__block {
    height: 140px;
    border-radius: 20px;
}

.kb-skeleton__bar {
    height: 16px;
}

.kb-skeleton__bar--short {
    width: 60%;
}

@keyframes kb-skeleton-pulse {
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .kb-skeleton__block,
    .kb-skeleton__bar {
        animation: none;
    }
}

/* PW-20 footnote under the table */
.kb-guard-note {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--kb-muted);
}

/* Portería Filament pages (Bitácora, Paquetería, Personas, Vehículos): 48 px buttons as in PW-* */
.fi-panel-guard .fi-btn:not(.fi-btn-size-xs):not(.fi-btn-size-sm) {
    min-height: 48px;
}

.fi-panel-guard .fi-modal-footer .fi-btn {
    min-height: 48px;
}

/* Admin home: users and vehicles summary (legacy UsersOverview) */
.kb-admin-home__people {
    display: grid;
    gap: 16px;
}

/* === KINO v1 Login E1 === */
/* Sign-in brand panel: the KINO isotipo, large and in outline, behind the copy for
   every brand (only the panel color and the top logo change per brand), with a slow
   light sweep. Decorative only; animates transform alone and stays still when the
   visitor prefers reduced motion. */
.kb-auth-aside {
    overflow: hidden;
    isolation: isolate;
    background-image: linear-gradient(160deg, var(--kb-sidebar) 0%, var(--kb-sidebar) 55%, var(--kb-sidebar-active) 140%);
}

.kb-auth-aside > :not(.kb-auth-aside__pattern) {
    position: relative;
    z-index: 1;
}

.kb-auth-aside__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.kb-auth-aside__isotipo {
    position: absolute;
    left: 40%;
    top: 30%;
    width: 100%;
    aspect-ratio: 1;
    overflow: visible;
}

.kb-auth-aside__isotipo path {
    fill: none;
    stroke: #fff;
    stroke-width: 0.11;
    stroke-linejoin: round;
    stroke-opacity: 0.05;
}

.kb-auth-aside__isotipo .kb-auth-aside__isotipo-fill {
    fill: #fff;
    fill-opacity: 0.01;
    stroke: none;
}

.kb-auth-aside__isotipo--lit path {
    stroke-opacity: 0.18;
}

.kb-auth-aside__isotipo--lit .kb-auth-aside__isotipo-fill {
    fill-opacity: 0.02;
}

/* The band moves right while its content moves left by the same amount, so the lit
   copy of the isotipo stays exactly on top of the base one. */
.kb-auth-aside__sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
    animation: kb-login-sweep 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

.kb-auth-aside__sweep-in {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250%;
    animation: kb-login-sweep-in 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

@keyframes kb-login-sweep {
    0% { transform: translateX(-100%); }
    70%, 100% { transform: translateX(250%); }
}

@keyframes kb-login-sweep-in {
    0% { transform: translateX(40%); }
    70%, 100% { transform: translateX(-100%); }
}

@media (max-width: 1023px) {
    .kb-auth-aside {
        position: relative;
    }
}

@media (min-width: 1024px) {
    .kb-auth-aside__isotipo {
        left: 24%;
        top: 66%;
        width: 101%;
    }

    .kb-auth-aside__isotipo path {
        stroke-width: 0.075;
        stroke-opacity: 0.06;
    }

    .kb-auth-aside__isotipo--lit path {
        stroke-width: 0.1;
        stroke-opacity: 0.22;
    }

    .kb-auth-aside__isotipo .kb-auth-aside__isotipo-fill {
        fill-opacity: 0.01;
    }

    .kb-auth-aside__isotipo--lit .kb-auth-aside__isotipo-fill {
        fill-opacity: 0.025;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb-auth-aside__sweep,
    .kb-auth-aside__sweep-in {
        animation: none;
    }

    .kb-auth-aside__sweep {
        display: none;
    }
}

/* Live access card title (Accesos en tiempo real) */
.kb-live-access-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--kb-ink, #151320);
}

.kb-admin-home__live {
    margin-bottom: 24px;
}