/* Sistema visual compartido: portada, accesos y paneles */
:root {
    --market-ink: #102019;
    --market-green: #174f3c;
    --market-green-deep: #0d3327;
    --market-orange: #ed6037;
    --market-orange-dark: #ce4824;
    --market-paper: #f3f5ef;
    --market-card: #ffffff;
    --market-line: #dfe5dc;
    --market-muted: #68756e;
    --market-shadow: 0 22px 55px rgba(16, 32, 25, .12);
}

body.market-auth-page,
body.market-panel-page {
    --tx: #14201b !important;
    --tx2: #53625a !important;
    --tx3: #68756e !important;
    --bg: #f3f5ef !important;
    --bg2: #ffffff !important;
    --bg3: #f3f6f2 !important;
    --bg4: #ffffff !important;
    --bg5: #edf2ed !important;
    color: var(--tx) !important;
    background: var(--market-paper);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

body.market-auth-page {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 11% 12%, rgba(237, 96, 55, .96) 0 8%, transparent 8.2%),
        linear-gradient(115deg, var(--market-green-deep) 0 52%, var(--market-paper) 52% 100%);
}

body.market-auth-page::before {
    content: "Compra. Vende. Crece.";
    position: fixed;
    left: clamp(32px, 7vw, 120px);
    top: 50%;
    width: min(38vw, 530px);
    color: #fff;
    font-family: "Syne", "Segoe UI", sans-serif;
    font-size: clamp(3rem, 5.8vw, 6.3rem);
    font-weight: 800;
    letter-spacing: -.07em;
    line-height: .88;
    transform: translateY(-50%);
}

body.market-auth-page::after {
    content: "Tu marketplace, en un solo lugar";
    position: fixed;
    left: clamp(35px, 7.3vw, 125px);
    top: calc(50% + 145px);
    color: rgba(255,255,255,.72);
    font-size: .94rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

body.market-auth-page .login-container {
    width: min(48%, 690px);
    min-height: 100vh;
    margin-left: auto;
    padding: clamp(22px, 5vw, 72px);
    display: grid;
    place-items: center;
    background: transparent;
}

body.market-auth-page .login-card,
#loginScreen .login-card,
#deliveryLogin .market-delivery-login {
    width: 100%;
    max-width: 470px;
    padding: clamp(28px, 4vw, 46px) !important;
    border: 1px solid rgba(23, 79, 60, .1);
    border-radius: 30px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--market-shadow);
    backdrop-filter: blur(18px);
}

body.market-auth-page .login-logo .icon,
#loginScreen .login-logo .icon,
.market-login-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: var(--market-orange);
    color: white;
    font-size: 2.35rem;
    box-shadow: 0 12px 24px rgba(237,96,55,.25);
}

body.market-auth-page .login-logo .icon img,
#loginScreen .login-logo .icon img,
.market-login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
body.market-auth-page .login-logo,
#loginScreen .login-logo { width: auto; height: auto; overflow: visible; background: transparent; box-shadow: none; }
body.market-auth-page h1,
body.market-auth-page h2,
#loginScreen h1,
#deliveryLogin h2 { font-family: "Syne", "Segoe UI", sans-serif; color: var(--market-ink) !important; letter-spacing: -.035em; }
.market-login-copy { margin: 0 0 24px; color: var(--market-muted); text-align: center; }

body.market-auth-page input,
#loginScreen input,
#deliveryLogin input {
    min-height: 50px;
    border: 1px solid var(--market-line) !important;
    border-radius: 14px !important;
    background: #f8faf7 !important;
    color: var(--market-ink) !important;
}

body.market-auth-page input:focus,
#loginScreen input:focus,
#deliveryLogin input:focus { border-color: var(--market-orange) !important; box-shadow: 0 0 0 4px rgba(237,96,55,.12) !important; outline: none; }

body.market-auth-page button,
body.market-auth-page .btn,
#loginScreen .btn,
#loginScreen .btn-login,
#deliveryLogin .btn {
    min-height: 50px;
    border: 0;
    border-radius: 14px !important;
    background: var(--market-orange) !important;
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(237,96,55,.2);
}

#loginScreen,
#deliveryLogin {
    background:
        radial-gradient(circle at 12% 14%, var(--market-orange) 0 6%, transparent 6.2%),
        linear-gradient(120deg, var(--market-green-deep), var(--market-green)) !important;
}

/* Paneles */
body.market-panel-page .sidebar {
    width: 268px;
    padding: 18px 14px;
    border: 0;
    background: linear-gradient(180deg, var(--market-green-deep), var(--market-green)) !important;
    color: white;
    box-shadow: 18px 0 45px rgba(13,51,39,.12);
}

body.market-panel-page .sidebar-logo,
body.market-panel-page .logo { padding: 10px 10px 22px; color: white !important; font-family: "Syne", sans-serif; }
body.market-panel-page .sidebar-logo img,
body.market-panel-page .logo img { max-height: 48px; object-fit: contain; }
body.market-panel-page .sidebar-link,
body.market-panel-page .nav-item,
body.market-panel-page .sidebar a {
    margin: 3px 0;
    border-radius: 13px;
    color: rgba(255,255,255,.76) !important;
    transition: .2s ease;
}
body.market-panel-page .sidebar-link:hover,
body.market-panel-page .sidebar-link.active,
body.market-panel-page .nav-item:hover,
body.market-panel-page .nav-item.active,
body.market-panel-page .sidebar a:hover,
body.market-panel-page .sidebar a.active { background: rgba(255,255,255,.11) !important; color: #fff !important; transform: translateX(2px); }
body.market-panel-page .sidebar-link.active,
body.market-panel-page .nav-item.active { box-shadow: inset 4px 0 var(--market-orange); }

body.market-panel-page .main,
body.market-panel-page .main-content,
body.market-panel-page .content { margin-left: 268px; background: var(--market-paper) !important; }
body.market-panel-page .topbar,
body.market-panel-page .header { border-bottom: 1px solid var(--market-line); background: rgba(243,245,239,.9) !important; backdrop-filter: blur(16px); }
body.market-panel-page h1,
body.market-panel-page h2,
body.market-panel-page h3 { font-family: "Syne", "Segoe UI", sans-serif; letter-spacing: -.025em; }
body.market-panel-page .card,
body.market-panel-page .stat-card,
body.market-panel-page .panel,
body.market-panel-page .section-card {
    border: 1px solid var(--market-line) !important;
    border-radius: 20px !important;
    background: var(--market-card) !important;
    color: var(--tx) !important;
    box-shadow: 0 10px 30px rgba(16,32,25,.055) !important;
}
body.market-panel-page .btn-primary,
body.market-panel-page .btn-gr,
body.market-panel-page button[type="submit"] { border: 0 !important; border-radius: 12px !important; background: var(--market-orange) !important; color: white !important; font-weight: 800; }
body.market-panel-page input,
body.market-panel-page select,
body.market-panel-page textarea { border-color: var(--market-line) !important; border-radius: 12px !important; background: #fbfcfa !important; color: var(--market-ink) !important; }
body.market-panel-page input::placeholder,
body.market-panel-page textarea::placeholder { color: #829087 !important; opacity: 1; }
/* Texto sobre superficies claras. No se aplica un color único a todos los
   descendientes porque eso anulaba el contraste de botones, badges y alertas. */
body.market-panel-page .card-body,
body.market-panel-page td,
body.market-panel-page label { color: var(--tx2) !important; }
body.market-panel-page .card p,
body.market-panel-page .panel p,
body.market-panel-page .section-card p { color: var(--tx2); }
body.market-panel-page h1,
body.market-panel-page h2,
body.market-panel-page h3,
body.market-panel-page h4,
body.market-panel-page strong { color: var(--tx) !important; }
body.market-panel-page table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff !important;
    color: var(--tx) !important;
}
body.market-panel-page thead,
body.market-panel-page tbody,
body.market-panel-page tr,
body.market-panel-page td { background: #fff !important; }
body.market-panel-page tr:hover td { background: #f3f6f2 !important; }
body.market-panel-page td { color: var(--tx2) !important; border-color: var(--market-line) !important; }
body.market-panel-page th { color: #53625a !important; background: #edf2ed !important; border-color: var(--market-line) !important; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }

/* Contraste para controles y superficies con color de marca. */
body.market-panel-page .btn-gr,
body.market-panel-page .btn-rd,
body.market-panel-page .btn-am,
body.market-panel-page .btn-bl,
body.market-panel-page .btn-primary,
body.market-panel-page button[type="submit"],
body.market-panel-page .toast,
body.market-panel-page .toast-error,
body.market-panel-page .notification-toast {
    color: #fff !important;
}
body.market-panel-page .btn-gr *,
body.market-panel-page .btn-rd *,
body.market-panel-page .btn-am *,
body.market-panel-page .btn-bl *,
body.market-panel-page .btn-primary *,
body.market-panel-page button[type="submit"] *,
body.market-panel-page .toast *,
body.market-panel-page .notification-toast * {
    color: inherit !important;
}
body.market-panel-page .sidebar,
body.market-panel-page .sidebar p,
body.market-panel-page .sidebar label,
body.market-panel-page .sidebar strong,
body.market-panel-page .sidebar-section {
    color: rgba(255,255,255,.82) !important;
}
body.market-panel-page .sidebar-logo,
body.market-panel-page .sidebar-logo span,
body.market-panel-page .sidebar .active,
body.market-panel-page .sidebar .active * {
    color: #fff !important;
}

/* Badges conservan su color semántico y nunca heredan el texto de la tarjeta. */
body.market-panel-page .badge-gr { color: #126044 !important; background: #dff4e9 !important; }
body.market-panel-page .badge-rd { color: #a92323 !important; background: #fde5e5 !important; }
body.market-panel-page .badge-am { color: #8a4b00 !important; background: #fff0cf !important; }
body.market-panel-page .badge-bl { color: #174f9b !important; background: #e2edff !important; }
body.market-panel-page .badge-pi { color: #9d225d !important; background: #fde4f0 !important; }

body.market-panel-page a:not(.btn):not(.sidebar-link):not(.nav-item) { color: var(--market-green) !important; }
body.market-panel-page input:disabled,
body.market-panel-page select:disabled,
body.market-panel-page textarea:disabled { color: #59665f !important; background: #edf1ec !important; opacity: 1; }
body.market-panel-page option { color: #14201b !important; background: #fff !important; }

@media (max-width: 820px) {
    body.market-auth-page { background: linear-gradient(155deg, var(--market-green-deep) 0 31%, var(--market-paper) 31.2%); }
    body.market-auth-page::before { content: "Tu marketplace"; position: absolute; inset: 38px 24px auto; width: auto; text-align: center; transform: none; font-size: clamp(2.2rem, 11vw, 4rem); }
    body.market-auth-page::after { display: none; }
    body.market-auth-page .login-container { width: 100%; min-height: 100vh; padding: 150px 16px 24px; }
    body.market-auth-page .login-card { border-radius: 24px; }

    body.market-panel-page .sidebar { width: 68px !important; padding: 12px 7px !important; }
    body.market-panel-page .main,
    body.market-panel-page .main-content,
    body.market-panel-page .content { margin-left: 68px !important; width: calc(100% - 68px); padding-left: 12px !important; padding-right: 12px !important; }
    body.market-panel-page .sidebar-logo,
    body.market-panel-page .logo { padding: 8px 2px 18px; font-size: 0; }
    body.market-panel-page .sidebar-link,
    body.market-panel-page .nav-item { min-height: 48px; justify-content: center; padding: 10px 6px !important; font-size: 0 !important; }
    body.market-panel-page .sidebar-link i,
    body.market-panel-page .nav-item i,
    body.market-panel-page .sidebar-link .icon { margin: 0 !important; font-size: 20px !important; }
    body.market-panel-page .card,
    body.market-panel-page .stat-card { border-radius: 16px !important; }
    body.market-panel-page .table-container,
    body.market-panel-page .table-responsive { overflow-x: auto; }
}

@media (max-width: 480px) {
    body.market-auth-page .login-container { padding-inline: 10px; }
    body.market-auth-page .login-card,
    #loginScreen .login-card,
    #deliveryLogin .market-delivery-login { padding: 24px 18px !important; border-radius: 20px; }
}