/* =====================================================================
   NetwilOne — Tiendas

   Todos los colores salen de variables que cada dueno define en su panel,
   asi que puede cambiarlo todo sin poder romper el diseno.

   El objetivo: que una tienda recien creada, sin logo y con dos productos,
   ya se vea como una tienda de verdad.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    font-feature-settings: 'cv02','cv03','cv04','ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Fondo en dos capas. Que lleva cada una lo decide el tema (--tex-1 y
   --tex-2), asi que cambiar de tema cambia de verdad el ambiente y no solo
   el color. Un tema puede dejarlas en none y quedar completamente limpio. */
body::before {
    content: '';
    position: fixed;
    inset: -15% -10% auto -10%;
    height: 85vh;
    pointer-events: none;
    z-index: 0;
    background: var(--tex-1, none);
    filter: blur(26px);
    opacity: .95;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--tex-2, none);
    background-size: var(--tex-2-size, auto);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
}

body > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Tipografia */

h1, h2, h3 {
    margin: 0 0 .5em;
    font-family: var(--font-display, var(--font));
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: var(--tracking, -.035em);
    text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.25rem + 2.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.05rem; letter-spacing: calc(var(--tracking, -.03em) * .6); }

p { margin: 0 0 1rem; color: var(--text-2); text-wrap: pretty; }

a { color: var(--primary); text-decoration: none; transition: color .15s ease, opacity .15s ease; }
/* :not(.btn) porque `a:hover` pesa mas que `.btn-primary`: sin el, un boton
   verde escrito con <a> se quedaba con la letra verde sobre verde. */
a:not(.btn):hover { color: var(--primary-soft); }

strong { color: var(--text); font-weight: 700; }

hr {
    border: 0; height: 1px; margin: 1.6rem 0;
    background: linear-gradient(90deg, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);
}

code, .mono { font-family: var(--mono, ui-monospace, monospace); font-size: .88em; }

img { max-width: 100%; display: block; }

::selection { background: var(--primary-ring); color: var(--on-primary); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ Estructura */

/* Contenedores. El ancho general es amplio a proposito: en una pantalla
   grande la tienda tiene que verse llena, no una columna con dos margenes
   enormes. Lo que se lee de corrido usa los contenedores angostos. */
:root {
    --gutter: clamp(16px, 3vw, 38px);
    --max: 1560px;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap-sm { max-width: 720px; }
.wrap-narrow { max-width: 860px; }

.section { padding-block: clamp(28px, 4vw, 52px); }
main { flex: 1 0 auto; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.spacer { flex: 1 1 auto; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; line-height: 1.55; }
.nowrap { white-space: nowrap; }
.mt-2 { margin-top: 1.25rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ Marca */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--text);
    letter-spacing: -.035em;
    flex: none;
    min-width: 0;
}
.logo:hover { color: var(--text); }
.logo img { height: 36px; width: auto; border-radius: 9px; object-fit: contain; }
.logo span:not(.logo-mark) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw;
}

.logo-mark {
    width: 36px; height: 36px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--primary-soft), var(--primary) 55%, var(--secondary));
    color: var(--on-primary);
    font-weight: 900;
    font-size: 1rem;
    flex: none;
    box-shadow: 0 0 0 1px var(--primary-ring), 0 4px 14px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ------------------------------------------------------------ Botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: .91rem;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .14s ease, box-shadow .22s ease, background .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: .05s; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent-grad, linear-gradient(140deg, var(--primary), var(--secondary)));
    color: var(--on-primary);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 16px var(--primary-glow);
}
.btn-primary:hover {
    color: var(--on-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 9px 28px var(--primary-glow);
}

.btn-ghost {
    background: transparent;
    border-color: var(--border-2);
    color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }

.btn-sm { padding: 7px 13px; min-height: 34px; font-size: .82rem; border-radius: calc(var(--radius-sm) * .8); }
.btn-lg { padding: 15px 28px; min-height: 54px; font-size: 1rem; border-radius: var(--radius); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------ Superficies */

.card {
    position: relative;
    background: var(--card-bg, var(--surface));
    border: var(--edge, 1px) solid var(--card-border, var(--border));
    border-radius: var(--radius);
    padding: clamp(14px, 1.7vw, 18px);
    box-shadow: var(--shadow);
}
.card::before {
    content: '';
    position: absolute; inset: 0 0 auto; height: 1px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, transparent, var(--sheen) 28%, var(--sheen) 72%, transparent);
    pointer-events: none;
}
.card-lg { padding: clamp(19px, 2.2vw, 26px); }

.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }

/* ------------------------------------------------------------ Portada */

.hero {
    position: relative;
    padding-block: clamp(38px, 5.5vw, 68px) clamp(24px, 3.4vw, 40px);
    text-align: center;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute; inset: auto 0 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);
}

/* Imagen de fondo de la portada, atenuada para que el texto siempre se lea */
.hero.with-image .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-image) center/cover no-repeat;
    opacity: .22;
    mask-image: linear-gradient(180deg, #000 15%, transparent 92%);
    -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 92%);
    transform: scale(1.05);
}

.hero h1 { max-width: 17ch; margin-inline: auto; margin-bottom: .5rem; }
.hero p {
    max-width: 54ch;
    margin: 0 auto 1.45rem;
    font-size: clamp(.98rem, .93rem + .4vw, 1.14rem);
    line-height: 1.62;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Sellos de confianza bajo la portada */
.trust {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 4vw, 40px);
    flex-wrap: wrap;
    margin-top: clamp(20px, 2.6vw, 30px);
    padding-top: clamp(16px, 2vw, 22px);
    border-top: 1px solid var(--border);
}
.trust > div {
    display: flex; align-items: center; gap: 9px;
    font-size: .855rem; color: var(--muted); font-weight: 500;
}
.trust b {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--primary-dim);
    color: var(--primary);
    font-size: .85rem;
    flex: none;
}

/* ------------------------------------------------------------ Catalogo */

.filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: clamp(14px, 2vw, 20px);
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }

.filters a {
    padding: 8px 17px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: .865rem;
    font-weight: 600;
    white-space: nowrap;
    flex: none;
    transition: all .16s ease;
}
.filters a:hover { border-color: var(--primary-ring); color: var(--primary); }
.filters a.active {
    background: linear-gradient(140deg, var(--primary-soft), var(--primary));
    border-color: transparent;
    color: var(--on-primary);
    box-shadow: 0 4px 14px var(--primary-glow);
}
.filters a.active .muted { color: inherit; opacity: .75; }

.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(10px, 1.3vw, 15px);
}

.product {
    position: relative;
    background: var(--card-bg, var(--surface));
    border: var(--edge, 1px) solid var(--card-border, var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}
.product:hover {
    transform: translateY(var(--hover-lift, -4px));
    border-color: var(--primary-ring);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.product:hover .product-img img { transform: scale(1.06); }
.product:hover .price { color: var(--primary-soft); }

.product-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(120% 100% at 50% 0%, var(--surface-3), var(--surface-2));
    display: grid;
    place-items: center;
    overflow: hidden;
}
.product-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
/* Degradado inferior: hace que el texto de abajo respire */
.product-img::after {
    content: '';
    position: absolute; inset: auto 0 0; height: 45%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 82%, transparent));
    pointer-events: none;
}
.product-img .placeholder { font-size: 2.4rem; opacity: .18; }

.product-body {
    padding: 12px 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.product-body h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.product-body .desc {
    margin: 0; font-size: .845rem; color: var(--muted); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

.price {
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
    line-height: 1.2;
}
.price small {
    font-size: 0.8rem;
    color: var(--faint);
    text-decoration: line-through;
    font-weight: 500;
    margin-left: 7px;
    letter-spacing: 0;
}

.stock-tag { position: absolute; top: 11px; right: 11px; z-index: 2; }

/* ------------------------------------------------------------ Etiquetas */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid var(--border-2);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    /* Sin backdrop-filter: una etiqueta va casi siempre sobre el fondo liso de
       una tarjeta, donde el desenfoque no se ve, y en el telefono cada una
       obligaba a recalcularlo en cada cuadro del scroll. Con muchas en una
       pantalla -los movimientos de Mi cuenta- el scroll se sentia trabado. */
    color: var(--muted);
    white-space: nowrap;
    line-height: 1.6;
}
.badge-ok  { background: var(--primary-dim); border-color: var(--primary-ring); color: var(--primary); }
.badge-out { background: rgba(255,90,90,.14); border-color: rgba(255,90,90,.3); color: #FF8A8A; }
.badge-hot {
    background: linear-gradient(140deg, var(--primary-soft), var(--primary));
    border-color: transparent;
    color: var(--on-primary);
    box-shadow: 0 2px 10px var(--primary-glow);
}

/* ------------------------------------------------------------ Ficha */

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(22px, 3.5vw, 44px);
    align-items: start;
}

.detail-media {
    position: sticky;
    top: 96px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.detail-media .product-img { aspect-ratio: 4 / 3; }
.detail-media .product-img::after { display: none; }

.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }

.price-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.price-xl { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); }

/* Ficha tecnica del producto */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.specs > div { background: var(--surface); padding: 14px 16px; }
.specs .k { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.specs .v { font-weight: 700; margin-top: 3px; font-size: .93rem; letter-spacing: -.01em; }

/* ------------------------------------------------------------ Formularios */

.field { margin-bottom: 13px; }

.field label, .label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--text-2); margin-bottom: 7px;
}
.field .hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"],
/* Igual que en el panel: sin type sigue siendo un campo de texto. */
input:not([type]), textarea, select {
    width: 100%;
    padding: 12px 14px;
    min-height: 46px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: .93rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--border-2); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled { opacity: .55; }
textarea { min-height: 110px; resize: vertical; }

/* ------------------------------------------------------------ Avisos */

.alert {
    position: relative;
    padding: 13px 16px 13px 17px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    margin-bottom: 14px;
    font-size: .9rem;
    line-height: 1.6;
    display: flex; gap: 10px; align-items: flex-start;
    overflow: hidden;
}
.alert::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: 3px; background: currentColor; opacity: .7;
}
.alert-success { background: var(--primary-dim); border-color: var(--primary-ring); color: var(--primary); }
.alert-error   { background: rgba(255,90,90,.11); border-color: rgba(255,90,90,.28); color: #FF9090; }
.alert-warning { background: rgba(255,194,77,.11); border-color: rgba(255,194,77,.28); color: #FFC24D; }
.alert-info    { background: rgba(79,195,247,.11); border-color: rgba(79,195,247,.28); color: #4FC3F7; }

/* ------------------------------------------------------------ Tablas */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    -webkit-overflow-scrolling: touch;
}
table.table { width: 100%; border-collapse: collapse; font-size: .885rem; min-width: 480px; }
table.table th {
    text-align: left; padding: 9px 14px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .085em;
    white-space: nowrap; border-bottom: 1px solid var(--border);
}
table.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr { transition: background .14s ease; }
table.table tbody tr:hover { background: var(--primary-dim); }

.empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------ Entrega */

.delivery {
    position: relative;
    background: var(--bg-2);
    border: 1px dashed var(--primary-ring);
    border-radius: var(--radius);
    padding: 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.75;
    color: var(--text);
}

.copyable {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .86rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.copyable:hover { border-color: var(--primary); color: var(--primary); }

/* ------------------------------------------------------------ Acceso */

.auth-wrap { min-height: 76vh; display: grid; place-items: center; padding: clamp(28px,5vw,52px) clamp(16px,4vw,28px); }
.auth-card { width: 100%; max-width: 430px; }
.auth-card .logo { justify-content: center; margin-bottom: 24px; font-size: 1.25rem; }

.divider-text {
    display: flex; align-items: center; gap: 13px;
    color: var(--faint); font-size: 0.8rem; margin: 18px 0;
}
.divider-text::before, .divider-text::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2));
}
.divider-text::after { background: linear-gradient(90deg, var(--border-2), transparent); }

/* ------------------------------------------------------------ Pie */

.footer {
    border-top: 1px solid var(--border);
    padding-block: 22px;
    margin-top: clamp(32px, 4.5vw, 52px);
    color: var(--muted);
    font-size: .85rem;
    flex-shrink: 0;
}
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

/* WhatsApp flotante */
.wa-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366; color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 8px 26px rgba(37,211,102,.38), 0 2px 6px rgba(0,0,0,.3);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 12px 32px rgba(37,211,102,.5); color: #fff; }

/* ------------------------------------------------------------ Barra movil de compra */

.buy-bar { display: none; }

/* ------------------------------------------------------------ Movil */

@media (max-width: 860px) {
    .product-detail { grid-template-columns: 1fr; gap: 20px; }
    .detail-media { position: static; }
}

@media (max-width: 720px) {
    .products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 11px; }
    .product-body { padding: 12px 13px 14px; gap: 5px; }
    .product-body h3 { font-size: .92rem; }
    .product-body .desc { -webkit-line-clamp: 2; font-size: .8rem; }
    .price { font-size: 1.12rem; }
    .stock-tag { top: 8px; right: 8px; }
    .badge { font-size: 0.8rem; padding: 3px 9px; }

    .btn-lg { width: 100%; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }

    .specs { grid-template-columns: repeat(2, 1fr); }

    .footer .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* La compra siempre a mano: barra fija abajo en la ficha del producto */
    .buy-bar {
        display: flex;
        position: fixed;
        inset: auto 0 0;
        z-index: 90;
        align-items: center;
        gap: 12px;
        padding: 11px clamp(14px, 4vw, 20px);
        padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        border-top: 1px solid var(--border-2);
        box-shadow: 0 -8px 28px rgba(0,0,0,.28);
    }
    .buy-bar .price { font-size: 1.2rem; flex: none; }
    .buy-bar form, .buy-bar .btn { flex: 1; }
    .buy-bar .btn { width: 100%; }

    /* Sitio para la barra, y el WhatsApp se sube para no taparla */
    body.has-buy-bar { padding-bottom: 84px; }
    body.has-buy-bar .wa-float { bottom: 88px; }

    .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
}

@media (max-width: 400px) {
    .products { grid-template-columns: 1fr 1fr; gap: 10px; }
    .product-img { aspect-ratio: 1; }
}

/* ------------------------------------------------------------ Accesibilidad */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   Capa de acabado de las tiendas
   ===================================================================== */

/* Grano fino sobre el fondo: quita el plano digital */
html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .02;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ Encabezado de seccion */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sec-head h2 { margin: 0; }
.sec-head .kicker {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary); margin-bottom: 6px;
}
.sec-head .kicker::before {
    content: ''; width: 20px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
}

/* ------------------------------------------------------------ Barrido de luz en el boton */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ------------------------------------------------------------ Tarjeta de producto: el detalle
   Chip de categoria sobre la imagen, fila de datos abajo y una flecha que
   aparece al pasar por encima. Mas informacion en menos espacio. */

.product-cat {
    position: absolute;
    left: 10px; bottom: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-2);
    color: var(--text-2);
}

.product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    min-height: 40px;
}
/* El precio y su tachado SIEMPRE en la misma linea: si el tachado salta
   abajo, cada tarjeta queda con una altura distinta y la rejilla se ve sucia. */
.product-meta .price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.product-meta .price small { margin-left: 0; }

/* Duracion, sobre la imagen: libera la fila de precio */
.product-dur {
    position: absolute;
    right: 10px; bottom: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-2);
    color: var(--text-2);
    white-space: nowrap;
}

.product-go {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--primary-dim);
    border: 1px solid var(--primary-ring);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 900;
    flex: none;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .22s ease, transform .22s ease, background .2s ease;
}
.product:hover .product-go {
    opacity: 1;
    transform: translateX(0);
    background: var(--primary);
    color: var(--on-primary);
    border-color: transparent;
}

/* Agotado: se apaga la imagen para que se lea de un vistazo */
.product.is-out .product-img img { filter: grayscale(.85) brightness(.55); }
.product.is-out .price { color: var(--muted); }

/* Destacado: filo de luz superior */
.product.is-featured::before {
    content: '';
    position: absolute; inset: 0 0 auto; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* ------------------------------------------------------------ Ficha tecnica con relieve */
.specs > div { position: relative; }
.specs > div::before {
    content: '';
    position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sheen), transparent);
}

/* ------------------------------------------------------------ Entrega: cabecera de terminal */
.delivery { padding-top: 34px; }
.delivery::before {
    content: '● ● ●';
    position: absolute;
    top: 9px; left: 16px;
    font-size: 0.8rem;
    letter-spacing: 4px;
    color: var(--faint);
}

/* ------------------------------------------------------------ Buscador con lupa */
.search-field { position: relative; flex: 1; }
.search-field input { padding-left: 38px; }
.search-field::before {
    content: '⌕';
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-52%);
    color: var(--faint); font-size: 1.15rem; pointer-events: none;
}

/* ------------------------------------------------------------ Sellos de confianza mas finos */
.trust > div { transition: color .2s ease; }
.trust > div:hover { color: var(--text-2); }
.trust b { transition: transform .2s ease; }
.trust > div:hover b { transform: scale(1.1); }

/* Estados vacios con presencia */
.empty {
    border: 1px dashed var(--border-2);
    border-radius: var(--radius-sm);
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.008) 0 8px, transparent 8px 16px);
}
.card > .empty, .table-wrap > .empty { border: 0; background: none; }

.price, table.table td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Combos, niveles de precio y pedidos
   ===================================================================== */

.mt-1 { margin-top: .6rem; }
.text-green { color: var(--primary-soft); }
.text-warn { color: #FFC24D; }
.mono-input { text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); }

/* Distintivo del nivel de precio del cliente */
.tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c, var(--primary));
    background: color-mix(in srgb, var(--c, #00E676) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, #00E676) 32%, transparent);
    white-space: nowrap;
    line-height: 1.4;
}
.tier-chip::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c, var(--primary));
    box-shadow: 0 0 6px var(--c, var(--primary));
}

/* Cuanto se ahorra: se dice, no se insinua */
.save-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: var(--primary-dim);
    border: 1px solid var(--primary-ring);
    color: var(--primary-soft);
    font-size: .83rem;
    font-weight: 600;
}
.save-pill::before { content: '\2193'; font-weight: 800; }

/* ------------------------------------------------------------ Escalera */

.ladder {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg, var(--surface));
    padding: 12px 14px;
    margin-bottom: 16px;
}
.ladder-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.ladder-icon { font-size: .95rem; }

/* Rejilla que se acomoda, no una fila que se desplaza. Iba en horizontal
   con la barra escondida, asi que dentro de un contenedor estrecho los
   escalones que no cabian se salian cortados y nada lo indicaba. */
.ladder-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr));
    gap: 8px;
}

.ladder-step {
    min-width: 0;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-2);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ladder-step b {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: -.03em;
    line-height: 1.2;
}
.ladder-step span { font-size: 0.8rem; color: var(--faint); }
.ladder-step.reached {
    border-style: solid;
    border-color: var(--primary-ring);
    background: var(--primary-dim);
}
.ladder-step.reached b { color: var(--primary); }
.ladder-step.reached span { color: var(--primary-soft); }

/* ------------------------------------------------------------ Tarjeta de combo */

.combos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    gap: clamp(11px, 1.4vw, 16px);
}

.combo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--text);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card-bg, var(--surface));
    border: var(--edge, 1px) solid var(--card-border, var(--border));
    box-shadow: var(--shadow);
    transition: transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}
/* Filo de color arriba: el combo se distingue del producto suelto */
.combo-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--accent-grad, var(--primary));
    opacity: .8;
    z-index: 3;
}
.combo-card:hover {
    transform: translateY(var(--hover-lift, -4px));
    border-color: var(--primary-ring);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.combo-card:hover .product-go { transform: translateX(3px); opacity: 1; }
.combo-card.is-out { filter: grayscale(.85); opacity: .68; }

.combo-card-media {
    position: relative;
    /* flex: none no es opcional. La tarjeta es una columna flexible y sin
       esto la imagen cede su altura para hacerle sitio al texto: un combo
       con varios productos aplastaba las fichas hasta casi taparlas. */
    flex: none;
    /* Alto fijo en vez de proporcion: con una fila de fichas centradas, el
       16/9 sobraba altura en las tarjetas anchas y la dejaba escasa en las
       estrechas. Asi la tarjeta mide lo mismo la lleve donde la lleve. */
    height: 132px;
    background: radial-gradient(120% 120% at 50% 0%, var(--surface-3), var(--surface-2));
    overflow: hidden;
}

/* Cuando el combo si trae su propia imagen, esa manda y ocupa mas. */
.combo-card-media:has(> img) { height: auto; aspect-ratio: 16 / 9; }
.combo-card-media > img { width: 100%; height: 100%; object-fit: cover; }

/* Sin imagen propia: las piezas del combo como fichas cuadradas.
   ---------------------------------------------------------------------
   El mosaico anterior repartia el marco en columnas, asi que una tarjeta
   ancha dejaba cada producto en una tira plana donde no se reconocia
   nada. Un cuadrado se recorta igual de bien mida lo que mida la tarjeta,
   y ademas admite cualquier cantidad de productos sin cambiar de forma. */

.combo-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(10px, 12%, 16px);
    box-sizing: border-box;
}

.combo-chip {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    /* La ficha se mide contra el ALTO disponible, no contra el ancho. Es lo
       que la hace funcionar igual en la tarjeta ancha del inicio, que mide
       95px de alto, que en la del listado, que mide 132. */
    height: 100%;
    max-height: 68px;
    width: auto;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-3);
    /* El borde del color del fondo recorta la ficha de abajo y hace que se
       lean como piezas apiladas, no como un collage pegado. */
    box-shadow: 0 0 0 3px var(--surface-2), 0 6px 16px rgba(0, 0, 0, .34);
    /* Se solapan; la primera manda y las demas se van detras. Cuanto mas
       larga la fila, mas se montan: con seis fichas sin esto la pila se
       salia del marco en un telefono. */
    margin-left: -12px;
    z-index: calc(20 - var(--i, 0));
    transition: transform .24s var(--ease, ease);
}
.combo-chip:first-child { margin-left: 0; }

.combo-stack[data-count="5"] .combo-chip { margin-left: -16px; }
.combo-stack[data-count="5"] .combo-chip:first-child { margin-left: 0; }
.combo-chip img { width: 100%; height: 100%; object-fit: cover; }
.combo-chip b { font-size: 1.05rem; font-weight: 800; color: var(--faint); }

/* Al pasar por encima se abren en abanico: dice que hay varias cosas
   dentro sin necesidad de explicarlo. */
.combo-card:hover .combo-chip { transform: translateY(-3px); }
.combo-card:hover .combo-chip:nth-child(odd) { transform: translateY(-6px); }

/* La ultima ficha, cuando hay mas productos de los que caben. */
.combo-chip-more {
    /* Por encima de las demas: de nada sirve contar cuantas faltan si el
       numero queda tapado por la ficha anterior. */
    z-index: 30;
    background: rgba(var(--primary-rgb), .16);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.combo-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #04120A;
    background: var(--primary);
    box-shadow: 0 4px 14px var(--primary-glow);
}
/* Sobre la imagen de la tarjeta va flotando; en cualquier otro sitio
   es una etiqueta normal dentro del texto. */
.combo-card-media .combo-tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.combo-hero .combo-tag, .order-head .combo-tag { margin-bottom: 10px; }

.combo-card-body {
    padding: 12px 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.combo-card-body h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }

.combo-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.combo-list li {
    font-size: .81rem;
    color: var(--muted);
    padding-left: 15px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.combo-list li::before {
    content: '';
    position: absolute;
    left: 2px; top: 50%;
    width: 5px; height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .55;
}
.combo-list li b { color: var(--text-2); font-weight: 700; }
.combo-list li.more { color: var(--faint); font-style: italic; }
.combo-list li.more::before { opacity: .2; }

.combo-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.combo-save {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-soft);
}

/* ------------------------------------------------------------ Ficha del combo */

.combo-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.combo-hero {
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(90% 120% at 0% 0%, var(--primary-dim), transparent 60%),
        linear-gradient(180deg, var(--sheen), transparent 40%),
        var(--surface);
}
.combo-hero h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem); margin-bottom: .35em; }
.combo-hero p { margin: 0; color: var(--muted); }

.combo-hero-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-2);
    font-size: .84rem;
    color: var(--muted);
}
.combo-hero-meta b { color: var(--text); font-weight: 800; font-size: 1.05rem; margin-right: 3px; }
.combo-hero-meta .hi b { color: var(--primary); }

.combo-items { display: flex; flex-direction: column; gap: 9px; }

.combo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease;
}
.combo-item:hover { border-color: var(--border-lit); transform: translateX(2px); }
.combo-item.is-out { opacity: .6; }

.combo-item-img {
    position: relative;
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--surface-3);
    display: grid;
    place-items: center;
}
.combo-item-img img { width: 100%; height: 100%; object-fit: cover; }
.combo-item-img b { font-size: 1.05rem; font-weight: 800; color: var(--faint); }
.combo-item-img .qty {
    position: absolute;
    right: -1px; bottom: -1px;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 7px 0 10px 0;
    background: var(--primary);
    color: #04120A;
}

.combo-item-body { flex: 1 1 auto; min-width: 0; }
.combo-item-body a { color: var(--text); }
.combo-item-body a:hover { color: var(--primary); }

.combo-item-price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-2);
}

/* Caja de compra pegajosa */
.combo-buy { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; }

.buy-card {
    padding: clamp(16px, 2vw, 22px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-lit);
    background: var(--card-bg, var(--surface));
    box-shadow: var(--shadow-lg);
}
.buy-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.buy-card .price-xl { display: block; margin-bottom: 10px; font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.3rem); }

.buy-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 14px 0 16px;
    padding: 4px 0;
    border-top: 1px dashed var(--border-2);
    border-bottom: 1px dashed var(--border-2);
}
.buy-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: .845rem;
    color: var(--muted);
}
.buy-lines b { color: var(--text); font-weight: 600; }

.trust-mini {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .8rem;
    color: var(--muted);
}
.trust-mini b { color: var(--primary); margin-right: 6px; }

/* ------------------------------------------------------------ Cantidad */

.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.qty-label { font-size: .85rem; font-weight: 600; color: var(--text-2); }

.qty-picker {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    overflow: hidden;
}
.qty-picker button {
    width: 38px; height: 40px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.qty-picker button:hover { background: var(--primary-dim); color: var(--primary); }
.qty-picker input {
    width: 54px;
    height: 40px;
    min-height: 0;
    margin: 0;
    border: 0;
    border-inline: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stock { margin-left: auto; }

/* ------------------------------------------------------------ Mi cuenta */

.account-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.account-cards {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.balance-card {
    background:
        radial-gradient(90% 130% at 100% 0%, var(--primary-dim), transparent 62%),
        linear-gradient(180deg, var(--sheen), transparent 35%),
        var(--surface);
    border-color: var(--border-lit);
}
.stat-tile { display: flex; flex-direction: column; }
.stat-tile .price-xl { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }

/* ------------------------------------------------------------ Pedido abierto */

.order-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.order-total { text-align: right; }
.order-total .price { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

.order-saving {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--primary-dim);
    border: 1px solid var(--primary-ring);
    font-size: .85rem;
    color: var(--primary-soft);
}
.order-saving b { font-size: 1.05rem; font-weight: 800; color: var(--primary); }
.order-saving small { color: var(--muted); text-decoration: line-through; }

.order-items { display: flex; flex-direction: column; gap: 9px; }

.order-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .2s ease;
}
.order-item[open] { border-color: var(--border-lit); }

.order-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.order-item summary::-webkit-details-marker { display: none; }
.order-item summary:hover { background: var(--surface-2); }

.order-item-n {
    width: 27px; height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--muted);
}
.order-item[open] .order-item-n {
    background: var(--primary-dim);
    border-color: var(--primary-ring);
    color: var(--primary);
}

.order-item-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.order-item-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-item-state { flex: 0 0 auto; }
.order-item-arrow {
    flex: 0 0 auto;
    color: var(--faint);
    font-size: 1.3rem;
    transition: transform .22s ease;
}
.order-item[open] .order-item-arrow { transform: rotate(90deg); color: var(--primary); }

.order-item-body { padding: 4px 14px 15px; border-top: 1px solid var(--border); }

/* Credenciales: lo que el cliente vino a buscar */
.creds { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }

.cred {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
.cred-k {
    flex: 0 0 108px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--faint);
}
.cred-v {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .875rem;
    color: var(--text);
    word-break: break-all;
}
.cred .btn.ok { color: var(--primary); border-color: var(--primary-ring); }

@media (max-width: 980px) {
    .combo-detail { grid-template-columns: 1fr; }
    .combo-buy { position: static; }
    .account-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}

@media (max-width: 720px) {
    .combos-grid { grid-template-columns: 1fr; }
    .order-head { align-items: flex-start; }
    .order-total { text-align: left; }
    .cred-k { flex: 1 1 100%; }
    .combo-hero-meta { gap: 12px 18px; }
}

/* Mensaje de entrega dentro de un pedido.
   Va aparte de .delivery porque ahi el texto preformateado esta en el
   contenedor, y aqui la sangria del HTML se veria como lineas en blanco. */
.delivery-box {
    border: 1px dashed var(--primary-ring);
    border-radius: var(--radius);
    background: var(--bg-2);
    overflow: hidden;
}
.delivery-head {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-bottom: 1px dashed var(--border);
    font-size: 0.8rem;
    color: var(--faint);
    letter-spacing: .04em;
}
.delivery-head i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-2);
    display: block;
}
.delivery-head span { margin-left: 7px; }
.delivery-box pre {
    margin: 0;
    padding: 13px 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .855rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.delivery-box .btn { margin: 0 15px 13px; }

/* =====================================================================
   Arma tu combo — el cliente elige y ve el precio moverse
   ===================================================================== */

.builder-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4, 16px);
    flex-wrap: wrap;
    margin-bottom: var(--s5, 22px);
}
.builder-head h1 { margin: .1em 0 .3em; }
.builder-head p { max-width: 56ch; }

.builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: clamp(16px, 2.4vw, 30px);
    align-items: start;
}

/* ------------------------------------------------------------ Elegir */

.pick-tools {
    display: flex;
    flex-direction: column;
    gap: var(--s3, 12px);
    margin-bottom: var(--s4, 16px);
}
.pick-tools .search-field { flex: none; }

.filters-inline { margin: 0; }

.pick-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2, 8px);
}

.pick-row {
    display: flex;
    align-items: center;
    gap: var(--s3, 12px);
    padding: 10px 13px;
    border-radius: var(--radius);
    border: var(--edge, 1px) solid var(--card-border, var(--border));
    background: var(--card-bg, var(--surface));
    transition: border-color var(--fast, .16s) ease, background var(--fast, .16s) ease;
}
.pick-row:hover { border-color: var(--border-2); }

/* Elegido: se nota de un vistazo cuales van adentro */
.pick-row.is-on {
    border-color: var(--primary-ring);
    background:
        linear-gradient(90deg, var(--primary-dim), transparent 42%),
        var(--card-bg, var(--surface));
}

.pick-img {
    position: relative;
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: calc(var(--radius-sm) * .9);
    overflow: hidden;
    background: var(--surface-3);
    display: grid;
    place-items: center;
}
.pick-img img { width: 100%; height: 100%; object-fit: cover; }
.pick-img b { font-size: 1rem; font-weight: 800; color: var(--faint); }

.pick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.pick-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pick-price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
}
.pick-row.is-on .pick-price { color: var(--primary); }

.qty-sm { flex: 0 0 auto; }
.qty-sm button { width: 32px; height: 34px; font-size: 1rem; }
.qty-sm input { width: 42px; height: 34px; font-size: .88rem; }

/* ------------------------------------------------------------ Resumen */

.builder-sum { position: sticky; top: 84px; }

.sum-panel {
    border: var(--edge, 1px) solid var(--border-lit);
    border-radius: var(--radius-lg);
    background: var(--card-bg, var(--surface));
    box-shadow: var(--shadow-lg);
    padding: clamp(15px, 1.9vw, 20px);
}

.sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.sum-head h2 { font-size: 1.12rem; }

.sum-empty {
    padding: 22px 4px;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.6;
}

.sum-items { display: flex; flex-direction: column; gap: 1px; }

.sum-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: .875rem;
}
.sum-item:last-child { border-bottom: 0; }

.sum-item-qty {
    flex: 0 0 26px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--radius-sm) * .7);
    background: var(--primary-dim);
    border: 1px solid var(--primary-ring);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.sum-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
}
.sum-item-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.sum-item-del {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--faint);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--fast, .16s) ease, background var(--fast, .16s) ease;
}
.sum-item-del:hover { color: #FF8A8A; background: rgba(255,90,90,.14); }

/* ------------------------------------------------------------ Escalera */

.sum-ladder { margin: 16px 0 4px; }

.sum-ladder-track {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.sum-ladder-track > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent-grad, var(--primary));
    box-shadow: 0 0 10px var(--primary-glow);
    transition: width .3s var(--ease, ease);
}

.sum-ladder-marks {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}
.sum-ladder-marks span {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    opacity: .45;
    transition: opacity var(--fast, .16s) ease, color var(--fast, .16s) ease;
}
.sum-ladder-marks b { font-size: .85rem; font-weight: 800; }
.sum-ladder-marks small { font-size: 0.8rem; color: var(--faint); }
.sum-ladder-marks .reached { opacity: 1; color: var(--primary); }
.sum-ladder-marks .reached small { color: var(--primary-soft); }

#ladderHint { margin-top: 8px; text-align: center; }

/* ------------------------------------------------------------ Cifras */

.sum-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 14px 0 16px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}
.sum-lines > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: .88rem;
    color: var(--muted);
}
.sum-lines b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.sum-lines .is-save, .sum-lines .is-save b { color: var(--primary); font-weight: 700; }

.sum-total {
    margin-top: 6px;
    padding-top: 11px !important;
    border-top: 1px dashed var(--border-2);
    font-size: 1rem !important;
    color: var(--text) !important;
}
.sum-total b {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary) !important;
    letter-spacing: var(--tracking, -.03em);
}

/* La manija solo existe en movil */
.sum-handle { display: none; }

/* ------------------------------------------------------------ Movil */

@media (max-width: 940px) {
    .builder-grid { grid-template-columns: 1fr; }

    /* El resumen pasa a ser una hoja que sube desde abajo */
    .builder-sum {
        position: fixed;
        inset: auto 0 0;
        z-index: 95;
        top: auto;
        background: var(--bg);
        border-top: 1px solid var(--border-2);
        box-shadow: 0 -18px 44px rgba(0,0,0,.5);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 86vh;
        display: flex;
        flex-direction: column;
    }

    .sum-handle {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 13px clamp(14px, 4vw, 20px);
        padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        cursor: pointer;
        text-align: left;
    }
    .sum-handle-left { color: var(--muted); font-size: .88rem; }
    .sum-handle-left b { color: var(--text); font-weight: 800; font-size: 1rem; margin-right: 3px; }
    .sum-handle-total {
        margin-left: auto;
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
    }
    .sum-handle-arrow {
        color: var(--faint);
        font-size: 1.3rem;
        transform: rotate(-90deg);
        transition: transform .24s var(--ease, ease);
    }
    .builder-sum.is-open .sum-handle-arrow { transform: rotate(90deg); }

    .sum-panel {
        display: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow-y: auto;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    .builder-sum.is-open .sum-panel { display: block; }
    .builder-sum.is-open { padding-top: 4px; }

    /* Deja aire para que la hoja no tape el ultimo producto */
    .builder .wrap { padding-bottom: 78px; }

    .pick-row { flex-wrap: wrap; }
    .pick-price { margin-left: auto; }
}

/* El atributo hidden tiene que ganarle a cualquier display de clase:
   sin esto, un .btn o una fila flex marcada como hidden se sigue viendo. */
[hidden] { display: none !important; }

/* =====================================================================
   Encabezado de la tienda, con estructura
   ===================================================================== */

/* Foco de luz detras del titulo: le da centro a la pagina */
.hero::before {
    content: '';
    position: absolute;
    inset: -40% 20% auto;
    height: 120%;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 40%, var(--primary-dim), transparent 70%);
    opacity: .8;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 11px;
    margin-bottom: clamp(14px, 2vw, 20px);
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--border-lit);
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hero-badge i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-sub {
    max-width: 54ch;
    margin-inline: auto;
    font-size: clamp(.96rem, .9rem + .3vw, 1.1rem);
    color: var(--muted);
}

/* Cifras del encabezado: separadas por filos, no por cajas */
.hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(18px, 4vw, 46px);
    margin-top: clamp(22px, 3vw, 34px);
}
.hero-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    min-width: 70px;
}
.hero-stats b {
    font-family: var(--font-display, var(--font));
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 800;
    letter-spacing: var(--tracking, -.03em);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.hero-stats span {
    font-size: 0.8rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    margin-top: 3px;
}

/* La franja de confianza se apoya en un filo degradado, no en una linea dura */
.trust {
    border-top: 0 !important;
    position: relative;
}
.trust::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2) 25%, var(--border-2) 75%, transparent);
}

@media (max-width: 560px) {
    .hero-stats { gap: 14px 26px; }
    .hero-stats > div { min-width: 62px; }
}

/* =====================================================================
   Cabecera de la tienda

   Tres bloques y nada mas: marca, un grupo de navegacion, y la cuenta
   resumida en un solo control. Antes eran siete elementos sueltos en fila
   y por eso se veia amontonada.
   ===================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.header::after {
    content: '';
    position: absolute; inset: auto 0 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2) 12%, var(--border-2) 88%, transparent);
}

.header .wrap {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 22px);
    height: 56px;
}

.logo { font-size: 1rem; gap: 9px; }
.logo img, .logo-mark { height: 30px; width: 30px; }
.logo-mark { border-radius: 9px; font-size: .9rem; }

/* ------------------------------------------------------------ Navegacion */

/* Un solo grupo con fondo propio: se lee como una pieza, no como cuatro
   enlaces sueltos flotando al lado del logo. */
.mainnav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: auto;
    padding: 3px;
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
}

.mainnav a {
    position: relative;
    padding: 7px 15px;
    border-radius: var(--radius-pill, 999px);
    color: var(--muted);
    font-weight: 550;
    font-size: .875rem;
    white-space: nowrap;
    transition: color var(--fast, .16s) ease, background var(--fast, .16s) ease;
}
.mainnav a:hover { color: var(--text); }

.mainnav a.active {
    color: var(--on-primary);
    background: var(--accent-grad, var(--primary));
    box-shadow: 0 2px 10px var(--primary-glow);
}

/* ------------------------------------------------------------ Cuenta */

.header-end { display: flex; align-items: center; gap: 9px; flex: none; }

.header-link {
    color: var(--muted);
    font-size: .875rem;
    font-weight: 550;
    white-space: nowrap;
    padding: 6px 4px;
}
.header-link:hover { color: var(--text); }

/* El saldo: dato, no adorno. Va compacto y lleva a recargar. */
.wallet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-dim);
    box-shadow: inset 0 0 0 1px var(--primary-ring);
    color: var(--primary);
    font-weight: 700;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    white-space: nowrap;
    transition: background var(--fast, .16s) ease;
}
.wallet:hover { background: var(--primary-ring); color: var(--primary); }

/* Avatar con el color del nivel en el aro */
.usermenu { position: relative; }
.usermenu > summary {
    list-style: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    box-shadow: 0 0 0 2px var(--c, var(--primary));
    color: var(--text);
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--fast, .16s) ease, transform var(--fast, .16s) ease;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ''; }
.usermenu > summary:hover { transform: translateY(-1px); }
.usermenu[open] > summary { box-shadow: 0 0 0 2px var(--c, var(--primary)), 0 0 0 6px var(--primary-dim); }

.usermenu-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    min-width: 232px;
    padding: 6px;
    border-radius: var(--radius);
    border: var(--edge, 1px) solid var(--border-2);
    background: var(--surface);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.2);
    animation: bajar .16s var(--ease, ease);
}
@keyframes bajar { from { opacity: 0; transform: translateY(-6px); } }

.um-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.um-head b { font-size: .9rem; font-weight: 650; }
.um-head small { font-size: 0.8rem; color: var(--faint); }
.um-head .tier-chip { align-self: flex-start; margin-top: 5px; }

.usermenu-pop a {
    display: block;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: .875rem;
    font-weight: 500;
    transition: background var(--fast, .16s) ease, color var(--fast, .16s) ease;
}
.usermenu-pop a:hover { background: var(--surface-2); color: var(--text); }
.usermenu-pop .um-out { color: var(--muted); margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.usermenu-pop .um-out:hover { color: #FF8A8A; background: rgba(255,90,90,.1); }

/* ------------------------------------------------------------ Movil */

.navburger { display: none; }

@media (max-width: 900px) {
    .header .wrap { height: 54px; gap: 10px; }

    /* La navegacion baja como una lamina, no se apila en dos filas */
    .mainnav {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 8px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        background: var(--surface);
        box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lg);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s var(--ease, ease);
    }
    .header.nav-abierto .mainnav {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .mainnav a { padding: 11px 14px; border-radius: var(--radius-sm); font-size: .92rem; }

    .header-end { margin-left: auto; }

    .navburger {
        display: flex;
        border: 0;
        font: inherit;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 34px; height: 34px;
        padding: 0 8px;
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        box-shadow: inset 0 0 0 1px var(--border);
        cursor: pointer;
        flex: none;
        -webkit-tap-highlight-color: transparent;
    }
    .navburger span {
        display: block;
        height: 1.8px;
        border-radius: 2px;
        background: var(--text-2);
        transition: transform .2s var(--ease, ease);
    }
    .header.nav-abierto .navburger span:first-child { transform: translateY(3.4px) rotate(45deg); }
    .header.nav-abierto .navburger span:last-child { transform: translateY(-3.4px) rotate(-45deg); }

    .logo span:not(.logo-mark) { max-width: 34vw; }
}

@media (max-width: 430px) {
    .wallet { padding: 6px 10px; font-size: 0.8rem; }
    .logo span:not(.logo-mark) { max-width: 26vw; font-size: .92rem; }
}

/* Solo en pantallas de verdad pequenas el nombre cede el sitio */
@media (max-width: 340px) {
    .logo span:not(.logo-mark) { display: none; }
}

/* =====================================================================
   Ajustes de ancho: al usar toda la pantalla, algunas piezas quedaban
   estiradas y con aire de mas. Aqui se les pone limite.
   ===================================================================== */

/* Los escalones no tienen por que medir media pantalla, pero tampoco
   llevar un ancho minimo fijo: dentro de la tarjeta de compra ese minimo
   los empujaba fuera de su columna y el ultimo salia cortado. */
.ladder-step { min-width: 0; max-width: 230px; }

/* Combos de la portada: tres por fila como maximo, para que uno solo no
   quede como una tarjeta perdida en el borde izquierdo */
#combos .combos-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

/* Destacados: tarjetas mas grandes que las del catalogo, porque son pocas */
#destacados .products {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

/* En pantallas muy anchas el catalogo no debe pasar de tarjetas enormes
   ni de columnas microscopicas: este rango se ve bien de 5 a 6 columnas. */
@media (min-width: 1500px) {
    .products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
}

/* La ficha de producto tiene un limite de lectura propio: con 1560px de
   ancho, una descripcion a toda la pagina es incomoda. El margen automatico
   no es decorativo: sin el, el limite empuja todo el modulo a la izquierda
   y deja un hueco de 300px a la derecha. */
.product-detail { max-width: 1180px; margin-inline: auto; }
.combo-detail { max-width: 1240px; margin-inline: auto; }


/* ============================================================== *
 * Recargar saldo (/recargar)
 *
 * Maestro-detalle, y la razon es concreta: la version anterior
 * volcaba TODOS los medios con TODOS sus datos a la vez. Cuatro
 * billeteras con cuatro campos cada una son cuatro pantallas de
 * scroll en un telefono, y el campo del monto -que estaba arriba
 * del todo- desaparecia justo cuando hacia falta.
 *
 * Ahora: a la izquierda se elige (solo quien es y que acepta), a
 * la derecha se paga. El monto vive DENTRO del detalle, pegado al
 * boton, porque es ahi donde el cliente lo necesita.
 *
 * En el telefono no hay dos columnas: la lista ocupa la pantalla
 * y el detalle la sustituye, con un boton para volver. Es el
 * mismo HTML; solo cambia lo que se ve.
 *
 * --rg es el color del medio y llega por style="" desde su fila.
 * ============================================================== */

.rg {
    display: grid;
    /* La lista no necesita mas de 340px y el detalle agradece todo lo que
       sobre: por eso una columna acotada y otra elastica, no dos iguales.
       Es lo que arregla la tarjeta sola estirada a 1.500px. */
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* -------------------------------------------------- La lista */

.rg-lista { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rg-grupo { display: flex; flex-direction: column; gap: 6px; }

.rg-grupo-cab {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 0 2px 2px;
}
.rg-grupo-tit {
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    opacity: .5;
}

.rg-pastilla {
    font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    padding: 3px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    white-space: nowrap;
}
.rg-pastilla-auto {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    color: var(--primary);
}
.rg-pastilla-manual {
    background: rgba(255, 176, 32, .1);
    border-color: rgba(255, 176, 32, .3);
    color: #FFC964;
}

/* Una fila: icono, nombre y lo que hay que tocar. Compacta a
   proposito: de eso iba todo esto. */
.rg-item {
    --rg: var(--primary);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; gap: 11px;
    min-height: 62px; padding: 10px 12px;
    border-radius: 13px;
    background: var(--surface); border: 1px solid var(--border);
    color: inherit; text-decoration: none;
    transition: border-color .15s, background .15s, transform .12s;
}
.rg-item:hover { border-color: color-mix(in srgb, var(--rg) 45%, var(--border)); }
.rg-item:active { transform: scale(.995); }

/* El elegido lleva un filo de su color. Hace falta en escritorio,
   donde lista y detalle conviven y hay que saber cual se mira. */
.rg-item.is-activo {
    border-color: var(--rg);
    background: color-mix(in srgb, var(--rg) 9%, var(--surface));
    box-shadow: inset 3px 0 0 var(--rg);
}

.rg-item-logo {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px; overflow: hidden;
    background: color-mix(in srgb, var(--rg) 14%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--rg) 28%, var(--border));
    color: var(--rg); font-weight: 700; font-size: 1.05rem;
}
.rg-item-logo img { width: 100%; height: 100%; object-fit: cover; }

.rg-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rg-item-txt b { font-size: .95rem; font-weight: 650; }
.rg-item-txt small {
    font-size: .76rem; opacity: .6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La comision en la fila de la lista: es lo que permite comparar sin entrar
   en cada medio. Ambar cuando cobra, verde cuando no. */
.rg-fee-chip {
    align-self: start; margin-top: 3px;
    font-size: .68rem; font-weight: 650; letter-spacing: .01em;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(255, 176, 32, .12);
    border: 1px solid rgba(255, 176, 32, .3);
    color: #FFC964; white-space: nowrap;
}
.rg-fee-chip-libre {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 34%, transparent);
    color: var(--primary);
}

.rg-item-go {
    font-size: .78rem; font-weight: 650;
    padding: 7px 12px; border-radius: 9px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--rg); white-space: nowrap;
}
.rg-item.is-activo .rg-item-go {
    background: var(--rg); border-color: var(--rg); color: #07130C;
}

/* -------------------------------------------------- El detalle */

/*
 * El detalle se queda a la vista mientras se recorre la lista.
 *
 * El tope no puede ser 16px: arriba hay una barra pegada de 65px -y en el
 * diseno de menu superior son dos, la barra y la fila del menu-, asi que
 * pegarse al borde de la ventana metia la cabecera del panel por debajo de
 * la barra y se veia cortada justo por arriba.
 *
 * Y tampoco puede ser un numero fijo en esta hoja, porque depende del
 * diseno que tenga puesto cada tienda. Lo que hay pegado se mide en el JS
 * de la pagina, que lo escribe en --rg-tope; el valor de aqui es el
 * respaldo para quien llegue sin JavaScript, que es el caso normal.
 */
.rg-detalle {
    position: sticky;
    top: calc(var(--rg-tope, 65px) + 14px);
    /*
     * Si el panel no cabe en lo que queda de pantalla, se recorre por
     * dentro. Sin esto, un panel de 790px en un portatil de 768 se quedaba
     * pegado con el pie fuera de la ventana -el boton de pagar entre
     * ellos- y no habia manera de llegar a el: al estar fijo, seguir
     * bajando no lo movia.
     */
    max-height: calc(100vh - var(--rg-tope, 65px) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 0;
}

.rg-panel {
    display: flex; flex-direction: column; gap: 16px;
    padding: 18px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-top: 3px solid var(--rg);
}
.rg-panel[hidden] { display: none; }

.rg-panel-cab { display: flex; align-items: center; gap: 12px; }

.rg-panel-logo {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: grid; place-items: center;
    border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--rg) 14%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--rg) 30%, var(--border));
    color: var(--rg); font-weight: 700; font-size: 1.2rem;
}
.rg-panel-logo img { width: 100%; height: 100%; object-fit: cover; }

.rg-panel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rg-panel-txt b { font-size: 1.1rem; font-weight: 650; }
.rg-panel-txt small { font-size: .82rem; opacity: .62; }

/* Volver a la lista. Solo existe en el telefono, donde el detalle
   tapa la lista; en escritorio las dos se ven a la vez. */
.rg-volver { display: none; }

.rg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-chip {
    font-size: .72rem; padding: 3px 9px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); opacity: .85;
}
/*
 * "Sin comision" es un chip y no una frase debajo del total.
 *
 * Era una linea suelta al pie -"Sin comision: pagas justo lo que
 * recargas."- y dejaba dos renglones donde en los medios con comision hay
 * un desglose: la cifra parecia llevar letra pequena. Como chip se dice
 * antes de elegir el monto, que es cuando importa, y el pie se queda con
 * una sola linea: la que lleva la cifra.
 */
.rg-chip-libre {
    opacity: 1; font-weight: 650;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 34%, transparent);
    color: var(--primary);
}

.rg-note { margin: 0; font-size: .85rem; line-height: 1.55; opacity: .72; }

/* -------------------------------------------------- El monto */

/*
 * En escritorio el campo y los atajos van en la MISMA fila.
 *
 * Apilados -titulo, cinco botones a lo ancho, campo grande, limites- el
 * bloque media mas de 200px de alto para pedir un numero. En una fila mide
 * la mitad y se lee igual de bien: el campo manda a la izquierda, los
 * atajos acompanan a la derecha.
 */
.rg-monto {
    display: grid;
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
    grid-template-areas:
        "lab   lab"
        "campo atajos"
        "lim   lim";
    gap: 8px 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 13px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.rg-monto-lab { grid-area: lab; font-size: .84rem; font-weight: 600; opacity: .8; }
.rg-amount-input { grid-area: campo; }
.rg-quick { grid-area: atajos; }
.rg-limites { grid-area: lim; font-size: .76rem; opacity: .55; }

.rg-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 7px;
}

.rg-quick-btn {
    min-width: 0;
    /* 44px es el minimo comodo para el dedo. Por debajo se falla el
       boton y se acaba escribiendo el monto a mano. */
    min-height: 44px; padding: 0 12px;
    border-radius: 10px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    color: inherit; font: inherit; font-weight: 600; font-size: .88rem;
    transition: border-color .15s, background .15s, color .15s;
}
.rg-quick-btn:hover { border-color: var(--border-lit); }
.rg-quick-btn.is-active {
    background: color-mix(in srgb, var(--rg) 16%, var(--surface));
    border-color: var(--rg); color: var(--rg);
}

/*
 * El simbolo va DENTRO del flujo, no flotando encima.
 *
 * Con position:absolute y un padding-left en el input, cualquier tema que
 * imponga su propio padding tapa el primer digito: "$ 50.000" se leia
 * "$0.000". En un campo de dinero eso no es estetica, es leer cero donde
 * hay cincuenta mil.
 */
.rg-amount-input {
    display: flex; align-items: center; gap: 3px;
    padding: 0 13px; border-radius: 11px;
    background: var(--surface); border: 1px solid var(--border);
}
/*
 * El foco NO se marca aqui, a proposito.
 *
 * Lo pone ui.css sobre esta misma caja -un anillo, no un borde- y desde una
 * sola regla que vale para los cuatro componentes de este tipo que hay en la
 * tienda. Tener ademas un borde de color aqui era repetir el mismo mensaje
 * en dos idiomas y pelearse con la cascada entre hojas para nada.
 */

/*
 * Dos clases, no una: hace falta para GANAR, no por gusto.
 *
 * Las hojas se cargan store.css -> workspace.css -> ui.css, y las tres
 * llevan su regla base de campos, todas de peso 11. `.rg-amount-input input`
 * tambien pesa 11, asi que empataba con las de las otras dos hojas... y al
 * empatar gana la que se carga despues. El input se quedaba con SU fondo,
 * SU borde y SU padding dentro de mi contenedor, y se veia una caja dentro
 * de otra.
 *
 * Con la clase del propio input son 20: por encima de las tres bases, sin
 * un solo !important. Y no depende del type, que podria cambiar.
 */
.rg-amount-input .rg-amount,
.rg-amount-input .rg-amount:focus,
.rg-amount-input .rg-amount:hover {
    flex: 1; min-width: 0;
    /* El input pierde su caja: la caja es el contenedor. */
    background: none; border: 0; outline: 0; box-shadow: none;
    padding: 12px 0; margin: 0; min-height: 0;
    font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em;
    color: inherit;
}
.rg-sym {
    flex: 0 0 auto;
    font-size: 1.05rem; font-weight: 600; opacity: .5;
    pointer-events: none; user-select: none;
}

/* -------------------------------------------------- Datos a copiar */

/*
 * Varios datos por fila, cada uno con el ancho que pide.
 *
 * Bancolombia pide cuatro datos y en una sola columna eso era media
 * pantalla de scroll, asi que van repartidos. Lo que no funciona es
 * repartirlos en pistas IGUALES: con repeat(auto-fit, minmax(190px, 1fr))
 * las cuatro salian a 270px, y "Wilson Favian Iglesias Urbano" no cabe en
 * 270px, asi que se partia por dentro y quedaba "Iglesia / s Urbano". Un
 * titular partido no se lee, y es justo el dato que hay que copiar tal
 * cual en el banco.
 *
 * Con flex la caja arranca del tamano de su contenido y crece con lo que
 * sobre: el titular se lleva el ancho que necesita y el tipo de cuenta se
 * queda con el suyo, que es corto.
 */
.rg-datos { display: flex; flex-wrap: wrap; gap: 10px; }
.rg-datos-tit { flex: 0 0 100%; font-size: .84rem; font-weight: 600; opacity: .8; }

.rg-dato {
    display: flex; flex-direction: column; gap: 3px;
    flex: 1 1 auto; min-width: min(190px, 100%); max-width: 100%;
}
.rg-dato-label {
    font-size: .7rem; text-transform: uppercase;
    letter-spacing: .05em; opacity: .5;
}

/* El valor es un boton porque se toca para copiarlo: nadie transcribe
   a mano un numero de cuenta de doce digitos sin equivocarse. */
.rg-dato-value {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    text-align: left; width: 100%;
    min-height: 44px; padding: 8px 11px;
    border-radius: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px dashed var(--border-2);
    color: inherit; font: inherit; font-weight: 650; font-size: .96rem;
    /* Nunca a mitad de palabra: si algo no cabe se corta entre palabras, y
       solo lo que no tiene espacios -un numero de cuenta de doce digitos-
       se parte por dentro. break-all partia tambien los nombres. */
    word-break: normal; overflow-wrap: break-word;
    transition: border-color .15s, color .15s;
}
/* Sin esto el texto no cede dentro del boton -que es flex- y se sale. */
.rg-dato-value > span { min-width: 0; }
.rg-dato-value svg {
    width: 15px; height: 15px; flex: 0 0 15px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .45;
}
.rg-dato-value:hover { border-color: var(--rg); }
.rg-dato-value:hover svg { opacity: .9; }
.rg-dato-value.is-copied {
    border-style: solid; border-color: var(--primary); color: var(--primary);
}
/* El aviso de copiado se pinta con CSS: asi no hay que tocar el texto
   del boton y el numero no se pierde de vista mientras se pega. */
.rg-dato-value.is-copied::after {
    content: "copiado";
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}
.rg-dato-value.is-copied svg { display: none; }

/* -------------------------------------------------- Formulario y accion */

.rg-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
/* Cada campo es una columna con el input abajo del todo. Sin esto, una
   etiqueta de dos lineas -"Numero de comprobante (opcional)"- empujaba su
   input mas abajo que el de al lado y la fila quedaba en escalera. */
.rg-form .field {
    margin-bottom: 0; min-width: 0;
    display: flex; flex-direction: column;
}
.rg-form .field > label { margin-bottom: 7px; }
.rg-form .field > input,
.rg-form .field > textarea,
.rg-form .field > select { margin-top: auto; }
/* El archivo ocupa la fila entera: su ayuda va debajo y partida queda mal. */
.rg-form .field:has(input[type="file"]) { grid-column: 1 / -1; }

/*
 * El pie: las cuentas a la izquierda, el boton a la derecha.
 *
 * Antes era una columna, asi que el boton se estiraba a lo ancho del panel
 * -en un monitor, 1.100px de boton verde para decir "Pagar"- y el "Pagas
 * 11.281" quedaba con el texto en un extremo y la cifra en el otro, a medio
 * metro de distancia. Un boton de accion no gana nada por ser mas largo;
 * gana por estar junto a la cifra que confirma.
 */
.rg-pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px; align-items: end;
    padding-top: 14px; border-top: 1px solid var(--border);
}

.rg-cuentas { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.rg-linea {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; font-size: .86rem; opacity: .7;
}
.rg-linea b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* La comision, en el ambar de "ojo con esto": es el unico numero de los tres
   que el cliente no pidio. */
.rg-linea-fee { color: #FFC964; opacity: .85; }

/* El total manda: mas grande y con una raya que lo separa de la suma. */
.rg-linea-total {
    padding-top: 6px; margin-top: 1px;
    border-top: 1px solid var(--border);
    font-size: .92rem; opacity: 1;
}
.rg-linea-total b { font-size: 1.2rem; font-weight: 700; }

/* Cuando el total va solo -sin desglose encima- la raya sobra: el pie ya
   trae la suya y dos rayas seguidas parecen un error de dibujo. */
.rg-cuentas > .rg-linea-total:only-child {
    border-top: 0; padding-top: 0; margin-top: 0;
}

/* Ancho de boton, no de pancarta. */
.rg-pie .rg-go { min-width: 240px; max-width: 320px; justify-content: center; }

/*
 * El pie de la pagina de una solicitud.
 *
 * Llevaba `mt-4`, que existe en app.css... y la tienda no carga app.css.
 * Asi que el margen era CERO y los botones quedaban pegados al borde de la
 * tarjeta de arriba. Con clase propia el espacio no depende de una utilidad
 * que vive en otra hoja.
 */
.rg-salida {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 26px;
}
@media (max-width: 560px) {
    /* En el telefono, uno debajo de otro y a todo el ancho: dos botones a
       medias en 390px se quedan sin sitio para su texto. */
    .rg-salida { flex-direction: column; align-items: stretch; }
    .rg-salida .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------- Canjear un codigo */

/*
 * El panel del codigo se reparte en dos: la tienda y el campo.
 *
 * Es el unico medio sin datos de cuenta, sin monto que elegir y sin
 * desglose de comision, asi que en un monitor quedaba un titulo, una frase
 * y un boton verde de 1.100px sobre medio panel vacio. El hueco lo llena
 * la marca de la tienda -su portada, su logo, su nombre-, que no es adorno:
 * es la confirmacion de donde va a entrar el saldo.
 */
.rg-canje {
    display: grid;
    grid-template-columns: minmax(190px, 290px) minmax(0, 1fr);
    gap: 16px;
}

.rg-canje-marca {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    padding: 22px 18px; text-align: center;
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--primary) 15%, var(--surface-2)), var(--surface-2));
}

/* Con portada, la foto va detras y un velo sostiene el texto: no se sabe
   que subio el dueno, y sobre una imagen clara el nombre desaparecia. */
.rg-canje-marca.has-foto {
    position: relative; border-color: transparent;
    background-size: cover; background-position: center;
}
.rg-canje-marca.has-foto::before {
    content: ""; position: absolute; inset: 0;
    /* Bien oscuro y con la foto desenfocada detras: la portada de una tienda
       puede ser cualquier cosa -un fondo claro, un collage- y el nombre
       tiene que leerse igual. Desenfocada tambien deja de competir con el
       logo, que es lo que hay que mirar. */
    background: linear-gradient(180deg, rgba(8, 10, 14, .6), rgba(8, 10, 14, .9));
    backdrop-filter: blur(3px) saturate(.9);
}
.rg-canje-marca.has-foto > * { position: relative; }
.rg-canje-marca.has-foto b { color: #fff; }
.rg-canje-marca.has-foto small { color: rgba(255, 255, 255, .8); }

.rg-canje-logo {
    width: 62px; height: 62px; flex: 0 0 62px;
    display: grid; place-items: center; overflow: hidden;
    border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 1.5rem; font-weight: 700; color: var(--primary);
}
.rg-canje-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

.rg-canje-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rg-canje-txt b { font-size: 1.02rem; font-weight: 650; line-height: 1.3; }
.rg-canje-txt small { font-size: .78rem; line-height: 1.45; opacity: .7; }

.rg-canje-lado {
    display: flex; flex-direction: column; justify-content: center;
    gap: 12px; min-width: 0;
}
.rg-canje-lado .field { margin-bottom: 0; }
.rg-canje-lado .hint { margin-top: -2px; }

/* El campo crece y el boton se queda con su ancho: la accion cierra la fila
   justo donde se termina de escribir el codigo. */
.rg-canje-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px; align-items: end;
}
.rg-canje-fila .rg-go { min-width: 200px; max-width: 280px; justify-content: center; }

.rg-receipts { display: flex; flex-wrap: wrap; gap: 10px; }
.rg-receipts a {
    display: block; width: 160px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2);
}
.rg-receipts img { display: block; width: 100%; height: 160px; object-fit: cover; }

/* ============================================== El telefono */

@media (max-width: 900px) {
    /*
     * Una sola columna, y las dos mitades se turnan: primero se elige,
     * despues se paga. Que convivan en 390px de ancho obligaria a hacer
     * scroll para comprobar si acaso cambio algo al tocar.
     */
    .rg { grid-template-columns: 1fr; gap: 0; }

    .rg-detalle {
        position: static;
        max-height: none; overflow: visible;
    }
    .rg-panel { padding: 15px; }

    /* Eligiendo: se ve la lista, no el detalle. */
    .rg:not(.is-abierto) .rg-detalle { display: none; }

    /* Pagando: se ve el detalle, no la lista. */
    .rg.is-abierto .rg-lista { display: none; }

    /* Y entonces aparece el boton de volver, que en escritorio sobra. */
    .rg.is-abierto .rg-volver {
        display: grid; place-items: center;
        width: 38px; height: 38px; flex: 0 0 38px;
        border-radius: 10px; cursor: pointer;
        background: var(--surface-2); border: 1px solid var(--border);
        color: inherit; font-size: 1.5rem; line-height: 1;
        padding: 0 3px 3px 0;
    }
    .rg.is-abierto .rg-volver:hover { border-color: var(--rg); }

    /* La pastilla de la cabecera se cae: ya lo dijo la lista de donde
       vino, y en 390px compite con el nombre del medio. */
    .rg-panel-cab .rg-pastilla { display: none; }

    /* Tres atajos por fila en vez de dos: con cinco montos, dos columnas
       dejaban el ultimo solo ocupando una fila entera. El texto cede unas
       decimas para que quepan. */
    .rg-quick-btn { padding: 0 7px; font-size: .82rem; }

    /* El pie se apila: el desglose arriba y el boton a todo el ancho, que en
       un telefono es lo comodo para el pulgar. */
    .rg-pie { grid-template-columns: 1fr; gap: 12px; }
    .rg-pie .rg-go { min-width: 0; max-width: none; width: 100%; }

    /* El monto se apila: en 390px no caben campo y atajos en una fila. */
    .rg-monto {
        grid-template-columns: 1fr;
        grid-template-areas: "lab" "campo" "atajos" "lim";
    }

    /* Un dato por fila: dos columnas de 190px no caben en 390px menos
       los margenes. */
    .rg-dato { flex-basis: 100%; }
    .rg-form { grid-template-columns: 1fr; }

    /*
     * El codigo, en vertical: la marca pasa a ser una tira.
     *
     * En columna, 200px de portada empujaban el campo fuera de la primera
     * pantalla, y el campo es para lo que se entra aqui. De lado, logo y
     * nombre ocupan tres dedos y siguen diciendo de que tienda se trata.
     */
    .rg-canje { grid-template-columns: 1fr; gap: 14px; }
    .rg-canje-marca {
        flex-direction: row; text-align: left;
        padding: 13px 14px; gap: 12px;
    }
    .rg-canje-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; }
    .rg-canje-logo img { padding: 5px; }
    .rg-canje-txt small { font-size: .74rem; }

    /* Campo y boton se apilan: en 390px, uno al lado del otro deja el boton
       sin sitio para su texto. */
    .rg-canje-fila { grid-template-columns: 1fr; }
    .rg-canje-fila .rg-go { width: 100%; min-width: 0; max-width: none; }


    .rg-receipts a { width: 100%; }
}

/* En pantallas muy estrechas el nombre del medio manda; el resto cede. */
@media (max-width: 380px) {
    .rg-panel-txt b { font-size: 1rem; }
    .rg-amount-input .rg-amount { font-size: 1.15rem; }
}

/* ============================================================== *
 * El hueco de una imagen eliminada
 *
 * Mismo aspecto en el panel y en la tienda, y en los dos sitios
 * donde hay imagenes -comprobantes y evidencias de soporte-,
 * porque el mensaje es el mismo. Se pinta en vez de no pintar
 * nada para que se pueda distinguir "nunca hubo imagen" de
 * "la hubo y alguien la borro".
 *
 * Parece una imagen rota a proposito: es el lenguaje que todo el
 * mundo entiende sin leer el texto.
 * ============================================================== */

.img-borrada {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    width: 160px; min-height: 160px; padding: 14px;
    border-radius: 10px;
    /* Discontinuo: el hueco se lee como "aqui falta algo", no como
       una tarjeta mas del monton. */
    border: 1px dashed var(--border-2);
    background: var(--surface-2);
    text-align: center;
}

.img-borrada svg {
    width: 30px; height: 30px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .38;
}

.img-borrada-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.img-borrada-txt b { font-size: .8rem; font-weight: 600; opacity: .7; }
.img-borrada-txt small { font-size: .72rem; opacity: .45; line-height: 1.4; }

/* Junto a las evidencias de soporte, que son mas pequenas. */
.support-evidence-grid .img-borrada { width: 135px; min-height: 130px; }

/* La imagen viva y su pie de "tamano + borrar". */
.rc-recibo { margin: 0; display: flex; flex-direction: column; gap: 6px; width: 168px; }
.rc-recibo > a {
    display: block; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2);
}
.rc-recibo > a:hover { border-color: var(--border-lit); }
.rc-recibo img { display: block; width: 100%; height: 168px; object-fit: cover; }
.rc-recibo figcaption {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.support-evidence-wrap { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 520px) {
    /* En el telefono todo a lo ancho: 160px fijos dejan un hueco
       raro a la derecha y obligan a mirar de cerca. */
    .img-borrada,
    .rc-recibo,
    .support-evidence-grid .img-borrada { width: 100%; }
}