/* MAS B2B Portal */
*, *::before, *::after { box-sizing: border-box; }

html { background: #f4f6f8 !important; color-scheme: light; }

:root {
    --mas-green:        #1a7a4a;
    --mas-green-dark:   #155f3a;
    --mas-green-light:  #e8f5ee;
    --mas-green-mid:    #c6e8d4;
    --mas-gray:         #6b7280;
    --mas-border:       #e5e7eb;
    --mas-bg:           #f4f6f8;
    --mas-white:        #ffffff;
    --mas-text:         #111827;
    --mas-radius:       10px;
    --mas-shadow:       0 1px 3px rgba(0,0,0,.08);
    --mas-header-h:     64px;
}

/* Pantalla completa cuando se carga como app */
body.mas-app-body {
    background: var(--mas-bg) !important;
    margin: 0;
    padding: 0;
    overscroll-behavior-y: none;
}
body.mas-app-body .mas-portal {
    min-height: 100dvh;
}
/* Fallback si el tema se carga igualmente */
body { background: var(--mas-bg) !important; margin: 0; }

.mas-portal {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mas-text);
    line-height: 1.5;
}

/* ── Login ────────────────────────────────── */
.mas-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mas-green-light);
    padding: 2rem 1rem;
}

.mas-login-box {
    background: var(--mas-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
}

.mas-logo { text-align: center; margin-bottom: 2rem; }
.mas-logo h2 { margin: 0 0 .3rem; color: var(--mas-green); font-size: 1.5rem; }
.mas-logo p  { margin: 0; color: var(--mas-gray); font-size: .9rem; }

.mas-form { display: flex; flex-direction: column; gap: 1rem; }

.mas-field { display: flex; flex-direction: column; gap: .35rem; }
.mas-field label { font-size: .875rem; font-weight: 600; }
.mas-field input {
    padding: .625rem .875rem;
    border: 1.5px solid var(--mas-border);
    border-radius: var(--mas-radius);
    font-size: 1rem;
    width: 100%;
    transition: border-color .15s;
}
.mas-field input:focus { outline: none; border-color: var(--mas-green); }

.mas-help {
    text-align: center;
    font-size: .85rem;
    color: var(--mas-gray);
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.mas-help a { color: var(--mas-green); }

/* ── Buttons ──────────────────────────────── */
.mas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: var(--mas-radius);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background .15s, opacity .15s;
}
.mas-btn-primary {
    background: var(--mas-green);
    color: #fff;
    width: 100%;
}
.mas-btn-primary:hover:not(:disabled) { background: var(--mas-green-dark); }
.mas-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.mas-btn-large { padding: .875rem 1.5rem; font-size: 1.05rem; }
.mas-btn-link {
    background: none;
    border: none;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.mas-btn-link:hover { color: #fff; }

/* ── Notices ──────────────────────────────── */
.mas-notice {
    padding: .75rem 1rem;
    border-radius: var(--mas-radius);
    font-size: .875rem;
}
.mas-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.mas-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Header ───────────────────────────────── */
.mas-header {
    background: var(--mas-green);
    color: #fff;
    padding: env(safe-area-inset-top, 0) 0 0;  /* respeta notch iOS/Android */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.mas-header-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    height: var(--mas-header-h);
}
.mas-header-title { font-weight: 700; font-size: 1.1rem; display: block; }
.mas-header-sub   { font-size: .72rem; opacity: .75; display: block; margin-top: 1px; }
.mas-user { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.mas-user-name { opacity: .9; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botón instalar PWA (floating) */
.mas-fab-install {
    position: fixed;
    bottom: 1.25rem;
    right: 1rem;
    background: var(--mas-green);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: .6rem 1.25rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.28);
    z-index: 150;
    font-family: inherit;
    white-space: nowrap;
    transition: background .15s, transform .15s;
}
.mas-fab-install:hover { background: var(--mas-green-dark); transform: translateY(-1px); }

/* ── Main ─────────────────────────────────── */
.mas-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1rem 6rem;
}
.mas-intro { color: var(--mas-gray); margin-top: 0; font-size: .9rem; }

/* ── Category ─────────────────────────────── */
.mas-category { margin-bottom: 1.5rem; }
.mas-category-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--mas-green);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .4rem .75rem;
    background: var(--mas-green-light);
    border-radius: 6px;
    margin: 0 0 .6rem;
    display: block;
}

/* ── Product row ──────────────────────────── */
.mas-product {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem .875rem;
    border-radius: var(--mas-radius);
    background: var(--mas-white);
    border: 1.5px solid transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: .4rem;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.mas-product.has-qty {
    border-color: var(--mas-green);
    background: var(--mas-green-light);
    box-shadow: 0 2px 8px rgba(26,122,74,.12);
}

.mas-product-info  { min-width: 0; }
.mas-product-name  { display: block; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mas-product-sku   { display: block; font-size: .72rem; color: var(--mas-gray); font-family: monospace; margin-top: .1rem; }

.mas-product-price { text-align: right; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.mas-product-price small { display: block; font-weight: 400; color: var(--mas-gray); font-size: .7rem; }

.mas-product-qty { display: flex; align-items: center; gap: .3rem; }
.mas-qty-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--mas-border);
    background: var(--mas-white);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s, border-color .1s;
    flex-shrink: 0;
}
.mas-qty-btn:hover { background: var(--mas-green-light); border-color: var(--mas-green); }
.mas-qty-input {
    width: 68px;
    min-width: 68px;
    flex-shrink: 0;
    box-sizing: border-box;
    text-align: center;
    padding: .25rem .2rem;
    border: 1.5px solid var(--mas-border);
    border-radius: 5px;
    font-size: .95rem;
    font-family: inherit;
    /* Fuera las flechitas del input number: en escritorio se comen el ancho
       y cortaban la cifra. Para eso ya están los botones + y -. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.mas-qty-input::-webkit-outer-spin-button,
.mas-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mas-qty-input:focus { outline: none; border-color: var(--mas-green); }

/* ── Order footer ─────────────────────────── */
.mas-order-footer {
    margin-top: 1.5rem;
    padding: 1.25rem 1rem;
    background: var(--mas-white);
    border-radius: var(--mas-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.mas-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}
.mas-order-total strong { color: var(--mas-green); font-size: 1.15rem; }
.mas-items-count { font-size: .85rem; color: var(--mas-gray); }

.mas-order-notes { margin-bottom: 1rem; }
.mas-order-notes label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
.mas-order-notes label span { font-weight: 400; color: var(--mas-gray); }
.mas-order-notes textarea {
    width: 100%;
    padding: .625rem .875rem;
    border: 1.5px solid var(--mas-border);
    border-radius: var(--mas-radius);
    font-size: .9rem;
    font-family: inherit;
    resize: vertical;
}
.mas-order-notes textarea:focus { outline: none; border-color: var(--mas-green); }

/* ── Confirmation overlay ─────────────────── */
.mas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}
.mas-confirm-box {
    background: var(--mas-white);
    border-radius: 12px;
    padding: 2rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    text-align: center;
}
.mas-confirm-icon { font-size: 3rem; margin-bottom: .5rem; }
.mas-confirm-box h2 { margin: 0 0 .5rem; color: var(--mas-green); }
.mas-confirm-box p  { color: var(--mas-gray); margin-bottom: 1.25rem; }

.mas-summary { margin: 1rem 0 1.5rem; text-align: left; }
.mas-summary table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mas-summary th { font-size: .72rem; color: var(--mas-gray); text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; border-bottom: 2px solid var(--mas-border); }
.mas-summary td { padding: .4rem .5rem; border-bottom: 1px solid var(--mas-border); }
.mas-summary td:last-child { text-align: right; font-weight: 600; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 640px) {
    .mas-product {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .mas-product-price {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .mas-product-qty {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .mas-header-inner { flex-wrap: wrap; }
    .mas-order-total  { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ── Revisión antes de enviar ─────────────── */
.mas-confirm-box { max-height: 90vh; overflow-y: auto; }

.mas-review-notes {
    text-align: left;
    font-size: .85rem;
    color: var(--mas-gray);
    background: #f8fafc;
    border: 1px solid var(--mas-border);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin: 0 0 1rem;
}

.mas-summary td small { display: block; color: var(--mas-gray); font-size: .72rem; }
.mas-summary tfoot td { border-bottom: none; padding-top: .45rem; }
.mas-summary tfoot tr:first-child td { border-top: 2px solid var(--mas-border); padding-top: .6rem; }
.mas-summary tfoot td:first-child { text-align: right; color: var(--mas-gray); font-weight: 500; }
.mas-summary tr.mas-review-total td { font-size: 1.05rem; font-weight: 700; color: var(--mas-green); }

.mas-review-actions { display: flex; gap: .75rem; }
.mas-review-actions .mas-btn { flex: 1; width: auto; }

.mas-btn-secondary {
    background: var(--mas-white);
    color: var(--mas-gray);
    border: 1px solid var(--mas-border);
}
.mas-btn-secondary:hover:not(:disabled) { background: #f1f5f9; color: #111827; }
.mas-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
    .mas-review-actions { flex-direction: column-reverse; }
    .mas-confirm-box { padding: 1.25rem; }
}

/* ── Avisos de stock en la revisión ───────── */
.mas-warn {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    text-align: left;
}
.mas-summary tr.mas-stock-warn td { background: #fffbeb; }
.mas-stock-tag {
    display: inline-block;
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border-radius: 4px;
    padding: .1rem .4rem;
}

/* ── Disponibilidad en el catálogo ────────── */
.mas-stock-badge {
    display: inline-block;
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 4px;
    line-height: 1.4;
}
.mas-stock-low  { background: #fef3c7; color: #92400e; }
.mas-stock-none { background: #fee2e2; color: #b91c1c; }
.mas-stock-over { background: #b91c1c; color: #fff; }
.mas-product.mas-product-over,
.mas-product.has-qty.mas-product-over {
    border-color: #b91c1c;
    background: #fff5f5;
    box-shadow: 0 2px 8px rgba(185,28,28,.12);
}

/* ── Últimos pedidos (plegado) ────────────── */
.mas-last-orders { margin-bottom: .75rem; }
.mas-orders-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--mas-white);
    border: 1.5px solid var(--mas-border);
    border-radius: var(--mas-radius);
    padding: .6rem .875rem;
    cursor: pointer;
    font-family: inherit;
    font-size: .875rem;
    color: var(--mas-gray);
    text-align: left;
}
.mas-orders-toggle:hover { border-color: var(--mas-green); }
.mas-orders-toggle:focus-visible { outline: 2px solid var(--mas-green); outline-offset: 2px; }
.mas-orders-summary strong { color: var(--mas-text, #111827); }
.mas-orders-caret { transition: transform .15s; flex-shrink: 0; }
.mas-orders-toggle.abierto .mas-orders-caret { transform: rotate(180deg); }

.mas-orders-list { margin-top: .5rem; display: grid; gap: .5rem; }
.mas-order-card {
    background: var(--mas-white);
    border: 1px solid var(--mas-border);
    border-radius: var(--mas-radius);
    padding: .6rem .875rem;
}
.mas-order-head {
    display: flex; align-items: baseline; gap: .5rem;
    font-size: .82rem; color: var(--mas-gray);
    padding-bottom: .35rem; border-bottom: 1px solid var(--mas-border);
}
.mas-order-head strong { margin-left: auto; font-size: .95rem; color: var(--mas-green); }
.mas-order-num { font-family: monospace; font-size: .74rem; }
.mas-order-items { list-style: none; margin: .35rem 0 0; padding: 0; }
.mas-order-items li {
    display: flex; gap: .5rem; justify-content: space-between;
    font-size: .82rem; padding: .12rem 0;
}
.mas-order-items em { font-style: normal; color: var(--mas-gray); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .mas-orders-caret { transition: none; }
}