/* =====================================================================
   NetwilOne — Sistema visual
   Verde esmeralda sobre negro profundo.

   Ideas que lo sostienen:
     · Profundidad por capas, no por bordes: aurora + rejilla + grano
     · El verde es acento, nunca relleno. Brilla donde hay que actuar.
     · Superficies de vidrio con un filo de luz arriba
     · Tipografia fluida: el mismo diseno respira igual en movil y en 4K
   ===================================================================== */

/* ------------------------------------------------------------ Tokens */

:root {
    /* Fondo, de lo mas profundo a lo mas cercano */
    --void:       #04070500;
    --bg:         #050806;
    --bg-2:       #070B08;
    --surface:    #0B110D;
    --surface-2:  #101913;
    --surface-3:  #16221A;

    /* Filos */
    --border:     #1A2A20;
    --border-2:   #23392B;
    --border-lit: rgba(0, 230, 118, .28);

    /* Verde */
    --primary:    #00E676;
    --primary-2:  #00C853;
    --primary-3:  #5BF0A5;
    --primary-4:  #B9F6CA;
    --glow:       rgba(0, 230, 118, .22);
    --glow-soft:  rgba(0, 230, 118, .10);
    --glow-hard:  rgba(0, 230, 118, .45);

    /* Texto */
    --text:       #E9F5EC;
    --text-2:     #A5BDAF;
    --muted:      #6B8175;
    --faint:      #4A5C51;

    /* Estados */
    --danger:     #FF5A5A;
    --danger-bg:  rgba(255, 90, 90, .10);
    --warn:       #FFC24D;
    --warn-bg:    rgba(255, 194, 77, .10);
    --info:       #4FC3F7;
    --info-bg:    rgba(79, 195, 247, .10);

    /* Formas */
    --r-sm:  10px;
    --r:     14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-pill: 999px;

    /* Sombras: apiladas, nunca una sola */
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 12px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
    --sh-3: 0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
    --sh-4: 0 24px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4);
    --sh-glow: 0 0 0 1px var(--border-lit), 0 8px 30px var(--glow-soft);

    /* Movimiento */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --fast: .14s var(--ease);
    --med: .24s var(--ease);
    --slow: .5s var(--ease-out);

    --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Geist', -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --max: 1320px;
    --gutter: clamp(18px, 4vw, 32px);
}

/* ------------------------------------------------------------ Base */

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

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

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;
    overflow-x: hidden;
}

/* Capa 1 — aurora: dos manchas verdes que dan volumen al negro */
body::before {
    content: '';
    position: fixed;
    inset: -20% -10% auto -10%;
    height: 90vh;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(50% 55% at 18% 0%, rgba(0, 230, 118, .13), transparent 70%),
        radial-gradient(45% 50% at 85% 8%, rgba(0, 200, 83, .09), transparent 68%),
        radial-gradient(60% 40% at 50% 0%, rgba(91, 240, 165, .05), transparent 75%);
    filter: blur(30px);
}

/* Capa 2 — rejilla fina: da la sensacion tecnica sin ensuciar */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

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

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

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--text);
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 900; letter-spacing: -.045em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); letter-spacing: -.02em; }
h4 { font-size: .95rem; letter-spacing: -.01em; }

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

a { color: var(--primary); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--primary-3); }

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

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

code, kbd, .mono { font-family: var(--mono); font-size: .875em; letter-spacing: -.01em; }

code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .14em .45em;
    border-radius: 6px;
    color: var(--primary-3);
}

::selection { background: rgba(0, 230, 118, .28); color: #fff; }

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

/* Texto con degradado, para los titulos que mandan */
.grad {
    background: linear-gradient(135deg, var(--primary-4) 0%, var(--primary) 45%, var(--primary-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

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

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 760px; }
.wrap-tight { max-width: 560px; }

.section { padding-block: clamp(34px, 5vw, 68px); }
.section-sm { padding-block: clamp(24px, 3.5vw, 40px); }

.grid { display: grid; gap: clamp(11px, 1.4vw, 16px); }
/* Los minimos estan calculados para que en escritorio salgan exactamente
   2, 3 y 4 columnas: asi seis tarjetas hacen dos filas limpias de tres y
   nunca queda una huerfana sola al final. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.row-center { justify-content: center; }
.row-end { justify-content: flex-end; }
/* Dentro de una tabla las filas se alinean a la derecha, porque casi siempre
   son botones de accion. Esta es la salida para las que no lo son. */
.row-start { justify-content: flex-start; }
.spacer { flex: 1 1 auto; }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .845rem; line-height: 1.55; }
.tiny { font-size: 0.8rem; line-height: 1.5; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.25rem; } .mb-2 { margin-bottom: 1.25rem; }
.mt-4 { margin-top: 2.25rem; }

/* ------------------------------------------------------------ Cabecera */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--med), background var(--med);
}

.topbar::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2) 15%, var(--border-2) 85%, transparent);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 58px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 1.09rem;
    color: var(--text);
    letter-spacing: -.035em;
    flex: none;
}
.brand:hover { color: var(--text); }
.brand em { font-style: normal; color: var(--primary); }

.brand-mark {
    position: relative;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--primary-3), var(--primary) 45%, var(--primary-2));
    color: #04120A;
    font-weight: 900;
    font-size: .95rem;
    box-shadow: 0 0 0 1px rgba(0,230,118,.3), 0 4px 16px var(--glow), inset 0 1px 0 rgba(255,255,255,.4);
    flex: none;
}

.nav { display: flex; gap: 2px; align-items: center; }

/* :not(.btn) es importante: sin el, esta regla le gana en especificidad a
   .btn-primary y deja el texto del boton del menu casi ilegible. */
.nav a:not(.btn) {
    position: relative;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-weight: 500;
    font-size: .905rem;
    transition: color var(--fast), background var(--fast);
    white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--text); background: rgba(255,255,255,.035); }
.nav a:not(.btn).active { color: var(--primary); background: var(--glow-soft); }

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

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 42px;
    border-radius: var(--r-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 var(--fast), box-shadow var(--med), background var(--fast), border-color var(--fast), color var(--fast);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--text); 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: linear-gradient(140deg, var(--primary-3), var(--primary) 40%, var(--primary-2));
    color: #04120A;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 16px var(--glow), 0 1px 2px rgba(0,0,0,.4);
}
.btn-primary:hover {
    color: #04120A;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 26px var(--glow-hard), 0 2px 6px rgba(0,0,0,.4);
}

.btn-ghost {
    background: rgba(255,255,255,.028);
    border-color: var(--border-2);
    color: var(--text-2);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover {
    border-color: var(--border-lit);
    color: var(--primary);
    background: var(--glow-soft);
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
}

.btn-danger { background: var(--danger-bg); border-color: rgba(255,90,90,.28); color: var(--danger); }
.btn-danger:hover { background: rgba(255,90,90,.16); color: #FF8A8A; border-color: rgba(255,90,90,.45); }

.btn-sm { padding: 7px 13px; min-height: 34px; font-size: .82rem; border-radius: 9px; }
.btn-lg { padding: 14px 28px; min-height: 52px; font-size: 1rem; border-radius: var(--r); }
.btn-block { width: 100%; }

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

.card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: clamp(15px, 1.7vw, 19px);
    box-shadow: var(--sh-2);
}

/* El filo de luz de arriba: el detalle que separa "caja" de "superficie" */
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: var(--r) var(--r) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09) 30%, rgba(255,255,255,.09) 70%, transparent);
    pointer-events: none;
}

.card-pad-lg { padding: clamp(19px, 2.2vw, 26px); }

.card-hover { transition: transform var(--med), border-color var(--med), box-shadow var(--med); }
.card-hover:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: var(--sh-3);
}

/* Tarjeta destacada: borde con degradado verde */
.card-accent {
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(0,230,118,.05), rgba(0,230,118,.01) 55%), var(--surface);
    box-shadow: var(--sh-2);
}
.card-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, var(--border-lit), rgba(0,230,118,.06) 45%, var(--border));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.card-accent::before { background: linear-gradient(90deg, transparent, var(--glow-hard) 35%, var(--glow-hard) 65%, transparent); }

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

/* ------------------------------------------------------------ Metricas */

.stat {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.024), transparent 55%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: border-color var(--med), transform var(--med);
}
.stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.stat:hover { border-color: var(--border-2); transform: translateY(-2px); }

.stat .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
}
.stat .value {
    font-size: clamp(1.6rem, 1.3rem + .9vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -.045em;
    margin-top: 3px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat .value.green {
    background: linear-gradient(135deg, var(--primary-4), var(--primary) 60%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat .value.warn { color: var(--warn); }
.stat .value.danger { color: var(--danger); }

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

.field { margin-bottom: 13px; }

.field label, .label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 7px;
    letter-spacing: -.005em;
}

.field .hint { font-size: 0.8rem; color: var(--muted); margin-top: 7px; line-height: 1.5; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="date"],
input[type="search"],
/* Un <input> sin atributo type es de texto, pero no lo cazaba ningun
   selector de arriba y quedaba con el estilo crudo del navegador. */
input:not([type]), select, textarea {
    width: 100%;
    padding: 11px 14px;
    min-height: 44px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font: inherit;
    font-size: .93rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--border-2);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg);
    box-shadow: 0 0 0 3px var(--glow-soft), inset 0 1px 2px rgba(0,0,0,.2);
}

input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--faint); }

textarea { min-height: 116px; resize: vertical; line-height: 1.6; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B8175' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

input[type="color"] { padding: 3px; min-height: 44px; cursor: pointer; }
input[type="file"] {
    padding: 9px 12px;
    font-size: .86rem;
    cursor: pointer;
    color: var(--text-2);
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 13px;
    border-radius: 8px;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--fast);
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--border-lit);
    color: var(--primary);
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    padding: 3px 0;
    -webkit-tap-highlight-color: transparent;
}
.checkbox input {
    width: 18px; height: 18px;
    min-height: 0;
    margin-top: 2px;
    flex: none;
    accent-color: var(--primary);
    cursor: pointer;
}
.checkbox:hover { color: var(--text); }

.input-group { display: flex; align-items: stretch; }
.input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    z-index: 1;
}
.input-group select {
    width: auto;
    min-width: 170px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--surface-2);
    color: var(--text-2);
    font-weight: 600;
}

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

.alert {
    position: relative;
    padding: 13px 16px 13px 17px;
    border-radius: var(--r-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 strong { font-weight: 700; color: inherit; }
.alert-success { background: var(--glow-soft); border-color: rgba(0,230,118,.24); color: var(--primary-3); }
.alert-error   { background: var(--danger-bg); border-color: rgba(255,90,90,.24); color: #FF9090; }
.alert-warning { background: var(--warn-bg); border-color: rgba(255,194,77,.24); color: var(--warn); }
.alert-info    { background: var(--info-bg); border-color: rgba(79,195,247,.24); color: var(--info); }

.flashes:not(:empty) { margin-bottom: 6px; }

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

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .015em;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    white-space: nowrap;
    line-height: 1.6;
}
.badge-green  { background: var(--glow-soft); border-color: rgba(0,230,118,.3); color: var(--primary); }
.badge-red    { background: var(--danger-bg); border-color: rgba(255,90,90,.3); color: #FF8A8A; }
.badge-warn   { background: var(--warn-bg); border-color: rgba(255,194,77,.3); color: var(--warn); }
.badge-muted  { color: var(--muted); }

.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    box-shadow: 0 0 8px currentColor;
}

/* Punto que late: solo en lo que esta vivo ahora */
.badge-green .dot { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor; }
    50% { opacity: .55; box-shadow: 0 0 3px currentColor; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: var(--r-pill);
    background: var(--glow-soft);
    border: 1px solid rgba(0,230,118,.24);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 14px var(--glow-soft);
}

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

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--sh-1);
    -webkit-overflow-scrolling: touch;
}

table.table { width: 100%; border-collapse: collapse; font-size: .885rem; min-width: 520px; }

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 rgba(26,42,32,.6);
    vertical-align: middle;
}

table.table tbody tr { transition: background var(--fast); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr:hover { background: rgba(0,230,118,.028); }

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

/* ------------------------------------------------------------ Landing */

.hero {
    position: relative;
    padding-block: clamp(42px, 6vw, 76px) clamp(26px, 3.5vw, 44px);
    text-align: center;
}

.hero h1 { max-width: 16ch; margin-inline: auto; margin-bottom: .55rem; }

.hero .lead {
    font-size: clamp(1rem, .95rem + .5vw, 1.2rem);
    max-width: 56ch;
    margin: 0 auto 1.6rem;
    color: var(--text-2);
    line-height: 1.58;
}

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Vista previa de la URL: el gancho de la portada */
.url-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 12px 17px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    font-family: var(--mono);
    font-size: clamp(.85rem, .8rem + .3vw, 1rem);
    overflow-x: auto;
    box-shadow: var(--sh-3), 0 0 0 1px rgba(0,230,118,.06);
    scrollbar-width: none;
}
.url-preview::-webkit-scrollbar { display: none; }
.url-preview::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-hard), transparent);
}
.url-preview .scheme { color: var(--faint); }
.url-preview .alias { color: var(--primary); font-weight: 700; }
.url-preview .domain { color: var(--text-2); }

/* Maqueta de tienda: se ve de un vistazo lo que te llevas */
.mockup {
    position: relative;
    max-width: 620px;
    margin: clamp(24px, 3.2vw, 36px) auto 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-2);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: var(--sh-4), 0 0 0 1px rgba(0,230,118,.07);
    overflow: hidden;
    text-align: left;
}
.mockup::before {
    content: '';
    position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-hard) 30%, var(--glow-hard) 70%, transparent);
}

/* Barra del navegador */
.mockup-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.mockup-bar i {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--surface-3); flex: none;
}
.mockup-bar i:first-child { background: #FF5F57; }
.mockup-bar i:nth-child(2) { background: #FEBC2E; }
.mockup-bar i:nth-child(3) { background: #28C840; }
.mockup-bar .url {
    flex: 1;
    margin-left: 8px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-bar .url b { color: var(--primary); font-weight: 700; }

.mockup-body { padding: 14px; }

.mockup-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 15px;
}
.mockup-head .m {
    width: 26px; height: 26px; border-radius: 8px;
    background: linear-gradient(140deg, var(--primary-3), var(--primary-2));
    display: grid; place-items: center;
    color: #04120A; font-weight: 900; font-size: 0.8rem;
}
.mockup-head .n { font-weight: 800; font-size: .875rem; letter-spacing: -.02em; }
.mockup-head .pill {
    margin-left: auto;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--glow-soft); border: 1px solid rgba(0,230,118,.24);
    color: var(--primary); font-size: 0.8rem; font-weight: 800;
}

.mockup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.mockup-card {
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surface-2);
}
.mockup-card .ph {
    aspect-ratio: 16/10;
    background:
        radial-gradient(90% 80% at 50% 0%, var(--surface-3), var(--surface-2));
    display: grid; place-items: center;
    font-size: 1.05rem; opacity: .35;
}
.mockup-card .t {
    padding: 8px 9px 10px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-2);
}
.mockup-card .p {
    display: block; margin-top: 3px;
    color: var(--primary); font-weight: 800; font-size: 0.8rem;
    letter-spacing: -.02em;
}

@media (max-width: 560px) {
    .mockup-grid { grid-template-columns: repeat(2, 1fr); }
    .mockup-grid > :last-child { display: none; }
    .mockup-body { padding: 14px; }
}

/* Tarjetas de caracteristica */
.feature { padding: clamp(16px, 1.8vw, 20px); }

.feature .icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(0,230,118,.16), rgba(0,230,118,.04));
    border: 1px solid rgba(0,230,118,.2);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px var(--glow-soft);
}
.feature h3 { margin-bottom: .4rem; }
.feature p { margin: 0; font-size: .885rem; line-height: 1.62; }

/* Pasos numerados */
.steps { counter-reset: step; }
.steps .feature .icon { font-family: var(--mono); font-size: 1.05rem; }

/* Estado del alias en vivo */
.alias-status {
    margin-top: 9px;
    font-size: .84rem;
    font-weight: 600;
    min-height: 21px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.alias-status.free { color: var(--primary); }
.alias-status.free::before { content: '✓'; font-weight: 900; }
.alias-status.taken { color: #FF8A8A; }
.alias-status.taken::before { content: '✕'; font-weight: 900; }
.alias-status.checking { color: var(--muted); font-weight: 500; }

.suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; align-items: center; }
.suggestions button {
    padding: 5px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--fast);
}
.suggestions button:hover {
    border-color: var(--border-lit);
    color: var(--primary);
    background: var(--glow-soft);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------ Panel */

.shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
    width: 244px;
    flex: 0 0 244px;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(0,230,118,.07), transparent 60%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border-right: 1px solid var(--border);
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

/* Marca: inicial + nombre de la tienda con su alias debajo */
.sidebar .brand {
    padding: 8px 10px;
    margin: 0;
    gap: 11px;
    border-radius: var(--r);
    border: 1px solid transparent;
    transition: border-color var(--fast), background var(--fast);
}
.sidebar .brand:hover { border-color: var(--border); background: rgba(255,255,255,.03); }

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text b {
    font-size: .95rem; font-weight: 700; letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-text small { font-size: 0.8rem; color: var(--faint); font-weight: 500; }

.nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin-inline: -4px;
    padding-inline: 4px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.nav-scroll::-webkit-scrollbar { width: 6px; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.sidebar .nav-group { display: flex; flex-direction: column; gap: 2px; }

.sidebar .nav-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--faint);
    font-weight: 700;
    padding: 0 12px 6px;
}

.sidebar a:not(.btn) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: .875rem;
    font-weight: 500;
    transition: color var(--fast), background var(--fast);
}
.sidebar a:not(.btn):hover { background: rgba(255,255,255,.04); color: var(--text); }

.sidebar .ico {
    width: 17px; height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .6;
    transition: opacity var(--fast);
}
.sidebar a:hover .ico { opacity: .9; }

.sidebar a.active {
    background: var(--glow-soft);
    color: var(--primary);
    font-weight: 600;
}
.sidebar a.active .ico { opacity: 1; filter: drop-shadow(0 0 5px var(--glow-hard)); }

/* Marca lateral del activo */
.sidebar a.active::before {
    content: '';
    position: absolute;
    left: -4px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
    box-shadow: 0 0 10px var(--glow-hard);
}

.sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.who {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.who-avatar {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--primary-2), var(--primary-4));
    color: #04120A; font-weight: 800; font-size: .85rem;
}
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.who-text b {
    font-size: .8rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-text small { font-size: 0.8rem; color: var(--faint); }
.who-out {
    margin-left: auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--faint);
    font-size: 1.05rem;
    transition: color var(--fast), background var(--fast);
}
.who-out:hover { color: var(--danger); background: var(--danger-bg); }

.content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Barra de arriba del panel: siempre visible, con vidrio.
   Va aparte de .topbar, que es la cabecera de la plataforma. */
.panel-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding-inline: clamp(15px, 2.4vw, 28px);
    background: rgba(7, 11, 8, .78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.panel-bar-title { display: flex; align-items: baseline; gap: 8px; font-size: .92rem; min-width: 0; }
.panel-bar-title b { font-weight: 650; letter-spacing: -.02em; }
.crumb-root { color: var(--faint); font-size: .82rem; }
.crumb-sep { color: var(--border-2); }

.store-state {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
    white-space: nowrap;
}
.store-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.store-state.on { color: var(--primary-3); border-color: var(--border-lit); }
.store-state.on i { background: var(--primary); box-shadow: 0 0 8px var(--glow-hard); }
.store-state.off i { background: var(--warn); }

.content-body { padding: clamp(16px, 2.2vw, 26px) clamp(15px, 2.4vw, 28px) 56px; }

.page-head { margin-bottom: clamp(15px, 2vw, 21px); }
.page-head h1 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.78rem);
    margin-bottom: .28rem;
    letter-spacing: -.035em;
}
.page-head p { margin: 0; font-size: .92rem; }

/* Menu movil: sale por encima con un velo detras */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-102%);
        transition: transform .28s var(--ease-out);
        box-shadow: 24px 0 60px rgba(0,0,0,.6);
        z-index: 60;
    }
    .nav-toggle:checked ~ .shell .sidebar { transform: none; }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s var(--ease-out);
        z-index: 50;
    }
    .nav-toggle:checked ~ .shell .nav-scrim { opacity: 1; pointer-events: auto; }

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 36px; height: 36px;
        padding: 0 8px;
        border-radius: var(--r-sm);
        border: 1px solid var(--border);
        background: var(--surface-2);
        cursor: pointer;
        flex: 0 0 36px;
    }
    .burger span {
        display: block; height: 1.8px; border-radius: 2px;
        background: var(--text-2);
    }
    .burger span:nth-child(2) { width: 70%; }
}

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

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 48px) var(--gutter);
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card .brand {
    justify-content: center;
    margin-bottom: 26px;
    font-size: 1.3rem;
}
.auth-card .brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 1.1rem; }

.divider-text {
    display: flex; align-items: center; gap: 14px;
    color: var(--faint); font-size: 0.8rem; margin: 20px 0;
    font-weight: 500;
}
.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 {
    position: relative;
    border-top: 1px solid var(--border);
    padding-block: 24px;
    margin-top: clamp(38px, 5vw, 60px);
    color: var(--muted);
    font-size: .855rem;
}
.footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ Utilidades */

.copyable {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: .845rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 5px 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--fast);
    -webkit-tap-highlight-color: transparent;
}
.copyable:hover { border-color: var(--border-lit); color: var(--primary-3); background: var(--surface-2); }

.progress {
    height: 7px;
    background: var(--surface-3);
    border-radius: var(--r-pill);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.progress > i {
    display: block; height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--primary-2), var(--primary) 70%, var(--primary-3));
    box-shadow: 0 0 12px var(--glow);
    transition: width var(--slow);
}

details summary { cursor: pointer; }
details summary::-webkit-details-marker { color: var(--muted); }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-2); background-clip: content-box; }

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

/* En movil el menu del panel ya no es una barra horizontal que se
   desborda: sale de lado con el boton de la barra de arriba. Lo demas
   esta en el bloque "Menu movil" de la seccion del panel. */
@media (max-width: 900px) {
    .sidebar { width: 268px; flex: 0 0 268px; }
}

@media (max-width: 680px) {
    .topbar .wrap { height: auto; padding-block: 11px; flex-wrap: wrap; gap: 10px; }

    /* El menu se ajusta en varias lineas en vez de desbordarse: si se
       desborda, el boton principal queda cortado justo en el borde. */
    .nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 5px;
    }
    .nav a:not(.btn) { padding: 7px 11px; font-size: .875rem; }
    .nav .btn { margin-left: auto; }

    body::after { background-size: 40px 40px; }

    .card { border-radius: var(--r); }
    .input-group { flex-direction: column; gap: 9px; }
    .input-group input { border-radius: var(--r-sm); }
    .input-group select {
        width: 100%;
        border-left: 1px solid var(--border);
        border-radius: var(--r-sm);
    }

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

    table.table th, table.table td { padding: 11px 13px; }
    .footer .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
}

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

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

/* =====================================================================
   Capa de acabado
   Los detalles que separan "funciona" de "esta trabajado".
   ===================================================================== */

/* ------------------------------------------------------------ Grano
   Una textura finisima sobre el negro. No se ve, se nota: mata el
   bandeado de los degradados y le quita el plano digital al fondo. */
body {
    position: relative;
}
html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .022;
    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");
}

/* ------------------------------------------------------------ Encabezados de seccion
   Una barra corta de acento antes del titulo: ordena la lectura y da ritmo. */
.sec-head { margin-bottom: clamp(20px, 2.6vw, 30px); }

.sec-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 11px;
}
.sec-head .kicker::before {
    content: '';
    width: 22px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
}
.sec-head h2 { margin-bottom: .3rem; }
.sec-head p { margin: 0; font-size: .93rem; max-width: 58ch; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin-inline: auto; }
.sec-head.center .kicker::before { display: none; }

/* ------------------------------------------------------------ Brillo de los botones
   Un barrido de luz al pasar por encima. Sutil, una sola vez. */
.btn-primary { 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,.42) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .65s var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ------------------------------------------------------------ Esquina viva
   Las tarjetas destacadas reciben un halo en la esquina superior derecha:
   la mirada entra por ahi. */
.card-accent {
    background-image:
        radial-gradient(70% 90% at 100% 0%, var(--glow-soft), transparent 62%),
        linear-gradient(180deg, rgba(0,230,118,.04), rgba(0,230,118,.01) 55%);
}

/* Las tarjetas con hover levantan tambien su filo superior */
.card-hover:hover::before {
    background: linear-gradient(90deg, transparent, var(--glow-hard) 30%, var(--glow-hard) 70%, transparent);
}

/* ------------------------------------------------------------ Iconos de caracteristica
   Halo interior + reflejo, para que no parezcan cuadrados planos. */
.feature .icon {
    position: relative;
    overflow: hidden;
}
.feature .icon::after {
    content: '';
    position: absolute;
    inset: -50% -50% auto auto;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
}
.feature:hover .icon {
    border-color: var(--border-lit);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 20px var(--glow);
}

/* ------------------------------------------------------------ Franja de cifras
   Numeros grandes separados por filos. Da autoridad sin ocupar espacio. */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-2);
}
.stats-strip > div {
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--surface);
    padding: 15px 18px;
    text-align: center;
}
.stats-strip .n {
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--primary-4), var(--primary) 65%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.stats-strip .l {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
    margin-top: 3px;
}

/* ------------------------------------------------------------ Lista de ventajas
   Palomitas en circulo verde, alineadas al texto. */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .9rem;
    color: var(--text-2);
    line-height: 1.55;
}
.checks li::before {
    content: '✓';
    flex: none;
    width: 19px; height: 19px;
    margin-top: 2px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--glow-soft);
    border: 1px solid rgba(0,230,118,.26);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 900;
}

/* ------------------------------------------------------------ Filo del panel
   Una linea de luz vertical entre el menu y el contenido. */
@media (min-width: 901px) {
    .sidebar { box-shadow: 1px 0 0 rgba(0,230,118,.05); }
}

/* ------------------------------------------------------------ Tablas mas densas y legibles */
table.table tbody tr:hover { box-shadow: inset 2px 0 0 var(--primary); }

/* ------------------------------------------------------------ Entradas con lupa */
.search-field { position: relative; }
.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;
}

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

/* Cifras con numeros de ancho fijo: no bailan al actualizarse */
.stat .value, .price, table.table td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Combos, niveles y descuentos — piezas del panel
   ===================================================================== */

.mt-1 { margin-top: .6rem; }
.mb-1 { margin-bottom: .6rem; }
.num { font-variant-numeric: tabular-nums; }
.text-green { color: var(--primary-3); }
.text-warn { color: var(--warn); }

/* Casilla en linea, mas compacta que .checkbox */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-2);
    font-size: .875rem;
    -webkit-tap-highlight-color: transparent;
}
.check input {
    width: 16px; height: 16px;
    min-height: 0; margin: 0; flex: none;
    accent-color: var(--primary);
    cursor: pointer;
}
.check:hover { color: var(--text); }
.check.small { font-size: .8rem; }

/* Nota explicativa: dice como funciona algo sin gritar */
.callout {
    position: relative;
    padding: 14px 16px 14px 18px;
    border-radius: var(--r);
    background: linear-gradient(90deg, var(--glow-soft), transparent 70%);
    border: 1px solid var(--border);
    border-left: 2px solid var(--primary);
    color: var(--text-2);
    font-size: .885rem;
    line-height: 1.6;
}
.callout b, .callout strong { color: var(--text); }

.empty-icon { font-size: 1.9rem; display: block; margin-bottom: 10px; opacity: .7; }

/* Control segmentado: tres opciones, una encendida */
.segmented {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--r);
    background: var(--surface-3);
    border: 1px solid var(--border);
}
.segmented label {
    flex: 1 1 0;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:hover { color: var(--text); }
.segmented label.on {
    background: var(--glow-soft);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--border-lit);
}

/* Calculadora del combo: la cuenta a la vista mientras se arma */
.calc {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    padding: 13px 15px;
}
.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .865rem;
    color: var(--text-2);
    padding: 5px 0;
}
.calc-row b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.calc-total {
    margin-top: 5px;
    padding-top: 11px;
    border-top: 1px dashed var(--border-2);
    font-size: .93rem;
}
.calc-total b { font-size: 1.25rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.calc-note { margin-top: 7px; }

/* Filas de producto y de escalon: se agregan y se quitan al vuelo */
.item-rows { display: flex; flex-direction: column; gap: 8px; }

.item-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: border-color var(--fast);
}
.item-row:hover { border-color: var(--border-2); }
.item-row select, .item-row input { margin: 0; min-height: 38px; }
.item-row .item-product { flex: 1 1 auto; min-width: 0; }
.item-row .item-qty { flex: 0 0 74px; text-align: center; }
.item-row .item-total {
    flex: 0 0 auto;
    min-width: 86px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .875rem;
    color: var(--primary-3);
}
.item-row .item-del, .item-row .rule-del {
    flex: 0 0 32px;
    padding: 0;
    min-height: 32px;
    font-size: 1.1rem;
    line-height: 1;
}
.item-row .item-del:hover, .item-row .rule-del:hover { color: var(--danger); border-color: rgba(255,90,90,.4); }

.rule-row { flex-wrap: wrap; }
.rule-lead { font-size: .85rem; color: var(--text-2); white-space: nowrap; }
.rule-row .rule-min { flex: 0 0 78px; text-align: center; }
.rule-pct { flex: 0 0 104px; }

/* Campo con sufijo pegado (%, dias, etc.) */
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { padding-right: 34px; margin: 0; width: 100%; }
.input-suffix span {
    position: absolute;
    right: 12px;
    color: var(--faint);
    font-size: .82rem;
    font-weight: 600;
    pointer-events: none;
}

/* ------------------------------------------------------------ Niveles */

.tiers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.tier-card {
    position: relative;
    padding: 14px 15px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.tier-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--c, var(--primary));
    opacity: .85;
}
.tier-card .field { margin-bottom: 0; }

.tier-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.tier-dot {
    width: 9px; height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--c, var(--primary));
    box-shadow: 0 0 8px color-mix(in srgb, var(--c, #00E676) 55%, transparent);
}

.tier-input-name {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 700;
    font-size: .98rem;
    padding-inline: 8px;
    letter-spacing: -.02em;
}
.tier-input-name:hover { border-color: var(--border) !important; }
.tier-input-name:focus { background: var(--bg-2) !important; border-color: var(--border-lit) !important; }

.tier-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--border);
}

/* Vista previa por nivel dentro del editor de combos */
.tier-preview {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 13px;
    background: var(--surface-2);
}
.tier-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: .85rem;
}
.tier-name { color: var(--text-2); }
.tier-price { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ------------------------------------------------------------ Combos del panel */

/* auto-fill y no auto-fit: con un solo combo la tarjeta no se estira
   a lo ancho de la pantalla */
.combos-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    gap: 14px;
}

.combo-admin { display: flex; flex-direction: column; gap: 9px; }
.combo-admin.is-out { opacity: .62; }

.combo-admin-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.combo-thumbs { display: flex; }
.combo-thumbs .thumb {
    width: 34px; height: 34px;
    margin-right: -9px;
    border-radius: 9px;
    border: 1.5px solid var(--surface);
    background: var(--surface-3);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-3);
}
.combo-thumbs .thumb:last-child { margin-right: 0; }
.combo-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.combo-thumbs .thumb.more { background: var(--glow-soft); font-size: 0.8rem; }

.combo-admin-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.combo-admin-price .price { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.combo-admin-price small { color: var(--faint); text-decoration: line-through; font-size: .84rem; }

.combo-admin-stock { margin-top: 2px; }

@media (max-width: 620px) {
    .item-row { flex-wrap: wrap; }
    .item-row .item-product { flex: 1 1 100%; }
    .item-row .item-total { min-width: 0; margin-left: auto; }
    .segmented { flex-direction: column; }
    .segmented label { text-align: left; }
}

/* Nivel del cliente en la lista */
.tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c, var(--primary));
    background: color-mix(in srgb, var(--c, #00E676) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, #00E676) 30%, transparent);
    white-space: nowrap;
}
.tier-pill::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c, var(--primary));
}

/* Precios exactos por nivel dentro del producto */
.tier-prices {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    padding: 12px 13px;
    margin-bottom: 13px;
}
.tier-prices-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.tier-prices-head b { font-size: .875rem; }

.tier-price-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.tier-price-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    color: var(--text-2);
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.tier-price-name small { color: var(--faint); font-size: 0.8rem; font-weight: 600; }
.tier-price-input { flex: 0 0 132px; margin: 0; min-height: 38px; text-align: right; }

/* Interruptor de verdad, no una casilla suelta */
.switch-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast);
}
.switch-row:hover { border-color: var(--border-2); }
.switch-row > input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch {
    position: relative;
    flex: 0 0 42px;
    width: 42px; height: 24px;
    border-radius: 999px;
    background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--border-2);
    transition: background var(--fast), box-shadow var(--fast);
}
.switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform var(--med) var(--ease-out), background var(--fast);
}
.switch-row > input:checked + .switch {
    background: var(--glow-soft);
    box-shadow: inset 0 0 0 1px var(--border-lit);
}
.switch-row > input:checked + .switch::after {
    transform: translateX(18px);
    background: var(--primary);
    box-shadow: 0 0 10px var(--glow-hard);
}
.switch-row > input:focus-visible + .switch { outline: 2px solid var(--primary); outline-offset: 2px; }

.switch-text { display: flex; flex-direction: column; line-height: 1.35; }
.switch-text b { font-size: .9rem; font-weight: 650; }
.switch-text small { font-size: 0.8rem; color: var(--muted); }

/* 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; }

/* =====================================================================
   Selector de temas con vista previa
   Cada muestra trae las variables de su tema, asi que se pinta sola:
   redondez, superficie, textura y tipografia salen del propio tema.
   ===================================================================== */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 12px;
}

.theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.theme-option:hover { border-color: var(--border-2); transform: translateY(-2px); }
.theme-option > input { position: absolute; opacity: 0; width: 0; height: 0; }

/* El estado marcado sale del propio control, no de una clase que solo
   escribe el servidor: sin esto, al hacer clic no se movia nada en pantalla
   hasta guardar y parecia que el tema no se dejaba elegir. */
.theme-option:has(> input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 10px 30px var(--glow);
}
/* Marca de elegido */
.theme-option:has(> input:checked)::after {
    content: '✓';
    position: absolute;
    top: 16px; right: 16px;
    z-index: 2;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #04120A;
    font-size: 0.8rem;
    font-weight: 900;
}

/* ---- La maqueta en miniatura */
.theme-preview {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--r) * .8);
    background: var(--bg);
    background-image: var(--tex-1, none);
    aspect-ratio: 16 / 10;
    font-family: var(--font);
}

.tp-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
}
.tp-dot {
    width: 13px; height: 13px;
    border-radius: calc(var(--radius-sm) * .55);
    background: var(--accent-grad, var(--primary));
    flex: none;
}
.tp-line {
    height: 4px; width: 36px;
    border-radius: 3px;
    background: var(--text-2);
    opacity: .5;
}
.tp-pill {
    margin-left: auto;
    height: 13px; width: 34px;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-dim);
    box-shadow: inset 0 0 0 1px var(--primary-ring);
}

.tp-body { display: block; padding: 9px; }

.tp-title {
    display: block;
    font-family: var(--font-display, var(--font));
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: var(--tracking, -.03em);
    color: var(--text);
    margin-bottom: 8px;
}

.tp-cards { display: flex; gap: 6px; margin-bottom: 9px; }
.tp-cards i {
    flex: 1;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--card-bg, var(--surface));
    border: var(--edge, 1px) solid var(--card-border, var(--border));
    box-shadow: var(--shadow);
}

.tp-btn {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: var(--accent-grad, var(--primary));
    color: var(--on-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ---- Ficha del tema */
.theme-meta { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 2px; }
.theme-meta b { font-size: .92rem; font-weight: 650; }
.theme-meta small { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

.theme-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.theme-tags i {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--muted);
}

/* Pestanas del grupo actual: moverse entre pantallas hermanas sin
   volver al menu lateral. Salen del mismo mapa que el menu. */
.subnav {
    display: flex;
    gap: 2px;
    padding: 0 clamp(15px, 2.4vw, 28px);
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }

.subnav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 13px;
    color: var(--text-2);
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--fast);
}
.subnav a:hover { color: var(--text); }
.subnav a .ico {
    width: 15px; height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}
.subnav a:hover .ico { opacity: .85; }

.subnav a.active { color: var(--primary); font-weight: 650; }
.subnav a.active .ico { opacity: 1; }
.subnav a.active::after {
    content: '';
    position: absolute;
    inset: auto 10px -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--primary);
    box-shadow: 0 0 10px var(--glow-hard);
}

@media (max-width: 620px) {
    .subnav a span { display: none; }
    .subnav a { padding: 11px 14px; }
    .subnav a .ico { width: 17px; height: 17px; flex-basis: 17px; }
}

/* After-sales tools and variant editor in the seller workspace. */
.variant-editor-row { box-shadow: none; border-color: var(--border); background: var(--bg); }
.variant-editor .grid { gap: 14px; }
.variant-editor input, .variant-editor select { width: 100%; }
.variant-editor input[type=checkbox] { width: auto; }
.variant-editor-row .field { margin-bottom: 12px; }
.variant-editor-row label { display: block; }
.variant-editor-row label input, .variant-editor-row label select { margin-top: 6px; }
.variant-presets { gap: 8px; margin-block: 18px; }
.support-workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; }
.support-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-bottom: 22px; }
.support-stat { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--surface); }
.support-stat strong { display: block; font-size: 28px; }.support-stat span { color: var(--muted); font-size: 13px; }
.support-ticket-list,.support-conversation { display: grid; gap: 12px; }
.support-ticket-row { display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); padding: 18px; border-radius: 12px; color: var(--text); background: var(--surface); }
.support-ticket-content { flex: 1; min-width: 0; }.support-ticket-content strong,.support-ticket-content small { display: block; }.support-ticket-content small { color: var(--muted); font-size: 13px; }.support-ticket-number { color: var(--primary); }
.support-message { border: 1px solid var(--border); padding: 20px; border-radius: 12px; background: var(--surface); }.support-message-team { border-left: 3px solid var(--primary); }
.support-message header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }.support-message header time { margin-left: auto; font-size: 12px; color: var(--muted); }
.support-avatar { width: 34px; height: 34px; display: grid; place-items: center; background: var(--primary-dim); border-radius: 10px; color: var(--primary); }.support-message-body { line-height: 1.8; overflow-wrap: anywhere; }
.support-evidence-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }.support-evidence { display: block; max-width: 140px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }.support-evidence img { width: 140px; height: 100px; object-fit: cover; }.support-evidence span { padding: 6px; display: block; font-size: 12px; }
.support-upload { border: 1px dashed var(--border); padding: 16px; border-radius: 10px; }.support-upload input { max-width: 100%; }.support-coverage { margin-block: 18px; padding: 15px; background: var(--primary-dim); border-radius: 10px; }.support-context h3 { margin-top: 10px; }
.notification-admin-list { display: grid; gap: 10px; }.notification-admin-row { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding-block: 12px; border-bottom: 1px solid var(--border); color: var(--text); }.notification-admin-row:last-child { border-bottom: 0; }.notification-cron { padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }.notification-cron p { margin: 10px 0 0; }
@media(max-width:800px) { .support-workspace { grid-template-columns: 1fr; }.support-stats { gap: 8px; }.support-stat { padding: 13px; }.support-stat strong { font-size: 22px; }.support-ticket-row { flex-wrap: wrap; }.support-message header { flex-wrap: wrap; }.support-message header time { margin-left: 0; } }

/* =====================================================================
   Botones del panel

   En escritorio se usa raton: no hacen falta 44px de alto para acertar,
   y a ese tamano compiten con el contenido. En movil se mantienen, que
   ahi si se toca con el dedo.
   ===================================================================== */

@media (min-width: 961px) {
    .btn {
        min-height: 38px;
        padding: 8px 15px;
        font-size: .875rem;
    }
    .btn-sm { min-height: 32px; padding: 6px 11px; font-size: .8rem; }
    .btn-lg { min-height: 44px; padding: 11px 22px; font-size: .93rem; }

    /* La cabecera de pagina alinea sus acciones con el titulo */
    .page-head { align-items: center; }
    .page-head .row { gap: 9px; }
}

/* Lo destructivo no manda.

   Tener un boton rojo por fila convertia el borrado en lo mas llamativo de
   la tabla, cuando es lo que menos queremos que se pulse por inercia.
   Se queda apagado y solo se tine cuando el raton va hacia el. */
table.table .btn-danger {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}
table.table .btn-danger:hover {
    background: var(--danger-bg);
    border-color: rgba(255, 90, 90, .45);
    color: var(--danger);
}

/* Las acciones de fila se agrupan y no se separan en varias lineas */
table.table td .row { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }

/* =====================================================================
   Bandeja de solicitudes de distribuidor
   ===================================================================== */

.filter-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    padding: 3px;
    border-radius: var(--r);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: calc(var(--r) - 3px);
    color: var(--text-2);
    font-size: .86rem;
    font-weight: 550;
    white-space: nowrap;
    transition: background var(--fast), color var(--fast);
}
.filter-tabs a:hover { color: var(--text); }
.filter-tabs a.active { background: var(--glow-soft); color: var(--primary); font-weight: 650; }

.filter-count {
    min-width: 19px;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #04120A;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.request-list { display: flex; flex-direction: column; gap: 11px; }

.request-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.request-message {
    margin: 13px 0 0;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: .89rem;
    color: var(--text-2);
    line-height: 1.6;
}

.request-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* =====================================================================
   Formularios a dos columnas en escritorio

   Una sola columna de campos en una pantalla ancha obliga a recorrer
   mucho vertical para algo que cabe de sobra. Los campos largos (areas
   de texto, mensajes de entrega) siguen ocupando el ancho completo.
   ===================================================================== */

@media (min-width: 1100px) {
    .card > .field-grid,
    .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
    }
    .field-grid > .field-wide,
    .field-grid > textarea,
    .field-grid > .field:has(textarea) { grid-column: 1 / -1; }
}

/* Textos de apoyo que seguian demasiado pequenos */
.hint, .field .hint { font-size: .8rem; }
.small { font-size: .84rem; }
.stat .label { font-size: 0.8rem; letter-spacing: .06em; }
.nav-title { font-size: 0.8rem; }
.who-text small { font-size: 0.8rem; }
.brand-text small { font-size: 0.8rem; }
.sidebar-credit, .theme-tags i { font-size: 0.8rem; }
.crumb-root { font-size: .84rem; }
.opcional { font-weight: 500; font-size: 0.8rem; color: var(--faint); margin-left: 4px; }

/* =====================================================================
   PLATAFORMA · Portada y planes

   Una pagina de precios se lee de arriba a abajo y de izquierda a derecha:
   primero cuanto tiempo, despues cuanto espacio, y el precio al final como
   consecuencia de las dos. Todo lo que hay aqui sirve a ese orden.
   ===================================================================== */

/* ---- Banda de seccion alterna -------------------------------------- */

.section.band {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(0, 230, 118, .05), transparent 62%),
        var(--bg-2);
    border-block: 1px solid var(--border);
}

.section-tight { padding-top: clamp(20px, 3vw, 34px); }

/* ---- Encabezado corto de pagina interior --------------------------- */

.lp-hero-sm { padding-block: clamp(42px, 7vw, 84px) clamp(10px, 2vw, 20px); }
.lp-hero-sm .lp-hero-text { max-width: 62ch; margin-inline: auto; text-align: center; }
.lp-hero-sm h1 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
    margin: 16px 0 0;
}
.lp-hero-sm .lead { margin-top: 18px; }

/* =====================================================================
   El conmutador de duracion
   ===================================================================== */

.plan-switch {
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto clamp(26px, 4vw, 40px);
    padding: 5px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.plan-switch-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--fast), background-color var(--fast);
}
.plan-switch-opt:hover { color: var(--text); }

/* El descuento viaja con su opcion: es parte de la decision, no un adorno. */
.plan-switch-opt em {
    font-style: normal;
    font-size: .76rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: rgba(0, 230, 118, .13);
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.plan-switch-opt.is-on {
    background: var(--surface-3);
    color: var(--text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, var(--sh-1);
}
.plan-switch-opt.is-on em { background: var(--primary); color: #04120A; }

/* =====================================================================
   Las tarjetas de plan
   ===================================================================== */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(16px, 2vw, 22px);
    align-items: start;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: var(--sh-2);
    transition: transform var(--med), border-color var(--med), box-shadow var(--med);
}

/* El filo de luz en el borde superior: da volumen sin dibujar una linea mas. */
.plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}

.plan-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: var(--sh-3);
}

/* El plan recomendado: mismo lenguaje, mas luz. Ni mas grande ni mas alto,
   para que las tres tarjetas sigan comparandose linea con linea. */
.plan-card.is-featured {
    border-color: var(--border-lit);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(0, 230, 118, .10), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: var(--sh-3), 0 0 0 1px var(--border-lit);
}
.plan-card.is-featured::before { background: linear-gradient(90deg, transparent, var(--primary-3), transparent); }
.plan-card.is-featured:hover { box-shadow: var(--sh-4), 0 0 40px -12px var(--glow); }

.plan-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 14px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #04120A;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 20px -6px var(--glow-hard);
}

.plan-card-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.02em;
}
.plan-card-head p {
    margin: 7px 0 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--muted);
    /* Dos lineas justas a interlinea 1.5: con menos, la descripcion de dos
       lineas empuja su tarjeta y las vinetas dejan de alinearse. */
    min-height: 3em;
}

/* ---- El espacio, que es lo que separa un plan de otro --------------- */

.plan-space {
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: rgba(0, 0, 0, .22);
}
.plan-space b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.plan-space span {
    display: block;
    margin-top: 3px;
    font-size: .82rem;
    color: var(--muted);
}
.plan-card.is-featured .plan-space {
    border-color: rgba(0, 230, 118, .22);
    background: rgba(0, 230, 118, .06);
}
.plan-card.is-featured .plan-space b { color: var(--primary-4); }

/* ---- El precio ------------------------------------------------------ */

.plan-price-set { display: none; }
.plan-price-set.is-on { display: block; animation: plan-in .22s var(--ease-out) both; }

@keyframes plan-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.plan-amount {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.6rem + 1.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.plan-amount small {
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-left: 4px;
}

.plan-permes {
    margin-top: 9px;
    font-size: .86rem;
    color: var(--text-2);
}
.plan-permes s { color: var(--faint); }
.plan-permes em {
    font-style: normal;
    font-weight: 650;
    color: var(--primary);
}

.plan-cta { width: 100%; justify-content: center; margin-top: 18px; }

/* ---- Los tres puntos de cada plan ----------------------------------- */

.plan-points {
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    display: grid;
    gap: 9px;
}
.plan-points li {
    position: relative;
    padding-left: 24px;
    font-size: .9rem;
    color: var(--text-2);
}
.plan-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .36em;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}
.plan-points b { color: var(--text); font-weight: 650; }

.plan-foot {
    max-width: 62ch;
    margin: clamp(22px, 3vw, 32px) auto 0;
    text-align: center;
    line-height: 1.6;
}

/* =====================================================================
   Lo que llevan todos los planes
   ===================================================================== */

.incl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 12px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.incl-grid li {
    position: relative;
    padding: 11px 0 11px 32px;
    border-bottom: 1px solid var(--border);
    font-size: .94rem;
    color: var(--text-2);
}
.incl-grid li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.05em;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}

/* =====================================================================
   Cuanto espacio necesito
   ===================================================================== */

.space-bars {
    display: grid;
    gap: 18px;
    max-width: 820px;
    margin-inline: auto;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-2);
}

.space-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
}
.space-name { font-weight: 650; font-size: .95rem; }

.space-track {
    height: 12px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.space-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--border-2), var(--primary-2));
    /* La barra crece al entrar: el salto entre planes se ve, no se lee. */
    animation: space-grow .9s var(--ease-out) both;
    transform-origin: left center;
}
.space-fill.is-featured { background: linear-gradient(90deg, var(--primary-2), var(--primary-3)); }

@keyframes space-grow {
    from { transform: scaleX(.02); }
    to   { transform: none; }
}

.space-val { text-align: right; }
.space-val b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.space-val span { font-size: .8rem; color: var(--muted); }

/* =====================================================================
   Dudas
   ===================================================================== */

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

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--fast), background-color var(--fast);
}
.faq-item:hover { border-color: var(--border-2); }
.faq-item[open] { background: var(--surface-2); border-color: var(--border-2); }

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* El signo se dibuja con dos trazos y uno se apaga al abrir: ninguna fuente
   de iconos para un mas y un menos. */
.faq-item summary::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background:
        linear-gradient(var(--primary), var(--primary)) center / 100% 2px no-repeat,
        linear-gradient(var(--primary), var(--primary)) center / 2px 100% no-repeat;
    transition: transform var(--med), opacity var(--fast);
}
.faq-item[open] summary::after {
    background: linear-gradient(var(--primary), var(--primary)) center / 100% 2px no-repeat;
    transform: rotate(180deg);
}

.faq-item p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--text-2);
    line-height: 1.65;
    max-width: 68ch;
}

/* =====================================================================
   Cierre
   ===================================================================== */

.lp-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
    letter-spacing: -.04em;
}

/* =====================================================================
   Movil
   ===================================================================== */

@media (max-width: 760px) {
    /* El conmutador pasa a rejilla de dos: cuatro pastillas en fila obligan
       a un scroll horizontal justo en la decision principal. */
    .plan-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-radius: var(--r-lg);
    }
    .plan-switch-opt { justify-content: center; padding: 11px 10px; font-size: .9rem; }

    .plan-card-head p { min-height: 0; }

    .space-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
    }
    .space-track { grid-column: 1 / -1; order: 3; }
    .space-val { text-align: right; }
    .space-val span { display: none; }
}

/* =====================================================================
   PLATAFORMA · Comprar un plan

   Una pagina de pago tiene una sola pregunta ("como pagas") y un solo dato
   que no debe perderse de vista ("cuanto y por que"). De ahi las dos
   columnas: la del dinero se queda quieta, la de la decision se lee.
   ===================================================================== */

.co-wrap { padding-block: clamp(28px, 4vw, 56px); }

.co-back {
    display: inline-block;
    margin-bottom: 18px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-2);
}
.co-back:hover { color: var(--primary); }

.co-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 34px);
    align-items: start;
}

/* ---- Resumen de la compra ------------------------------------------ */

.co-sticky {
    position: sticky;
    top: 88px;
    padding: clamp(22px, 2.4vw, 28px);
    border: 1px solid var(--border-lit);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0, 230, 118, .08), transparent 62%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: var(--sh-3);
}

.co-summary h1 {
    margin: 12px 0 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.03em;
}

.co-amount {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.co-amount small {
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-left: 5px;
}

.co-saving {
    margin: 10px 0 0;
    font-size: .87rem;
    color: var(--text-2);
}
.co-saving b { color: var(--primary); }
.co-saving s { color: var(--faint); }

/* Filas dato/valor: el mismo patron sirve en el resumen y en el pedido. */
.co-lines {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.co-lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: .92rem;
}
.co-lines li:last-child { border-bottom: 0; }
.co-lines span { color: var(--muted); }
.co-lines b {
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.co-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border-2);
}
.co-total span { color: var(--text-2); font-size: .92rem; }
.co-total b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* ---- Formas de pago ------------------------------------------------- */

.co-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
}

.pay-list { display: grid; gap: 10px; }

.pay-opt {
    display: grid;
    /* Radio, icono, texto y sello: cuatro columnas, o el sello se cae a una
       segunda fila. Sin radio (un solo medio de pago) son tres. */
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--fast), background-color var(--fast), box-shadow var(--fast);
}
.pay-opt:hover { border-color: var(--border-2); background: var(--surface-2); }

/* Un solo medio de pago: deja de ser una eleccion, asi que no se pinta como
   algo sobre lo que haya que decidir. */
.pay-opt.is-only {
    grid-template-columns: auto minmax(0, 1fr) auto;
    cursor: default;
    border-color: var(--border-lit);
    background: rgba(0, 230, 118, .05);
}
.pay-opt.is-only:hover { background: rgba(0, 230, 118, .05); border-color: var(--border-lit); }

/* El radio nativo se queda: es lo que hace que el teclado y el lector de
   pantalla entiendan que esto es una eleccion. Solo cambia de aspecto. */
.pay-opt input {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--border-2);
    border-radius: 50%;
    background: var(--bg);
    cursor: pointer;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.pay-opt input:checked {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 20px var(--primary);
}
.pay-opt input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* :has permite marcar la tarjeta entera desde el radio, sin una linea de JS. */
.pay-opt:has(input:checked) {
    border-color: var(--border-lit);
    background: rgba(0, 230, 118, .05);
    box-shadow: 0 0 0 1px var(--border-lit);
}

.pay-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: 1.2rem;
}
.pay-text { display: grid; gap: 3px; min-width: 0; }
.pay-text b { font-size: 1rem; font-weight: 650; }
.pay-text > span { font-size: .86rem; color: var(--muted); }

.pay-seal {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pay-seal.is-auto { background: rgba(0, 230, 118, .14); color: var(--primary); }

.co-go { width: 100%; justify-content: center; margin-top: 18px; }
.co-legal { margin: 14px 0 0; line-height: 1.6; }

/* ---- Tranquilidad --------------------------------------------------- */

.co-assure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 14px;
    margin-top: 22px;
}
.co-assure > div {
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-2);
}
.co-assure b { display: block; font-size: .92rem; margin-bottom: 4px; }
.co-assure span { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* =====================================================================
   Estado del pedido
   ===================================================================== */

.ord-head {
    text-align: center;
    padding: clamp(26px, 4vw, 40px) clamp(20px, 3vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.ord-head h1 {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
    letter-spacing: -.035em;
}
.ord-head p {
    margin: 12px auto 20px;
    max-width: 52ch;
    color: var(--text-2);
}

.ord-mark {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--surface-3);
    font-size: 1.7rem;
    color: var(--text-2);
}

.ord-head.is-ok {
    border-color: var(--border-lit);
    background:
        radial-gradient(110% 80% at 50% 0%, rgba(0, 230, 118, .12), transparent 64%),
        var(--surface);
}
.ord-head.is-ok .ord-mark {
    background: var(--primary);
    color: #04120A;
    box-shadow: 0 0 40px -8px var(--glow-hard);
    /* Un pulso al entrar: la confirmacion de un pago merece acusar recibo. */
    animation: ord-pop .5s var(--ease-out) both;
}
@keyframes ord-pop {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.ord-head.is-wait { border-color: rgba(255, 194, 77, .3); }
.ord-head.is-wait .ord-mark { background: var(--warn-bg); color: var(--warn); }

/* =====================================================================
   Movil
   ===================================================================== */

@media (max-width: 900px) {
    .co-grid { grid-template-columns: minmax(0, 1fr); }

    /* El resumen pasa arriba y deja de estar pegado: en vertical estorbaria
       mas de lo que ayuda. */
    .co-sticky { position: static; }
    .co-summary { order: -1; }
}

@media (max-width: 520px) {
    /* El sello baja a su propia linea, bajo el texto, en vez de apretar tres
       cosas en un ancho de telefono. */
    .pay-opt { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 9px; padding: 14px; }
    .pay-opt.is-only { grid-template-columns: auto minmax(0, 1fr); }
    .pay-seal { grid-column: -2 / -1; justify-self: start; }
    .co-amount { font-size: 2.1rem; }
}

/* ---- Los planes en la portada, en version corta --------------------- */

.plan-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.plan-mini-card {
    position: relative;
    display: grid;
    gap: 4px;
    padding: clamp(20px, 2.2vw, 26px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    color: inherit;
    box-shadow: var(--sh-2);
    transition: transform var(--med), border-color var(--med), box-shadow var(--med);
}
.plan-mini-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: var(--sh-3);
}
.plan-mini-card.is-featured {
    border-color: var(--border-lit);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(0, 230, 118, .10), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
}

.plan-mini-name { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; }
.plan-mini-space { font-size: .86rem; color: var(--muted); }

.plan-mini-price {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.plan-mini-price small {
    font-family: var(--font);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-left: 3px;
}
.plan-mini-year { font-size: .82rem; color: var(--text-2); }

/* ==========================================================================
   MERCADO Y VIGENCIA
   ==========================================================================
   Dos cosas nuevas comparten esta seccion porque se ven juntas: cuanto le
   queda a la tienda (mem-*) y lo que puede comprar (mk-*).
   ========================================================================== */

/* ---------------------------------------------------------- La vigencia */

/* La franja del resumen: un aro con los dias, el texto y el boton. */
.mem {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--glow-soft), transparent 60%),
        var(--surface);
    box-shadow: var(--sh-2);
}
.mem.is-warn   { border-color: rgba(255, 194, 77, .34); background: radial-gradient(120% 140% at 0% 0%, var(--warn-bg), transparent 60%), var(--surface); }
.mem.is-danger { border-color: rgba(255, 90, 90, .38);  background: radial-gradient(120% 140% at 0% 0%, var(--danger-bg), transparent 60%), var(--surface); }
.mem.is-off    { border-color: rgba(255, 90, 90, .5);   background: radial-gradient(120% 140% at 0% 0%, var(--danger-bg), transparent 70%), var(--surface); }

/* El aro. El trazo se recorta desde el HTML con stroke-dashoffset. */
.mem-ring { position: relative; flex: none; width: 82px; height: 82px; }
.mem-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mem-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.mem-ring-bg { stroke: var(--surface-3); }
.mem-ring-fg { stroke: var(--primary); transition: stroke-dashoffset var(--slow); }
.mem.is-warn   .mem-ring-fg { stroke: var(--warn); }
.mem.is-danger .mem-ring-fg,
.mem.is-off    .mem-ring-fg { stroke: var(--danger); }

.mem-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mem-ring-num b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.04em;
}
.mem-ring-num small { font-size: .64rem; color: var(--muted); margin-top: 2px; }

.mem-text { flex: 1 1 auto; min-width: 0; }
.mem-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mem-head b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.02em; }
.mem-chip {
    font-size: .72rem;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    white-space: nowrap;
}
.mem-text p { margin: 6px 0 0; font-size: .86rem; color: var(--text-2); max-width: 66ch; }

.mem-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mem-link { font-size: .78rem; color: var(--muted); text-align: center; }
.mem-link:hover { color: var(--text-2); }

/* La version compacta, para la rejilla del resumen. */
.mem-card { flex-direction: column; text-align: center; }
.mem-card .mem-text { text-align: center; }
.mem-card .mem-head { justify-content: center; }

@media (max-width: 760px) {
    .mem { flex-direction: column; text-align: center; }
    .mem-head { justify-content: center; }
    .mem-text p { margin-inline: auto; }
    .mem-actions { width: 100%; }
}

/* La pildora de la barra de arriba. Esta en todas las pantallas del panel. */
.mem-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .78rem;
    color: var(--text-2);
    white-space: nowrap;
    transition: border-color var(--fast), background var(--fast);
}
.mem-pill:hover { border-color: var(--border-2); background: var(--surface-3); }
.mem-pill i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--glow-soft);
}
.mem-pill b { color: var(--text); font-weight: 700; }
.mem-pill em {
    font-style: normal;
    font-weight: 700;
    font-size: .72rem;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #04120A;
}
.mem-pill.is-warn   { border-color: rgba(255, 194, 77, .4); }
.mem-pill.is-warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.mem-pill.is-warn em { background: var(--warn); }
.mem-pill.is-danger,
.mem-pill.is-off    { border-color: rgba(255, 90, 90, .45); }
.mem-pill.is-danger i,
.mem-pill.is-off i  { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.mem-pill.is-danger em,
.mem-pill.is-off em { background: var(--danger); color: #fff; }

@media (max-width: 640px) {
    .mem-pill em { display: none; }
}

/* ------------------------------------------------------------ La vitrina */

.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.mk-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.mk-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--sh-3); }
.mk-card.is-owned { border-color: var(--border-lit); }

/* La muestra del tema, con su propia paleta metida por style. */
.mk-shot {
    position: relative;
    padding: 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.mk-shot-lg { border-radius: var(--r-lg); border: 1px solid var(--border); margin-bottom: 18px; }

/* El candado, encima de la muestra que todavia no es tuya. */
.mk-lock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(4, 7, 5, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mk-lock svg {
    width: 30px; height: 30px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .92;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

.mk-tag {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: #04120A;
}

.mk-body { padding: 16px 16px 12px; flex: 1 1 auto; }
.mk-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mk-title h3 { margin: 0; font-size: 1.02rem; }
.mk-title > .badge { margin-left: auto; }

.mk-icon {
    width: 42px; height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--glow-soft);
    border: 1px solid var(--border-lit);
    font-size: 1.3rem;
}
.mk-icon-sm { width: 32px; height: 32px; font-size: 1rem; }

.mk-hero-icon {
    width: 74px; height: 74px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--glow-soft);
    border: 1px solid var(--border-lit);
    font-size: 2.2rem;
    margin-bottom: 18px;
}

.mk-points { margin: 10px 0 0; padding-left: 18px; }
.mk-points li { font-size: .82rem; color: var(--text-2); margin-bottom: 4px; }

.mk-left {
    margin-top: 12px;
    font-size: .8rem;
    color: var(--text-2);
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.mk-left.is-warn { border-color: rgba(255, 194, 77, .35); color: var(--warn); }

.mk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.mk-price { display: flex; flex-direction: column; line-height: 1.15; }
.mk-price b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.03em; }
.mk-price small { font-size: .7rem; color: var(--muted); }

/* Un tema bloqueado dentro del formulario de Diseno. */
.theme-option.is-locked { cursor: not-allowed; opacity: .96; }
.theme-option.is-locked:hover { transform: none; border-color: var(--border); }
.theme-option.is-locked .theme-preview { position: relative; }

.theme-badge {
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 7px;
    margin-left: 6px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-2);
    background: var(--surface-3);
    color: var(--text-2);
    vertical-align: middle;
}
.theme-badge.is-owned { border-color: var(--border-lit); background: var(--glow-soft); color: var(--primary-3); }

/* Hay que ganarle a la regla que alinea a la derecha todo lo que va en una
   celda: una columna de contenido tiene que empezar donde empieza su titulo. */
table.table td .row-start { justify-content: flex-start; }

/* La cifra que encabeza el resumen del admin pesa mas que las de al lado. */
.stat-lead { border-color: var(--border-lit); background: radial-gradient(120% 140% at 0% 0%, var(--glow-soft), transparent 62%), var(--surface); }

/* =====================================================================
   LA TIENDA DE TEMAS

   Pantalla propia, porque con cuarenta temas una rejilla suelta no basta:
   hace falta buscar y filtrar. El filtrado ocurre en el navegador, asi que
   aqui solo hay que dejar preparado el estado "escondido".
   ===================================================================== */

.ts-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ts-buscador {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 300px;
    min-width: 0;
    padding: 0 14px;
    height: 42px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color var(--fast), box-shadow var(--fast);
}
.ts-buscador:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--glow-soft);
}
.ts-buscador svg {
    width: 17px; height: 17px;
    flex: none;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.9;
    stroke-linecap: round;
}
.ts-buscador input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    height: 100%;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
}
.ts-buscador input:focus { outline: 0; box-shadow: none; }
/* La X que pintan Chrome y Safari dentro de los input[type=search]. */
.ts-buscador input::-webkit-search-cancel-button { cursor: pointer; }

.ts-filtros {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.ts-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.ts-chip:hover { border-color: var(--border-2); color: var(--text); }
.ts-chip i {
    font-style: normal;
    font-size: .74rem;
    color: var(--muted);
}
.ts-chip.is-activo {
    background: var(--primary);
    border-color: transparent;
    color: #04120A;
    font-weight: 600;
}
.ts-chip.is-activo i { color: rgba(4, 18, 10, .62); }

.ts-cuenta {
    font-size: .82rem;
    color: var(--muted);
    margin: -6px 0 14px;
}

/* --------------------------------------------------------- La vitrina */

.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
}

.ts-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.ts-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--sh-3); }
.ts-card.is-mio { border-color: var(--border-lit); }
.ts-card.is-uso { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--sh-2); }

.ts-vista {
    position: relative;
    padding: 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.ts-vista > img { display: block; width: 100%; border-radius: 10px; }

.ts-sello {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border-2);
}
.ts-sello-uso { background: var(--primary); color: #04120A; border-color: transparent; }

.ts-cuerpo { padding: 15px 16px 10px; flex: 1 1 auto; }
.ts-titulo { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ts-titulo h3 { margin: 0; font-size: 1rem; }
.ts-titulo .badge { margin-left: auto; }
.ts-cuerpo p { font-size: .83rem; color: var(--text-2); margin: 0 0 11px; }

.ts-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-datos span {
    font-size: .71rem;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--surface-2);
}
.ts-dato-fuerte { border-color: var(--border-lit) !important; color: var(--primary-3) !important; }

.ts-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.ts-precio { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ts-precio b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.03em; }
.ts-precio small { font-size: .69rem; color: var(--muted); }

.ts-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--border-2);
    text-align: center;
}
.ts-vacio b { font-family: var(--font-display); font-size: 1.05rem; }
.ts-vacio span { font-size: .86rem; color: var(--muted); }

/* El buscador del admin, que comparte comportamiento pero no pantalla. */
.tienda-buscar {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    min-width: 240px;
}
.tienda-buscar:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }

@media (max-width: 700px) {
    .ts-barra { gap: 10px; }
    /* Los filtros ruedan de lado en vez de partirse en tres lineas. */
    .ts-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
        padding-bottom: 2px;
    }
    .ts-filtros::-webkit-scrollbar { display: none; }
    .ts-grid { grid-template-columns: minmax(0, 1fr); }
    .tienda-buscar { width: 100%; min-width: 0; }
}

/* =====================================================================
   EL TEMA ACTIVO EN DISENO

   Una sola tarjeta en vez de la rejilla entera. Elegir tema pasa a
   /panel/temas; aqui solo se ve el que esta puesto y se retoca.
   ===================================================================== */

.dz-tema {
    display: grid;
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 26px);
    align-items: start;
}

.dz-tema-vista {
    padding: 12px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg-2);
}

.dz-tema-info { min-width: 0; }

.dz-tema-nombre {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.dz-tema-nombre b {
    font-family: var(--font-display);
    font-size: 1.16rem;
    letter-spacing: -.02em;
}

.dz-tema-info > p {
    margin: 0 0 12px;
    font-size: .89rem;
    color: var(--text-2);
    max-width: 62ch;
}

.dz-tema-info .checkbox i { font-style: normal; color: var(--muted); }

@media (max-width: 720px) {
    .dz-tema { grid-template-columns: minmax(0, 1fr); }
    .dz-tema-vista { max-width: 280px; }
}

/* =====================================================================
   COMPLEMENTOS

   Misma familia visual que la tienda de temas: buscador arriba, rejilla
   de tarjetas, y el estado siempre visible sin tener que leer.
   ===================================================================== */

.cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
    gap: 16px;
    margin-top: 4px;
}

.cx-card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.cx-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.cx-card.is-on { border-color: var(--border-lit); }
.cx-card.is-lock { opacity: .92; }

.cx-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.cx-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--glow-soft);
    border: 1px solid var(--border-lit);
    font-size: 1.35rem;
}
.cx-card.is-lock .cx-icon { background: var(--surface-2); border-color: var(--border); filter: grayscale(.35); }

.cx-titulo { min-width: 0; flex: 1; }
.cx-titulo h3 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.cx-titulo span { font-size: .76rem; color: var(--muted); }

.cx-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: lowercase;
}
.cx-estado i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--glow-soft);
}
.cx-estado.is-on { border-color: var(--border-lit); color: var(--primary-3); }
.cx-estado.is-lock { border-color: rgba(255, 194, 77, .38); color: var(--warn); }

.cx-desc { margin: 0 0 12px; font-size: .87rem; color: var(--text-2); }

.cx-puntos { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.cx-puntos li {
    position: relative;
    padding-left: 17px;
    font-size: .82rem;
    color: var(--muted);
}
.cx-puntos li::before {
    content: '';
    position: absolute;
    left: 3px; top: .52em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .7;
}

.cx-aviso {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 194, 77, .34);
    background: var(--warn-bg);
}
.cx-aviso b { display: block; font-size: .84rem; color: var(--warn); }
.cx-aviso span { display: block; margin-top: 2px; font-size: .8rem; color: var(--text-2); }
.cx-aviso.is-ok { border-color: var(--border-lit); background: var(--glow-soft); }
.cx-aviso.is-ok b { color: var(--primary-3); }
.cx-aviso.is-warn b { color: var(--warn); }

.cx-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.cx-precio { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cx-precio b { font-family: var(--font-display); font-size: .98rem; letter-spacing: -.02em; }
.cx-precio small { font-size: .7rem; color: var(--muted); }

@media (max-width: 560px) {
    .cx-grid { grid-template-columns: minmax(0, 1fr); }
    .cx-pie > .row { width: 100%; }
    .cx-pie .btn { flex: 1; justify-content: center; }
}

/* =====================================================================
   EL MENU DEL PANEL, QUIETO

   El menu se queda fijo y lo unico que se mueve es el contenido. Son tres
   piezas y conviene no perderlas de vista:

     .sidebar     pegado arriba, alto de pantalla completa
     .nav-scroll  lo unico que rueda dentro del menu, si no caben las
                  secciones
     .sidebar-foot  anclado abajo: quien eres y como salir, siempre a mano

   Ojo con el enemigo clasico: un overflow:hidden en un ancestro convierte
   ese ancestro en contenedor de scroll y anula el sticky de aqui abajo.
   Si el menu vuelve a irse con el scroll, ese es el primer sitio donde
   mirar.
   ===================================================================== */

.shell {
    /* Nada de overflow aqui: rompería el sticky del menu. */
    align-items: flex-start;
}

.sidebar {
    position: sticky;
    top: 0;
    /* dvh sigue a la barra del navegador en el telefono; vh queda de
       respaldo para los que no lo entiendan. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

/*
 * Un velo abajo del todo cuando la lista sigue. Dice "hay mas" sin ocupar
 * sitio ni pedir una barra de scroll visible.
 */
.nav-scroll {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
    padding-bottom: 10px;
}

/* El pie del menu se separa de la lista con una linea, para que se lea
   como otra cosa y no como una seccion mas. */
.sidebar-foot {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 2px;
}

/* Los titulos de grupo se quedan pegados mientras su grupo pasa: en una
   lista larga siempre se sabe en que seccion se esta mirando. */
.sidebar .nav-title {
    position: sticky;
    top: -2px;
    z-index: 1;
    background: linear-gradient(180deg,
        var(--surface) 0%,
        var(--surface) 62%,
        transparent 100%);
    padding-top: 8px;
}
.sidebar .nav-group:first-child .nav-title { padding-top: 0; }

@media (max-width: 900px) {
    /*
     * En el telefono el menu es un cajon que entra por la izquierda, asi
     * que aqui manda position:fixed y el sticky no pinta nada. Se anula a
     * proposito para que no compitan.
     */
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100dvh;
        max-height: none;
    }
    /* Sin mascara: en el cajon se ve la lista entera y el velo solo
       ensuciaba el ultimo enlace. */
    .nav-scroll {
        -webkit-mask-image: none;
        mask-image: none;
    }
}