/* ============================================================
   Gournet Dashboard – Stylesheet
   Lineamientos gráficos: gour-net.cl
   ============================================================ */

/* ── Reset & tokens (dark default) ── */
.gournet-app *,
.gournet-app *::before,
.gournet-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Full-viewport takeover — resetea html/body y wrappers del tema WP ── */
html.gd-page,
html.gd-page body {
    margin:     0 !important;
    padding:    0 !important;
    width:      100% !important;
    min-height: 100% !important;
    background: #13141a !important;
}
html.gd-page[data-theme="light"],
html.gd-page[data-theme="light"] body {
    background: #F9F8F7 !important;
}

/* Wrappers comunes de temas WordPress — transparentes para no tapar la app */
html.gd-page #page,
html.gd-page #main,
html.gd-page #content,
html.gd-page #primary,
html.gd-page .site,
html.gd-page .site-content,
html.gd-page .site-inner,
html.gd-page main,
html.gd-page article,
html.gd-page .hentry,
html.gd-page .hfeed,
html.gd-page .entry-content,
html.gd-page .post-content,
html.gd-page .wp-site-blocks,
html.gd-page .is-layout-flow,
html.gd-page .wp-block-group,
html.gd-page .wp-block-post-content {
    background: transparent !important;
    padding:    0 !important;
    margin:     0 !important;
    max-width:  none !important;
    width:      100% !important;
    border:     none !important;
    box-shadow: none !important;
}

.gournet-app {
    width:      100% !important;
    min-height: 100svh !important;
}

.gournet-app {
    /* Brand colors — gour-net.cl */
    --clr-accent:         #EA529F;   /* Magenta principal */
    --clr-accent-dark:    #d4428f;
    --clr-accent2:        #554CFA;   /* Púrpura secundario */
    --clr-green:          #4EB8BA;   /* Verde teal de la marca */
    --clr-yellow:         #FAC632;
    --clr-red:            #ef4444;

    /* Dark surface */
    --clr-bg:             #13141a;
    --clr-surface:        #1d1f28;
    --clr-border:         #2c2f3d;
    --clr-text:           #f0f0f2;
    --clr-muted:          #8892a4;
    --clr-hover-row:      rgba(255,255,255,.03);
    --clr-tab-bg:         rgba(255,255,255,.06);
    --clr-tab-hover:      rgba(255,255,255,.11);
    --clr-badge-neutral:  rgba(255,255,255,.08);

    --radius:             20px;      /* Cartas redondeadas como la web */
    --radius-sm:          10px;
    --shadow:             0 4px 28px rgba(0,0,0,.45);
    --font:               'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    font-family:  var(--font);
    background:   var(--clr-bg);
    color:        var(--clr-text);
    min-height:   100svh;
    padding:      0 0 env(safe-area-inset-bottom, 24px);
    border-radius: 0;
    overflow:     clip; /* clip no crea scroll-container, lo que permite position:sticky en hijos */
    font-size:    15px;
    line-height:  1.5;
}

/* ── Light mode — colores de gour-net.cl ── */
.gournet-app[data-theme="light"] {
    --clr-bg:            #F9F8F7;   /* Off-white del sitio */
    --clr-surface:       #ffffff;
    --clr-border:        #e6e4e2;
    --clr-text:          #403E3D;   /* Texto oscuro del sitio */
    --clr-muted:         #706e6c;
    --clr-hover-row:     rgba(0,0,0,.025);
    --clr-tab-bg:        rgba(0,0,0,.05);
    --clr-tab-hover:     rgba(0,0,0,.09);
    --clr-badge-neutral: rgba(0,0,0,.07);
    --shadow:            0 4px 24px rgba(0,0,0,.07);
}

/* ── Header — fondo oscuro #212529 igual que la navbar de gour-net.cl ── */
.gd-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    /* padding-top incluye el safe-area-inset-top para cubrir el notch/Dynamic Island */
    padding:         calc(14px + env(safe-area-inset-top, 0px)) 24px 14px;
    background:      #212529;
    border-bottom:   1px solid rgba(255,255,255,.07);
    gap:             12px;
    position:        sticky;
    top:             0;
    /* El header se extiende hasta el borde superior incluyendo el notch */
    margin-top:      calc(-1 * env(safe-area-inset-top, 0px));
    z-index:         100;
}

.gd-header__brand {
    display:     flex;
    align-items: center;
    gap:         12px;
    min-width:   0;
    flex:        1;
}

.gd-header .gd-logo {
    height:      36px !important;
    width:       auto !important;
    max-width:   160px !important;
    flex-shrink: 0;
    object-fit:  contain;
    display:     block;
}

.gd-header__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.gd-last-update {
    font-size:   .72rem;
    font-weight: 300;
    color:       rgba(255,255,255,.4);
    white-space: nowrap;
    letter-spacing: .3px;
}

/* ── Buttons ── */
.gd-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    border:          none;
    cursor:          pointer;
    font-family:     var(--font);
    font-size:       .85rem;
    font-weight:     600;
    letter-spacing:  .3px;
    border-radius:   var(--radius-sm);
    transition:      background .2s, transform .1s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
    touch-action:    manipulation;
}
.gd-btn:active { transform: scale(.93); }

.gd-btn--primary {
    background:  var(--clr-accent);
    color:       #fff;
    padding:     10px 24px;
    min-height:  44px;
    box-shadow:  0 4px 14px rgba(234,82,159,.35);
}
.gd-btn--primary:hover {
    background:  var(--clr-accent-dark);
    box-shadow:  0 4px 18px rgba(234,82,159,.5);
}

/* Header icon buttons — always dark-themed */
.gd-btn--icon {
    background:    rgba(255,255,255,.1);
    color:         #e2e8f0;
    width:         40px;
    height:        40px;
    min-width:     40px;
    border-radius: 50%;
    padding:       0;
}
.gd-btn--icon svg { width: 18px; height: 18px; pointer-events: none; }
.gd-btn--icon:hover { background: rgba(255,255,255,.19); }
.gd-btn--icon.is-spinning svg { animation: spin .8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ensure [hidden] always wins ── */
.gd-loading[hidden],
.gd-error[hidden],
.gd-content[hidden],
.gd-login-error[hidden],
.gd-login-lock[hidden],
#gd-login-spinner[hidden],
#gd-login-btn-text[hidden],
#gd-eye-show[hidden],
#gd-eye-hide[hidden],
#gd-rut-spinner[hidden] { display: none !important; }

/* ── Loading / Error ── */
.gd-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    min-height:      55svh;
    color:           var(--clr-muted);
    font-size:       .9rem;
    font-weight:     300;
}

.gd-spinner {
    width:            44px;
    height:           44px;
    border:           3px solid var(--clr-border);
    border-top-color: var(--clr-accent);
    border-radius:    50%;
    animation:        spin .7s linear infinite;
}

.gd-error {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             14px;
    min-height:      55svh;
    color:           var(--clr-muted);
}
.gd-error svg { width: 48px; height: 48px; color: var(--clr-red); }

/* ── Tabs — scroll horizontal, sticky bajo el header ── */
.gd-tabs {
    display:                    flex;
    flex-wrap:                  nowrap;
    gap:                        6px;
    padding:                    12px 24px 12px;
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    position:                   sticky;
    top:                        var(--header-h, 68px);
    background:                 var(--clr-bg);
    z-index:                    90;
    border-bottom:              1px solid var(--clr-border);
}
.gd-tabs::-webkit-scrollbar { display: none; }

.gd-tab {
    background:    var(--clr-tab-bg);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color:         var(--clr-muted);
    cursor:        pointer;
    font-family:   var(--font);
    font-size:     .78rem;
    font-weight:   600;
    letter-spacing:.3px;
    padding:       8px 16px;
    min-height:    38px;
    transition:    background .18s, color .18s, border-color .18s, box-shadow .18s;
    white-space:   nowrap;
    flex-shrink:   0;
    -webkit-tap-highlight-color: transparent;
    touch-action:  manipulation;
}
.gd-tab:hover { background: var(--clr-tab-hover); color: var(--clr-text); }
.gd-tab[aria-selected="true"] {
    background:   var(--clr-accent);
    border-color: var(--clr-accent);
    color:        #fff;
    box-shadow:   0 3px 12px rgba(234,82,159,.35);
}

.gd-tab--all {
    background:   rgba(85,76,250,.15);
    border-color: rgba(85,76,250,.35);
    color:        #a09af7;
}
.gd-tab--all[aria-selected="true"] {
    background:   var(--clr-accent2);
    border-color: var(--clr-accent2);
    color:        #fff;
    box-shadow:   0 3px 12px rgba(85,76,250,.35);
}

/* ── KPI Cards ── */
.gd-kpis {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap:                   14px;
    padding:               18px 24px;
    margin-top:            112px;  /* Espacio para header (68px) + tabs (~44px) sticky */
}

.gd-kpi {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius);
    padding:       18px 16px;
    position:      relative;
    overflow:      hidden;
    transition:    border-color .2s, transform .15s, box-shadow .2s;
}
.gd-kpi:hover {
    border-color: rgba(234,82,159,.35);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow);
}

.gd-kpi::before {
    content:       '';
    position:      absolute;
    top:           0; left: 0; right: 0;
    height:        3px;
    background:    var(--kpi-accent, var(--clr-accent));
    border-radius: var(--radius) var(--radius) 0 0;
}

.gd-kpi__icon {
    font-size:     1.4rem;
    margin-bottom: 8px;
    display:       block;
}

.gd-kpi__label {
    font-size:      .66rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color:          var(--clr-muted);
    margin-bottom:  5px;
}

.gd-kpi__value {
    font-size:   1.45rem;
    font-weight: 700;
    color:       var(--clr-text);
    line-height: 1.15;
    word-break:  break-all;
}

.gd-kpi__sub {
    font-size:   .72rem;
    font-weight: 300;
    color:       var(--clr-muted);
    margin-top:  6px;
    display:     flex;
    align-items: center;
    gap:         5px;
    flex-wrap:   wrap;
}

.gd-kpi__badge {
    display:      inline-flex;
    align-items:  center;
    gap:          3px;
    font-size:    .7rem;
    font-weight:  700;
    padding:      2px 8px;
    border-radius:99px;
    letter-spacing:.2px;
}
.gd-kpi__badge--up      { background: rgba(78,184,186,.18); color: var(--clr-green); }
.gd-kpi__badge--down    { background: rgba(239,68,68,.18);  color: var(--clr-red); }
.gd-kpi__badge--neutral { background: var(--clr-badge-neutral); color: var(--clr-muted); }

/* ── Generic Card ── */
.gd-card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.gd-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    padding:         16px 20px 14px;
    border-bottom:   1px solid var(--clr-border);
}

.gd-card__title {
    font-size:   .92rem;
    font-weight: 600;
    letter-spacing: .2px;
    color:       var(--clr-text);
}

/* ── Chart rows ── */
.gd-charts-row {
    padding: 0 24px 18px;
    display: grid;
    gap:     14px;
}

.gd-card--wide { grid-column: 1 / -1; }

.gd-chart-wrap {
    padding:  18px;
    position: relative;
    height:   300px;
}
.gd-chart-wrap--md { height: 240px; }
.gd-chart-wrap canvas { max-width: 100%; }

/* ── Legend ── */
.gd-legend {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    font-size: .73rem;
    font-weight: 400;
    color:     var(--clr-muted);
}
.gd-legend-item { display: flex; align-items: center; gap: 6px; }
.gd-legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Table ── */
.gd-card:has(.gd-table) { margin: 0 24px 24px; }
.gd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gd-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}

.gd-table thead th {
    padding:          10px 16px;
    text-align:       left;
    font-size:        .68rem;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   .8px;
    color:            var(--clr-muted);
    border-bottom:    1px solid var(--clr-border);
    white-space:      nowrap;
    position:         sticky;
    top:              0;
    background:       var(--clr-card);
    z-index:          1;
}

/* Right-align numeric columns */
.gd-table thead th:nth-child(3),
.gd-table thead th:nth-child(4),
.gd-table td:nth-child(3),
.gd-table td:nth-child(4) { text-align: right; }

.gd-table tbody tr {
    border-bottom: 1px solid var(--clr-border);
    transition:    background .18s, box-shadow .18s;
}
.gd-table tbody tr:last-child { border-bottom: none; }
.gd-table tbody tr:hover      { background: var(--clr-hover-row); }

.gd-table td {
    padding:         14px 16px;
    color:           var(--clr-text);
    white-space:     nowrap;
    font-weight:     400;
    vertical-align:  middle;
}

/* Rank badge */
.gd-table td:first-child {
    width:       44px;
    text-align:  center;
    padding:     10px 8px 10px 16px;
}

.gd-rank-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    font-size:       .78rem;
    font-weight:     700;
    line-height:     1;
}
.gd-rank-badge--1     { background: rgba(255,193,7,.16);    color: #F5C518; }
.gd-rank-badge--2     { background: rgba(176,190,197,.16);  color: #A8BACB; }
.gd-rank-badge--3     { background: rgba(188,111,61,.18);   color: #D4845A; }
.gd-rank-badge--other { background: transparent;            color: var(--clr-muted); font-size: .82rem; }

/* Name column */
.gd-table td:nth-child(2) {
    font-weight: 500;
    max-width:   180px;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* Sales today */
.gd-table td:nth-child(3) {
    font-weight:            700;
    font-size:              .92rem;
    font-variant-numeric:   tabular-nums;
}

/* Sales yesterday */
.gd-table td:nth-child(4) {
    color:                var(--clr-muted);
    font-variant-numeric: tabular-nums;
}

/* Bar */
.gd-rank-bar-wrap {
    width:         130px;
    height:        8px;
    background:    var(--clr-border);
    border-radius: 99px;
    overflow:      hidden;
}
.gd-rank-bar {
    height:        100%;
    border-radius: 99px;
    background:    linear-gradient(90deg, var(--clr-accent), var(--clr-accent2));
    transition:    width .65s cubic-bezier(.4,0,.2,1);
}

.gd-badge-var {
    display:      inline-flex;
    align-items:  center;
    gap:          3px;
    font-size:    .73rem;
    font-weight:  600;
    padding:      3px 9px;
    border-radius:99px;
    letter-spacing:.1px;
}
.gd-badge-var--up      { background: rgba(78,184,186,.18); color: var(--clr-green); }
.gd-badge-var--down    { background: rgba(239,68,68,.18);  color: var(--clr-red); }
.gd-badge-var--neutral { background: var(--clr-badge-neutral); color: var(--clr-muted); }

/* ── Login state ── */
.gournet-app--login {
    background:    #13141a;
    min-height:    100svh;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.gd-login-wrap {
    width:     100%;
    max-width: 420px;
}

.gd-login-card {
    background:    #1d1f28;
    border:        1px solid #2c2f3d;
    border-radius: 24px;
    padding:       40px 36px 36px;
    box-shadow:    0 24px 64px rgba(0,0,0,.5);
}

.gd-login-logo {
    text-align:    center;
    margin-bottom: 28px;
}
.gd-login-logo img {
    height:     44px !important;
    width:      auto !important;
    object-fit: contain;
}

.gd-login-title {
    font-size:     1.5rem;
    font-weight:   700;
    color:         #f0f0f2;
    text-align:    center;
    margin-bottom: 6px;
    letter-spacing: -.2px;
}

.gd-login-subtitle {
    font-size:     .82rem;
    font-weight:   300;
    color:         #8892a4;
    text-align:    center;
    margin-bottom: 28px;
    line-height:   1.5;
}

.gd-login-field {
    margin-bottom: 18px;
}

.gd-login-label {
    display:       block;
    font-size:     .75rem;
    font-weight:   600;
    color:         #8892a4;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom:  8px;
}

.gd-login-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.gd-login-input-icon {
    position:   absolute;
    left:       14px;
    width:      17px;
    height:     17px;
    color:      #8892a4;
    pointer-events: none;
    flex-shrink:0;
}

.gd-login-input {
    width:         100%;
    background:    #13141a;
    border:        1.5px solid #2c2f3d;
    border-radius: 10px;
    color:         #f0f0f2;
    font-family:   var(--font);
    font-size:     .92rem;
    font-weight:   400;
    padding:       12px 14px 12px 42px !important;
    outline:       none;
    transition:    border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
}
.gd-login-input::placeholder { color: #4a5060; }
.gd-login-input:focus {
    border-color: #EA529F;
    box-shadow:   0 0 0 3px rgba(234,82,159,.18);
}
.gd-login-input--error {
    border-color: #ef4444 !important;
    box-shadow:   0 0 0 3px rgba(239,68,68,.15) !important;
}

/* Campo contraseña bloqueado hasta verificación del servidor */
.gd-login-input:disabled {
    opacity:      0.42;
    cursor:       not-allowed;
    border-color: #2c2f3d !important;
    box-shadow:   none !important;
}
.gournet-app[data-theme="light"] .gd-login-input:disabled {
    border-color: #dde3ed !important;
}
.gd-login-toggle-pwd:disabled {
    opacity:        0.35;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Campo RUT mientras se verifica el servidor */
.gd-login-input--checking {
    border-color:  #554CFA !important;
    box-shadow:    0 0 0 3px rgba(85,76,250,.18) !important;
    padding-right: 40px;
}

/* Spinner de verificación dentro del campo RUT */
.gd-rut-spinner {
    position:         absolute;
    right:            12px;
    width:            15px;
    height:           15px;
    border:           2px solid rgba(85,76,250,.3);
    border-top-color: #554CFA;
    border-radius:    50%;
    animation:        spin .7s linear infinite;
    pointer-events:   none;
    flex-shrink:      0;
}

.gd-login-toggle-pwd {
    position:    absolute;
    right:       10px;
    background:  transparent !important;
    border:      none !important;
    box-shadow:  none !important;
    outline:     none !important;
    cursor:      pointer;
    color:       #8892a4;
    padding:     6px;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition:  color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.gd-login-toggle-pwd:hover  { color: #f0f0f2; background: rgba(255,255,255,.07) !important; }
.gd-login-toggle-pwd:focus  { outline: none !important; box-shadow: none !important; }
.gd-login-toggle-pwd:active { background: rgba(255,255,255,.12) !important; }
.gd-login-toggle-pwd svg    { width: 17px; height: 17px; display: block; }

/* Input de contraseña con padding para el ojo */
#gd-pwd { padding-right: 44px; }

.gd-login-error {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    background:    rgba(239,68,68,.1);
    border:        1px solid rgba(239,68,68,.3);
    border-radius: 10px;
    color:         #f87171;
    font-size:     .8rem;
    font-weight:   400;
    padding:       10px 14px;
    margin-bottom: 16px;
    line-height:   1.45;
}
.gd-login-error::before {
    content:    '⚠';
    flex-shrink: 0;
    margin-top:  1px;
}

.gd-login-lock {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    background:    rgba(250,198,50,.08);
    border:        1px solid rgba(250,198,50,.3);
    border-radius: 10px;
    color:         #FAC632;
    font-size:     .8rem;
    font-weight:   400;
    padding:       12px 14px;
    margin-bottom: 16px;
    line-height:   1.45;
}
.gd-login-lock svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.gd-login-submit {
    width:         100%;
    background:    #EA529F !important;  /* !important previene override del tema */
    border:        none !important;
    border-radius: 10px;
    color:         #fff !important;
    cursor:        pointer;
    font-family:   var(--font);
    font-size:     .92rem;
    font-weight:   600;
    padding:       13px 24px;
    letter-spacing:.3px;
    transition:    background .2s, box-shadow .2s, transform .1s;
    box-shadow:    0 2px 6px rgba(234,82,159,.15);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           10px;
    min-height:    48px;
    -webkit-tap-highlight-color: transparent;
    touch-action:  manipulation;
    margin-top:    4px;
}
.gd-login-submit:hover:not(:disabled) {
    background:  #d4428f !important;
    box-shadow:  0 3px 10px rgba(234,82,159,.25);
}
.gd-login-submit:active:not(:disabled) { transform: scale(.98); }
.gd-login-submit:disabled {
    opacity: .7;
    cursor:  not-allowed;
}

.gd-login-spinner {
    width:            18px;
    height:           18px;
    border:           2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius:    50%;
    animation:        spin .7s linear infinite;
    flex-shrink:      0;
}

/* Light mode login */
.gournet-app[data-theme="light"].gournet-app--login { background: #F9F8F7; }
.gournet-app[data-theme="light"] .gd-login-card {
    background:  #ffffff;
    border-color: #e6e4e2;
    box-shadow:  0 24px 64px rgba(0,0,0,.1);
}
.gournet-app[data-theme="light"] .gd-login-title   { color: #403E3D; }
.gournet-app[data-theme="light"] .gd-login-input {
    background:  #F9F8F7;
    border-color: #dde3ed;
    color:        #403E3D;
}
.gournet-app[data-theme="light"] .gd-login-input:focus {
    border-color: #EA529F;
    box-shadow:   0 0 0 3px rgba(234,82,159,.15);
}
.gournet-app[data-theme="light"] .gd-login-input::placeholder { color: #b0aead; }

/* Mobile login */
@media (max-width: 480px) {
    .gd-login-card     { padding: 32px 22px 28px; border-radius: 20px; }
    .gd-login-title    { font-size: 1.3rem; }
    .gd-login-logo img { height: 36px !important; }
}

/* ── User menu ── */
.gd-user-menu {
    position: relative;
}

.gd-user-btn {
    display:         flex;
    align-items:     center;
    gap:             8px;
    background:      rgba(255,255,255,.08);
    border:          1px solid rgba(255,255,255,.12);
    border-radius:   99px;
    color:           #e2e8f0;
    cursor:          pointer;
    font-family:     var(--font);
    font-size:       .78rem;
    font-weight:     500;
    padding:         5px 10px 5px 5px;
    transition:      background .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
    touch-action:    manipulation;
    white-space:     nowrap;
    max-width:       180px;
}
.gd-user-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
.gd-user-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(234,82,159,.5); }

.gd-user-avatar {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    min-width:       28px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--clr-accent), var(--clr-accent2));
    color:           #fff;
    font-size:       .7rem;
    font-weight:     700;
    letter-spacing:  .5px;
}

.gd-user-name {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     100px;
}

.gd-chevron {
    width:      14px;
    height:     14px;
    flex-shrink:0;
    transition: transform .2s;
    opacity:    .7;
}
.gd-user-btn[aria-expanded="true"] .gd-chevron { transform: rotate(180deg); }

/* ── Dropdown ── */
.gd-dropdown {
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    min-width:     200px;
    background:    #1d2025;
    border:        1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(0,0,0,.5);
    z-index:       200;
    overflow:      hidden;
    animation:     dropdownIn .15s ease;
}

.gournet-app[data-theme="light"] .gd-dropdown {
    background: #ffffff;
    border-color: #e6e4e2;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.gd-dropdown__header {
    padding:        14px 16px 12px;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.gd-dropdown__user-full {
    font-size:   .85rem;
    font-weight: 600;
    color:       #e2e8f0;
}
.gournet-app[data-theme="light"] .gd-dropdown__user-full { color: #403E3D; }

.gd-dropdown__user-role {
    font-size:      .7rem;
    font-weight:    400;
    color:          rgba(255,255,255,.4);
    text-transform: capitalize;
    letter-spacing: .3px;
}
.gournet-app[data-theme="light"] .gd-dropdown__user-role { color: #706e6c; }

.gd-dropdown__divider {
    height:     1px;
    background: rgba(255,255,255,.07);
    margin:     0;
}
.gournet-app[data-theme="light"] .gd-dropdown__divider { background: #e6e4e2; }

.gd-dropdown__item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    width:           100%;
    padding:         11px 16px;
    background:      none;
    border:          none;
    color:           rgba(255,255,255,.75);
    font-family:     var(--font);
    font-size:       .82rem;
    font-weight:     400;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.gd-dropdown__item:hover { background: rgba(255,255,255,.06); color: #fff; }

.gournet-app[data-theme="light"] .gd-dropdown__item { color: #403E3D; }
.gournet-app[data-theme="light"] .gd-dropdown__item:hover { background: rgba(0,0,0,.05); color: #1a1a1a; }

.gd-dropdown__item--danger { color: rgba(239,68,68,.85); }
.gd-dropdown__item--danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }
.gournet-app[data-theme="light"] .gd-dropdown__item--danger { color: #dc2626; }

.gd-dropdown__item-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    opacity:     .7;
}
.gd-dropdown__item:hover .gd-dropdown__item-icon { opacity: 1; }
.gd-dropdown__item-icon svg { width: 16px; height: 16px; }

/* ── PWA Install banner ── */
.gd-install-banner {
    position:        fixed;
    bottom:          env(safe-area-inset-bottom, 0);
    left:            0;
    right:           0;
    z-index:         300;
    background:      #1d1f28;
    border-top:      1px solid rgba(234,82,159,.3);
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         14px 18px;
    box-shadow:      0 -8px 32px rgba(0,0,0,.4);
    animation:       slideUp .3s ease;
}
.gd-install-banner[hidden] { display: none !important; }

.gournet-app[data-theme="light"] .gd-install-banner {
    background:  #ffffff;
    border-color: rgba(234,82,159,.25);
    box-shadow:  0 -8px 32px rgba(0,0,0,.1);
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.gd-install-banner__icon {
    width:         44px;
    height:        44px;
    border-radius: 10px;
    object-fit:   cover;
    flex-shrink:  0;
}

.gd-install-banner__text {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.gd-install-banner__text strong {
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--clr-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.gd-install-banner__text span {
    font-size:   .73rem;
    font-weight: 300;
    color:       var(--clr-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.gd-install-banner__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.gd-install-banner__btn {
    background:   var(--clr-accent);
    color:        #fff;
    border:       none;
    border-radius: 8px;
    font-family:  var(--font);
    font-size:    .8rem;
    font-weight:  600;
    padding:      8px 16px;
    cursor:       pointer;
    white-space:  nowrap;
    transition:   background .2s;
    box-shadow:   0 3px 10px rgba(234,82,159,.35);
    -webkit-tap-highlight-color: transparent;
}
.gd-install-banner__btn:hover { background: var(--clr-accent-dark); }

.gd-install-banner__dismiss {
    background:  transparent;
    border:      none;
    color:       var(--clr-muted);
    font-size:   1.1rem;
    cursor:      pointer;
    padding:     6px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition:  color .15s;
}
.gd-install-banner__dismiss:hover { color: var(--clr-text); }

/* ── iOS Install modal ── */
.gd-ios-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    z-index:         400;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    padding:         0 0 env(safe-area-inset-bottom, 0);
    animation:       fadeIn .2s ease;
}
.gd-ios-overlay[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.gd-ios-modal {
    background:    #1d1f28;
    border-radius: 24px 24px 0 0;
    padding:       28px 24px 36px;
    width:         100%;
    max-width:     480px;
    position:      relative;
    animation:     slideUp .3s ease;
}
.gournet-app[data-theme="light"] .gd-ios-modal {
    background: #ffffff;
}

.gd-ios-modal__close {
    position:   absolute;
    top:        16px;
    right:      16px;
    background: rgba(255,255,255,.08);
    border:     none;
    border-radius: 50%;
    width:      32px;
    height:     32px;
    display:    flex;
    align-items: center;
    justify-content: center;
    cursor:     pointer;
    color:      var(--clr-muted);
    transition: background .15s;
}
.gd-ios-modal__close:hover { background: rgba(255,255,255,.14); }
.gd-ios-modal__close svg   { width: 16px; height: 16px; }

.gd-ios-modal__logo {
    width:         56px;
    height:        56px;
    border-radius: 14px;
    object-fit:    cover;
    display:       block;
    margin:        0 auto 16px;
}

.gd-ios-modal__title {
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--clr-text);
    text-align:  center;
    margin-bottom: 4px;
}

.gd-ios-modal__sub {
    font-size:     .8rem;
    font-weight:   300;
    color:         var(--clr-muted);
    text-align:    center;
    margin-bottom: 24px;
}

.gd-ios-steps {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        14px;
}

.gd-ios-steps li {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    font-size:   .85rem;
    color:       var(--clr-text);
    line-height: 1.5;
}

.gd-ios-step__num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    min-width:       26px;
    border-radius:   50%;
    background:      var(--clr-accent);
    color:           #fff;
    font-size:       .75rem;
    font-weight:     700;
    flex-shrink:     0;
}

.gd-ios-share-icon { font-style: normal; }

/* ── PWA install dropdown item color ── */
.gd-dropdown__item--install { color: rgba(78,184,186,.9); }
.gd-dropdown__item--install:hover { color: #4EB8BA; background: rgba(78,184,186,.08); }

/* ── Footer ── */
.gd-footer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         14px 0 20px;
    font-size:       .68rem;
    color:           rgba(255,255,255,.22);
    letter-spacing:  .3px;
}
.gournet-app[data-theme="light"] .gd-footer { color: rgba(0,0,0,.28); }
.gd-footer__sep { opacity: .5; }
.gd-footer__link {
    color:           inherit;
    text-decoration: none;
    transition:      color .2s;
}
.gd-footer__link:hover { color: rgba(234,82,159,.7); }
.gournet-app[data-theme="light"] .gd-footer__link:hover { color: #EA529F; }

/* ── Responsive – tablet ── */
@media (max-width: 768px) {
    .gd-header         { padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; }
    .gd-tabs           { padding: 14px 18px 0; }
    .gd-kpis           { padding: 14px 18px; gap: 10px; grid-template-columns: 1fr 1fr; }
    .gd-charts-row     { padding: 0 18px 14px; }
    .gd-card:has(.gd-table) { margin: 0 18px 18px; }
    .gd-rank-bar-wrap       { width: 90px; }
    .gd-chart-wrap     { height: 240px; padding: 14px; }
    .gd-chart-wrap--md { height: 200px; }
    .gd-kpi__value     { font-size: 1.25rem; }
}

/* ── Responsive – mobile ── */
@media (max-width: 480px) {
    .gd-header              { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 16px; gap: 8px; }
    .gd-header .gd-logo     { height: 26px !important; max-width: 110px !important; }
    .gd-btn--icon           { width: 36px; height: 36px; min-width: 36px; }
    .gd-btn--icon svg       { width: 16px; height: 16px; }

    .gd-tabs                { padding: 14px 14px; gap: 10px; }
    .gd-tab                 { font-size: .75rem; padding: 7px 13px; }

    .gd-kpis                { padding: 30px 20px; gap: 16px; grid-template-columns: 1fr 1fr; }
    .gd-kpi                 { padding: 12px 10px; border-radius: 14px; }
    .gd-kpi__value          { font-size: 1.05rem; }
    .gd-kpi__icon           { font-size: 1.2rem; margin-bottom: 4px; }
    .gd-kpi__label          { font-size: .62rem; }
    .gd-kpi__sub            { font-size: .67rem; }

    .gd-charts-row          { padding: 0px 20px 14px 20px; }
    .gd-card                { border-radius: 14px; }
    .gd-chart-wrap          { height: 200px; padding: 10px 8px; }
    .gd-chart-wrap--md      { height: 170px; }

    .gd-card:has(.gd-table) { margin: 14px 20px; border-radius: 14px; }
    .gd-card__header        { padding: 12px 14px 10px; }
    .gd-card__title         { font-size: .85rem; }

    .gd-last-update         { display: none; }
    .gd-user-name           { display: none; }
    .gd-user-btn            { padding: 4px; border-radius: 50%; max-width: none; gap: 0; background: transparent; border-color: transparent; }
    .gd-user-btn:hover      { background: rgba(255,255,255,.1); border-color: transparent; }
    .gd-user-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
    .gd-chevron             { display: none; }
    .gd-user-avatar         { width: 32px; height: 32px; min-width: 32px; font-size: .72rem; }
    .gd-dropdown            { right: 0; min-width: 190px; }

    /* ── Tabla: layout card en mobile ── */
    .gd-table-wrap  { overflow-x: visible; }

    .gd-table thead { display: none; }

    .gd-table tbody tr {
        display:               grid;
        grid-template-columns: 44px 1fr auto;
        grid-template-rows:    auto auto;
        column-gap:            10px;
        row-gap:               0;
        padding:               12px 16px;
        border-bottom:         1px solid var(--clr-border);
        align-items:           center;
    }
    .gd-table tbody tr:last-child { border-bottom: none; }

    .gd-table td {
        padding:    0;
        border:     none;
        white-space: normal;
    }

    /* Col 1: rank badge — ocupa 2 filas */
    .gd-table td:nth-child(1) {
        grid-column: 1;
        grid-row:    1 / 3;
        display:     flex;
        align-items: center;
        justify-content: center;
        padding:     0;
    }

    /* Col 2: nombre — fila 1 */
    .gd-table td:nth-child(2) {
        grid-column: 2;
        grid-row:    1;
        font-size:   .875rem;
        font-weight: 600;
        padding-bottom: 3px;
        max-width:   none;
        overflow:    hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Col 3: venta hoy — ocupa 2 filas, derecha */
    .gd-table td:nth-child(3) {
        grid-column: 3;
        grid-row:    1 / 3;
        font-size:   .95rem;
        font-weight: 700;
        text-align:  right;
        align-self:  center;
        padding-left: 8px;
    }

    /* Col 4: venta ayer — oculto */
    .gd-table td:nth-child(4) { display: none; }

    /* Col 5: variación — fila 2 */
    .gd-table td:nth-child(5) {
        grid-column: 2;
        grid-row:    2;
        padding-top: 2px;
    }

    /* Col 6: hora pico — oculto */
    .gd-table td:nth-child(6) { display: none; }

    /* Col 7: barra — oculto */
    .gd-table td:nth-child(7) { display: none; }
}