/* ==========================================================
   COMPRASAPP · SQUARE OPERATIONAL DENSITY SYSTEM V1
   Global visual language:
   - Square clone style
   - silent UI
   - neutral surfaces
   - low color usage
   - operational density
   - no Bootstrap/card theme feeling
   ========================================================== */

:root{
    --sq-bg:#f7f7f5;
    --sq-surface:#ffffff;
    --sq-surface-subtle:#f3f3f1;
    --sq-surface-hover:#f1f1ef;

    --sq-text:#171717;
    --sq-muted:#6b7075;
    --sq-faint:#8a8f94;

    --sq-border:rgba(0,0,0,.085);
    --sq-border-soft:rgba(0,0,0,.055);
    --sq-border-strong:rgba(0,0,0,.14);

    --sq-radius-xs:8px;
    --sq-radius-sm:10px;
    --sq-radius-md:12px;
    --sq-radius-lg:14px;
    --sq-radius-xl:18px;
    --sq-radius-pill:999px;

    --sq-shadow-subtle:0 1px 2px rgba(0,0,0,.035);
    --sq-shadow-card:0 1px 2px rgba(0,0,0,.035),0 6px 16px rgba(0,0,0,.04);
    --sq-shadow-float:0 12px 34px rgba(0,0,0,.15);

    --sq-control-height:40px;
    --sq-control-height-sm:34px;
}

/* Base global */
html body{
    background:var(--sq-bg)!important;
    color:var(--sq-text)!important;
}

/* Neutralizar exceso de cajas */
.card,
.panel,
.section,
.upload-zone-card,
.upload-mini-card,
.mobile-table-card,
.documents-mobile-card,
.po-card,
.table-card,
.purchase-card,
[class*="card"]{
    background:var(--sq-surface)!important;
    border:1px solid var(--sq-border)!important;
    border-radius:var(--sq-radius-lg)!important;
    box-shadow:var(--sq-shadow-card)!important;
}

/* Menos "widget dentro de widget" */
.card .card,
.panel .card,
section .card,
.upload-zone-card .upload-mini-card,
[class*="card"] [class*="card"]{
    box-shadow:none!important;
    border-color:var(--sq-border-soft)!important;
}

/* Cabeceras silenciosas */
.page-header,
.section-header,
.card-header,
.panel-header,
.upload-zone-header{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

.page-header h1,
.section-header h1,
.section-header h2,
.card-header h2,
h1,h2,h3{
    color:var(--sq-text)!important;
    letter-spacing:-.045em!important;
    font-weight:950!important;
}

.page-header p,
.section-header p,
.card-subtitle,
.text-muted,
.muted,
small{
    color:var(--sq-muted)!important;
    opacity:1!important;
}

/* Formularios Square-like */
input,
select,
textarea,
input[type="file"]{
    background:#fff!important;
    color:var(--sq-text)!important;
    border:1px solid var(--sq-border-strong)!important;
    border-radius:var(--sq-radius-md)!important;
    box-shadow:none!important;
    min-height:var(--sq-control-height)!important;
}

input:focus,
select:focus,
textarea:focus{
    outline:0!important;
    border-color:#111!important;
    box-shadow:0 0 0 3px rgba(0,0,0,.055)!important;
}

label{
    color:var(--sq-text)!important;
    font-weight:850!important;
}

/* Botones: color solo para CTA principal */
button,
.button,
.btn,
a.button,
input[type="submit"]{
    min-height:var(--sq-control-height-sm)!important;
    border-radius:var(--sq-radius-sm)!important;
    box-shadow:none!important;
    font-weight:850!important;
    letter-spacing:-.015em!important;
}

button:not(.secondary):not(.danger),
.button:not(.secondary):not(.danger),
.btn-primary,
a.button:not(.secondary):not(.danger),
input[type="submit"]:not(.secondary):not(.danger){
    background:#111!important;
    color:#fff!important;
    border:1px solid #111!important;
}

button.secondary,
.button.secondary,
.btn-secondary,
a.button.secondary{
    background:#fff!important;
    color:var(--sq-text)!important;
    border:1px solid var(--sq-border)!important;
}

button.danger,
.button.danger,
a.button.danger,
form[action*="destroy"] button,
form[action*="delete"] button{
    background:#fff!important;
    color:#8a3030!important;
    border:1px solid #ead6d6!important;
}

/* Chips / filtros / badges */
.chip,
.badge,
.status,
.filter-chip,
.document-filter-chip,
.po-filter-button,
[class*="badge"],
[class*="chip"]{
    background:#fff!important;
    color:#303236!important;
    border:1px solid var(--sq-border)!important;
    box-shadow:none!important;
}

.chip.active,
.chip.is-active,
.badge.active,
.filter-chip.active,
.filter-chip.is-active,
.document-filter-chip.active,
.document-filter-chip.is-active,
.po-filter-button.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

/* Estados: silenciosos */
[class*="status"],
.status,
.badge{
    background:#f1f1ee!important;
    color:#303236!important;
    border-color:var(--sq-border)!important;
}

[class*="failed"],
[class*="error"],
[class*="danger"]{
    background:#fff4f2!important;
    color:#8a3030!important;
    border-color:#ead6d6!important;
}

[class*="pending"],
[class*="review"],
[class*="warning"]{
    background:#f5f2ea!important;
    color:#5f4824!important;
    border-color:#e7ddc8!important;
}

/* Tablas */
table{
    background:#fff!important;
    border:1px solid var(--sq-border)!important;
    border-radius:var(--sq-radius-lg)!important;
    box-shadow:none!important;
}

th{
    background:var(--sq-surface-subtle)!important;
    color:#4d5258!important;
    border-bottom:1px solid var(--sq-border)!important;
    font-weight:900!important;
}

td{
    color:var(--sq-text)!important;
    border-bottom:1px solid var(--sq-border-soft)!important;
}

/* Mobile operational density */
@media(max-width:820px){

    body{
        background:var(--sq-bg)!important;
    }

    .card,
    .panel,
    .section,
    .upload-zone-card,
    .upload-mini-card,
    .mobile-table-card,
    .documents-mobile-card,
    .po-card,
    .table-card,
    .purchase-card,
    [class*="card"]{
        border-radius:14px!important;
        box-shadow:var(--sq-shadow-subtle)!important;
    }

    .mobile-table-card__label,
    .po-label,
    .ca-label,
    .op-label,
    .meta-label,
    .card-label,
    [class*="label"]{
        color:#4d5258!important;
        opacity:1!important;
        font-size:10px!important;
        font-weight:900!important;
        letter-spacing:.13em!important;
        text-transform:uppercase!important;
    }

    .mobile-table-card__value,
    .po-value,
    .ca-value,
    .op-value,
    .meta-value,
    .card-value,
    [class*="value"]{
        color:#151719!important;
        opacity:1!important;
        font-weight:850!important;
    }

    .actions,
    [class*="actions"]{
        gap:6px!important;
    }

    .actions .button,
    .actions button,
    [class*="actions"] .button,
    [class*="actions"] button{
        min-height:32px!important;
        border-radius:9px!important;
        font-size:12px!important;
    }
}

/* Purchase invoices: eliminar aspecto CRUD/caja duplicada */
.purchase-invoices-page .documents-mobile-list{
    gap:8px!important;
}

.purchase-invoices-page .documents-mobile-card{
    border-radius:13px!important;
    box-shadow:var(--sq-shadow-subtle)!important;
    border-color:var(--sq-border-soft)!important;
}

.purchase-invoices-page .documents-mobile-status{
    background:#f1f1ee!important;
    color:#303236!important;
    border:1px solid var(--sq-border)!important;
    box-shadow:none!important;
}

/* Uploads: más Square, menos tarjeta pesada */
.purchase-invoices-page .upload-zone-card{
    box-shadow:var(--sq-shadow-subtle)!important;
}

.purchase-invoices-page .upload-mini-card{
    box-shadow:none!important;
    border-color:var(--sq-border-soft)!important;
}

/* Purchase orders: mantener densidad pero menos decorado */
.purchase-orders-index .po-card{
    box-shadow:var(--sq-shadow-subtle)!important;
    border-color:var(--sq-border-soft)!important;
}

.purchase-orders-index .po-status{
    background:#f1f1ee!important;
    color:#303236!important;
    border-color:var(--sq-border)!important;
}

/* Bottom nav sobria */
.mobile-bottom-nav,
.role-aware-bottom-nav{
    background:rgba(255,255,255,.96)!important;
    border:1px solid var(--sq-border)!important;
    box-shadow:0 -1px 2px rgba(0,0,0,.03),0 -8px 22px rgba(0,0,0,.075)!important;
}

.mobile-bottom-nav a.is-active,
.role-aware-bottom-nav a.is-active,
.mobile-bottom-nav a.mobile-main-action,
.role-aware-bottom-nav a.mobile-main-action{
    background:#111!important;
    color:#fff!important;
    box-shadow:none!important;
}

/* SQUARE_GLOBAL_OWNERSHIP_CLEANUP_V1_START */

/*
 * Esta capa manda sobre estilos legacy visuales.
 * Los CSS específicos de pantalla deben conservar layout, no estética global.
 */

html body{
    background:var(--sq-bg,#f7f7f5)!important;
    color:var(--sq-text,#171717)!important;
}

/* Neutraliza halos/tintes heredados */
html body .card,
html body .panel,
html body .upload-zone-card,
html body .upload-mini-card,
html body .mobile-table-card,
html body .documents-mobile-card,
html body .po-card{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
}

/* Acciones globales sobrias */
html body .button:not(.secondary):not(.danger),
html body button:not(.secondary):not(.danger),
html body a.button:not(.secondary):not(.danger){
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
    box-shadow:none!important;
}

html body .button.secondary,
html body button.secondary,
html body a.button.secondary{
    background:#fff!important;
    color:#171717!important;
    border:1px solid rgba(0,0,0,.10)!important;
    box-shadow:none!important;
}

html body .button.danger,
html body button.danger,
html body a.button.danger,
html body form[action*="destroy"] button{
    background:#fff!important;
    color:#8a3030!important;
    border:1px solid #ead6d6!important;
    box-shadow:none!important;
}

/* Filtros/chips/badges sobrios */
html body .chip,
html body .badge,
html body .status,
html body .document-filter-chip,
html body .po-filter-button,
html body [class*="badge"],
html body [class*="chip"]{
    background:#fff!important;
    color:#303236!important;
    border:1px solid rgba(0,0,0,.085)!important;
    box-shadow:none!important;
}

html body .chip.active,
html body .chip.is-active,
html body .document-filter-chip.active,
html body .document-filter-chip.is-active,
html body .po-filter-button.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

html body .mobile-bottom-nav a.is-active,
html body .role-aware-bottom-nav a.is-active,
html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action{
    background:#111!important;
    color:#fff!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.is-active span,
html body .role-aware-bottom-nav a.is-active span,
html body .mobile-bottom-nav a.mobile-main-action span,
html body .role-aware-bottom-nav a.mobile-main-action span{
    color:#fff!important;
    background:transparent!important;
}

/* SQUARE_GLOBAL_OWNERSHIP_CLEANUP_V1_END */

/* PURCHASE_ORDERS_FORM_SQUARE_GLOBAL_V1_START */

/*
 * Crear/editar pedido: layout específico permitido,
 * estética siempre Square global.
 */

.purchase-articles-zone,
.purchase-quick-helper,
.purchase-advanced-details,
.purchase-line-advanced,
.purchase-line-manual-details,
.delivery-date-card,
.line-card,
.totals-card{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
    border-radius:14px!important;
}

.purchase-quick-helper{
    color:#3f4348!important;
}

.purchase-quick-helper strong{
    color:#111!important;
}

.purchase-articles-zone{
    background:#f7f7f5!important;
    border-color:rgba(0,0,0,.055)!important;
    box-shadow:none!important;
}

.purchase-articles-zone .section-header{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

.purchase-item-search,
.line-quantity,
.line-unit-price,
.line-notes,
.delivery-date-card input,
.delivery-date-card select,
.delivery-date-card textarea{
    background:#fff!important;
    color:#151515!important;
    border:1px solid rgba(0,0,0,.12)!important;
    box-shadow:none!important;
}

.purchase-item-search:focus,
.line-quantity:focus,
.line-unit-price:focus,
.line-notes:focus,
.delivery-date-card input:focus{
    border-color:#111!important;
    box-shadow:0 0 0 3px rgba(0,0,0,.055)!important;
}

.line-card.compact-row-active{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
}

.line-card.compact-row-active .purchase-item-search{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.08)!important;
}

.compact-item-display-name{
    color:#111!important;
    font-weight:900!important;
}

.compact-item-display-supplier{
    color:#6b7075!important;
}

.line-card.compact-row-active .line-quantity{
    background:#f7f7f5!important;
    color:#111!important;
    border:1px solid rgba(0,0,0,.085)!important;
}

.line-card.compact-row-active .remove-line-button{
    background:#fff!important;
    color:#8a3030!important;
    border:1px solid #ead6d6!important;
    box-shadow:none!important;
}

.purchase-line-manual-details summary,
.purchase-line-advanced summary,
.purchase-advanced-details summary{
    color:#151515!important;
    font-weight:900!important;
}

.grouped-new-article-help,
.new-article-supplier-inline small{
    color:#686d72!important;
}

@media(max-width:820px){
    .purchase-articles-zone{
        margin:12px 0!important;
        padding:10px!important;
        border-radius:14px!important;
    }

    .line-card:not(.compact-row-active){
        padding:12px!important;
        border-radius:14px!important;
    }

    .line-card.compact-row-active{
        border-radius:12px!important;
        padding:7px!important;
        gap:5px!important;
    }

    .delivery-date-card{
        margin:12px 0!important;
        padding:10px!important;
        border-radius:14px!important;
    }
}

/* Elimina sensación Apple/glass/Visual Basic en superficies */
html body .card,
html body .panel,
html body .section,
html body .surface,
html body .upload-zone-card,
html body .upload-mini-card,
html body .documents-mobile-card,
html body .mobile-table-card,
html body .po-card,
html body .line-card,
html body .purchase-articles-zone,
html body .purchase-quick-helper,
html body .purchase-advanced-details,
html body .purchase-line-advanced,
html body .purchase-line-manual-details,
html body .delivery-date-card,
html body .totals-card{
    background:#fff!important;
    background-image:none!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

/* Inputs limpios */
html body input,
html body select,
html body textarea{
    background:#fff!important;
    background-image:none!important;
    color:#151515!important;
    border:1px solid rgba(0,0,0,.12)!important;
    box-shadow:none!important;
}

html body input:focus,
html body select:focus,
html body textarea:focus{
    border-color:#111!important;
    box-shadow:0 0 0 3px rgba(0,0,0,.055)!important;
    outline:0!important;
}

/* Botones sobrios tipo Square */
html body button,
html body .button,
html body .btn,
html body a.button,
html body input[type="submit"]{
    background-image:none!important;
    box-shadow:none!important;
    text-shadow:none!important;
}

html body button:not(.secondary):not(.danger),
html body .button:not(.secondary):not(.danger),
html body .btn-primary,
html body a.button:not(.secondary):not(.danger),
html body input[type="submit"]:not(.secondary):not(.danger){
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

html body button.secondary,
html body .button.secondary,
html body .btn-secondary,
html body a.button.secondary{
    background:#fff!important;
    color:#151515!important;
    border:1px solid rgba(0,0,0,.10)!important;
}

html body button.danger,
html body .button.danger,
html body a.button.danger,
html body form[action*="destroy"] button,
html body form[action*="delete"] button{
    background:#fff!important;
    color:#8a3030!important;
    border:1px solid #ead6d6!important;
}

/* Chips, filtros y badges */
html body .chip,
html body .badge,
html body .status,
html body .filter-chip,
html body .document-filter-chip,
html body .po-filter-button,
html body [class*="badge"],
html body [class*="chip"]{
    background:#fff!important;
    background-image:none!important;
    color:#303236!important;
    border:1px solid rgba(0,0,0,.085)!important;
    box-shadow:none!important;
}

html body .chip.active,
html body .chip.is-active,
html body .filter-chip.active,
html body .filter-chip.is-active,
html body .document-filter-chip.active,
html body .document-filter-chip.is-active,
html body .po-filter-button.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

/* Bottom nav: estructura sí, estética Square */
html body .mobile-bottom-nav,
html body .role-aware-bottom-nav{
    background:rgba(255,255,255,.97)!important;
    background-image:none!important;
    border:1px solid rgba(0,0,0,.085)!important;
    box-shadow:0 -1px 2px rgba(0,0,0,.03),0 -8px 22px rgba(0,0,0,.075)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
}

html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a{
    background:transparent!important;
    background-image:none!important;
    color:#686d72!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.is-active,
html body .role-aware-bottom-nav a.is-active,
html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav a.mobile-main-action.is-active,
html body .role-aware-bottom-nav a.mobile-main-action.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.is-active *,
html body .role-aware-bottom-nav a.is-active *,
html body .mobile-bottom-nav a.mobile-main-action *,
html body .role-aware-bottom-nav a.mobile-main-action *{
    color:#fff!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* Header shell más limpio */
html body .store-shell-topbar{
    background:#050505!important;
    background-image:none!important;
    box-shadow:none!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
}

/* Tablas sobrias */
html body table{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:none!important;
}

html body th{
    background:#f3f3f1!important;
    color:#4d5258!important;
    border-bottom:1px solid rgba(0,0,0,.085)!important;
}

html body td{
    color:#151515!important;
    border-bottom:1px solid rgba(0,0,0,.055)!important;
}

/* Mobile: menos look tarjeta pesada */
@media(max-width:820px){
    html body .card,
    html body .panel,
    html body .upload-zone-card,
    html body .upload-mini-card,
    html body .documents-mobile-card,
    html body .mobile-table-card,
    html body .po-card,
    html body .line-card{
        border-radius:13px!important;
        box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
    }

    html body .page-header h1,
    html body h1{
        letter-spacing:-.055em!important;
    }

    html body .page-header p,
    html body .section-header p,
    html body .muted,
    html body .text-muted,
    html body small{
        color:#686d72!important;
    }
}

html body main,
html body .store-shell-main,
html body .app-shell,
html body .content,
html body .page-content{
    background:#f7f7f5!important;
    background-image:none!important;
}

/* ---------- HEADER / SHELL ---------- */

html body .store-shell-topbar{
    position:sticky!important;
    top:0!important;
    z-index:9000!important;
    min-height:96px!important;
    padding:22px 28px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:18px!important;
    background:#050505!important;
    background-image:none!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    overflow:visible!important;
}

html body .store-shell-brand{
    min-width:0!important;
    color:#fff!important;
    text-decoration:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    opacity:.96!important;
}

html body .store-shell-brand-title{
    color:#fff!important;
    font-size:30px!important;
    line-height:.92!important;
    font-weight:950!important;
    letter-spacing:-.065em!important;
    opacity:1!important;
}

html body .store-shell-brand-subtitle{
    margin-top:10px!important;
    color:rgba(255,255,255,.50)!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.34em!important;
}

html body .store-shell-actions{
    min-width:0!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    overflow:visible!important;
}

/* ---------- BOTTOM NAV FINAL ---------- */

html body .mobile-bottom-nav,
html body .role-aware-bottom-nav{
    background:rgba(255,255,255,.98)!important;
    background-image:none!important;
    border:1px solid rgba(0,0,0,.085)!important;
    box-shadow:0 -1px 2px rgba(0,0,0,.03),0 -8px 22px rgba(0,0,0,.075)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
}

html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a{
    background:transparent!important;
    background-image:none!important;
    color:#8a8f95!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.is-active,
html body .role-aware-bottom-nav a.is-active{
    background:#f1f1ee!important;
    color:#111!important;
    border-color:transparent!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav a.mobile-main-action.is-active,
html body .role-aware-bottom-nav a.mobile-main-action.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
    box-shadow:none!important;
}

html body .mobile-bottom-nav a.mobile-main-action *,
html body .role-aware-bottom-nav a.mobile-main-action *,
html body .mobile-bottom-nav a.mobile-main-action.is-active *,
html body .role-aware-bottom-nav a.mobile-main-action.is-active *{
    color:#fff!important;
}

/* ---------- APP THEME APPEARANCE SCREEN ---------- */

html body .appearance-page .card,
html body .appearance-page .panel,
html body .appearance-option{
    background:#fff!important;
    background-image:none!important;
    border:1px solid rgba(0,0,0,.075)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.035)!important;
}

html body .appearance-option.is-active,
html body .appearance-option.active{
    border-color:#111!important;
}

/* ---------- MOBILE HEADER ---------- */

@media(max-width:820px){
    html body .store-shell-topbar{
        min-height:88px!important;
        padding:18px 24px!important;
        grid-template-columns:minmax(0,1fr) minmax(156px,204px)!important;
        gap:12px!important;
    }

    html body .store-shell-brand-title{
        font-size:25px!important;
        letter-spacing:-.065em!important;
    }

    html body .store-shell-brand-subtitle{
        margin-top:9px!important;
        font-size:9.5px!important;
        letter-spacing:.30em!important;
    }

        width:100%!important;
        height:46px!important;
        grid-template-columns:28px minmax(0,1fr)!important;
        gap:8px!important;
        padding:5px 10px!important;
    }

        width:28px!important;
        height:28px!important;
        min-width:28px!important;
        min-height:28px!important;
    }

        font-size:12.5px!important;
    }

        font-size:7.5px!important;
        letter-spacing:.18em!important;
    }

        position:fixed!important;
        top:108px!important;
        left:16px!important;
        right:16px!important;
        width:auto!important;
        max-width:none!important;
        transform:none!important;
        z-index:2147483647!important;
    }
}

@media(max-width:390px){
    html body .store-shell-topbar{
        padding:17px 18px!important;
        grid-template-columns:minmax(0,1fr) minmax(142px,178px)!important;
        gap:10px!important;
    }

    html body .store-shell-brand-title{
        font-size:22px!important;
    }

    html body .store-shell-brand-subtitle{
        font-size:8.5px!important;
        letter-spacing:.25em!important;
    }

        height:44px!important;
        grid-template-columns:26px minmax(0,1fr)!important;
        padding:5px 8px!important;
    }

        width:26px!important;
        height:26px!important;
        min-width:26px!important;
        min-height:26px!important;
    }

        font-size:11.5px!important;
    }

        font-size:7px!important;
    }

        top:104px!important;
        left:12px!important;
        right:12px!important;
    }
}

/* SQUARE_GLOBAL_SHELL_THEME_MOBILE_FINAL_V1_END */


/* =========================================================
   COMPACT OPERATIONAL DENSITY PHASE
   ========================================================= */

:root{
    --sq-density-radius:22px;
    --sq-density-radius-sm:16px;

    --sq-density-gap:14px;
    --sq-density-gap-sm:10px;

    --sq-density-shell-height:108px;
    --sq-density-bottom-nav-height:96px;

    --sq-density-card-padding:20px;
    --sq-density-section-padding:22px;

    --sq-density-title-size:clamp(2.2rem,7vw,3.2rem);
    --sq-density-subtitle-size:1rem;
}


/* =========================================================
   HEADER / SHELL
   ========================================================= */

.operational-shell-topbar,
.app-shell-topbar,
.mobile-shell-topbar,
header.app-shell-header{
    min-height:var(--sq-density-shell-height)!important;
    padding:16px 18px!important;
    align-items:center!important;
}

.app-brand,
.app-logo,
.shell-brand{
    transform:scale(.88);
    transform-origin:left center;
}

.app-brand-subtitle,
.shell-brand-subtitle{
    letter-spacing:.22em!important;
    font-size:.72rem!important;
    opacity:.68!important;
}


/* =========================================================
   PAGE STRUCTURE
   ========================================================= */

.page-content,
.operational-page,
main{
    padding-top:18px!important;
}

.page-hero,
.page-header,
.operational-page-header{
    margin-bottom:18px!important;
}

.page-hero h1,
.page-header h1,
.operational-page-header h1{
    font-size:var(--sq-density-title-size)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    margin-bottom:12px!important;
}

.page-hero p,
.page-header p,
.operational-page-header p{
    font-size:var(--sq-density-subtitle-size)!important;
    line-height:1.2!important;
    max-width:780px!important;
    opacity:.72!important;
}


/* =========================================================
   CARDS
   ========================================================= */

.card,
.operational-card,
.purchase-card,
.invoice-card{
    border-radius:var(--sq-density-radius)!important;
    padding:var(--sq-density-card-padding)!important;
    gap:var(--sq-density-gap)!important;
}

.card h2,
.card h3,
.operational-card h2,
.operational-card h3{
    line-height:1!important;
    margin-bottom:10px!important;
}

.card p,
.operational-card p{
    line-height:1.28!important;
    opacity:.74!important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
a.btn{
    min-height:54px!important;
    border-radius:18px!important;
    padding:0 20px!important;
    font-size:1rem!important;
    font-weight:700!important;
}


/* =========================================================
   INPUTS / FORMS
   ========================================================= */

input,
select,
textarea{
    min-height:58px!important;
    border-radius:18px!important;
    padding:14px 16px!important;
    font-size:1rem!important;
}

label{
    margin-bottom:8px!important;
    font-size:.96rem!important;
    font-weight:700!important;
}


/* =========================================================
   FILTER CHIPS
   ========================================================= */

.chip,
.filter-chip,
.segment-chip{
    min-height:52px!important;
    border-radius:18px!important;
    padding:0 18px!important;
    font-size:.96rem!important;
}


/* =========================================================
   LIST / TABLE DENSITY
   ========================================================= */

table td,
table th{
    padding:12px 10px!important;
}

.purchase-order-row,
.invoice-row,
.list-row{
    min-height:72px!important;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

.bottom-nav,
.mobile-bottom-nav,
nav.bottom-nav{
    min-height:var(--sq-density-bottom-nav-height)!important;
    padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 10px)!important;
    border-radius:34px!important;
}

.bottom-nav a,
.mobile-bottom-nav a{
    min-height:74px!important;
    border-radius:24px!important;
    gap:6px!important;
}

.bottom-nav .icon,
.mobile-bottom-nav .icon{
    transform:scale(.88)!important;
}

.bottom-nav .label,
.mobile-bottom-nav .label{
    font-size:.84rem!important;
    font-weight:700!important;
}


/* =========================================================
   PURCHASE ORDERS / DOCUMENTS
   ========================================================= */

.purchase-order-card,
.purchase-invoice-card{
    padding:18px!important;
    border-radius:24px!important;
}

.purchase-order-card .amount,
.purchase-invoice-card .amount{
    font-size:2.2rem!important;
    line-height:.92!important;
}

.purchase-order-card .meta,
.purchase-invoice-card .meta{
    font-size:.84rem!important;
    letter-spacing:.18em!important;
}


/* =========================================================
   APPEARANCE SCREEN
   ========================================================= */

.appearance-option,
.theme-option{
    min-height:92px!important;
    padding:14px 18px!important;
}

.appearance-option h3,
.theme-option h3{
    font-size:1rem!important;
}

.appearance-option p,
.theme-option p{
    font-size:.9rem!important;
}


/* =========================================================
   MOBILE EXTRA COMPACT
   ========================================================= */

@media (max-width:640px){

    :root{
        --sq-density-shell-height:94px;
        --sq-density-bottom-nav-height:88px;

        --sq-density-card-padding:16px;
        --sq-density-gap:10px;

        --sq-density-title-size:clamp(2rem,8vw,2.7rem);
    }

    .page-content,
    .operational-page,
    main{
        padding-left:14px!important;
        padding-right:14px!important;
    }

    .card,
    .operational-card{
        border-radius:20px!important;
    }

    button,
    .btn{
        min-height:50px!important;
    }

    input,
    select{
        min-height:54px!important;
    }
}


/* SQUARE_PHASE1_VIEWPORT_COMPACT_START */

/*
 * Fase 1:
 * - Reducir header negro.
 * - Compactar branding.
 * - Compactar user chip.
 * - Reducir bottom nav.
 * - Ganar viewport útil sin tocar Blade ni lógica.
 */

:root{
    --sq-shell-mobile-h:76px;
    --sq-shell-desktop-h:82px;
    --sq-bottom-mobile-h:74px;
}

/* HEADER GLOBAL */
html body .store-shell-topbar{
    min-height:var(--sq-shell-desktop-h)!important;
    height:var(--sq-shell-desktop-h)!important;
    padding:12px 24px!important;
    grid-template-columns:minmax(0,1fr) minmax(180px,228px)!important;
    gap:14px!important;
    align-items:center!important;
    overflow:visible!important;
}

html body .store-shell-brand{
    min-width:0!important;
    overflow:hidden!important;
}

html body .store-shell-brand-title{
    font-size:26px!important;
    line-height:.9!important;
    letter-spacing:-.06em!important;
    white-space:nowrap!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:clip!important;
}

html body .store-shell-brand-subtitle{
    margin-top:7px!important;
    font-size:8.5px!important;
    line-height:1!important;
    letter-spacing:.28em!important;
    opacity:.55!important;
    white-space:nowrap!important;
}

/* USER CHIP CERRADO */
html body .store-shell-actions{
    max-width:228px!important;
    width:100%!important;
    justify-self:end!important;
    overflow:visible!important;
}

/* BOTTOM NAV COMPACTA */
html body .mobile-bottom-nav,
html body .role-aware-bottom-nav,
html body nav.mobile-bottom-nav.role-aware-bottom-nav{
    min-height:var(--sq-bottom-mobile-h)!important;
    height:auto!important;
    left:18px!important;
    right:18px!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;
    padding:7px 10px!important;
    border-radius:28px!important;
    gap:6px!important;
}

html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a{
    min-height:58px!important;
    height:58px!important;
    border-radius:20px!important;
    padding:6px 7px!important;
    gap:3px!important;
    font-size:11.5px!important;
}

html body .mobile-bottom-nav a span:first-child,
html body .role-aware-bottom-nav a span:first-child,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
    font-size:22px!important;
    line-height:1!important;
    transform:scale(.88)!important;
}

html body .mobile-bottom-nav a span:last-child,
html body .role-aware-bottom-nav a span:last-child,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:last-child{
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:750!important;
}

html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
    min-height:64px!important;
    height:64px!important;
    border-radius:22px!important;
    transform:translateY(-4px)!important;
}

/* COMPENSACIÓN DE CONTENIDO POR NAV MÁS BAJA */
html body main,
html body .store-shell-main,
html body .app-shell,
html body .page-content,
html body .operational-page{
    padding-bottom:108px!important;
}

/* MOBILE */
@media(max-width:820px){
    html body .store-shell-topbar{
        min-height:var(--sq-shell-mobile-h)!important;
        height:var(--sq-shell-mobile-h)!important;
        padding:10px 18px!important;
        grid-template-columns:minmax(0,1fr) minmax(148px,188px)!important;
        gap:10px!important;
    }

    html body .store-shell-brand-title{
        font-size:23px!important;
    }

    html body .store-shell-brand-subtitle{
        margin-top:6px!important;
        font-size:7.5px!important;
        letter-spacing:.24em!important;
    }

    html body .store-shell-actions,
        max-width:188px!important;
    }

        height:40px!important;
        min-height:40px!important;
        grid-template-columns:23px minmax(0,1fr)!important;
        gap:7px!important;
        padding:5px 9px!important;
    }

        width:23px!important;
        height:23px!important;
        min-width:23px!important;
        min-height:23px!important;
    }

        font-size:10.8px!important;
    }

        font-size:6.5px!important;
        letter-spacing:.16em!important;
    }

        top:88px!important;
        left:14px!important;
        right:14px!important;
        width:auto!important;
        max-width:none!important;
    }
}

@media(max-width:390px){
    html body .store-shell-topbar{
        padding:9px 14px!important;
        grid-template-columns:minmax(0,1fr) minmax(136px,168px)!important;
        gap:8px!important;
    }

    html body .store-shell-brand-title{
        font-size:21px!important;
    }

    html body .store-shell-brand-subtitle{
        font-size:7px!important;
        letter-spacing:.21em!important;
    }

    html body .store-shell-actions,
        max-width:168px!important;
    }

        height:38px!important;
        min-height:38px!important;
        grid-template-columns:22px minmax(0,1fr)!important;
        gap:6px!important;
        padding:4px 8px!important;
    }

        width:22px!important;
        height:22px!important;
        min-width:22px!important;
        min-height:22px!important;
    }

        font-size:10px!important;
    }

        font-size:6px!important;
    }

    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav{
        left:14px!important;
        right:14px!important;
        padding:6px 8px!important;
        border-radius:26px!important;
    }

    html body .mobile-bottom-nav a,
    html body .role-aware-bottom-nav a,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a{
        min-height:56px!important;
        height:56px!important;
        border-radius:18px!important;
    }

    html body .mobile-bottom-nav a.mobile-main-action,
    html body .role-aware-bottom-nav a.mobile-main-action,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
        min-height:61px!important;
        height:61px!important;
    }
}

/* SQUARE_PHASE1_VIEWPORT_COMPACT_END */

/* SQUARE_PHASE2_OPERATIONAL_VIEWPORT_DENSITY_START */

/*
 * Fase 2:
 * - Ganar viewport real en móvil.
 * - Reducir altura/peso de bottom nav.
 * - Compactar cards/listados/forms.
 * - Normalizar inputs file visualmente.
 * - Mantener Square clone style sin volver a colores invasivos.
 */

:root{
    --sq2-page-x:18px;
    --sq2-page-y:20px;
    --sq2-card-pad:18px;
    --sq2-card-gap:14px;
    --sq2-radius-card:22px;
    --sq2-radius-control:16px;
    --sq2-control-h:48px;
    --sq2-nav-h:66px;
}

/* PAGE / MAIN DENSITY */
html body main,
html body .store-shell-main,
html body .app-shell,
html body .page-content,
html body .operational-page,
html body .purchase-orders-index,
html body .purchase-invoices-page{
    padding-left:var(--sq2-page-x)!important;
    padding-right:var(--sq2-page-x)!important;
    padding-top:var(--sq2-page-y)!important;
    padding-bottom:92px!important;
}

html body .page-header,
html body .section-header,
html body .operational-page-header,
html body .purchase-orders-index > header,
html body .purchase-invoices-page > header{
    margin:0 0 16px!important;
    padding:0!important;
}

html body h1,
html body .page-header h1,
html body .section-header h1{
    font-size:clamp(36px,8.6vw,52px)!important;
    line-height:.92!important;
    letter-spacing:-.065em!important;
    margin:0 0 10px!important;
}

html body h2{
    font-size:clamp(26px,6.3vw,38px)!important;
    line-height:.96!important;
    letter-spacing:-.055em!important;
}

html body h3{
    font-size:clamp(20px,5vw,28px)!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
}

html body .page-header p,
html body .section-header p,
html body .muted,
html body .text-muted,
html body small{
    line-height:1.24!important;
}

/* CARDS */
html body .card,
html body .panel,
html body .upload-zone-card,
html body .upload-mini-card,
html body .documents-mobile-card,
html body .po-card,
html body .operational-card{
    border-radius:var(--sq2-radius-card)!important;
    padding:var(--sq2-card-pad)!important;
    margin-bottom:14px!important;
    box-shadow:
        0 1px 1px rgba(0,0,0,.035),
        0 8px 22px rgba(0,0,0,.045)!important;
}

html body .card + .card,
html body .panel + .panel,
html body .upload-mini-card + .upload-mini-card,
html body .documents-mobile-card + .documents-mobile-card,
html body .po-card + .po-card{
    margin-top:12px!important;
}

/* DASHBOARD CARDS */
html body .dashboard-card,
html body .store-card,
html body .quick-action-card{
    padding:18px!important;
    border-radius:22px!important;
}

html body .dashboard-card p,
html body .store-card p,
html body .quick-action-card p{
    margin-bottom:14px!important;
}

/* BUTTONS */
html body button,
html body .button,
html body .btn,
html body a.button,
html body a.btn,
html body input[type="submit"]{
    min-height:var(--sq2-control-h)!important;
    height:auto!important;
    padding:0 18px!important;
    border-radius:var(--sq2-radius-control)!important;
    font-size:15px!important;
    font-weight:850!important;
    letter-spacing:-.015em!important;
    box-shadow:none!important;
}

html body .button.is-primary,
html body .btn-primary,
html body button.primary,
html body a.primary{
    background:#111!important;
    color:#fff!important;
}

/* FILTERS / CHIPS */
html body .po-filters,
html body .document-filter-chips,
html body .filter-chips,
html body .chips{
    gap:9px!important;
    margin:14px 0!important;
}

html body .po-filter-button,
html body .document-filter-chip,
html body .filter-chip,
html body .chip{
    min-height:44px!important;
    height:auto!important;
    padding:0 15px!important;
    border-radius:15px!important;
    font-size:14px!important;
    font-weight:850!important;
}

/* FORMS */
html body label{
    font-size:14px!important;
    line-height:1.1!important;
    margin:0 0 7px!important;
    font-weight:850!important;
}

html body input,
html body select,
html body textarea{
    min-height:50px!important;
    border-radius:16px!important;
    padding:12px 14px!important;
    font-size:16px!important;
    line-height:1.2!important;
}

html body textarea{
    min-height:96px!important;
}

html body .form-group,
html body .field,
html body .input-group{
    margin-bottom:14px!important;
}

/* FILE INPUT CLEANUP */
html body input[type="file"]{
    width:100%!important;
    min-height:50px!important;
    padding:8px 10px!important;
    border:1px solid #dedede!important;
    border-radius:16px!important;
    background:#fff!important;
    color:#111!important;
    font-size:14px!important;
    overflow:hidden!important;
}

html body input[type="file"]::file-selector-button{
    min-height:32px!important;
    border:0!important;
    border-radius:999px!important;
    padding:0 14px!important;
    margin-right:10px!important;
    background:#efeff0!important;
    color:#111!important;
    font-size:13px!important;
    font-weight:650!important;
}

/* PURCHASE ORDER CARDS */
html body .po-card{
    padding:16px!important;
}

html body .po-card-head{
    gap:10px!important;
    margin-bottom:12px!important;
}

html body .po-card .po-title,
html body .po-card-title{
    font-size:22px!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
}

html body .po-card .po-amount,
html body .po-amount{
    font-size:30px!important;
    line-height:.9!important;
}

html body .po-meta-row{
    padding:5px 0!important;
    gap:8px!important;
}

html body .po-label,
html body .meta-label,
html body .mobile-table-card__label{
    font-size:10px!important;
    letter-spacing:.22em!important;
    line-height:1!important;
}

html body .po-value,
html body .meta-value,
html body .mobile-table-card__value{
    font-size:14px!important;
    line-height:1.15!important;
}

html body .po-card-actions,
html body .documents-mobile-actions,
html body .actions{
    gap:8px!important;
    margin-top:12px!important;
}

html body .po-card-actions a,
html body .po-card-actions button,
html body .documents-mobile-actions a,
html body .documents-mobile-actions button,
html body .actions a,
html body .actions button{
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:14px!important;
    font-size:13px!important;
}

/* DOCUMENTS / INVOICES */
html body .purchase-invoices-page .upload-zone-card{
    padding:18px!important;
}

html body .purchase-invoices-page .upload-zone-header{
    margin-bottom:14px!important;
}

html body .purchase-invoices-page .upload-zone-header h1,
html body .purchase-invoices-page .upload-zone-header h2{
    font-size:32px!important;
    line-height:.95!important;
    margin-bottom:10px!important;
}

html body .purchase-invoices-page .upload-mini-card{
    padding:14px!important;
    border-radius:18px!important;
}

html body .documents-mobile-list{
    gap:12px!important;
}

html body .documents-mobile-card{
    padding:15px!important;
}

html body .documents-mobile-title,
html body .documents-mobile-title a{
    font-size:19px!important;
    line-height:1.05!important;
}

html body .documents-mobile-meta{
    gap:7px!important;
    margin-top:9px!important;
}

html body .documents-mobile-status,
html body .status,
html body .badge,
html body [class*="status"]{
    min-height:28px!important;
    padding:5px 10px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:800!important;
}

/* APPEARANCE */
html body .appearance-card,
html body .appearance-panel{
    padding:18px!important;
    border-radius:22px!important;
}

html body .appearance-option,
html body .theme-option{
    min-height:72px!important;
    padding:11px 14px!important;
    gap:12px!important;
}

html body .appearance-option h3,
html body .theme-option h3{
    font-size:22px!important;
    line-height:1!important;
}

html body .appearance-option p,
html body .theme-option p{
    font-size:13px!important;
    line-height:1.2!important;
}

html body .appearance-option .swatch,
html body .theme-option .swatch,
html body [class*="swatch"]{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
}

/* BOTTOM NAV — FLOATING COMPACT FIX */
html body .mobile-bottom-nav,
html body .role-aware-bottom-nav,
html body nav.mobile-bottom-nav.role-aware-bottom-nav{
    width:auto!important;
    max-width:none!important;
    min-height:var(--sq2-nav-h)!important;
    left:20px!important;
    right:20px!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
    padding:6px 8px!important;
    border-radius:26px!important;
    overflow:hidden!important;
}

html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a{
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    padding:5px 4px!important;
    border-radius:18px!important;
}

html body .mobile-bottom-nav a span:first-child,
html body .role-aware-bottom-nav a span:first-child,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
    font-size:20px!important;
    line-height:1!important;
    margin:0!important;
}

html body .mobile-bottom-nav a span:last-child,
html body .role-aware-bottom-nav a span:last-child,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:last-child{
    font-size:10px!important;
    line-height:1!important;
    margin-top:3px!important;
}

html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action,
html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
    min-height:58px!important;
    height:58px!important;
    border-radius:20px!important;
    transform:translateY(-3px)!important;
}

/* Evita que la nav se corte lateralmente */
html body .store-shell-main,
html body main{
    overflow-x:hidden!important;
}

/* MOBILE */
@media(max-width:820px){
    :root{
        --sq2-page-x:16px;
        --sq2-page-y:18px;
        --sq2-card-pad:16px;
    }

    html body h1,
    html body .page-header h1,
    html body .section-header h1{
        font-size:clamp(34px,9.4vw,48px)!important;
    }

    html body .card,
    html body .panel,
    html body .upload-zone-card,
    html body .upload-mini-card,
    html body .documents-mobile-card,
    html body .po-card{
        border-radius:20px!important;
    }
}

@media(max-width:390px){
    :root{
        --sq2-page-x:14px;
        --sq2-page-y:16px;
        --sq2-card-pad:14px;
    }

    html body main,
    html body .store-shell-main,
    html body .app-shell,
    html body .page-content,
    html body .operational-page,
    html body .purchase-orders-index,
    html body .purchase-invoices-page{
        padding-bottom:86px!important;
    }

    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav{
        left:12px!important;
        right:12px!important;
        bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;
        min-height:62px!important;
        padding:5px 6px!important;
        border-radius:24px!important;
    }

    html body .mobile-bottom-nav a,
    html body .role-aware-bottom-nav a,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a{
        min-height:50px!important;
        height:50px!important;
        border-radius:16px!important;
    }

    html body .mobile-bottom-nav a.mobile-main-action,
    html body .role-aware-bottom-nav a.mobile-main-action,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
        min-height:55px!important;
        height:55px!important;
        border-radius:18px!important;
    }

    html body .mobile-bottom-nav a span:first-child,
    html body .role-aware-bottom-nav a span:first-child,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
        font-size:18px!important;
    }

    html body .mobile-bottom-nav a span:last-child,
    html body .role-aware-bottom-nav a span:last-child,
    html body nav.mobile-bottom-nav.role-aware-bottom-nav a span:last-child{
        font-size:9.5px!important;
    }
}

/* SQUARE_PHASE2_OPERATIONAL_VIEWPORT_DENSITY_END */

/* SQUARE_PHASE3_MOBILE_POLISH_START */

/*
 * Fase 3:
 * - Corregir bottom nav cortada/desplazada.
 * - Reducir invasión vertical de la nav.
 * - Ajustar safe area Safari/iPhone.
 * - Mejorar ownership de inputs file.
 * - Compactar documentos/pedidos/apariencia sin perder legibilidad.
 */

/* =========================
   GLOBAL MOBILE VIEWPORT
   ========================= */

html,
body{
    max-width:100vw!important;
    overflow-x:hidden!important;
}

html body{
    background:#f7f7f5!important;
}

html body .store-shell-main,
html body main,
html body .app-shell,
html body .page-content,
html body .operational-page{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
}

/* =========================
   BOTTOM NAV HARD FIX
   ========================= */

html body nav.mobile-bottom-nav.role-aware-bottom-nav,
html body .mobile-bottom-nav.role-aware-bottom-nav,
html body .mobile-bottom-nav,
html body .role-aware-bottom-nav{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px)!important;

    width:calc(100vw - 28px)!important;
    max-width:430px!important;
    min-width:0!important;

    transform:translateX(-50%)!important;

    min-height:62px!important;
    height:62px!important;

    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;

    padding:5px 6px!important;
    gap:4px!important;

    border-radius:24px!important;
    overflow:hidden!important;

    z-index:99990!important;

    box-shadow:
        0 1px 0 rgba(0,0,0,.04),
        0 12px 34px rgba(0,0,0,.12)!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a,
html body .mobile-bottom-nav.role-aware-bottom-nav a,
html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:50px!important;
    min-height:50px!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    padding:4px 2px!important;
    gap:3px!important;

    border-radius:17px!important;
    overflow:hidden!important;

    text-align:center!important;
    white-space:nowrap!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action{
    height:56px!important;
    min-height:56px!important;
    transform:translateY(-3px)!important;
    border-radius:19px!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a > span:first-child,
html body .mobile-bottom-nav.role-aware-bottom-nav a > span:first-child,
html body .mobile-bottom-nav a > span:first-child,
html body .role-aware-bottom-nav a > span:first-child{
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;

    font-size:18px!important;
    line-height:1!important;

    margin:0!important;
    padding:0!important;

    transform:none!important;
    background:transparent!important;
    box-shadow:none!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a > span:last-child,
html body .mobile-bottom-nav.role-aware-bottom-nav a > span:last-child,
html body .mobile-bottom-nav a > span:last-child,
html body .role-aware-bottom-nav a > span:last-child{
    display:block!important;
    max-width:100%!important;

    font-size:9.5px!important;
    line-height:1!important;
    font-weight:750!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

/* Más contenido visible por encima de nav */
html body main,
html body .store-shell-main,
html body .app-shell,
html body .page-content,
html body .operational-page,
html body .purchase-orders-index,
html body .purchase-invoices-page{
    padding-bottom:82px!important;
}

/* =========================
   HEADER FINAL COMPACT BALANCE
   ========================= */

html body .store-shell-topbar{
    min-height:70px!important;
    height:70px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
}

html body .store-shell-brand-title{
    font-size:22px!important;
}

html body .store-shell-brand-subtitle{
    font-size:7px!important;
    letter-spacing:.24em!important;
    margin-top:5px!important;
}

/* =========================
   PAGE DENSITY FINAL
   ========================= */

html body main,
html body .store-shell-main,
html body .app-shell,
html body .page-content,
html body .operational-page,
html body .purchase-orders-index,
html body .purchase-invoices-page{
    padding-top:15px!important;
}

html body h1,
html body .page-header h1,
html body .section-header h1{
    font-size:clamp(32px,8.2vw,44px)!important;
    line-height:.93!important;
    margin-bottom:8px!important;
}

html body h2{
    font-size:clamp(24px,6vw,34px)!important;
}

html body .page-header p,
html body .section-header p{
    font-size:15px!important;
    line-height:1.22!important;
    margin-bottom:12px!important;
}

/* =========================
   CARDS FINAL DENSITY
   ========================= */

html body .card,
html body .panel,
html body .upload-zone-card,
html body .upload-mini-card,
html body .documents-mobile-card,
html body .po-card,
html body .operational-card{
    padding:14px!important;
    border-radius:18px!important;
    margin-bottom:11px!important;
}

html body .card h2,
html body .card h3,
html body .panel h2,
html body .panel h3,
html body .upload-zone-card h2,
html body .upload-zone-card h3{
    margin-bottom:8px!important;
}

html body .card p,
html body .panel p,
html body .upload-zone-card p{
    line-height:1.22!important;
}

/* =========================
   BUTTONS / CONTROLS FINAL
   ========================= */

html body button,
html body .button,
html body .btn,
html body a.button,
html body a.btn,
html body input[type="submit"]{
    min-height:44px!important;
    padding:0 15px!important;
    border-radius:14px!important;
    font-size:14px!important;
}

html body input,
html body select,
html body textarea{
    min-height:46px!important;
    border-radius:14px!important;
    padding:10px 12px!important;
    font-size:15px!important;
}

html body label{
    font-size:13px!important;
    margin-bottom:6px!important;
}

/* =========================
   FILE INPUT OWNERSHIP FINAL
   ========================= */

html body input[type="file"]{
    min-height:46px!important;
    height:46px!important;
    padding:7px 9px!important;
    border-radius:15px!important;

    font-size:0!important;
    line-height:1!important;

    display:block!important;
    white-space:nowrap!important;
}

html body input[type="file"]::file-selector-button{
    height:30px!important;
    min-height:30px!important;
    max-width:190px!important;

    margin-right:10px!important;
    padding:0 13px!important;

    border-radius:999px!important;
    background:#eeeeef!important;
    color:#111!important;

    font-size:13px!important;
    font-weight:750!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

/* Evita textos largos nativos del input file reventando */
html body .upload-mini-card input[type="file"],
html body .purchase-invoices-page input[type="file"]{
    color:transparent!important;
}

html body .upload-mini-card input[type="file"]::after,
html body .purchase-invoices-page input[type="file"]::after{
    content:"archivo seleccionado";
    color:#111;
    font-size:13px;
    font-weight:700;
}

/* =========================
   PURCHASE INVOICES FINAL
   ========================= */

html body .purchase-invoices-page .upload-zone-card{
    max-width:100%!important;
    padding:16px!important;
}

html body .purchase-invoices-page .upload-zone-header h1,
html body .purchase-invoices-page .upload-zone-header h2,
html body .purchase-invoices-page h1{
    font-size:clamp(30px,7.8vw,42px)!important;
}

html body .purchase-invoices-page .upload-mini-card{
    padding:12px!important;
    border-radius:17px!important;
}

html body .purchase-invoices-page .upload-mini-card + .upload-mini-card{
    margin-top:12px!important;
}

html body .purchase-invoices-page .upload-mini-card .button,
html body .purchase-invoices-page .upload-mini-card button{
    width:100%!important;
    margin-top:10px!important;
}

/* =========================
   PURCHASE ORDERS FINAL
   ========================= */

html body .po-filters{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
}

html body .po-filter-button{
    min-width:0!important;
    width:100%!important;
    min-height:40px!important;
    padding:0 8px!important;
    font-size:13px!important;
}

html body .po-card{
    padding:13px!important;
}

html body .po-card .po-title,
html body .po-card-title{
    font-size:20px!important;
}

html body .po-card .po-amount,
html body .po-amount{
    font-size:26px!important;
}

html body .po-card-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
}

html body .po-card-actions a,
html body .po-card-actions button{
    width:100%!important;
    min-height:38px!important;
    font-size:12.5px!important;
}

/* =========================
   PURCHASE ORDER FORM FINAL
   ========================= */

html body .purchase-order-form,
html body form[action*="purchase-orders"]{
    gap:12px!important;
}

html body .purchase-order-form .card,
html body form[action*="purchase-orders"] .card{
    padding:14px!important;
}

html body .purchase-order-form .form-grid,
html body form[action*="purchase-orders"] .form-grid{
    gap:12px!important;
}

/* =========================
   APPEARANCE FINAL
   ========================= */

html body .appearance-option,
html body .theme-option{
    min-height:64px!important;
    padding:9px 12px!important;
}

html body .appearance-option h3,
html body .theme-option h3{
    font-size:19px!important;
}

html body .appearance-option p,
html body .theme-option p{
    font-size:12px!important;
}

html body .appearance-option .swatch,
html body .theme-option .swatch,
html body [class*="swatch"]{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
}

/* =========================
   SMALL IPHONE
   ========================= */

@media(max-width:390px){
    html body nav.mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav{
        width:calc(100vw - 20px)!important;
        height:60px!important;
        min-height:60px!important;
        bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;
        padding:5px!important;
        border-radius:22px!important;
    }

    html body nav.mobile-bottom-nav.role-aware-bottom-nav a,
    html body .mobile-bottom-nav.role-aware-bottom-nav a,
    html body .mobile-bottom-nav a,
    html body .role-aware-bottom-nav a{
        height:49px!important;
        min-height:49px!important;
        border-radius:15px!important;
    }

    html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
    html body .mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
    html body .mobile-bottom-nav a.mobile-main-action,
    html body .role-aware-bottom-nav a.mobile-main-action{
        height:54px!important;
        min-height:54px!important;
    }

    html body h1,
    html body .page-header h1,
    html body .section-header h1{
        font-size:clamp(30px,8.4vw,40px)!important;
    }

    html body .store-shell-topbar{
        grid-template-columns:minmax(0,1fr) minmax(132px,164px)!important;
    }
}

/* SQUARE_PHASE3_MOBILE_POLISH_END */

/* SQUARE_PHASE4_SAFE_VIEWPORT_START */

/*
 * Fase 4:
 * - Corrige corte lateral de bottom nav.
 * - Elimina anchos fantasma mayores que viewport.
 * - Evita que cards/listados creen overflow horizontal.
 * - Ajusta densidad sin seguir encogiendo legibilidad.
 */

/* HARD VIEWPORT LOCK */
html,
body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

html body *{
    box-sizing:border-box!important;
}

html body .store-shell,
html body .store-shell-main,
html body main,
html body .app-shell,
html body .page-content,
html body .operational-page,
html body .purchase-orders-index,
html body .purchase-invoices-page,
html body .purchase-order-form,
html body .appearance-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
}

/* CONTENT WIDTH NORMALIZATION */
html body main > *,
html body .store-shell-main > *,
html body .app-shell > *,
html body .page-content > *,
html body .operational-page > *,
html body .purchase-orders-index > *,
html body .purchase-invoices-page > *{
    max-width:100%!important;
    min-width:0!important;
}

/* HEADER MUST NEVER CREATE HORIZONTAL SCROLL */
html body .store-shell-topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

html body .store-shell-brand{
    min-width:0!important;
    max-width:45vw!important;
    overflow:hidden!important;
}

/* BOTTOM NAV TRUE CENTERED CONTAINER */
html body nav.mobile-bottom-nav.role-aware-bottom-nav,
html body .mobile-bottom-nav.role-aware-bottom-nav,
html body .mobile-bottom-nav,
html body .role-aware-bottom-nav{
    position:fixed!important;

    left:50%!important;
    right:auto!important;

    width:min(430px, calc(100dvw - 28px))!important;
    max-width:calc(100dvw - 28px)!important;
    min-width:0!important;

    transform:translate3d(-50%,0,0)!important;

    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px)!important;

    height:62px!important;
    min-height:62px!important;

    display:grid!important;
    grid-template-columns:repeat(5, minmax(0, 1fr))!important;

    padding:5px 6px!important;
    gap:4px!important;

    border-radius:24px!important;
    overflow:hidden!important;

    z-index:2147482000!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a,
html body .mobile-bottom-nav.role-aware-bottom-nav a,
html body .mobile-bottom-nav a,
html body .role-aware-bottom-nav a{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:51px!important;
    min-height:51px!important;

    padding:4px 1px!important;
    margin:0!important;

    flex:initial!important;

    overflow:hidden!important;
    white-space:nowrap!important;
}

html body nav.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action,
html body .mobile-bottom-nav a.mobile-main-action,
html body .role-aware-bottom-nav a.mobile-main-action{
    height:56px!important;
    min-height:56px!important;
    transform:translateY(-3px)!important;
}

/* Prevent invisible left overflow from nav wrappers */
html body .mobile-bottom-nav::before,
html body .mobile-bottom-nav::after,
html body .role-aware-bottom-nav::before,
html body .role-aware-bottom-nav::after{
    max-width:100%!important;
}

/* MAIN PADDING MUST MATCH FIXED NAV */
html body main,
html body .store-shell-main,
html body .app-shell,
html body .page-content,
html body .operational-page,
html body .purchase-orders-index,
html body .purchase-invoices-page{
    padding-left:18px!important;
    padding-right:18px!important;
    padding-bottom:92px!important;
}

/* CARDS NEVER WIDER THAN CONTENT */
html body .card,
html body .panel,
html body .upload-zone-card,
html body .upload-mini-card,
html body .documents-mobile-card,
html body .po-card,
html body .operational-card,
html body .appearance-card,
html body .appearance-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

/* LONG TEXT / AMOUNTS / ORDER IDS */
html body .po-card,
html body .documents-mobile-card,
html body .upload-mini-card{
    word-break:normal!important;
    overflow-wrap:anywhere!important;
}

html body .po-card .po-title,
html body .po-card-title,
html body .documents-mobile-title,
html body .documents-mobile-title a{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
}

html body .po-amount{
    white-space:nowrap!important;
}

/* PURCHASE ORDER ACTION GRID CONTAINMENT */
html body .po-card-actions{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

html body .po-card-actions a,
html body .po-card-actions button{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* FILE INPUT FINAL CONTAINMENT */
html body input[type="file"]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

html body input[type="file"]::file-selector-button{
    max-width:58%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* APPEARANCE ROWS CONTAINMENT */
html body .appearance-option,
html body .theme-option{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

html body .appearance-option *,
html body .theme-option *{
    min-width:0!important;
}

html body .appearance-option h3,
html body .theme-option h3{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* SAFARI SMALL VIEWPORT */
@supports (width: 100dvw){
    html body nav.mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav{
        width:min(430px, calc(100dvw - 28px))!important;
        max-width:calc(100dvw - 28px)!important;
    }
}

@media(max-width:430px){
    html body main,
    html body .store-shell-main,
    html body .app-shell,
    html body .page-content,
    html body .operational-page,
    html body .purchase-orders-index,
    html body .purchase-invoices-page{
        padding-left:16px!important;
        padding-right:16px!important;
        padding-bottom:90px!important;
    }

    html body nav.mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav{
        width:calc(100dvw - 24px)!important;
        max-width:calc(100dvw - 24px)!important;
    }
}

@media(max-width:390px){
    html body main,
    html body .store-shell-main,
    html body .app-shell,
    html body .page-content,
    html body .operational-page,
    html body .purchase-orders-index,
    html body .purchase-invoices-page{
        padding-left:14px!important;
        padding-right:14px!important;
        padding-bottom:88px!important;
    }

    html body nav.mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav.role-aware-bottom-nav,
    html body .mobile-bottom-nav,
    html body .role-aware-bottom-nav{
        width:calc(100dvw - 20px)!important;
        max-width:calc(100dvw - 20px)!important;
        height:60px!important;
        min-height:60px!important;
        border-radius:22px!important;
    }
}

/* SQUARE_PHASE4_SAFE_VIEWPORT_END */

/* SQUARE_APP_THEME_OWNERSHIP_START */

/*
 * Fase 2:
 * app-theme.css queda reducido a compatibilidad mínima.
 * Esta capa absorbe la estética que antes podía quedar repartida.
 */

html body{
    background:var(--sq-bg,#f7f7f5)!important;
    color:var(--sq-text,#121212)!important;
}

/* Componentes genéricos que algunas vistas llaman card/panel */
html body .card,
html body .panel,
html body .box,
html body .surface,
html body .section-card,
html body .dashboard-card,
html body .admin-card,
html body .settings-card,
html body .form-card,
html body .table-card,
html body .list-card{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border,#e5e3df)!important;
    border-radius:var(--sq-radius-card,24px)!important;
    box-shadow:var(--sq-shadow-card,0 10px 30px rgba(0,0,0,.055))!important;
}

/* Cabeceras internas */
html body .page-header,
html body .section-header,
html body .content-header,
html body .admin-header,
html body .dashboard-header{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

/* Títulos */
html body .page-header h1,
html body .section-header h1,
html body .content-header h1,
html body .admin-header h1,
html body .dashboard-header h1,
html body h1{
    color:var(--sq-text,#121212)!important;
    letter-spacing:-.075em!important;
}

html body .page-header p,
html body .section-header p,
html body .content-header p,
html body .admin-header p,
html body .dashboard-header p,
html body .lead,
html body .subtitle,
html body .muted,
html body .text-muted{
    color:var(--sq-muted,#737780)!important;
}

/* Botones genéricos */
html body .button,
html body .btn,
html body button,
html body input[type="submit"],
html body a.button,
html body a.btn{
    border-radius:var(--sq-radius-button,16px)!important;
    font-weight:850!important;
    letter-spacing:-.03em!important;
    box-shadow:none!important;
}

html body .button:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body .btn:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body button:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body input[type="submit"]:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger){
    background:var(--sq-primary,#111)!important;
    color:#fff!important;
    border:1px solid var(--sq-primary,#111)!important;
}

html body .button.secondary,
html body .btn.secondary,
html body .button.is-secondary,
html body .btn.is-secondary,
html body a.secondary,
html body button.secondary{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border,#e5e3df)!important;
}

html body .button.danger,
html body .btn.danger,
html body .button.is-danger,
html body .btn.is-danger,
html body button.danger,
html body form[action*="delete"] button,
html body form[action*="destroy"] button{
    background:var(--sq-danger-soft,#fff5f3)!important;
    color:var(--sq-danger,#8f302f)!important;
    border:1px solid var(--sq-danger-border,#f0d6d2)!important;
}

/* Formularios */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body select,
html body textarea{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border-strong,#d9d7d2)!important;
    border-radius:var(--sq-radius-input,16px)!important;
    box-shadow:none!important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html body select:focus,
html body textarea:focus{
    border-color:var(--sq-text,#121212)!important;
    box-shadow:0 0 0 3px rgba(18,18,18,.08)!important;
    outline:0!important;
}

html body label,
html body .label,
html body .form-label{
    color:var(--sq-text,#121212)!important;
    font-weight:850!important;
}

/* Chips/badges genéricos */
html body .chip,
html body .badge,
html body .tag,
html body .pill,
html body [class*="status"]{
    border-radius:999px!important;
    box-shadow:none!important;
}

/* Tablas genéricas */
html body table{
    background:var(--sq-surface,#fff)!important;
    border-color:var(--sq-border,#e5e3df)!important;
}

html body th{
    color:var(--sq-muted,#737780)!important;
    background:var(--sq-soft,#f7f7f5)!important;
}

html body td{
    color:var(--sq-text,#121212)!important;
}

/* Neutraliza restos de estética app-theme antigua */
html body [class*="glass"],
html body [class*="apple"],
html body [class*="military"],
html body [class*="ca-"]{
    box-shadow:inherit;
}

/* SQUARE_APP_THEME_OWNERSHIP_END */

/* SQUARE_APP_THEME_OWNERSHIP_START */

/*
 * Fase 2:
 * app-theme.css queda reducido a compatibilidad mínima.
 * Esta capa absorbe la estética que antes podía quedar repartida.
 */

html body{
    background:var(--sq-bg,#f7f7f5)!important;
    color:var(--sq-text,#121212)!important;
}

/* Componentes genéricos que algunas vistas llaman card/panel */
html body .card,
html body .panel,
html body .box,
html body .surface,
html body .section-card,
html body .dashboard-card,
html body .admin-card,
html body .settings-card,
html body .form-card,
html body .table-card,
html body .list-card{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border,#e5e3df)!important;
    border-radius:var(--sq-radius-card,24px)!important;
    box-shadow:var(--sq-shadow-card,0 10px 30px rgba(0,0,0,.055))!important;
}

/* Cabeceras internas */
html body .page-header,
html body .section-header,
html body .content-header,
html body .admin-header,
html body .dashboard-header{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

/* Títulos */
html body .page-header h1,
html body .section-header h1,
html body .content-header h1,
html body .admin-header h1,
html body .dashboard-header h1,
html body h1{
    color:var(--sq-text,#121212)!important;
    letter-spacing:-.075em!important;
}

html body .page-header p,
html body .section-header p,
html body .content-header p,
html body .admin-header p,
html body .dashboard-header p,
html body .lead,
html body .subtitle,
html body .muted,
html body .text-muted{
    color:var(--sq-muted,#737780)!important;
}

/* Botones genéricos */
html body .button,
html body .btn,
html body button,
html body input[type="submit"],
html body a.button,
html body a.btn{
    border-radius:var(--sq-radius-button,16px)!important;
    font-weight:850!important;
    letter-spacing:-.03em!important;
    box-shadow:none!important;
}

html body .button:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body .btn:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body button:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger),
html body input[type="submit"]:not(.secondary):not(.danger):not(.is-secondary):not(.is-danger){
    background:var(--sq-primary,#111)!important;
    color:#fff!important;
    border:1px solid var(--sq-primary,#111)!important;
}

html body .button.secondary,
html body .btn.secondary,
html body .button.is-secondary,
html body .btn.is-secondary,
html body a.secondary,
html body button.secondary{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border,#e5e3df)!important;
}

html body .button.danger,
html body .btn.danger,
html body .button.is-danger,
html body .btn.is-danger,
html body button.danger,
html body form[action*="delete"] button,
html body form[action*="destroy"] button{
    background:var(--sq-danger-soft,#fff5f3)!important;
    color:var(--sq-danger,#8f302f)!important;
    border:1px solid var(--sq-danger-border,#f0d6d2)!important;
}

/* Formularios */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body select,
html body textarea{
    background:var(--sq-surface,#fff)!important;
    color:var(--sq-text,#121212)!important;
    border:1px solid var(--sq-border-strong,#d9d7d2)!important;
    border-radius:var(--sq-radius-input,16px)!important;
    box-shadow:none!important;
}

html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html body select:focus,
html body textarea:focus{
    border-color:var(--sq-text,#121212)!important;
    box-shadow:0 0 0 3px rgba(18,18,18,.08)!important;
    outline:0!important;
}

html body label,
html body .label,
html body .form-label{
    color:var(--sq-text,#121212)!important;
    font-weight:850!important;
}

/* Chips/badges genéricos */
html body .chip,
html body .badge,
html body .tag,
html body .pill,
html body [class*="status"]{
    border-radius:999px!important;
    box-shadow:none!important;
}

/* Tablas genéricas */
html body table{
    background:var(--sq-surface,#fff)!important;
    border-color:var(--sq-border,#e5e3df)!important;
}

html body th{
    color:var(--sq-muted,#737780)!important;
    background:var(--sq-soft,#f7f7f5)!important;
}

html body td{
    color:var(--sq-text,#121212)!important;
}

/* Neutraliza restos de estética app-theme antigua */
html body [class*="glass"],
html body [class*="apple"],
html body [class*="military"],
html body [class*="ca-"]{
    box-shadow:inherit;
}

/* SQUARE_APP_THEME_OWNERSHIP_END */

/* ==========================================================================
   SQUARE GLOBAL PHASE 3 · LEGACY COMPONENT NORMALIZATION
   Objetivo:
   - Absorber tablas/cards/listados antiguos bajo lenguaje Square global.
   - No tocar lógica, rutas ni Blade.
   - No romper formularios ni acciones existentes.
   ========================================================================== */

:root{
    --sq-page-max: 980px;
    --sq-page-pad-mobile: 32px;
    --sq-page-pad-desktop: 42px;
    --sq-card-pad-mobile: 32px;
    --sq-card-pad-desktop: 36px;
}

/* Page wrappers genéricos */
main,
.app-main,
.store-main,
.page,
.page-content,
.content,
.container,
.wrapper{
    box-sizing:border-box!important;
}

main > .container,
main > .content,
main > .page,
main > .wrapper,
.app-main > .container,
.app-main > .content,
.store-main > .container,
.store-main > .content{
    width:100%!important;
    max-width:var(--sq-page-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Cabeceras de pantalla */
.page-header,
.section-header,
.screen-header,
.operational-header,
.admin-header,
.index-header{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    margin:0 0 34px!important;
    padding:0!important;
}

.page-header h1,
.section-header h1,
.screen-header h1,
.operational-header h1,
.admin-header h1,
.index-header h1,
main h1{
    color:var(--sq-text)!important;
    font-weight:950!important;
    letter-spacing:-.075em!important;
    line-height:.92!important;
    margin:0 0 12px!important;
}

.page-header p,
.section-header p,
.screen-header p,
.operational-header p,
.admin-header p,
.index-header p,
main h1 + p{
    color:var(--sq-muted)!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;
    line-height:1.14!important;
    margin:0!important;
}

/* Cards y paneles legacy */
.card,
.panel,
.box,
.table-card,
.form-card,
.info-card,
.summary-card,
.search-card,
.filter-card,
.result-card,
.list-card,
.admin-card,
.dashboard-card,
.site-card,
.supplier-card,
.item-card,
.document-card,
.purchase-card,
.mobile-table-card,
.documents-mobile-card,
.po-card,
.upload-zone-card,
.upload-mini-card{
    background:var(--sq-surface)!important;
    border:1px solid var(--sq-border)!important;
    border-radius:28px!important;
    box-shadow:var(--sq-shadow-md)!important;
    color:var(--sq-text)!important;
}

.card,
.panel,
.box,
.table-card,
.form-card,
.info-card,
.summary-card,
.search-card,
.filter-card,
.result-card,
.list-card,
.admin-card,
.dashboard-card,
.site-card,
.supplier-card,
.item-card,
.document-card,
.purchase-card{
    padding:var(--sq-card-pad-mobile)!important;
}

/* Evitar tarjetas dentro de tarjetas demasiado pesadas */
.card .card,
.card .panel,
.panel .card,
.panel .panel,
.upload-zone-card .upload-mini-card,
.form-card .card,
.form-card .panel{
    box-shadow:none!important;
    border-color:var(--sq-border-soft)!important;
}

/* Listados tipo tabla transformados a cards móviles */
.mobile-table-card,
.documents-mobile-card,
.po-card,
.site-card,
.supplier-card,
.item-card{
    overflow:hidden!important;
}

/* Filas legacy label/value */
.mobile-table-card__row,
.meta-row,
.po-meta-row,
.detail-row,
.info-row,
.data-row,
[class*="meta-row"],
[class*="detail-row"]{
    display:grid!important;
    grid-template-columns:minmax(95px,.8fr) minmax(0,1.2fr)!important;
    gap:12px!important;
    align-items:start!important;
    padding:10px 0!important;
    border:0!important;
}

.mobile-table-card__label,
.ca-label,
.op-label,
.meta-label,
.po-label,
.detail-label,
.data-label,
[class*="__label"],
[class*="-label"]{
    color:var(--sq-muted)!important;
    font-size:11px!important;
    line-height:1.05!important;
    font-weight:950!important;
    letter-spacing:.18em!important;
    text-transform:uppercase!important;
}

.mobile-table-card__value,
.ca-value,
.op-value,
.meta-value,
.po-value,
.detail-value,
.data-value,
[class*="__value"],
[class*="-value"]{
    color:var(--sq-text)!important;
    font-size:16px!important;
    line-height:1.12!important;
    font-weight:850!important;
    letter-spacing:-.03em!important;
    text-align:right!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
}

/* Tablas legacy */
.table-responsive,
.table-wrapper,
.table-scroll{
    background:var(--sq-surface)!important;
    border:1px solid var(--sq-border)!important;
    border-radius:28px!important;
    box-shadow:var(--sq-shadow-md)!important;
    overflow:auto!important;
}

table{
    width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

thead,
tbody,
tr,
th,
td{
    border-color:var(--sq-border-soft)!important;
}

th{
    color:var(--sq-muted)!important;
    background:rgba(248,248,247,.84)!important;
    font-size:11px!important;
    font-weight:950!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    padding:14px 16px!important;
}

td{
    color:var(--sq-text)!important;
    background:#fff!important;
    font-size:14px!important;
    font-weight:700!important;
    padding:15px 16px!important;
}

/* Formularios heredados */
form.card,
form.panel,
.form-section,
fieldset,
.fieldset,
.form-block{
    background:var(--sq-surface)!important;
    border:1px solid var(--sq-border)!important;
    border-radius:28px!important;
    box-shadow:var(--sq-shadow-md)!important;
}

fieldset,
.fieldset,
.form-block{
    padding:24px!important;
}

label,
.form-label,
.input-label{
    color:var(--sq-text)!important;
    font-weight:900!important;
    letter-spacing:-.025em!important;
}

.help,
.help-text,
.hint,
.form-hint,
small,
.text-muted,
.muted{
    color:var(--sq-muted)!important;
    font-weight:750!important;
}

/* Inputs/selects/textareas legacy */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea{
    width:100%;
    background:#fff!important;
    border:1px solid var(--sq-border-strong)!important;
    color:var(--sq-text)!important;
    border-radius:18px!important;
    box-shadow:none!important;
    font-weight:850!important;
    letter-spacing:-.035em!important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus{
    outline:none!important;
    border-color:#111!important;
    box-shadow:0 0 0 3px rgba(0,0,0,.08)!important;
}

/* File inputs, especialmente documentos */
input[type="file"]{
    max-width:100%!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid var(--sq-border-strong)!important;
    border-radius:18px!important;
    color:var(--sq-text)!important;
    box-shadow:none!important;
}

/* Botones globales */
.button,
button,
a.button,
input[type="submit"],
.btn,
.action-button,
.po-action-button{
    border-radius:18px!important;
    font-weight:900!important;
    letter-spacing:-.035em!important;
    box-shadow:none!important;
    text-decoration:none!important;
}

.button:not(.secondary):not(.danger),
button:not(.secondary):not(.danger),
a.button:not(.secondary):not(.danger),
input[type="submit"]:not(.secondary):not(.danger),
.btn-primary,
.is-primary{
    background:#111!important;
    border-color:#111!important;
    color:#fff!important;
}

.button.secondary,
button.secondary,
a.button.secondary,
.btn-secondary{
    background:#fff!important;
    color:var(--sq-text)!important;
    border-color:var(--sq-border)!important;
}

.button.danger,
button.danger,
a.button.danger,
.btn-danger,
form[action*="delete"] button,
form[action*="destroy"] button{
    background:#fff5ef!important;
    color:#6e351d!important;
    border-color:#eed7c6!important;
}

/* Chips/filtros/status */
.badge,
.chip,
.status,
[class*="status-"],
.filter-chip,
.document-filter-chip,
.po-filter-button{
    border-radius:999px!important;
    box-shadow:none!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
}

.filter-chip.active,
.filter-chip.is-active,
.document-filter-chip.active,
.document-filter-chip.is-active,
.po-filter-button.is-active,
.po-filter-button.active{
    background:#fff3e8!important;
    color:#4b2d1f!important;
    border-color:#efd3bd!important;
}

/* Acciones en cards */
.actions,
.card-actions,
.documents-mobile-actions,
.po-card-actions,
.mobile-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    align-items:center!important;
}

.actions > *,
.card-actions > *,
.documents-mobile-actions > *,
.po-card-actions > *,
.mobile-actions > *{
    min-width:0!important;
}

/* Normalizar cards de admin/dashboard */
.dashboard-grid,
.admin-grid,
.quick-grid,
.cards-grid,
.index-grid{
    display:grid!important;
    gap:22px!important;
}

.dashboard-grid > *,
.admin-grid > *,
.quick-grid > *,
.cards-grid > *,
.index-grid > *{
    min-width:0!important;
}

/* Enlaces dentro de cards */
.card a:not(.button),
.panel a:not(.button),
.box a:not(.button){
    color:var(--sq-text)!important;
    font-weight:850!important;
}

/* Pantallas Sites / Suppliers / Items: evitar apariencia de tabla comprimida */
.sites-index .card,
.sites-page .card,
.suppliers-index .card,
.suppliers-page .card,
.purchase-items-index .card,
.purchase-items-page .card{
    overflow:hidden!important;
}

.sites-index .card *,
.sites-page .card *,
.suppliers-index .card *,
.suppliers-page .card *,
.purchase-items-index .card *,
.purchase-items-page .card *{
    max-width:100%;
}

/* Mobile */
@media(max-width:820px){
    body{
        background:var(--sq-bg)!important;
    }

    main,
    .app-main,
    .store-main{
        padding-left:32px!important;
        padding-right:32px!important;
        padding-bottom:150px!important;
    }

    main > .container,
    main > .content,
    main > .page,
    main > .wrapper,
    .app-main > .container,
    .app-main > .content,
    .store-main > .container,
    .store-main > .content{
        max-width:100%!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .page-header,
    .section-header,
    .screen-header,
    .operational-header,
    .admin-header,
    .index-header{
        margin-bottom:30px!important;
    }

    main h1,
    .page-header h1,
    .section-header h1,
    .screen-header h1,
    .operational-header h1,
    .admin-header h1,
    .index-header h1{
        font-size:clamp(42px,9vw,58px)!important;
    }

    main h1 + p,
    .page-header p,
    .section-header p,
    .screen-header p,
    .operational-header p,
    .admin-header p,
    .index-header p{
        font-size:clamp(23px,5.2vw,31px)!important;
    }

    .card,
    .panel,
    .box,
    .table-card,
    .form-card,
    .info-card,
    .summary-card,
    .search-card,
    .filter-card,
    .result-card,
    .list-card,
    .admin-card,
    .dashboard-card,
    .site-card,
    .supplier-card,
    .item-card,
    .document-card,
    .purchase-card{
        padding:32px!important;
        border-radius:30px!important;
    }

    .mobile-table-card,
    .documents-mobile-card,
    .po-card,
    .upload-zone-card{
        border-radius:30px!important;
    }

    .mobile-table-card__row,
    .meta-row,
    .po-meta-row,
    .detail-row,
    .info-row,
    .data-row,
    [class*="meta-row"],
    [class*="detail-row"]{
        grid-template-columns:1fr 1fr!important;
        gap:12px!important;
    }

    .mobile-table-card__value,
    .ca-value,
    .op-value,
    .meta-value,
    .po-value,
    .detail-value,
    .data-value,
    [class*="__value"],
    [class*="-value"]{
        font-size:18px!important;
    }

    .button,
    button,
    a.button,
    input[type="submit"],
    .btn,
    .action-button,
    .po-action-button{
        min-height:54px!important;
        padding:0 24px!important;
        font-size:18px!important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    input[type="file"]{
        min-height:58px!important;
        font-size:20px!important;
        padding-left:22px!important;
        padding-right:22px!important;
    }
}

/* Mobile estrecho */
@media(max-width:430px){
    main,
    .app-main,
    .store-main{
        padding-left:30px!important;
        padding-right:30px!important;
    }

    .card,
    .panel,
    .box,
    .table-card,
    .form-card,
    .info-card,
    .summary-card,
    .search-card,
    .filter-card,
    .result-card,
    .list-card,
    .admin-card,
    .dashboard-card,
    .site-card,
    .supplier-card,
    .item-card,
    .document-card,
    .purchase-card{
        padding:30px!important;
    }
}


/* SQUARE_GLOBAL_PHASE4_LEGACY_ISLANDS_START */

/*
|--------------------------------------------------------------------------
| FASE 4 · Islas legacy
|--------------------------------------------------------------------------
| Objetivo:
| - Neutralizar pseudo-tablas visuales antiguas en sites/centros.
| - Normalizar grids label/value heredados.
| - Convertir detalles operativos a cards Square mobile-first.
|--------------------------------------------------------------------------
*/

html body .sites-index,
html body .sites-page,
html body [data-page="sites"],
html body .receiving-pending-page,
html body [data-page="receiving-pending"]{
    width:100%!important;
    max-width:var(--sq-content-max, 680px)!important;
    margin:0 auto!important;
    padding:var(--sq-page-pad-y, 34px) var(--sq-page-pad-x, 18px) 140px!important;
    box-sizing:border-box!important;
}

html body .sites-index .card,
html body .sites-page .card,
html body [data-page="sites"] .card,
html body .receiving-pending-page .card,
html body [data-page="receiving-pending"] .card{
    background:var(--sq-surface,#fff)!important;
    border:1px solid var(--sq-border,#e8e5df)!important;
    border-radius:var(--sq-radius-xl,28px)!important;
    box-shadow:var(--sq-shadow-card,0 14px 34px rgba(0,0,0,.055))!important;
    overflow:hidden!important;
}

/* Cards/listados tipo centro */
html body .sites-index .site-card,
html body .sites-page .site-card,
html body [data-page="sites"] .site-card,
html body .sites-index article,
html body .sites-page article,
html body [data-page="sites"] article{
    background:var(--sq-surface,#fff)!important;
    border:1px solid var(--sq-border,#e8e5df)!important;
    border-radius:var(--sq-radius-lg,24px)!important;
    box-shadow:none!important;
    padding:22px!important;
    margin:0 0 16px!important;
    display:block!important;
    overflow:hidden!important;
}

/* Neutralizar pseudo-tablas label/value */
html body .sites-index .site-card *,
html body .sites-page .site-card *,
html body [data-page="sites"] .site-card *,
html body .receiving-pending-page .card *,
html body [data-page="receiving-pending"] .card *{
    min-width:0!important;
}

html body .sites-index .site-card .row,
html body .sites-page .site-card .row,
html body [data-page="sites"] .site-card .row,
html body .sites-index .site-card .meta-row,
html body .sites-page .site-card .meta-row,
html body [data-page="sites"] .site-card .meta-row,
html body .sites-index .site-card [class*="row"],
html body .sites-page .site-card [class*="row"],
html body [data-page="sites"] .site-card [class*="row"],
html body .receiving-pending-page .meta-row,
html body [data-page="receiving-pending"] .meta-row,
html body .receiving-pending-page [class*="meta-row"],
html body [data-page="receiving-pending"] [class*="meta-row"]{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    align-items:start!important;
    padding:10px 0!important;
    border-bottom:1px solid var(--sq-border-soft,rgba(0,0,0,.055))!important;
    background:transparent!important;
    box-shadow:none!important;
}

html body .sites-index .site-card .row:last-child,
html body .sites-page .site-card .row:last-child,
html body [data-page="sites"] .site-card .row:last-child,
html body .sites-index .site-card [class*="row"]:last-child,
html body .sites-page .site-card [class*="row"]:last-child,
html body [data-page="sites"] .site-card [class*="row"]:last-child,
html body .receiving-pending-page [class*="meta-row"]:last-child,
html body [data-page="receiving-pending"] [class*="meta-row"]:last-child{
    border-bottom:0!important;
}

/* Labels */
html body .sites-index .site-card .label,
html body .sites-page .site-card .label,
html body [data-page="sites"] .site-card .label,
html body .sites-index .site-card [class*="label"],
html body .sites-page .site-card [class*="label"],
html body [data-page="sites"] .site-card [class*="label"],
html body .receiving-pending-page .label,
html body [data-page="receiving-pending"] .label,
html body .receiving-pending-page [class*="label"],
html body [data-page="receiving-pending"] [class*="label"]{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:var(--sq-muted,#747982)!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:.18em!important;
    text-transform:uppercase!important;
    text-align:left!important;
    white-space:normal!important;
}

/* Values */
html body .sites-index .site-card .value,
html body .sites-page .site-card .value,
html body [data-page="sites"] .site-card .value,
html body .sites-index .site-card [class*="value"],
html body .sites-page .site-card [class*="value"],
html body [data-page="sites"] .site-card [class*="value"],
html body .receiving-pending-page .value,
html body [data-page="receiving-pending"] .value,
html body .receiving-pending-page [class*="value"],
html body [data-page="receiving-pending"] [class*="value"]{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:var(--sq-text,#121212)!important;
    font-size:18px!important;
    line-height:1.12!important;
    font-weight:850!important;
    letter-spacing:-.035em!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

/* Acciones dentro de cards */
html body .sites-index .site-card .actions,
html body .sites-page .site-card .actions,
html body [data-page="sites"] .site-card .actions,
html body .receiving-pending-page .actions,
html body [data-page="receiving-pending"] .actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    padding-top:14px!important;
    margin-top:12px!important;
    border-top:1px solid var(--sq-border-soft,rgba(0,0,0,.055))!important;
}

html body .sites-index .site-card .actions .button,
html body .sites-page .site-card .actions .button,
html body [data-page="sites"] .site-card .actions .button,
html body .receiving-pending-page .actions .button,
html body [data-page="receiving-pending"] .actions .button,
html body .sites-index .site-card .actions button,
html body .sites-page .site-card .actions button,
html body [data-page="sites"] .site-card .actions button,
html body .receiving-pending-page .actions button,
html body [data-page="receiving-pending"] .actions button{
    flex:1 1 auto!important;
    min-width:120px!important;
}

/* Tablas convertidas a bloques respirables en mobile */
@media(max-width:820px){
    html body .sites-index table,
    html body .sites-page table,
    html body [data-page="sites"] table,
    html body .receiving-pending-page table,
    html body [data-page="receiving-pending"] table{
        display:block!important;
        width:100%!important;
        border:0!important;
        box-shadow:none!important;
        background:transparent!important;
    }

    html body .sites-index thead,
    html body .sites-page thead,
    html body [data-page="sites"] thead,
    html body .receiving-pending-page thead,
    html body [data-page="receiving-pending"] thead{
        display:none!important;
    }

    html body .sites-index tbody,
    html body .sites-page tbody,
    html body [data-page="sites"] tbody,
    html body .receiving-pending-page tbody,
    html body [data-page="receiving-pending"] tbody{
        display:grid!important;
        gap:16px!important;
        width:100%!important;
    }

    html body .sites-index tr,
    html body .sites-page tr,
    html body [data-page="sites"] tr,
    html body .receiving-pending-page tr,
    html body [data-page="receiving-pending"] tr{
        display:block!important;
        background:var(--sq-surface,#fff)!important;
        border:1px solid var(--sq-border,#e8e5df)!important;
        border-radius:var(--sq-radius-lg,24px)!important;
        box-shadow:var(--sq-shadow-soft,0 8px 22px rgba(0,0,0,.045))!important;
        padding:20px!important;
        overflow:hidden!important;
    }

    html body .sites-index td,
    html body .sites-page td,
    html body [data-page="sites"] td,
    html body .receiving-pending-page td,
    html body [data-page="receiving-pending"] td{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:5px!important;
        padding:10px 0!important;
        border:0!important;
        border-bottom:1px solid var(--sq-border-soft,rgba(0,0,0,.055))!important;
        text-align:left!important;
    }

    html body .sites-index td:last-child,
    html body .sites-page td:last-child,
    html body [data-page="sites"] td:last-child,
    html body .receiving-pending-page td:last-child,
    html body [data-page="receiving-pending"] td:last-child{
        border-bottom:0!important;
    }

    html body .sites-index td::before,
    html body .sites-page td::before,
    html body [data-page="sites"] td::before,
    html body .receiving-pending-page td::before,
    html body [data-page="receiving-pending"] td::before{
        content:attr(data-label)!important;
        display:block!important;
        color:var(--sq-muted,#747982)!important;
        font-size:11px!important;
        line-height:1.1!important;
        font-weight:900!important;
        letter-spacing:.18em!important;
        text-transform:uppercase!important;
    }

    html body .sites-index td,
    html body .sites-page td,
    html body [data-page="sites"] td,
    html body .receiving-pending-page td,
    html body [data-page="receiving-pending"] td{
        color:var(--sq-text,#121212)!important;
        font-size:18px!important;
        line-height:1.12!important;
        font-weight:850!important;
        letter-spacing:-.035em!important;
    }
}

/* Corrección específica para cards de centros con valores alineados a derecha */
html body .sites-index .card,
html body .sites-page .card,
html body [data-page="sites"] .card{
    padding:22px!important;
}

html body .sites-index .card > *,
html body .sites-page .card > *,
html body [data-page="sites"] .card > *{
    text-align:left!important;
}

html body .sites-index .card .button,
html body .sites-page .card .button,
html body [data-page="sites"] .card .button{
    text-align:center!important;
}

/* Detalle recepción: evitar comprimido tipo ficha contable */
html body .receiving-pending-page .detail-card,
html body [data-page="receiving-pending"] .detail-card,
html body .receiving-pending-page .pending-detail,
html body [data-page="receiving-pending"] .pending-detail{
    background:var(--sq-surface,#fff)!important;
    border:1px solid var(--sq-border,#e8e5df)!important;
    border-radius:var(--sq-radius-xl,28px)!important;
    box-shadow:var(--sq-shadow-card,0 14px 34px rgba(0,0,0,.055))!important;
    padding:24px!important;
    overflow:hidden!important;
}

/* SQUARE_GLOBAL_PHASE4_LEGACY_ISLANDS_END */


/* =========================================================
   PHASE 4.1 · SITES MOBILE CLEANUP
========================================================= */

@media (max-width: 820px){

    .sites-page + .card table,
    .sites-page + .table-card table,
    .sites-page ~ .card table,
    .sites-page ~ .table-card table{
        border-collapse:separate!important;
        border-spacing:0 16px!important;
        width:100%!important;
    }

    .sites-page + .card tbody tr,
    .sites-page + .table-card tbody tr,
    .sites-page ~ .card tbody tr,
    .sites-page ~ .table-card tbody tr{
        display:flex!important;
        flex-direction:column!important;
        gap:12px!important;

        background:#fff!important;
        border:1px solid var(--sq-border,#e7e4de)!important;
        border-radius:28px!important;

        padding:22px!important;

        box-shadow:
            0 2px 10px rgba(0,0,0,.04),
            0 12px 34px rgba(0,0,0,.05)!important;
    }

    .sites-page + .card tbody td,
    .sites-page + .table-card tbody td,
    .sites-page ~ .card tbody td,
    .sites-page ~ .table-card tbody td{
        display:flex!important;
        align-items:flex-start!important;
        justify-content:space-between!important;
        gap:16px!important;

        width:100%!important;

        border:none!important;
        padding:0!important;

        font-size:15px!important;
        line-height:1.35!important;
    }

    .sites-page + .card tbody td::before,
    .sites-page + .table-card tbody td::before,
    .sites-page ~ .card tbody td::before,
    .sites-page ~ .table-card tbody td::before{
        content:attr(data-label);

        flex:0 0 108px;

        font-size:11px!important;
        font-weight:900!important;
        letter-spacing:.18em!important;
        text-transform:uppercase!important;

        color:#8e949d!important;
    }

    .sites-page + .card tbody td:first-child,
    .sites-page + .table-card tbody td:first-child,
    .sites-page ~ .card tbody td:first-child,
    .sites-page ~ .table-card tbody td:first-child{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:4px!important;
    }

    .sites-page + .card tbody td:first-child::before,
    .sites-page + .table-card tbody td:first-child::before,
    .sites-page ~ .card tbody td:first-child::before,
    .sites-page ~ .table-card tbody td:first-child::before{
        content:"CENTRO";
    }

    .sites-page + .card tbody td:last-child,
    .sites-page + .table-card tbody td:last-child,
    .sites-page ~ .card tbody td:last-child,
    .sites-page ~ .table-card tbody td:last-child{
        padding-top:8px!important;
    }

    .sites-page .button.secondary{
        width:100%!important;
        justify-content:center!important;
    }
}



/* =========================================================
   PHASE 5 · NATIVE MOBILE LAYOUTS
========================================================= */

@media (max-width: 820px){

    /* GLOBAL COMPACT RHYTHM */

    main{
        padding-bottom:140px!important;
    }

    .page-header{
        margin-bottom:28px!important;
    }

    .page-header h1{
        margin-bottom:10px!important;
        line-height:.92!important;
        letter-spacing:-.06em!important;
    }

    .page-header p{
        max-width:92%!important;
        line-height:1.18!important;
    }

    .page-header + *{
        margin-top:0!important;
    }

    .card,
    .table-card,
    .panel{
        border-radius:30px!important;
    }

    /* BUTTON STACKING */

    .page-header .actions,
    .page-actions,
    .header-actions{
        display:flex!important;
        flex-direction:column!important;
        gap:12px!important;
        width:100%!important;
    }

    .page-header .actions .button,
    .page-actions .button,
    .header-actions .button{
        width:100%!important;
        justify-content:center!important;
    }

    /* SITES REAL MOBILE CARDS */

    .sites-page table,
    .sites-page tbody,
    .sites-page tr{
        display:block!important;
        width:100%!important;
    }

    .sites-page thead{
        display:none!important;
    }

    .sites-page tr{
        background:#fff!important;

        border:1px solid #ebe7e1!important;
        border-radius:30px!important;

        padding:24px!important;
        margin-bottom:22px!important;

        box-shadow:
            0 2px 10px rgba(0,0,0,.03),
            0 18px 40px rgba(0,0,0,.04)!important;
    }

    .sites-page td{
        display:flex!important;
        justify-content:space-between!important;
        align-items:flex-start!important;

        gap:18px!important;

        width:100%!important;

        padding:0!important;
        margin-bottom:16px!important;

        border:none!important;
    }

    .sites-page td::before{
        content:attr(data-label);

        flex:0 0 100px;

        font-size:11px!important;
        font-weight:900!important;
        letter-spacing:.18em!important;
        text-transform:uppercase!important;

        color:#9096a0!important;
    }

    .sites-page td:first-child{
        flex-direction:column!important;
        gap:4px!important;
    }

    .sites-page td:first-child::before{
        content:"Centro";
    }

    .sites-page td:last-child{
        margin-top:8px!important;
        margin-bottom:0!important;
    }

    .sites-page td:last-child .button{
        width:100%!important;
    }

    /* RECEIVING REAL MOBILE */

    .receiving-pending-page table,
    .receiving-pending-page tbody,
    .receiving-pending-page tr{
        display:block!important;
        width:100%!important;
    }

    .receiving-pending-page thead{
        display:none!important;
    }

    .receiving-pending-page tr{
        background:#fff!important;

        border:1px solid #ebe7e1!important;
        border-radius:32px!important;

        padding:22px!important;
        margin-bottom:22px!important;

        box-shadow:
            0 2px 10px rgba(0,0,0,.03),
            0 18px 40px rgba(0,0,0,.045)!important;
    }

    .receiving-pending-page td{
        display:flex!important;
        justify-content:space-between!important;
        align-items:flex-start!important;

        gap:18px!important;

        width:100%!important;

        padding:0!important;
        margin-bottom:16px!important;

        border:none!important;
    }

    .receiving-pending-page td::before{
        content:attr(data-label);

        flex:0 0 100px;

        font-size:11px!important;
        font-weight:900!important;
        letter-spacing:.18em!important;
        text-transform:uppercase!important;

        color:#9096a0!important;
    }

    .receiving-pending-page td:first-child{
        flex-direction:column!important;
        gap:6px!important;
    }

    .receiving-pending-page td:first-child::before{
        content:"Pedido";
    }

    /* REDUCIR VACÍOS */

    .stack-xl,
    .space-xl{
        margin-bottom:26px!important;
    }

    .stack-lg,
    .space-lg{
        margin-bottom:18px!important;
    }

    .stack-md,
    .space-md{
        margin-bottom:12px!important;
    }

    /* FORMULARIOS MÁS NATIVOS */

    input,
    select,
    textarea{
        min-height:56px!important;
        font-size:17px!important;
    }

    /* CHIPS MÁS iOS */

    .badge,
    .chip{
        border-radius:999px!important;
        padding:10px 14px!important;
    }
}


/* =========================================================
   FASE 5
   DENSIDAD OPERATIVA + RITMO VISUAL APP
========================================================= */

/* =========================================================
   CONTENEDOR GLOBAL
========================================================= */

@media (max-width: 820px){

    main,
    .page,
    .content,
    .container{
        padding-top:14px!important;
    }

    .page-header{
        margin-bottom:18px!important;
    }

    .page-header h1{
        margin-bottom:10px!important;
        line-height:.92!important;
        letter-spacing:-.07em!important;
    }

    .page-header p{
        max-width:92%!important;
        line-height:1.18!important;
    }
}

/* =========================================================
   BOTONERAS SUPERIORES
========================================================= */

@media (max-width:820px){

    .page-header + div,
    .page-header + .actions,
    .page-header + .header-actions{
        margin-top:10px!important;
    }

    .page-header .button,
    .page-header button,
    .page-header a.button{
        min-height:48px!important;
    }
}

/* =========================================================
   CARDS OPERATIVAS
========================================================= */

@media (max-width:820px){

    .card,
    .panel,
    .box,
    .table-card,
    .sq-card{
        padding:22px!important;
        border-radius:28px!important;
    }

    .card + .card,
    .sq-card + .sq-card{
        margin-top:18px!important;
    }

    .card h2,
    .card h3,
    .sq-card h2,
    .sq-card h3{
        line-height:.96!important;
        margin-bottom:14px!important;
    }

    .card p,
    .sq-card p{
        line-height:1.24!important;
    }
}

/* =========================================================
   HOME APP
========================================================= */

@media (max-width:820px){

    .dashboard-grid,
    .app-dashboard-grid{
        gap:18px!important;
    }

    .dashboard-grid .card,
    .app-dashboard-grid .card{
        min-height:auto!important;
    }
}

/* =========================================================
   PURCHASE ORDERS
========================================================= */

@media (max-width:820px){

    .purchase-orders-page .filters,
    .purchase-orders-page .status-filters{
        gap:10px!important;
        margin-top:16px!important;
        margin-bottom:18px!important;
    }

    .purchase-orders-page .filters .button,
    .purchase-orders-page .status-filters .button{
        min-height:44px!important;
        font-size:15px!important;
        padding:0 18px!important;
    }

    .purchase-orders-page .purchase-order-card{
        padding:18px!important;
    }

    .purchase-orders-page .purchase-order-card .actions{
        gap:8px!important;
    }
}

/* =========================================================
   RECEIVING PENDING
========================================================= */

@media (max-width:820px){

    .receiving-pending-page .summary-card{
        padding:22px!important;
    }

    .receiving-pending-page .summary-card strong{
        font-size:32px!important;
    }

    .receiving-pending-page .detail-card{
        padding:18px!important;
    }

    .receiving-pending-page .detail-card .button,
    .receiving-pending-page .detail-card button{
        min-height:52px!important;
        font-size:18px!important;
    }
}

/* =========================================================
   SUPPLIERS
========================================================= */

@media (max-width:820px){

    .suppliers-page .supplier-card{
        padding:22px!important;
    }

    .suppliers-page .supplier-card .button{
        min-height:48px!important;
    }

    .suppliers-page .supplier-search-card{
        padding:20px!important;
    }
}

/* =========================================================
   SITES
========================================================= */

@media (max-width:820px){

    .sites-page table{
        margin-top:18px!important;
    }

    .sites-page tr{
        padding:18px!important;
    }

    .sites-page td{
        padding-top:10px!important;
        padding-bottom:10px!important;
    }

    .sites-page .button{
        min-height:46px!important;
    }
}

/* =========================================================
   FORMULARIOS
========================================================= */

@media (max-width:820px){

    input,
    select,
    textarea{
        min-height:56px!important;
        font-size:18px!important;
    }

    label{
        margin-bottom:8px!important;
    }

    .form-group,
    .field-group{
        margin-bottom:18px!important;
    }
}

/* =========================================================
   BOTTOM NAV
========================================================= */

@media (max-width:820px){

    .bottom-nav,
    .mobile-bottom-nav{
        backdrop-filter:blur(18px)!important;
        background:rgba(255,255,255,.92)!important;
    }

    .bottom-nav a.active,
    .mobile-bottom-nav a.active{
        transform:translateY(-1px);
    }

    .bottom-nav a,
    .mobile-bottom-nav a{
        transition:all .18s ease;
    }
}


/* =========================================================
   FASE 7
   OPERATIONAL UX LOCK
========================================================= */

@media (max-width:820px){

/* =========================================================
   GLOBAL RHYTHM
========================================================= */

body{
    overflow-x:hidden!important;
}

main,
.page,
.content,
.container{
    padding-top:10px!important;
    padding-bottom:110px!important;
}

.page-header{
    margin-bottom:14px!important;
}

.page-header h1{
    margin:0 0 6px!important;
    line-height:.88!important;
    letter-spacing:-.08em!important;
}

.page-header p{
    margin:0!important;
    line-height:1.15!important;
    opacity:.82;
}

/* =========================================================
   CTA SYSTEM
========================================================= */

.button,
button,
a.button{
    min-height:48px!important;
    border-radius:18px!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
}

.button.secondary,
button.secondary{
    background:#fff!important;
    border:1px solid rgba(0,0,0,.08)!important;
}

.button.danger,
button.danger{
    background:#fff5f5!important;
    color:#9e2d2d!important;
}

/* =========================================================
   STACK SPACING
========================================================= */

.card + .card,
.panel + .panel,
.box + .box{
    margin-top:14px!important;
}

.form-group,
.field-group{
    margin-bottom:14px!important;
}

/* =========================================================
   CARDS
========================================================= */

.card,
.panel,
.box,
.table-card,
.sq-card{
    border-radius:26px!important;
    padding:18px!important;
}

.card h2,
.card h3,
.panel h2,
.panel h3{
    line-height:.95!important;
    letter-spacing:-.04em!important;
    margin-bottom:10px!important;
}

.card p,
.panel p{
    line-height:1.2!important;
}

/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea{
    min-height:54px!important;
    border-radius:18px!important;
    font-size:17px!important;
}

/* =========================================================
   PURCHASE ORDERS
========================================================= */

.purchase-orders-page .purchase-order-card,
.purchase-order-card{
    padding:16px!important;
    border-radius:24px!important;
}

.purchase-orders-page .purchase-order-card .actions,
.purchase-order-card .actions{
    display:flex!important;
    gap:8px!important;
    flex-wrap:wrap!important;
}

.purchase-orders-page .purchase-order-card .button,
.purchase-order-card .button{
    flex:1 1 auto!important;
    min-width:120px!important;
}

/* =========================================================
   RECEIVING PENDING
========================================================= */

.receiving-pending-page .card,
.receiving-pending-page .table-card{
    padding:16px!important;
}

.receiving-pending-page strong{
    line-height:.9!important;
}

.receiving-pending-page .button,
.receiving-pending-page button{
    min-height:54px!important;
    font-size:17px!important;
}

/* =========================================================
   MOBILE TABLE BLOCKS
========================================================= */

table{
    border-collapse:separate!important;
    border-spacing:0 12px!important;
}

tbody tr{
    display:block!important;
    background:#fff!important;
    border-radius:24px!important;
    padding:14px!important;
    box-shadow:
        0 8px 24px rgba(0,0,0,.045),
        inset 0 1px 0 rgba(255,255,255,.95)!important;
}

tbody td{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:14px!important;
    border:none!important;
    padding:8px 0!important;
}

tbody td::before{
    content:attr(data-label);
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    opacity:.55!important;
    min-width:88px!important;
}

/* =========================================================
   SITES
========================================================= */

.sites-page tbody tr{
    padding:18px!important;
}

/* =========================================================
   SUPPLIERS
========================================================= */

.suppliers-page .supplier-card{
    padding:18px!important;
}

.suppliers-page .supplier-card .button{
    min-height:46px!important;
}

/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-grid,
.app-dashboard-grid{
    gap:14px!important;
}

.dashboard-grid .card,
.app-dashboard-grid .card{
    min-height:auto!important;
}

/* =========================================================
   ACTION FOOTERS
========================================================= */

.sticky-actions,
.mobile-sticky-actions{
    position:sticky!important;
    bottom:88px!important;
    z-index:40!important;
    padding-top:10px!important;
}

/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav,
.mobile-bottom-nav{
    height:78px!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    backdrop-filter:blur(20px)!important;
    background:rgba(255,255,255,.92)!important;
    border-top:1px solid rgba(0,0,0,.06)!important;
}

.bottom-nav a,
.mobile-bottom-nav a{
    transform:scale(.98);
    transition:all .18s ease!important;
}

.bottom-nav a.active,
.mobile-bottom-nav a.active{
    transform:scale(1)!important;
}

.bottom-nav .icon,
.mobile-bottom-nav .icon{
    font-size:21px!important;
}

}

/* =========================================================
   DESKTOP CLEANUP
========================================================= */

@media (min-width:821px){

.purchase-order-card .actions{
    gap:10px!important;
}

tbody tr{
    transition:background .15s ease;
}

tbody tr:hover{
    background:rgba(0,0,0,.015)!important;
}

}


/* ==========================================================================
   FASE 7.1 · USER CHIP PROFILE DROPDOWN FIX
   Objetivo:
   - El chip de usuario debe ser clicable.
   - No debe quedar deformado por la normalización Square global.
   - El desplegable debe quedar por encima del contenido.
   - Mantener estética Square limpia sin romper logout/profile.
   ========================================================================== */

.store-shell,
.store-shell-header,
.app-shell,
.app-header,
header{
    position:relative!important;
    z-index:900!important;
    overflow:visible!important;
}

/* Mobile */
@media(max-width:820px){
    .store-shell-user,
        max-width:48vw!important;
        height:52px!important;
        min-height:52px!important;
        padding:7px 12px!important;
        gap:10px!important;
    }

        width:32px!important;
        height:32px!important;
        min-width:32px!important;
    }

        position:fixed!important;
        top:calc(env(safe-area-inset-top, 0px) + 86px)!important;
        right:14px!important;
        left:14px!important;
        width:auto!important;
        max-width:none!important;
        z-index:5000!important;
    }
}


/* =========================================================
   GLOBAL SQUARE CONTRAST TUNING
   ========================================================= */

html body{
    --square-card-bg:#ffffff;
    --square-card-border:#e8e8ea;
    --square-card-shadow:0 1px 2px rgba(0,0,0,.04);

    --square-text-main:#111827;
    --square-text-soft:#6b7280;
    --square-text-faded:#9ca3af;

    --square-chip-bg:#f5f5f6;
    --square-chip-border:#e5e7eb;
}

/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */

.card,
.app-card,
.mobile-card,
.dashboard-card,
.panel-card,
.purchase-card,
.settings-card{
    background:var(--square-card-bg)!important;
    border:1px solid var(--square-card-border)!important;
    box-shadow:var(--square-card-shadow)!important;
}

/* ---------------------------------------------------------
   Typography
--------------------------------------------------------- */

.card h1,
.card h2,
.card h3,
.card h4,
.app-card h1,
.app-card h2,
.app-card h3,
.app-card h4,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4{
    color:var(--square-text-main)!important;
}

.card p,
.card small,
.card span,
.app-card p,
.app-card small,
.app-card span,
.dashboard-card p,
.dashboard-card small,
.dashboard-card span{
    color:var(--square-text-soft)!important;
}

/* ---------------------------------------------------------
   Chips
--------------------------------------------------------- */

.chip,
.status-chip,
.filter-chip,
.mobile-chip{
    background:var(--square-chip-bg)!important;
    border:1px solid var(--square-chip-border)!important;
    color:var(--square-text-main)!important;
}

/* ---------------------------------------------------------
   User chip popup tuning
--------------------------------------------------------- */

.app-user-chip-v2-card{
    background:#ffffff!important;
    border:1px solid #e7e7e9!important;
}

.app-user-chip-v2-item{
    background:#ffffff!important;
    border:1px solid #ececef!important;
}

.app-user-chip-v2-item-copy strong{
    color:#111827!important;
}

.app-user-chip-v2-item-copy small{
    color:#7b8190!important;
}

.app-user-chip-v2-logout{
    background:#111827!important;
}

.app-user-chip-v2-logout .app-user-chip-v2-item-copy strong{
    color:#ffffff!important;
}

.app-user-chip-v2-logout .app-user-chip-v2-item-copy small{
    color:rgba(255,255,255,.58)!important;
}

/* ---------------------------------------------------------
   Modal / settings visual cleanup
--------------------------------------------------------- */

.modal-content,
.settings-modal,
.theme-selector-modal{
    background:#ffffff!important;
    border:1px solid #e8e8ea!important;
}

.theme-option,
.theme-card{
    background:#ffffff!important;
    border:1px solid #ececec!important;
}

.theme-option p,
.theme-card p{
    color:#6b7280!important;
}