:root{
    --bg:#f6f6f3;
    --card:#fff;
    --ink:#111;
    --muted:#555;
    --border:rgba(0,0,0,.08);
    --accent:#111;
    --accent-soft:#e9f2ff;
    --nav-height:92px;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

body{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px))}

a{color:inherit}

.app-shell{min-height:100vh}

main{
    width:min(1120px,calc(100% - 28px));
    margin:12px auto 40px;
}

.app-clean-topbar{
    width:min(1120px,calc(100% - 28px));
    margin:12px auto 0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.app-user-wrap{position:relative;z-index:50}

.app-user-chip{
    border:1px solid var(--border);
    background:rgba(255,255,255,.88);
    min-height:52px;
    padding:8px 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    cursor:pointer;
    font:inherit;
}

.app-user-chip-icon{
    width:30px;
    height:30px;
    border-radius:999px;
    background:#f3f3f3;
    border:1px solid var(--border);
}

.app-user-chip-name{
    display:block;
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:900;
    line-height:1;
}

.app-user-chip-role{
    display:block;
    margin-top:5px;
    font-size:11px;
    letter-spacing:.22em;
    font-weight:900;
}

.app-user-menu{
    position:absolute;
    right:0;
    top:64px;
    display:none;
    width:300px;
    max-width:calc(100vw - 28px);
    padding:12px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 24px 60px rgba(0,0,0,.16);
}

.app-user-wrap.is-open .app-user-menu{display:block}

.app-user-menu strong{display:block;font-size:18px}
.app-user-menu small{display:block;margin:5px 0 14px;color:#666}

.app-user-menu a,
.app-user-menu button{
    width:100%;
    min-height:46px;
    border-radius:16px;
    border:1px solid var(--border);
    background:#f8f8f5;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:#111;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.app-user-menu form{margin:10px 0 0}

.notice{
    width:min(1120px,calc(100% - 28px));
    margin:12px auto;
    padding:12px 14px;
    border-radius:16px;
    background:#edf7ec;
    color:#1f622d;
    font-weight:800;
}

.page-header,
.section-header{
    margin:24px 0 22px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.page-header h1,
.section-header h2{
    margin:0;
    font-size:clamp(38px,9vw,64px);
    line-height:.92;
    letter-spacing:-.075em;
    font-weight:950;
}

.page-header p,
.section-header p{
    margin:8px 0 0;
    max-width:760px;
    color:#333;
    font-size:clamp(18px,4.2vw,24px);
    line-height:1.22;
}

.actions,
.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.actions form,
.form-actions form{margin:0;display:inline-flex}

.button,
a.button,
button.button,
input.button{
    appearance:none;
    min-height:38px;
    padding:8px 13px;
    border-radius:16px;
    border:1px solid var(--border);
    background:#111;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font:inherit;
    font-size:14px;
    font-weight:850;
    line-height:1.1;
    cursor:pointer;
    box-shadow:none;
}

.button.secondary,
a.button.secondary,
button.button.secondary{
    background:#fff;
    color:#111;
}

.button.danger,
button.button.danger{
    background:#9f1d1d;
    color:#fff;
}

.grid{
    display:grid;
    gap:10px;
}

.grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.card,
form.card,
.line-card,
.table-card{
    background:rgba(255,255,255,.94);
    border:1px solid var(--border);
    border-radius:24px;
    padding:18px;
    margin:0 0 16px;
    box-shadow:0 14px 34px rgba(0,0,0,.05);
}

.card h2{
    margin:0 0 10px;
    font-size:clamp(24px,6vw,38px);
    line-height:1;
    letter-spacing:-.055em;
    font-weight:950;
}

.card p{
    margin:0 0 16px;
    color:#333;
    font-size:14px;
    line-height:1.28;
}

.table-card{overflow-x:auto}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:12px 10px;
    border-bottom:1px solid rgba(0,0,0,.06);
    text-align:left;
    vertical-align:top;
}

th{
    font-size:12px;
    color:#777;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    background:#eef0e5;
    color:#30351b;
    font-size:13px;
    font-weight:850;
}

.mobile-bottom-nav{
    position:fixed;
    left:50%;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
    width:min(760px,calc(100% - 20px));
    min-height:76px;
    padding:8px;
    border-radius:30px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 18px 50px rgba(0,0,0,.16);
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    z-index:999;
    backdrop-filter:blur(18px);
}

.mobile-bottom-nav a{
    min-width:0;
    border-radius:22px;
    text-decoration:none;
    color:#6d6d6d;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:13px;
    font-weight:850;
}

.mobile-bottom-nav a span:first-child{
    font-size:24px;
    line-height:1;
}

.mobile-bottom-nav a.is-active{
    background:var(--accent-soft);
    color:#111;
}

.mobile-bottom-nav a.mobile-main-action{
    background:linear-gradient(180deg,#7fb4ea,#4f91d6);
    color:#fff;
}

@media(max-width:760px){
    main{
        width:calc(100% - 28px);
        margin-top:10px;
    }

    .app-clean-topbar{
        width:calc(100% - 28px);
    }

    .grid.three,
    .grid{
        grid-template-columns:1fr;
    }

    .actions,
    .form-actions{
        gap:8px;
    }

    .button,
    a.button,
    button.button{
        min-height:42px;
        padding:10px 14px;
        border-radius:15px;
        font-size:14px;
    }

    .card,
    form.card,
    .line-card,
    .table-card{
        padding:12px;
        border-radius:24px;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td{
        display:block;
    }

    thead{display:none}

    tbody tr{
        padding:14px;
        margin-bottom:12px;
        border-radius:22px;
        background:#fff;
        border:1px solid var(--border);
    }

    td{
        display:grid;
        grid-template-columns:108px minmax(0,1fr);
        gap:8px;
        padding:7px 0;
        border-bottom:1px solid rgba(0,0,0,.045);
    }

    td:last-child{border-bottom:0}

    td:nth-child(1)::before{content:"Fecha"}
    td:nth-child(2)::before{content:"Pedido"}
    td:nth-child(3)::before{content:"Proveedor"}
    td:nth-child(4)::before{content:"Centro"}
    td:nth-child(5)::before{content:"Estado"}
    td:nth-child(6)::before{content:"Total"}
    td:nth-child(7)::before{content:"Acciones"}

    td::before{
        color:#777;
        font-size:12px;
        font-weight:900;
        letter-spacing:.12em;
        text-transform:uppercase;
    }

    td .actions{
        width:100%;
    }
}

/* ===================================================
   COMPRASAPP V3 RECOVERY FINAL
   Fuente visual única estable: layout, tarjetas, botones, pedidos y cinta inferior
   =================================================== */

:root{
    --app-bg:#f5f4ef;
    --app-card:#ffffff;
    --app-ink:#111111;
    --app-muted:#68665f;
    --app-border:rgba(17,17,17,.09);
    --app-green:#687326;
    --app-green-dark:#4d581a;
    --app-danger:#9f1d1d;
    --app-radius:24px;
    --app-shadow:0 14px 34px rgba(0,0,0,.065);
    --bottom-nav-height:76px;
}

html,body{
    max-width:100%;
    overflow-x:hidden;
    background:var(--app-bg);
    color:var(--app-ink);
}

body{
    padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));
}

main{
    width:min(1120px, calc(100% - 28px));
    margin:0 auto;
    padding:18px 0 calc(28px + var(--bottom-nav-height));
}

.app-clean-topbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    justify-content:flex-end;
    padding:12px 14px 4px;
    background:linear-gradient(180deg,var(--app-bg) 0%,rgba(245,244,239,.92) 82%,rgba(245,244,239,0) 100%);
}

.app-user-chip{
    border:1px solid var(--app-border);
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    border-radius:999px;
    min-height:52px;
    padding:8px 14px;
}

.v3-page{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.v3-hero{
    margin:10px 0 4px;
}

.v3-hero h1{
    margin:0;
    font-size:clamp(36px,10vw,58px);
    line-height:.92;
    letter-spacing:-.075em;
    font-weight:950;
}

.v3-hero p{
    margin:10px 0 0;
    color:#2f2f2b;
    font-size:clamp(18px,4.8vw,23px);
    line-height:1.22;
}

.v3-toolbar,
.v3-actions,
.v3-filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    align-items:center;
}

.v3-filter-bar{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
}

.v3-btn,
a.v3-btn,
button.v3-btn,
.button,
a.button,
button.button{
    appearance:none;
    border:1px solid var(--app-border);
    border-radius:16px;
    min-height:42px;
    padding:10px 15px;
    background:#111;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font:inherit;
    font-size:15px;
    line-height:1.1;
    font-weight:850;
    cursor:pointer;
    white-space:nowrap;
}

.v3-btn.secondary,
a.v3-btn.secondary,
button.v3-btn.secondary,
.button.secondary,
a.button.secondary,
button.button.secondary,
.button-secondary{
    background:#fff;
    color:#111;
}

.v3-btn.danger,
button.v3-btn.danger,
.button.danger,
button.button.danger{
    background:var(--app-danger);
    color:#fff;
}

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

.v3-card,
.v3-order-card,
.card,
.line-card{
    background:rgba(255,255,255,.96);
    border:1px solid var(--app-border);
    border-radius:var(--app-radius);
    padding:18px;
    box-shadow:var(--app-shadow);
}

.v3-card h2{
    margin:0 0 10px;
    font-size:clamp(25px,6vw,38px);
    line-height:.96;
    letter-spacing:-.06em;
    font-weight:950;
}

.v3-card p{
    margin:0 0 14px;
    color:#34342f;
    font-size:16px;
    line-height:1.28;
}

.v3-order-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.v3-order-main{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr auto;
    gap:14px;
    align-items:start;
}

.v3-kicker{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.v3-value{
    font-size:16px;
    font-weight:850;
    color:#111;
    overflow-wrap:anywhere;
}

.v3-value a{
    color:var(--app-green-dark);
    font-weight:900;
}

.v3-order-actions{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(0,0,0,.07);
}

.mobile-bottom-nav.role-aware-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99999;
    height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    background:rgba(255,255,255,.98);
    border-top:1px solid rgba(0,0,0,.10);
    box-shadow:0 -12px 30px rgba(0,0,0,.12);
}

.mobile-bottom-nav.role-aware-bottom-nav a{
    min-width:0;
    height:56px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-decoration:none;
    color:#4a4a45;
    font-size:11px;
    font-weight:850;
}

.mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
    font-size:20px;
    line-height:1;
}

.mobile-bottom-nav.role-aware-bottom-nav a.is-active{
    background:#eef0df;
    color:var(--app-green-dark);
}

.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
    background:#111;
    color:#fff;
}

@media(max-width:760px){
    main{
        width:100%;
        margin:0;
        padding:12px 14px calc(22px + var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));
    }

    .app-clean-topbar{
        padding:10px 12px 2px;
    }

    .v3-card-grid,
    .v3-order-main{
        grid-template-columns:1fr;
    }

    .v3-card,
    .v3-order-card,
    .card,
    .line-card{
        border-radius:22px;
        padding:16px;
    }

    .v3-toolbar,
    .v3-filter-bar,
    .v3-order-actions{
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .v3-toolbar > *,
    .v3-filter-bar > *,
    .v3-order-actions > *{
        flex:0 0 auto;
    }

    .grid,
    .grid.two,
    .grid.three{
        display:grid;
        grid-template-columns:1fr !important;
        gap:12px;
    }

    input,
    select,
    textarea{
        max-width:100%;
        font-size:16px;
    }
}

/* === END COMPRASAPP V3 RECOVERY FINAL === */

/* === FINAL SQUARE BOTTOM NAV === */
@media(max-width:760px){
    :root{
        --bottom-nav-height:86px;
    }

    body{
        padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px)) !important;
    }

    main{
        padding-bottom:calc(var(--bottom-nav-height) + 26px + env(safe-area-inset-bottom,0px)) !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        transform:none !important;
        width:100vw !important;
        max-width:100vw !important;
        min-width:100vw !important;
        height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px)) !important;

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

        margin:0 !important;
        padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) !important;
        box-sizing:border-box !important;

        background:rgba(255,255,255,.98) !important;
        border-radius:0 !important;
        border:0 !important;
        border-top:1px solid rgba(0,0,0,.08) !important;
        box-shadow:0 -8px 28px rgba(0,0,0,.10) !important;
        overflow:hidden !important;
        z-index:99999 !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a{
        min-width:0 !important;
        width:100% !important;
        height:64px !important;
        padding:6px 2px !important;
        border-radius:18px !important;

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

        color:#666 !important;
        text-decoration:none !important;
        font-weight:850 !important;
        font-size:13px !important;
        line-height:1 !important;
        overflow:hidden !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
        font-size:25px !important;
        line-height:1 !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a span:last-child{
        display:block !important;
        max-width:100% !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a.is-active{
        background:#eaf3ff !important;
        color:#111 !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
        background:linear-gradient(180deg,#8ec5ff,#5fa8ef) !important;
        color:#fff !important;
    }
}
/* === END FINAL SQUARE BOTTOM NAV === */


/* ===================================================
   PHASE 10 TRUE RECOVERY
   Pedidos + detalle + Más. Sin tocar bottom nav.
   =================================================== */

.purchase-order-form{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    overflow:visible !important;
}

.purchase-order-form .grid,
.purchase-order-form .grid.two,
.purchase-order-form .grid.three{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
}

.purchase-order-form label{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    color:#111 !important;
}

.purchase-order-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.purchase-order-form select,
.purchase-order-form textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:56px !important;
    box-sizing:border-box !important;
    border-radius:18px !important;
    border:1px solid rgba(104,115,38,.24) !important;
    background:#faf9f3 !important;
    padding:12px 16px !important;
    color:#111 !important;
    font-size:20px !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    box-shadow:none !important;
}

.purchase-order-form textarea{
    min-height:110px !important;
}

.purchase-order-form .purchase-quick-helper{
    background:#fff8e8 !important;
    border:1px solid #ead49a !important;
    border-radius:22px !important;
    padding:16px 18px !important;
    color:#5f5244 !important;
    font-size:20px !important;
    line-height:1.24 !important;
}

.purchase-order-form .v3-section-header{
    border-top:1px solid rgba(0,0,0,.14) !important;
    padding-top:18px !important;
    margin:18px 0 6px !important;
}

.purchase-order-form #add-line-button{
    display:inline-flex !important;
}

.purchase-order-form #lines-wrapper{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}

.purchase-order-form .line-card{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:18px !important;
    border-radius:24px !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.045) !important;
    overflow:visible !important;
}

.purchase-order-form .line-card-header{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin:0 0 12px !important;
}

.purchase-order-form .line-card-header strong{
    display:none !important;
}

.purchase-order-form .line-card .grid,
.purchase-order-form .line-card .grid.two,
.purchase-order-form .line-card .grid.three{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
}

.purchase-order-form .purchase-item-results{
    width:100% !important;
    max-width:100% !important;
    margin-top:10px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 14px 32px rgba(0,0,0,.08) !important;
}

.purchase-order-form .purchase-item-result{
    width:100% !important;
    text-align:left !important;
    padding:14px 16px !important;
    border:0 !important;
    border-bottom:1px solid rgba(0,0,0,.06) !important;
    background:#fff !important;
    color:#111 !important;
    font-size:16px !important;
    line-height:1.18 !important;
    white-space:normal !important;
}

.purchase-order-form .line-quantity{
    max-width:140px !important;
    text-align:center !important;
}

.purchase-order-form .remove-line-button{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    padding:0 !important;
    border-radius:999px !important;
    font-size:0 !important;
    background:#ead7d2 !important;
    color:#7b2923 !important;
}

.purchase-order-form .remove-line-button::after{
    content:"×";
    font-size:28px;
    font-weight:950;
    line-height:1;
}

.purchase-order-form .totals-card,
.purchase-order-form .line-total{
    display:none !important;
}

.purchase-order-show .v3-toolbar{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:10px !important;
    -webkit-overflow-scrolling:touch;
}

.purchase-order-show .v3-toolbar form{
    flex:0 0 auto !important;
}

.purchase-detail-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
}

.purchase-detail-grid > div{
    padding:14px 0 !important;
    border-bottom:1px solid rgba(0,0,0,.06) !important;
}

.purchase-detail-grid strong{
    display:block !important;
    margin-top:6px !important;
    font-size:21px !important;
    line-height:1.16 !important;
    font-weight:850 !important;
    overflow-wrap:anywhere !important;
}

.purchase-line-summary h3{
    margin:0 0 12px !important;
    font-size:24px !important;
    line-height:1.05 !important;
    font-weight:950 !important;
}

.purchase-lines-list{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
}

.purchase-show-totals{
    display:block !important;
}

.purchase-show-totals .totals p{
    display:flex !important;
    justify-content:space-between !important;
    gap:16px !important;
    font-size:20px !important;
    font-weight:850 !important;
}

.more-grid .v3-actions{
    margin-top:16px !important;
}

.more-grid .v3-actions form{
    display:inline-flex !important;
}

@media(max-width:760px){
    .purchase-order-form .line-card{
        padding:16px !important;
        border-radius:24px !important;
    }

    .purchase-order-form label{
        font-size:19px !important;
    }

    .purchase-order-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .purchase-order-form select,
    .purchase-order-form textarea{
        min-height:54px !important;
        font-size:19px !important;
    }

    .purchase-order-show .v3-toolbar .v3-btn,
    .purchase-order-show .v3-toolbar button.v3-btn{
        flex:0 0 auto !important;
    }

    .more-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
    }
}

/* === END PHASE 10 TRUE RECOVERY === */



/* ===================================================
   PHASE 11 LOGIN MORE COMPACT
   Compacta login, Más y reduce aspecto “app para ciegos”
   =================================================== */

.v3-hero h1{
    font-size:clamp(32px,8.4vw,54px) !important;
    letter-spacing:-.065em !important;
}

.v3-hero p{
    font-size:clamp(17px,4.2vw,22px) !important;
}

.v3-card h2{
    font-size:clamp(24px,6.2vw,36px) !important;
    letter-spacing:-.055em !important;
}

.v3-card p{
    font-size:17px !important;
    line-height:1.25 !important;
}

.v3-btn,
a.v3-btn,
button.v3-btn{
    min-height:40px !important;
    padding:9px 14px !important;
    border-radius:15px !important;
    font-size:16px !important;
}

.app-more-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
}

.app-more-card{
    padding:18px !important;
    border-radius:22px !important;
}

.app-more-card .v3-actions{
    gap:8px !important;
}

.app-auth-page{
    min-height:calc(100vh - 120px);
    justify-content:flex-start;
}

.app-auth-card{
    max-width:560px;
    width:100%;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    padding:20px !important;
}

.app-auth-card label{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    font-size:17px !important;
    font-weight:850 !important;
}

.app-auth-card input:not([type="checkbox"]){
    width:100% !important;
    min-height:48px !important;
    border-radius:15px !important;
    border:1px solid rgba(0,0,0,.12) !important;
    background:#fff !important;
    padding:10px 13px !important;
    font-size:18px !important;
    font-weight:650 !important;
}

.app-check-row{
    flex-direction:row !important;
    align-items:center !important;
}

.app-check-row input{
    width:24px !important;
    height:24px !important;
}

.app-auth-error{
    border-color:#9f1d1d !important;
}

.purchase-order-form .line-card{
    padding:14px !important;
    border-radius:20px !important;
}

.purchase-order-form .line-card label{
    font-size:17px !important;
}

.purchase-order-form .line-card input,
.purchase-order-form .line-card select{
    min-height:48px !important;
    font-size:18px !important;
}

.purchase-order-form .purchase-line-manual-details,
.purchase-order-form .purchase-line-advanced,
.purchase-order-form .purchase-advanced-details{
    padding:10px 0 !important;
    border:0 !important;
    background:transparent !important;
}

.purchase-order-form summary{
    font-size:17px !important;
    font-weight:800 !important;
    color:#4d581a !important;
}

@media (min-width:760px){
    .app-more-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* === END PHASE 11 LOGIN MORE COMPACT === */

/* ==========================================
   QUICK NAV 4 + FIXED HOME/MORE
   Inicio + 4 accesos intercambiables + Más
   ========================================== */
@media (max-width: 760px){
    .mobile-bottom-nav.role-aware-bottom-nav{
        display:grid !important;
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
        gap:4px !important;
        width:100% !important;
        max-width:none !important;
        left:0 !important;
        right:0 !important;
        padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
        overflow:visible !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a{
        min-width:0 !important;
        width:100% !important;
        padding:8px 2px !important;
        border-radius:22px !important;
        overflow:hidden !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a span:first-child{
        font-size:26px !important;
        line-height:1 !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a span:last-child{
        font-size:12px !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action{
        transform:none !important;
        min-height:68px !important;
    }
}


/* ==========================================
   APPLY SAVED ACCENT COLOR
   Fuente: AppAppearanceController + body vars
   ========================================== */
.mobile-bottom-nav.role-aware-bottom-nav a.is-active{
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color:var(--accent-text) !important;
}

.mobile-bottom-nav.role-aware-bottom-nav a.is-active span{
    color:var(--accent-text) !important;
}

.app-user-chip-name,
.app-user-chip-role{
    color:var(--accent-dark) !important;
}

.app-user-chip-icon{
    border-color:var(--accent) !important;
    background:var(--accent-soft) !important;
}

.appearance-radio:checked + .appearance-check{
    background:var(--accent-dark) !important;
    color:#fff !important;
}

/* === END APPLY SAVED ACCENT COLOR === */

/* ==========================================
   FINAL ACCENT THEME APPLICATION
   Uses layout-injected vars only.
   ========================================== */
.mobile-bottom-nav.role-aware-bottom-nav a.is-active{
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color:var(--accent-text) !important;
}

.mobile-bottom-nav.role-aware-bottom-nav a.is-active span{
    color:var(--accent-text) !important;
}

.app-user-chip{
    color:var(--accent-dark) !important;
}

.app-user-chip-icon{
    background:var(--accent-soft) !important;
    border-color:var(--accent) !important;
}

.notice,
.alert-success{
    background:var(--accent-soft) !important;
    color:var(--accent-dark) !important;
}

.appearance-radio:checked + .appearance-check{
    background:var(--accent-dark) !important;
    color:#fff !important;
}


/* ==========================================
   QUICK NAV ACTIVE ONLY
   La acción principal no queda coloreada por defecto.
   Solo se colorea la vista actual.
   ========================================== */
.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action:not(.is-active){
    background:transparent !important;
    color:#5f5f5f !important;
}

.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action:not(.is-active) span{
    color:#5f5f5f !important;
}

.mobile-bottom-nav.role-aware-bottom-nav a.mobile-main-action.is-active{
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color:var(--accent-text) !important;
}

/* ==========================================
   MOBILE SQUARE STYLE PHASE 1
   Compatibilidad visual para vistas antiguas
   Sin tocar lógica ni Blade.
   ========================================== */

@media (max-width: 760px){
    .app-shell{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .page-header,
    .v3-hero{
        margin:0 0 14px !important;
    }

    .page-header h1,
    .v3-hero h1{
        font-size:clamp(30px, 9vw, 42px) !important;
        line-height:.96 !important;
        letter-spacing:-.055em !important;
        margin:0 !important;
    }

    .page-header p,
    .v3-hero p,
    .muted{
        font-size:14px !important;
        line-height:1.35 !important;
        color:var(--app-muted) !important;
    }

    .card,
    .v3-card,
    .form-card,
    .upload-zone-card,
    .upload-mini-card,
    .v3-order-card{
        border-radius:24px !important;
        border:1px solid var(--app-border) !important;
        background:var(--app-card) !important;
        box-shadow:var(--app-shadow) !important;
        padding:16px !important;
    }

    .button,
    .v3-btn,
    button.button,
    a.button{
        min-height:46px !important;
        border-radius:999px !important;
        padding:12px 16px !important;
        font-size:14px !important;
        font-weight:900 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        text-decoration:none !important;
    }

    .button:not(.secondary):not(.danger),
    .v3-btn:not(.secondary):not(.danger){
        background:#111 !important;
        color:#fff !important;
        border-color:#111 !important;
    }

    .button.secondary,
    .v3-btn.secondary,
    .button.button-secondary{
        background:#f3f3f1 !important;
        color:#111 !important;
        border-color:#e4e4df !important;
    }

    .button.danger,
    .v3-btn.danger{
        background:#fff1f1 !important;
        color:#9f1d1d !important;
        border-color:#f0caca !important;
    }

    .actions,
    .v3-actions,
    .v3-toolbar{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:8px !important;
    }

    input,
    select,
    textarea{
        min-height:46px !important;
        border-radius:16px !important;
        border:1px solid #deded8 !important;
        background:#fff !important;
        padding:10px 12px !important;
        font-size:16px !important;
    }

    table{
        font-size:13px !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav{
        z-index:80 !important;
    }
}

/* === END MOBILE SQUARE STYLE PHASE 1 === */



/* ==========================================
   MOBILE SQUARE STYLE PHASE 2
   Formularios, inputs, selects, file upload
   ========================================== */

@media (max-width: 760px){
    form.card,
    .form-card,
    .purchase-order-form,
    .upload-mini-card,
    .upload-zone-card{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    label{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    input,
    select,
    textarea{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    input[type="file"]{
        width:100% !important;
        max-width:100% !important;
        min-height:52px !important;
        padding:10px !important;
        overflow:hidden !important;
        font-size:14px !important;
        border-radius:18px !important;
        background:#fff !important;
    }

    .card input,
    .card select,
    .card textarea,
    .v3-card input,
    .v3-card select,
    .v3-card textarea{
        margin-top:6px !important;
    }

    .purchase-items-search-card,
    .purchase-item-search,
    .purchase-item-results,
    #purchase-item-catalog-results,
    #supplierItemResults{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .purchase-item-results,
    #purchase-item-catalog-results,
    #supplierItemResults{
        overflow:hidden !important;
    }

    .purchase-item-result{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        border-radius:16px !important;
        padding:12px !important;
    }

    .page-header,
    .v3-hero{
        max-width:100% !important;
        overflow-wrap:anywhere !important;
    }

    .page-header h1,
    .v3-hero h1,
    .card h1,
    .card h2,
    .v3-card h1,
    .v3-card h2{
        overflow-wrap:anywhere !important;
    }

    .card,
    .v3-card,
    .v3-order-card{
        max-width:100% !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .card p,
    .v3-card p,
    .v3-order-card p{
        overflow-wrap:anywhere !important;
    }

    .actions,
    .v3-actions,
    .v3-toolbar{
        max-width:100% !important;
    }

    .actions > *,
    .v3-actions > *,
    .v3-toolbar > *{
        max-width:100% !important;
    }

    .button,
    .v3-btn,
    a.button,
    a.v3-btn,
    button.button,
    button.v3-btn{
        white-space:normal !important;
        text-align:center !important;
    }
}

/* === END MOBILE SQUARE STYLE PHASE 2 === */


/* ==========================================
   MOBILE SQUARE STYLE PHASE 3
   Safe area + formularios largos
   ========================================== */

@media (max-width: 760px){
    body{
        padding-bottom:calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-shell,
    main,
    .v3-page,
    .app-page,
    form.card,
    .form-card,
    .purchase-order-form,
    .card,
    .v3-card{
        scroll-margin-bottom:170px !important;
    }

    .app-shell > main{
        padding-bottom:170px !important;
    }

    .purchase-order-form,
    .upload-zone-card,
    .upload-mini-card,
    .form-card{
        margin-bottom:24px !important;
    }

    .card:last-child,
    .v3-card:last-child,
    form.card:last-child{
        margin-bottom:120px !important;
    }

    .actions,
    .v3-actions,
    .v3-toolbar{
        margin-top:14px !important;
        padding-bottom:4px !important;
    }

    .purchase-order-form .actions,
    .form-card .actions{
        position:relative !important;
        z-index:1 !important;
    }

    .mobile-bottom-nav.role-aware-bottom-nav{
        padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow:0 -18px 34px rgba(245,244,239,.92) !important;
    }
}

/* === END MOBILE SQUARE STYLE PHASE 3 === */

/* =========================================================
   ComprasApp V3.5.1 — Quick Nav consolidation
   Pantalla real: fixed items + checkbox picker + status + reset.
   ========================================================= */

.quicknav-page{
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding:0 0 calc(var(--bottom-nav-height, 86px) + 28px);
}

.quicknav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.quicknav-close{
    width:46px;
    height:46px;
    border-radius:999px;
    background:rgba(17,17,17,.06);
    color:var(--app-ink, #111);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    line-height:1;
    font-weight:600;
}

.quicknav-save{
    min-height:46px;
    border:0;
    border-radius:999px;
    background:var(--accent, #111);
    color:#fff;
    font-size:15px;
    font-weight:850;
    padding:0 20px;
    cursor:pointer;
}

.quicknav-title h1{
    margin:0 0 8px;
    font-size:24px;
    line-height:1.08;
    letter-spacing:-.04em;
    color:var(--app-ink, #111);
}

.quicknav-title p{
    margin:0 0 20px;
    max-width:34ch;
    font-size:14px;
    line-height:1.38;
    color:var(--app-muted, #68665f);
}

.quicknav-section-title{
    margin:20px 0 8px;
    font-size:13px;
    line-height:1.15;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:var(--app-ink, #111);
}

.quicknav-help{
    margin:0 0 10px;
    font-size:12px;
    line-height:1.35;
    color:var(--app-muted, #68665f);
}

.quicknav-list{
    background:var(--app-card, #fff);
    border:1px solid var(--app-border, rgba(17,17,17,.09));
    border-radius:var(--app-radius, 24px);
    box-shadow:var(--app-shadow, 0 14px 34px rgba(0,0,0,.065));
    overflow:hidden;
}

.quicknav-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 42px;
    gap:12px;
    align-items:center;
    min-height:62px;
    padding:10px 14px;
    border-bottom:1px solid var(--app-border, rgba(17,17,17,.09));
}

.quicknav-row:last-child{
    border-bottom:0;
}

.quicknav-icon{
    width:34px;
    height:34px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-soft, rgba(17,17,17,.08));
    font-size:19px;
}

.quicknav-label{
    min-width:0;
    color:var(--app-ink, #111);
    font-size:15px;
    line-height:1.12;
    font-weight:850;
}

.quicknav-desc{
    display:block;
    margin-top:4px;
    color:var(--app-muted, #68665f);
    font-size:12px;
    line-height:1.25;
    font-weight:650;
}

.quicknav-checkbox{
    display:none;
}

.quicknav-toggle{
    width:36px;
    height:36px;
    border-radius:999px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent, #111);
    color:#fff;
    font-size:22px;
    line-height:1;
    font-weight:850;
}

.quicknav-toggle.is-off{
    background:rgba(17,17,17,.065);
    color:rgba(17,17,17,.38);
}

.quicknav-row.quicknav-locked{
    opacity:.42;
}

.quicknav-fixed{
    opacity:.58;
}

.quicknav-status{
    margin-top:12px;
    border-radius:18px;
    background:rgba(17,17,17,.045);
    border:1px solid var(--app-border, rgba(17,17,17,.09));
    padding:12px 14px;
    color:var(--app-muted, #68665f);
    font-size:13px;
    line-height:1.3;
    font-weight:800;
}

.quicknav-reset{
    margin-top:10px;
    padding-bottom:calc(var(--bottom-nav-height, 86px) + 28px);
}

.quicknav-reset button{
    width:100%;
    min-height:48px;
    border:0;
    border-radius:18px;
    background:rgba(17,17,17,.06);
    color:var(--app-ink, #111);
    font-size:15px;
    font-weight:850;
    cursor:pointer;
}

@media(max-width:420px){
    .quicknav-page{
        padding-left:2px;
        padding-right:2px;
    }

    .quicknav-title h1{
        font-size:22px;
    }

    .quicknav-title p{
        font-size:13px;
        margin-bottom:16px;
    }

    .quicknav-row{
        grid-template-columns:36px minmax(0,1fr) 38px;
        min-height:60px;
        gap:10px;
        padding:9px 12px;
    }

    .quicknav-icon{
        width:32px;
        height:32px;
        font-size:18px;
    }

    .quicknav-label{
        font-size:14px;
    }

    .quicknav-toggle{
        width:34px;
        height:34px;
    }
}


/* =========================================================
   ComprasApp V3.5.1 — Purchase Order Create UI COMPACT
   Corrige escala excesiva: formularios más densos y operativos.
   ========================================================= */

body:has(form[action*="purchase-orders"]) label{
    margin-bottom:4px;
    color:var(--app-muted, #68665f);
    font-size:10.5px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

body:has(form[action*="purchase-orders"]) input:not([type="checkbox"]):not([type="radio"]),
body:has(form[action*="purchase-orders"]) select,
body:has(form[action*="purchase-orders"]) textarea{
    width:100%;
    min-height:38px;
    border:1px solid var(--app-border, rgba(17,17,17,.09));
    border-radius:13px;
    background:#fff;
    color:var(--app-ink, #111);
    font-size:13.5px;
    line-height:1.2;
    font-weight:650;
    padding:7px 11px;
    outline:none;
    box-shadow:none;
}

body:has(form[action*="purchase-orders"]) textarea{
    min-height:72px;
}

body:has(form[action*="purchase-orders"]) input[type="date"]{
    min-height:38px;
    font-size:13.5px;
    font-weight:700;
}

body:has(form[action*="purchase-orders"]) input:focus,
body:has(form[action*="purchase-orders"]) select:focus,
body:has(form[action*="purchase-orders"]) textarea:focus{
    border-color:var(--accent, #111);
    box-shadow:0 0 0 3px var(--accent-soft, rgba(17,17,17,.10));
}

body:has(form[action*="purchase-orders"]) input[type="file"]{
    min-height:auto;
    padding:9px;
    border-style:dashed;
    background:rgba(17,17,17,.025);
}

body:has(form[action*="purchase-orders"]) button,
body:has(form[action*="purchase-orders"]) .button,
body:has(form[action*="purchase-orders"]) .btn{
    min-height:38px;
    border-radius:14px;
    font-size:13.5px;
    font-weight:800;
}

body:has(form[action*="purchase-orders"]) table input,
body:has(form[action*="purchase-orders"]) table select{
    min-height:36px;
    border-radius:12px;
    font-size:13px;
}

body:has(form[action*="purchase-orders"]) .form-group,
body:has(form[action*="purchase-orders"]) .field,
body:has(form[action*="purchase-orders"]) .mb-3,
body:has(form[action*="purchase-orders"]) .mb-4{
    margin-bottom:10px;
}

body:has(form[action*="purchase-orders"]) small,
body:has(form[action*="purchase-orders"]) .help,
body:has(form[action*="purchase-orders"]) .form-text{
    color:var(--app-muted, #68665f);
    font-size:11px;
    line-height:1.25;
}

@media(max-width:760px){
    body:has(form[action*="purchase-orders"]) input:not([type="checkbox"]):not([type="radio"]),
    body:has(form[action*="purchase-orders"]) select,
    body:has(form[action*="purchase-orders"]) textarea{
        min-height:38px;
        font-size:13.5px;
        border-radius:13px;
    }

    body:has(form[action*="purchase-orders"]) textarea{
        min-height:68px;
    }

    body:has(form[action*="purchase-orders"]) button,
    body:has(form[action*="purchase-orders"]) .button,
    body:has(form[action*="purchase-orders"]) .btn{
        min-height:38px;
    }
}


/* =========================================================
   ComprasApp V3.5.2 - PO create date containment + receiving labels
   Small scoped visual fix. No routes/controllers/data touched.
   ========================================================= */

.purchase-order-form,
.purchase-order-form * {
    min-width: 0;
}

.purchase-order-form input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    padding-left: 9px !important;
    padding-right: 8px !important;
}

.purchase-order-form label:has(input[type="date"]) {
    min-width: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 760px) {
    .purchase-order-form .grid:has(input[type="date"]) {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .purchase-order-form input[type="date"] {
        min-height: 38px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        padding: 7px 8px !important;
    }

    .purchase-order-form .purchase-compact-hidden:has(input[name="order_number"]) {
        display: none !important;
    }

    .receiving-pending-page table td:nth-child(1)::before { content: "Pedido" !important; }
    .receiving-pending-page table td:nth-child(2)::before { content: "Fecha" !important; }
    .receiving-pending-page table td:nth-child(3)::before { content: "Proveedor" !important; }
    .receiving-pending-page table td:nth-child(4)::before { content: "Centro" !important; }
    .receiving-pending-page table td:nth-child(5)::before { content: "Producto" !important; }
    .receiving-pending-page table td:nth-child(6)::before { content: "Pedido" !important; }
    .receiving-pending-page table td:nth-child(7)::before { content: "Recibido" !important; }
    .receiving-pending-page table td:nth-child(8)::before { content: "Pendiente" !important; }
    .receiving-pending-page table td:nth-child(9)::before { content: "Importe" !important; }
    .receiving-pending-page table td:nth-child(10)::before { content: "Acciones" !important; }

    .receiving-pending-page td {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }
}


/* =========================================================
   ComprasApp V3.5.3 - Document-first purchase order form
   UX-only: upload first, manual lines folded.
   ========================================================= */

.purchase-order-form .purchase-document-first{
    display:grid !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:18px !important;
}

.purchase-order-form .purchase-document-kicker{
    font-size:10.5px !important;
    font-weight:900 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    color:var(--app-muted,#68665f) !important;
}

.purchase-order-form .purchase-document-first h2{
    margin:0 !important;
    font-size:18px !important;
    line-height:1.12 !important;
    letter-spacing:-.025em !important;
    font-weight:950 !important;
}

.purchase-order-form .purchase-document-first p{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    color:var(--app-muted,#68665f) !important;
}

.purchase-order-form .purchase-document-grid{
    gap:9px !important;
}

.purchase-order-form .purchase-quick-helper-muted{
    padding:10px 12px !important;
    font-size:12.5px !important;
    line-height:1.3 !important;
}

.purchase-order-form .purchase-manual-lines{
    border:1px solid var(--app-border,rgba(17,17,17,.09)) !important;
    border-radius:18px !important;
    background:#fff !important;
    overflow:hidden !important;
}

.purchase-order-form .purchase-manual-lines > summary{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:46px !important;
    padding:11px 12px !important;
    list-style:none !important;
    cursor:pointer !important;
    font-size:13px !important;
    font-weight:950 !important;
    color:#111 !important;
}

.purchase-order-form .purchase-manual-lines > summary::-webkit-details-marker{
    display:none !important;
}

.purchase-order-form .purchase-manual-lines > summary small{
    font-size:11px !important;
    color:var(--app-muted,#68665f) !important;
}

.purchase-order-form .purchase-manual-lines-body{
    padding:0 10px 12px !important;
}