/* NegocioGo — sistema global de layout de páginas */

:root {
    --app-page-max-width: 1120px;
    --app-page-max-width-wide: 1280px;
    --app-page-max-width-compact: 960px;

    --app-page-padding-x-desktop: 24px;
    --app-page-padding-x-tablet: 16px;
    --app-page-padding-x-mobile: 16px;

    --app-page-padding-top: 32px;
    --app-page-padding-bottom: 96px;

    /* Alias tokens (PageShell global) */
    --page-max-width: var(--app-page-max-width-wide);
    --page-padding-x: var(--app-page-padding-x-desktop);
    --page-padding-y: var(--app-page-padding-top);
    --page-padding-mobile-x: var(--app-page-padding-x-mobile);

    --app-section-gap: 24px;
    --app-card-gap: 18px;
    --app-header-gap: 20px;
}

@media (min-width: 1440px) {
    :root {
        --app-page-max-width: var(--app-page-max-width-wide);
    }

    .app-page-container--wide,
    .dashboard-page.app-page-container--wide,
    .product-editor-page,
    .store-profile-page {
        max-width: 1320px;
    }
}

@media (max-width: 768px) {
    :root {
        --app-page-padding-x-mobile: 16px;
        --app-page-padding-top: 18px;
        --app-page-padding-bottom: calc(1.25rem + var(--ng-bottom-nav-clearance, 56px));
    }
}

/* Shell del panel — el contenedor vive dentro de .creator-main */
.creator-app .creator-main,
.seller-app .creator-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Contenedor de página (PageShell / DashboardPageContainer) */
.app-page-container,
.dashboard-page {
    width: 100%;
    max-width: var(--app-page-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--app-page-padding-x-desktop);
    padding-right: var(--app-page-padding-x-desktop);
    padding-top: var(--app-page-padding-top);
    padding-bottom: var(--app-page-padding-bottom);
    box-sizing: border-box;
}

.app-page-container--compact {
    max-width: var(--app-page-max-width-compact);
}

.app-page-container--wide {
    max-width: var(--app-page-max-width-wide);
}

.app-page-container--fluid {
    max-width: none;
}

.app-page-container--fluid.appt-page,
.app-page-container--fluid.queue-page {
    max-width: none;
}

@media (max-width: 1024px) {
    .app-page-container {
        padding-left: var(--app-page-padding-x-tablet);
        padding-right: var(--app-page-padding-x-tablet);
    }
}

@media (max-width: 768px) {
    .app-page-container {
        padding-left: var(--app-page-padding-x-mobile);
        padding-right: var(--app-page-padding-x-mobile);
    }
}

/* Mapa — excepción documentada */
.map-page-container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Back button */
.app-back-row,
.page-back-row {
    margin-bottom: var(--app-header-gap);
}

.app-back-button,
.dash-back-btn,
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    font-family: inherit;
}

.app-back-button:hover,
.dash-back-btn:hover,
.back-button:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.app-back-button:focus-visible,
.dash-back-btn:focus-visible {
    outline: 2px solid #068C61;
    outline-offset: 2px;
}

.app-back-button__icon,
.dash-back-btn__icon {
    flex-shrink: 0;
    color: #64748b;
}

/* Page header */
.app-page-header,
.catalog-header,
.stores-header,
.stats-header,
.qr-header,
.billing-page__header,
.appt-header,
.ws-header .ws-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--app-header-gap);
    margin-bottom: var(--app-section-gap);
}

.app-page-header__main,
.catalog-header__intro,
.stores-header__intro,
.stats-header__intro {
    flex: 1 1 auto;
    min-width: 0;
}

.app-page-header h1,
.app-page-header .app-page-header__title,
.catalog-header__title,
.stores-header h1,
.stats-header h1,
.qr-header h1,
.billing-page__header h1,
.appt-header h1,
.ws-title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.125rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #0f172a;
    font-weight: 700;
}

.app-page-header p,
.app-page-header__lead,
.catalog-header__subtitle,
.stores-header__lead,
.stats-lead,
.qr-lead,
.billing-page__lead,
.appt-lead,
.ws-lead {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 1.0625rem;
    line-height: 1.45;
    max-width: 40rem;
}

.app-page-header__actions,
.catalog-header__actions,
.stores-header__actions,
.stats-header-actions,
.appt-header-actions,
.ws-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .app-page-header,
    .catalog-header,
    .stores-header,
    .stats-header,
    .qr-header,
    .billing-page__header,
    .appt-header {
        display: block;
        margin-bottom: 18px;
    }

    .app-page-header h1,
    .catalog-header__title,
    .stores-header h1,
    .stats-header h1,
    .qr-header h1,
    .billing-page__header h1,
    .appt-header h1 {
        font-size: 1.5rem;
    }

    .app-page-header p,
    .catalog-header__subtitle,
    .stores-header__lead,
    .stats-lead,
    .qr-lead,
    .billing-page__lead,
    .appt-lead {
        font-size: 0.9375rem;
    }

    .app-page-header__actions,
    .catalog-header__actions,
    .stores-header__actions,
    .stats-header-actions,
    .appt-header-actions {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .appt-header-actions .queue-toggle-form,
    .appt-header-actions > a,
    .appt-header-actions .queue-toggle-form button {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .catalog-header__actions .catalog-btn--primary,
    .stores-header__actions .stores-btn--primary {
        flex: 1 1 100%;
    }
}

/* Cards */
.app-card {
    background: var(--ng-surface, #fff);
    border: 1px solid var(--ng-border, #e5e7eb);
    border-radius: var(--radius-2xl, 22px);
    box-shadow: var(--shadow-card, 0 12px 32px rgba(15, 23, 42, 0.045));
}

.app-card-padding {
    padding: 22px;
}

.app-card + .app-card {
    margin-top: var(--app-card-gap);
}

.app-section-stack {
    display: flex;
    flex-direction: column;
    gap: var(--app-section-gap);
}

/* Grids */
.app-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--app-card-gap);
}

.app-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--app-card-gap);
}

.app-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--app-card-gap);
}

@media (max-width: 900px) {
    .app-grid-2,
    .app-grid-3,
    .app-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Aliases legacy — páginas que aún usan clases antiguas sin app-page-container */
.dash-home,
.catalog-page,
.catalog-container,
.stores-page,
.stats-page,
.qr-page,
.mentor-page,
.appt-page,
.ws-page,
.store-profile-page {
    width: 100%;
    max-width: var(--app-page-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--app-page-padding-x-desktop);
    padding-right: var(--app-page-padding-x-desktop);
    padding-top: var(--app-page-padding-top);
    padding-bottom: var(--app-page-padding-bottom);
    box-sizing: border-box;
}

.account-container.app-page-container--compact {
    max-width: var(--app-page-max-width-compact);
}

.store-profile-page,
.product-editor-page {
    max-width: var(--app-page-max-width-wide);
}

@media (max-width: 1024px) {
    .dash-home,
    .catalog-page,
    .catalog-container,
    .stores-page,
    .stats-page,
    .qr-page,
    .mentor-page,
    .appt-page,
    .ws-page,
    .store-profile-page {
        padding-left: var(--app-page-padding-x-tablet);
        padding-right: var(--app-page-padding-x-tablet);
    }
}

@media (max-width: 768px) {
    .dash-home,
    .catalog-page,
    .catalog-container,
    .stores-page,
    .stats-page,
    .qr-page,
    .mentor-page,
    .appt-page,
    .ws-page,
    .store-profile-page {
        padding-left: var(--app-page-padding-x-mobile);
        padding-right: var(--app-page-padding-x-mobile);
        padding-bottom: var(--app-page-padding-bottom);
    }
}

/* Evitar doble padding solo si hay contenedor anidado */
.app-page-container > .dash-home,
.app-page-container > .catalog-page,
.app-page-container > .qr-page {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-width: none;
    margin: 0;
}

.app-page-container.app-page-container--fluid,
.app-page-container.app-page-container--fluid.appt-page {
    max-width: none;
}