/* Chancay.store — estilos (sin fuentes ni librerías externas para cargar rápido) */

/* ---------- Colores: modo claro ---------- */
:root{
  --brand:#0B8F5A; --brand-d:#08724A; --brand-l:#E6F5EE; --brand-ink:#0A5C3B; --brand-text:#0B8F5A;
  --bg:#fff; --surface:#fff; --surface-2:#F3F4F6; --surface-3:#FAFAFB; --hover:#E8E9EC;
  --ink:#15171A; --ink-2:#4A4F57; --muted:#6B7079;
  --line:#E7E8EB; --input-line:#D9DBDF; --strong-line:#C9CCD1;
  --topbar:rgba(255,255,255,.96);
  --invert-bg:#15171A; --invert-ink:#fff;
  --yellow:#FFD43B; --yellow-ink:#3B2F00; --violet:#5B3CC4; --coral:#FF6B4A;
  --on-brand:#fff; --on-accent:#fff; --on-violet:#fff;
  --mint:#DDF3E8; --mint-ink:#0A4B31;
  --ok:#0B8F5A; --warn:#B45309; --bad:#C62828;
  --warn-bg:#FFF4E0; --bad-bg:#FDECEC; --bad-ink:#8E1B1B; --note-bg:#FFF6CC;
  --tile-mix:100%; --av-s:70%; --av-l:90%; --av-ink-l:30%;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --register-top:#EAF7F1;
  --moon:inline; --sun:none;
  color-scheme:light;
  --r:16px; --r-sm:10px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Colores: modo nocturno (automático según el sistema o elegido con el botón) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --brand:#14A870; --brand-d:#0F9461; --brand-l:#123A2B; --brand-ink:#86E3BA; --brand-text:#14A870;
    --bg:#0E1113; --surface:#161A1E; --surface-2:#1F252A; --surface-3:#1A1F23; --hover:#2A3137;
    --ink:#ECEEF0; --ink-2:#C3C8CE; --muted:#959CA5;
    --line:#283036; --input-line:#3A434B; --strong-line:#4A545D;
    --topbar:rgba(14,17,19,.94);
    --invert-bg:#ECEEF0; --invert-ink:#0E1113;
    --mint:#163A2C; --mint-ink:#BDF0D7;
    --warn:#F0A44B; --bad:#FF7B7B; --warn-bg:#3A2A12; --bad-bg:#3B1A1C; --bad-ink:#FFB4B4; --note-bg:#3A3212;
    --tile-mix:22%; --av-s:35%; --av-l:24%; --av-ink-l:82%;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
    --shadow-lg:0 12px 32px rgba(0,0,0,.55);
    --register-top:#10221A;
    --moon:none; --sun:inline;
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --brand:#14A870; --brand-d:#0F9461; --brand-l:#123A2B; --brand-ink:#86E3BA; --brand-text:#14A870;
  --bg:#0E1113; --surface:#161A1E; --surface-2:#1F252A; --surface-3:#1A1F23; --hover:#2A3137;
  --ink:#ECEEF0; --ink-2:#C3C8CE; --muted:#959CA5;
  --line:#283036; --input-line:#3A434B; --strong-line:#4A545D;
  --topbar:rgba(14,17,19,.94);
  --invert-bg:#ECEEF0; --invert-ink:#0E1113;
  --mint:#163A2C; --mint-ink:#BDF0D7;
  --warn:#F0A44B; --bad:#FF7B7B; --warn-bg:#3A2A12; --bad-bg:#3B1A1C; --bad-ink:#FFB4B4; --note-bg:#3A3212;
  --tile-mix:22%; --av-s:35%; --av-l:24%; --av-ink-l:82%;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  --register-top:#10221A;
  --moon:none; --sun:inline;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-text)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em}
h2{font-size:19px;font-weight:750}
h3{font-size:16px;font-weight:700}
p{margin:0 0 .8em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #7FD3AE;outline-offset:2px}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--invert-bg);color:var(--invert-ink);padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.muted{color:var(--muted)}
.section{padding-top:28px;padding-bottom:8px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 16px}
.section-head h2,.section-head h1{margin:0}
.see-all{font-weight:700;font-size:14px;white-space:nowrap}
.show-xs{display:none}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;transition:background .15s,transform .05s;line-height:1.1;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-xl{padding:17px 34px;font-size:19px}
.btn-block{width:100%}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-d);color:var(--on-brand)}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink)}
.btn-yellow:hover{background:#FFC800;color:var(--yellow-ink)}
.btn-ghost{background:var(--surface-2);color:var(--ink)}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-wa{background:#1FAF55;color:#fff}
.btn-wa:hover{background:#178E44;color:#fff}
.btn-danger{background:#C62828;color:#fff}
.btn-danger:hover{background:#A31F1F;color:#fff}
.btn-danger-ghost{background:var(--bad-bg);color:var(--bad)}
.btn-link{font-weight:600;font-size:14px;color:var(--muted)}
.btn-link.is-active{color:var(--brand-text)}

/* ---------- Botón modo nocturno ---------- */
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle .i-moon{display:var(--moon)}
.theme-toggle .i-sun{display:var(--sun);color:var(--yellow)}

/* ---------- Cabecera ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--topbar);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.brand-name{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.brand-name b{font-weight:850;color:var(--brand-text)}
.top-actions{display:flex;align-items:center;gap:12px}
.link-cats{font-weight:650;font-size:14px;margin-right:4px}

/* ---------- Buscador con sugerencias ---------- */
.search{position:relative;flex:1;max-width:540px;margin:0 auto;display:flex;align-items:center;background:var(--surface-2);border-radius:999px;padding:4px 4px 4px 18px;border:1px solid transparent}
.search:focus-within{border-color:var(--brand);background:var(--surface)}
.search input{flex:1;border:0;background:transparent;outline:0;padding:8px 0;min-width:0}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search>button{width:36px;height:36px;border-radius:50%;border:0;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);max-height:min(70vh,460px);overflow-y:auto;z-index:30}
.suggest[hidden]{display:none}
.suggest-head{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px 4px}
.suggest-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer}
.suggest-item[aria-selected=true],.suggest-item:hover{background:var(--surface-2)}
.suggest-item .logo{width:40px;height:40px;border-radius:10px}
.suggest-item .s-emoji{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:22px;background:var(--surface-2)}
.suggest-item b{display:block;font-weight:700;font-size:14.5px;line-height:1.25}
.suggest-item small{color:var(--muted);font-size:12.5px}
.suggest-item mark{background:none;color:var(--brand-text);font-weight:850}
.suggest-all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-weight:700;color:var(--brand-text)}
.suggest-empty{padding:14px 10px;color:var(--muted);font-size:14px}

@media (max-width:760px){
  .topbar-in{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .search{order:3;flex-basis:100%;max-width:none}
  .top-actions{margin-left:auto}
  .link-cats{display:none}
}
@media (max-width:420px){.hide-xs{display:none}.show-xs{display:inline}.brand-name{font-size:19px}}

/* ---------- Portada sin tiendas: llamado grande ---------- */
.hero-empty{padding-top:28px;padding-bottom:12px}
.hero-empty-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:24px;border-radius:28px;background:var(--violet);color:var(--on-violet);padding:clamp(28px,6vw,72px);min-height:min(68vh,560px)}
.hero-empty-card::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.07);right:-140px;top:-160px}
.hero-empty-text{position:relative;z-index:1}
.hero-empty h1{font-size:clamp(38px,7vw,72px);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin-bottom:16px}
.hero-empty p{font-size:clamp(18px,2.4vw,24px);opacity:.92;max-width:520px;margin-bottom:28px}
.hero-steps{list-style:none;counter-reset:s;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:650;font-size:14.5px;opacity:.95}
.hero-steps li{counter-increment:s;display:flex;align-items:center;gap:8px}
.hero-steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:12.5px;font-weight:800}
.hero-empty-art{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-items:center}
.hero-empty-art span{width:clamp(70px,10vw,108px);aspect-ratio:1;border-radius:28px;display:grid;place-items:center;font-size:clamp(34px,5vw,54px);background:rgba(255,255,255,.12)}
.hero-empty-art span:nth-child(1){background:var(--yellow);transform:rotate(-6deg)}
.hero-empty-art span:nth-child(5){background:#FF8E72;transform:rotate(7deg)}
.hero-empty-art span:nth-child(3){transform:translateY(16px)}
@media (max-width:760px){.hero-empty-card{grid-template-columns:minmax(0,1fr);text-align:left}.hero-empty-art{order:-1;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.hero-empty-art span{width:100%;border-radius:14px;font-size:clamp(20px,6vw,30px);transform:none!important}.btn-xl{width:100%}}

/* ---------- Categorías ---------- */
.hero-cats{padding-top:24px}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.cat-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);border-radius:var(--r);padding:18px 8px 14px;min-height:128px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.cat-tile::before{content:"";position:absolute;width:86px;height:86px;border-radius:42% 58% 55% 45%/50% 45% 55% 50%;background:color-mix(in srgb,var(--tile) var(--tile-mix),var(--surface-2));top:12px;left:50%;transform:translateX(-50%)}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.cat-emoji{font-size:46px;line-height:1;position:relative;filter:drop-shadow(0 4px 4px rgba(0,0,0,.12))}
.cat-name{font-size:13.5px;font-weight:750;position:relative;text-align:center}
.cat-count{position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:800;display:grid;place-items:center}
@media (max-width:640px){
  .cat-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .cat-tiles::-webkit-scrollbar{display:none}
  .cat-tile{flex:0 0 108px;min-height:112px;scroll-snap-align:start}
  .cat-emoji{font-size:38px}
  .cat-tile::before{width:70px;height:70px}
}

/* ---------- Tira de logos ---------- */
.logo-strip{display:flex;gap:14px;overflow-x:auto;padding:22px 2px 6px;scrollbar-width:none}
.logo-strip::-webkit-scrollbar{display:none}
.strip-logo{width:60px;height:60px;border-radius:50%;border:1px solid var(--line);object-fit:cover;flex-shrink:0;background:#fff;transition:transform .15s}
a:hover .strip-logo{transform:scale(1.06)}

/* Avatares de iniciales */
.avatar,.logo.avatar,.strip-logo.avatar,.store-logo.avatar{display:grid;place-items:center;font-weight:800;color:hsl(var(--h) 55% var(--av-ink-l));background:hsl(var(--h) var(--av-s) var(--av-l));letter-spacing:.02em;flex-shrink:0}

/* ---------- Banners ---------- */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:18px;scroll-padding-inline:16px}
.promo{display:flex;justify-content:space-between;align-items:stretch;border-radius:20px;overflow:hidden;min-height:150px;position:relative}
.promo>div{padding:20px 0 20px 22px;position:relative;z-index:1;max-width:66%}
.promo h2{font-size:21px;margin-bottom:6px}
.promo p{font-size:14px;margin-bottom:12px;opacity:.9}
.promo-cta{font-weight:800;font-size:14px}
.promo-art{font-size:84px;align-self:center;margin-right:-6px;transform:rotate(-8deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.promo-a{background:var(--violet);color:var(--on-violet)}
.promo-a:hover{color:var(--on-violet)}
.promo-b{background:var(--yellow);color:var(--yellow-ink)}
.promo-b:hover{color:var(--yellow-ink)}
.promo-c{background:var(--mint);color:var(--mint-ink)}
.promo-c:hover{color:var(--mint-ink)}
.promo:hover .promo-art{transform:rotate(0) scale(1.05);transition:transform .2s}
@media (max-width:900px){.promos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.promo{flex:0 0 82%;scroll-snap-align:start}}

/* ---------- Tarjetas de negocio ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.biz-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:box-shadow .15s,border-color .15s}
.biz-card:hover{box-shadow:var(--shadow);border-color:transparent;color:var(--ink)}
.biz-card-top{display:flex;gap:12px;align-items:center}
.biz-card h3{margin:0 0 2px}
.biz-desc{color:var(--ink-2);font-size:14px;margin:0;flex:1}
.logo{width:56px;height:56px;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:#fff;flex-shrink:0}
.meta{color:var(--muted);font-size:13.5px;margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.meta .ok{color:var(--ok);font-weight:600}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--surface-2);border-radius:999px;font-size:12.5px;font-weight:600;padding:4px 10px}

/* ---------- Listado ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:650;background:var(--surface)}
.chip:hover{border-color:var(--strong-line);color:var(--ink)}
.chip.is-active{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-ink)}
.h-list{font-size:24px}
.biz-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
@media (max-width:760px){.biz-list{grid-template-columns:1fr}}
.biz-row{display:flex;gap:14px;align-items:center;padding:12px 8px;border-radius:var(--r-sm)}
.biz-row:hover{background:var(--surface-3);color:var(--ink)}
.biz-row h2,.biz-row h3{font-size:16.5px;margin:0 0 2px}
.biz-row-body{min-width:0}
.empty{text-align:center;padding:48px 16px;background:var(--surface-3);border-radius:var(--r)}
.empty>span{font-size:44px;display:block;margin-bottom:8px}
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:24px 0}
.pager a,.pager span{padding:8px 13px;border-radius:999px;border:1px solid var(--line);font-weight:650;font-size:14px}
.pager span{background:var(--invert-bg);color:var(--invert-ink);border-color:var(--invert-bg)}

/* ---------- Página de tienda ---------- */
.store-cover{height:150px;width:calc(100% - 32px);max-width:1148px;margin:0 auto;border-radius:20px;background:color-mix(in srgb,var(--tile) var(--tile-mix),var(--surface-2));overflow:hidden;position:relative}
.store-cover-art{position:absolute;inset:-20px -40px;font-size:44px;line-height:1.6;opacity:.32;letter-spacing:22px;word-break:break-all;transform:rotate(-6deg)}
.crumbs{font-size:13px;color:var(--muted);padding:10px 0}
.crumbs a:hover{text-decoration:underline}
.store-head{display:flex;gap:18px;align-items:flex-end;margin-top:-6px;padding-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.store-logo{position:relative;z-index:1;margin-left:20px;width:112px;height:112px;border-radius:24px;border:4px solid var(--surface);box-shadow:var(--shadow);object-fit:cover;background:#fff;margin-top:-58px}
.store-title{flex:1;min-width:220px}
.store-title h1{margin-bottom:8px}
.store-actions{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);padding:4px 10px;border-radius:999px;font-weight:650;color:var(--ink);font-size:13px}
.pill-ok{background:var(--brand-l);color:var(--brand-ink)}
.store-tabs{display:flex;gap:8px;padding:14px 0}
.store-tabs a{padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;background:var(--surface-2)}
.store-tabs a.is-active{background:var(--invert-bg);color:var(--invert-ink)}
.store-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:860px){.store-layout{grid-template-columns:1fr}.store-actions{width:100%}.store-actions .btn{flex:1}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px}
.store-desc{color:var(--ink-2);font-size:15.5px;margin:0}
.soon{display:flex;gap:16px;align-items:center;background:var(--surface-3);border-style:dashed}
.soon>span{font-size:40px}
.soon h2{margin-bottom:4px}
.soon p{margin:0}
.info-list{position:sticky;top:84px}
.info-list dl{margin:0}
.info-list dl>div{padding:12px 0;border-top:1px solid var(--line)}
.info-list dl>div:first-child{border-top:0;padding-top:4px}
.info-list dt{font-size:13px;color:var(--muted);font-weight:650;margin-bottom:2px}
.info-list dd{margin:0;font-weight:550}
.info-list dd a{color:var(--brand-text);font-weight:650}

/* ---------- Registro ---------- */
.register-wrap{background:linear-gradient(180deg,var(--register-top) 0,var(--bg) 380px)}
.register{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;padding-top:32px;padding-bottom:40px;align-items:start}
@media (max-width:900px){.register{grid-template-columns:1fr}.register-side{order:-1}}
.form-card{padding:28px;box-shadow:var(--shadow);border:0}
.banner-note{background:var(--note-bg);border-radius:var(--r-sm);padding:12px 14px;font-size:14.5px}
fieldset{border:0;padding:0;margin:22px 0 4px}
legend{font-weight:800;font-size:16px;margin-bottom:10px;padding:0}
.field{margin-bottom:14px}
.field label,.field .label{display:block;font-weight:650;font-size:14px;margin-bottom:6px}
.opt{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),select,textarea,.admin-filter input[type=search]{width:100%;border:1px solid var(--input-line);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,143,90,.18)}
.search input:focus{box-shadow:none}
input:disabled{opacity:.6}
textarea{resize:vertical;min-height:96px}
[aria-invalid=true]{border-color:var(--bad)!important}
.field-error{color:var(--bad);font-size:13px;margin:5px 0 0;font-weight:600}
.hint{color:var(--muted);font-size:12.5px;margin:5px 0 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.check{display:inline-flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.checks .check{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.check input{width:18px;height:18px;accent-color:var(--brand);margin:1px 0 0;flex-shrink:0}
.terms{margin:10px 0 16px;color:var(--ink-2)}
.logo-pick{display:flex;gap:14px;align-items:center}
.logo-preview{width:76px;height:76px;border-radius:18px;border:2px dashed var(--strong-line);display:grid;place-items:center;font-size:28px;overflow:hidden;flex-shrink:0;background:var(--surface-3)}
.logo-preview img{width:100%;height:100%;object-fit:contain;background:#fff}
input[type=file]{font-size:14px;max-width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.register-side{padding-top:20px}
.register-side h2{font-size:clamp(24px,3vw,32px);font-weight:850;letter-spacing:-.02em;max-width:420px}
.side-art{display:flex;gap:10px;margin-bottom:18px}
.side-art span{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:36px;background:var(--surface);box-shadow:var(--shadow)}
.side-art span:nth-child(2){transform:translateY(12px) rotate(6deg);background:var(--yellow)}
.side-art span:nth-child(3){transform:rotate(-6deg);background:var(--mint)}
.benefits{padding-left:20px;color:var(--ink-2);max-width:460px}
.benefits li{margin-bottom:8px}
.benefits b{color:var(--ink)}
.steps{list-style:none;counter-reset:s;padding:0;margin:20px 0 0;display:grid;gap:10px;max-width:420px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:center;font-weight:650;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:14px;font-weight:800;flex-shrink:0}
.thanks{grid-column:1/-1;text-align:center;max-width:560px;margin:20px auto;padding:40px 28px;box-shadow:var(--shadow);border:0}
.thanks-icon{font-size:56px;display:block;margin-bottom:6px}

/* ---------- Alertas ---------- */
.alert{border-radius:var(--r-sm);padding:12px 14px;margin:0 0 16px;font-size:14.5px;font-weight:550}
.alert-error{background:var(--bad-bg);color:var(--bad-ink)}
.alert-success{background:var(--brand-l);color:var(--brand-ink)}
.alert-info{background:var(--surface-2);color:var(--ink)}
.alert-info a{color:var(--brand-ink)}

/* ---------- Pie ---------- */
.footer{margin-top:48px;background:var(--surface-3);border-top:1px solid var(--line);font-size:14px}
.footer-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding-top:32px;padding-bottom:20px}
.footer h3{font-size:14px;margin-bottom:8px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--ink-2)}
.footer-bottom{padding-bottom:28px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap}
@media (max-width:640px){.footer-in{grid-template-columns:1fr 1fr}.footer-in>div:first-child{grid-column:1/-1}}

/* ---------- Panel de administración ---------- */
body.admin{background:var(--surface-3)}
.admin-bar{background:var(--surface);border-bottom:1px solid var(--line)}
.admin-bar-in{display:flex;align-items:center;gap:10px;min-height:62px;flex-wrap:wrap}
.admin-tag{background:var(--invert-bg);color:var(--invert-ink);font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}
.admin-nav{display:flex;gap:0;flex:1;flex-wrap:wrap}
.admin-nav a{padding:7px 8px;border-radius:999px;font-weight:650;font-size:13px;color:var(--ink-2);white-space:nowrap}
.admin-nav a.is-active{background:var(--surface-2);color:var(--ink)}
.count{background:var(--coral);color:var(--on-accent);border-radius:999px;font-size:11.5px;padding:1px 7px;margin-left:2px}
.admin-main{padding-top:24px;padding-bottom:48px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column}
.stat b{font-size:28px;line-height:1.1}
.stat span{color:var(--muted);font-weight:600;font-size:13.5px}
.stat.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.stat-pendiente b{color:var(--warn)} .stat-aprobado b{color:var(--ok)} .stat-rechazado b{color:var(--bad)} .stat-suspendido b{color:var(--muted)}
.admin-filter{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.admin-filter input{max-width:380px}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-3)}
.table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.cell-biz{display:flex;gap:10px;align-items:center}
.cell-biz .logo{width:36px;height:36px;border-radius:10px}
.cell-biz small{display:block}
.badge{display:inline-block;font-size:12px;font-weight:750;padding:3px 9px;border-radius:999px}
.badge-pendiente{background:var(--warn-bg);color:var(--warn)}
.badge-aprobado{background:var(--brand-l);color:var(--brand-ink)}
.badge-rechazado{background:var(--bad-bg);color:var(--bad)}
.badge-suspendido{background:var(--surface-2);color:var(--muted)}
.review-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.review-head .store-logo{margin-top:0;margin-left:0;width:96px;height:96px}
.grow{flex:1}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:800px){.review-grid{grid-template-columns:1fr}}
.review-grid .card{margin-bottom:0}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;margin:0;font-size:14.5px}
.kv dt{color:var(--muted);font-weight:650}
.kv dd{margin:0;word-break:break-word}
.actions-card{margin-top:18px}
.actions-row{display:flex;gap:10px;flex-wrap:wrap}
.reject-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px;max-width:600px}
.reject-form label{font-weight:700;font-size:14px}
.reject-form .btn{justify-self:start}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.cat-form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cat-form-row .field{margin-bottom:0}
.input-emoji{width:70px!important;text-align:center;font-size:20px;padding:7px!important}
.input-num{width:84px!important}
input[type=color]{width:64px;height:44px;padding:3px;border:1px solid var(--input-line);border-radius:var(--r-sm);background:var(--surface)}
.field-btn{display:flex;gap:10px;align-items:center}
.cat-dot{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--tile) var(--tile-mix),var(--surface-2));margin-right:6px}
.narrow{max-width:460px}
.login-page{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:380px;padding:28px;box-shadow:var(--shadow);border:0}
.login-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 18px}
.login-card h1{font-size:20px;margin:0}
.logout{margin-left:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Captcha y página de seguridad ---------- */
.captcha{margin:6px 0 14px;min-height:65px}
.captcha .cf-turnstile{width:100%}
.sec-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 16px}
.sec-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600}
.sec-chip.is-active{border-color:var(--ink)}
.sec-chip b{font-size:15px}
.tone-ok{color:var(--brand-ink)} .tone-warn{color:var(--warn)} .tone-bad{color:var(--bad)}
.badge.tone-ok{background:var(--brand-l)} .badge.tone-warn{background:var(--warn-bg)} .badge.tone-bad{background:var(--bad-bg)}
.sec-unblock{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px}
.table td.ua{color:var(--muted);font-size:12.5px;max-width:260px}
.table code{font-size:12.5px}

/* ---------- Utilidades ---------- */
.small{font-size:12.5px}
.center{text-align:center}
.d-block{display:block}
.mt{margin-top:14px}
.btn-lg{padding:14px 24px;font-size:16px}
form.is-busy [type=submit]{opacity:.6;pointer-events:none}

/* ---------- Tarjetas de producto ---------- */
.p-group{margin-bottom:26px;scroll-margin-top:90px}
.p-group>h2{font-size:20px;font-weight:800;margin:0 0 12px}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.p-grid-wide{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.p-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .15s,transform .15s}
.p-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.p-img{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden}
.p-img img{width:100%;height:100%;object-fit:contain}
.p-img>span{font-size:40px;opacity:.5}
.p-body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1;gap:8px}
.p-title{font-size:13.5px;font-weight:500;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.p-price{font-size:17px;font-weight:800;margin:auto 0 0}
@media (max-width:520px){.p-grid,.p-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.store-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.store-tabs::-webkit-scrollbar{display:none}
.store-tabs a{flex-shrink:0}
.tab-sec{font-weight:600!important}

/* ---------- Página de producto ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;padding:8px 0 12px;align-items:start}
.pd-media{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.pd-media img{width:100%;height:100%;object-fit:contain}
.pd-sec{display:inline-block;background:var(--surface-2);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:650;margin-bottom:10px}
.pd-info h1{font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.pd-price{font-size:30px;font-weight:850;color:var(--brand-text);margin-bottom:16px}
.pd-desc{color:var(--ink-2);font-size:15.5px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
.pd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.pd-actions .btn{flex:1;min-width:180px}
.pd-store{padding:0;overflow:hidden}
.pd-store-head{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.pd-store-head:hover{background:var(--surface-3);color:var(--ink)}
.pd-store-head h2{font-size:17px;margin:0 0 2px}
.pd-store-dl{margin:0;padding:4px 18px 8px}
.pd-store-dl>div{padding:10px 0;border-top:1px solid var(--line)}
.pd-store-dl>div:first-child{border-top:0}
.pd-store-dl dt{font-size:13px;color:var(--muted);font-weight:650}
.pd-store-dl dd{margin:0;font-weight:550}
.pd-store-dl a{color:var(--brand-text);font-weight:650}
@media (max-width:820px){.pd{grid-template-columns:1fr;gap:18px}.pd-media{position:static;border-radius:16px}}

/* ---------- Paneles: selección múltiple, accesos ---------- */
.bulk-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.bulk-bar select{width:auto;padding:8px 12px}
.w-check{width:40px}
.w-check input,.owner-check input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.table tr.is-checked td{background:var(--brand-l)}
.notice{border-color:var(--warn);background:var(--warn-bg);font-size:14px;line-height:1.6}
.access-card{margin-top:18px}
.cred-box{background:var(--brand-l);color:var(--brand-ink);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:14px}
.cred-box p{margin:0 0 4px}
.cred-box code{font-size:16px;font-weight:700;background:var(--surface);color:var(--ink);padding:2px 8px;border-radius:6px;user-select:all}

/* ---------- Panel del dueño ---------- */
.mini-logo{width:32px!important;height:32px!important;border-radius:9px!important}
.owner-name{font-weight:800;font-size:16px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner .brand{gap:10px}
.owner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.owner-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.owner-card.is-checked{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.owner-card.is-hidden img{opacity:.45}
.owner-card img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.owner-check{position:absolute;top:8px;left:8px;background:var(--surface);border-radius:8px;padding:6px;display:grid;box-shadow:var(--shadow)}
.owner-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.owner-card h3{font-size:14px;font-weight:600;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.owner-card .price{font-weight:800;margin:0}
.owner-sec{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.owner-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.owner-actions .btn{flex:1}
.tutorial .steps{max-width:none;margin-bottom:18px}
.product-editor{display:grid;grid-template-columns:minmax(0,640px) 230px;gap:28px;align-items:start}
.preview-side{position:sticky;top:20px}
.p-card-preview{pointer-events:none}
.product-preview{width:96px;height:96px;background:#fff}
.input-prefix{display:flex;align-items:center;border:1px solid var(--input-line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.input-prefix:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,143,90,.18)}
.input-prefix span{padding:0 4px 0 13px;font-weight:700;color:var(--muted)}
.input-prefix input{border:0!important;box-shadow:none!important;padding-left:4px!important}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (max-width:860px){.product-editor{grid-template-columns:1fr}.preview-side{display:none}}
@media (max-width:640px){.owner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.owner-name{max-width:140px}.owner-actions{flex-direction:column}}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
#productos,#info{scroll-margin-top:90px}
@media (max-width:760px){#productos,#info,.p-group{scroll-margin-top:136px}}
.list-intro{color:var(--ink-2);max-width:760px;margin:-6px 0 16px}
.crumbs-list{padding-top:0}
.chips-center{justify-content:center;flex-wrap:wrap;overflow:visible}
.test-mail{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.test-mail input{flex:1;min-width:220px}
.smtp-log{margin-bottom:14px}
.smtp-log summary{cursor:pointer;font-weight:650;font-size:14px;margin-bottom:6px}
.smtp-log pre,.mail-log{background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:0}
.missing-imgs ul{margin:8px 0 0;padding-left:20px}
.missing-imgs a{color:var(--brand-text);font-weight:650}
.logo-form{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ---------- Bloqueo, verificación en dos pasos ---------- */
.lock-card{width:100%;max-width:440px;padding:32px 28px;text-align:center;box-shadow:var(--shadow);border:0}
.lock-card h1{font-size:22px;margin:6px 0 12px}
.lock-icon{font-size:52px;line-height:1}
.lock-time{background:var(--surface-2);border-radius:var(--r-sm);padding:12px;margin:16px 0}
.lock-time b{font-size:20px}
.kv-compact{grid-template-columns:110px 1fr;text-align:left;margin:14px 0 18px;font-size:14px}
.twofa-hero{font-size:44px;text-align:center;margin:4px 0}
.otp-input{font-size:26px!important;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.backup-help{margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.backup-help summary{cursor:pointer;font-weight:650;text-align:center}
.twofa h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.twofa-steps{padding-left:22px;display:grid;gap:12px;margin:14px 0}
.qr-wrap{display:block;width:max-content;background:#fff;padding:10px;border-radius:14px;border:1px solid var(--line);margin:12px 0 6px}
.qr-wrap svg{display:block;width:220px;height:220px;max-width:100%}
.secret-key code{font-size:17px;letter-spacing:.08em;background:var(--surface-2);padding:6px 10px;border-radius:8px;user-select:all;word-break:break-all;display:inline-block}
.twofa-confirm{display:flex;gap:10px;flex-wrap:wrap;max-width:420px}
.twofa-confirm .otp-input{flex:1;min-width:180px}
.twofa-manage summary{cursor:pointer;font-weight:650;margin:6px 0 12px}
.codes-box{background:var(--warn-bg);border-radius:var(--r-sm);padding:16px 18px;margin-bottom:16px}
.codes-box h3{margin-top:0}
.codes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 18px;padding-left:22px;margin:10px 0 14px}
.codes-list code{font-size:16px;font-weight:700;letter-spacing:.04em}
@media print{body.admin>*:not(main),.admin-bar,.twofa>*:not(.codes-box),.codes-box button{display:none!important}}

/* ---------- Sesiones en línea ---------- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--muted)}
.dot-on{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.dot-idle{background:var(--strong-line)}
.add-admin{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.add-admin h3{margin-bottom:10px}
.support-actions .field{max-width:560px}

/* ---------- Visitas ---------- */
.stats-visits .stat b{display:flex;align-items:center}
.chart-wrap{width:100%;overflow-x:auto}
.bar-chart{width:100%;min-width:520px;height:auto;display:block}
.bar-chart .bar{fill:var(--brand)}
.bar-chart .bar-g:hover .bar{fill:var(--brand-d)}
.bar-chart .hit{fill:transparent}
.bar-chart .bar-g:hover .hit{fill:var(--surface-2)}
.bar-chart .grid{stroke:var(--line);stroke-width:1}
.bar-chart .baseline{stroke:var(--strong-line);stroke-width:1}
.bar-chart .axis{fill:var(--muted);font-size:11px;font-family:var(--font)}
.visit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:18px}
.visit-grid .card{margin-bottom:0}
.stat-list ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sl-row{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.sl-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-num{font-weight:700;white-space:nowrap}
.sl-num small{color:var(--muted);font-weight:500;margin-left:4px}
.sl-bar{height:6px;background:var(--surface-2);border-radius:999px;margin-top:4px;overflow:hidden}
.sl-bar span{display:block;height:100%;background:var(--brand);border-radius:999px}
.table-wrap.flat{border:0}
.table-wrap.flat .table{min-width:480px}

.site-link{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.site-link:hover{color:var(--ink);background:var(--surface-2)}
td.row-actions{display:table-cell;text-align:right;white-space:nowrap}
td.row-actions>*{display:inline-block;vertical-align:middle;margin-left:6px}
.site-link.is-active{background:var(--surface-2);color:var(--ink);border-color:var(--ink-2)}
.diag-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.diag-list li{padding:10px 12px;border-radius:12px;background:var(--surface-2);line-height:1.45}
.diag-list .diag-error{background:var(--red-soft,#fdecec)}
:root[data-theme=dark] .diag-list .diag-error{background:#3a1d1d}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .diag-list .diag-error{background:#3a1d1d}}
.inline-h2{display:inline;font-size:1.15rem;margin:0}
#servidor summary{cursor:pointer;list-style-position:outside}
#servidor .health-list{margin-top:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.card-head h2{margin:0}
.cat-create{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 4px}
.cat-create .field{margin:0;flex:1 1 220px}
.cat-create .cat-icon-field{flex:0 0 90px}
.cat-assign{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.cat-assign select{max-width:320px}
.cat-create .cat-icon-field input{font-size:20px;line-height:1.2;height:auto;min-height:0;width:100%;text-align:center;padding:10px 8px;border-radius:12px;box-shadow:none}

/* Íconos de categoría con imagen (WebP). Mismas medidas que el emoji: sin saltos al cargar */
.cat-img{display:inline-block;object-fit:contain;vertical-align:middle}
img.cat-emoji{width:56px;height:56px;font-size:0}
@media (max-width:640px){img.cat-emoji{width:46px;height:46px}}
img.promo-art{width:96px;height:96px}
.chip-ico{display:inline-block;width:20px;height:20px;vertical-align:-4px}
span.chip-ico{width:auto;height:auto;vertical-align:baseline}
.h-ico{display:inline-block}
img.h-ico{width:36px;height:36px;vertical-align:-6px}
img.pill-ico{width:18px;height:18px}
img.cat-dot-ico{width:24px;height:24px}
.s-emoji img{width:28px;height:28px;object-fit:contain}
.cat-icon-row{display:flex;gap:16px;align-items:center;margin:16px 0 4px;flex-wrap:wrap}
.cat-icon-preview{display:grid;place-items:center;width:84px;height:84px;border-radius:20px;background:color-mix(in srgb,var(--tile) var(--tile-mix,70%),var(--surface-2));font-size:46px;flex-shrink:0;overflow:hidden}
.cat-icon-preview img{width:56px;height:56px;object-fit:contain}
.cat-form .field textarea{min-height:64px}
img.meta-ico{width:16px;height:16px;vertical-align:-3px}
dd img.meta-ico{width:18px;height:18px}

/* Logo propio y enlaces del pie */
.brand-logo{display:block;height:36px;width:auto;max-width:220px;object-fit:contain}
.footer .brand-logo{height:32px}
.brand-logo-dark{display:none}
:root[data-theme=dark] .brand-logo-dark{display:block}
:root[data-theme=dark] .brand-logo-light:has(+ .brand-logo-dark){display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .brand-logo-dark{display:block}
  :root:not([data-theme=light]) .brand-logo-light:has(+ .brand-logo-dark){display:none}
}
@media (max-width:420px){.brand-logo{height:30px;max-width:150px}}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-links a{color:inherit}
.footer-links a:hover{color:var(--ink);text-decoration:underline}

/* Ajustes → Apariencia */
.settings-tabs{margin:4px 0 18px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.brand-box{border:1px solid var(--line);border-radius:16px;padding:14px}
.brand-box h3{margin:0 0 10px;font-size:15px}
.brand-preview{height:86px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;margin-bottom:10px;overflow:hidden}
.brand-preview.light{background:#fff;border:1px solid #E5E7EB}
.brand-preview.light .brand-name{color:#14171A}
.brand-preview.dark{background:#161A1E}
.brand-preview img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
.brand-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.brand-form input[type=file]{max-width:100%}
.fav-row{display:flex;align-items:center;gap:18px;margin:12px 0;flex-wrap:wrap}
.fav-preview{width:84px;height:84px;border-radius:18px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface-2);overflow:hidden}
.fav-preview img{width:64px;height:64px;object-fit:contain}
.fav-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px 10px 0 0;background:var(--surface-2);border:1px solid var(--line);border-bottom:none;font-size:13px}
.fav-tab img{width:16px;height:16px}
.link-form{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.link-form h3{margin:0 0 8px;font-size:15px}
.link-form-row{display:flex;gap:12px;flex-wrap:wrap}
.link-form-row .field{flex:1 1 200px}
.link-form-row .field.grow{flex:2 1 300px}
button.btn-link{background:none;border:0;padding:4px 0;font:inherit;font-size:13.5px;font-weight:650;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
button.btn-link:hover{color:var(--bad-ink,#B42318)}

/* Ajustes → Colores */
.colors-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:980px){.colors-layout{grid-template-columns:1fr}}
.colors-side{position:sticky;top:84px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.preset{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer;text-align:left}
.preset:hover{border-color:var(--strong-line)}
.preset.is-active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.preset-sw{display:flex}
.preset-sw i{width:16px;height:22px;display:block}
.preset-sw i:first-child{border-radius:6px 0 0 6px;width:22px}
.preset-sw i:last-child{border-radius:0 6px 6px 0}
.color-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.color-field{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px}
.color-field input[type=color]{width:52px;height:52px;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--surface);cursor:pointer;flex-shrink:0}
.color-field .hint{margin:2px 0 6px}
.hex-input{width:110px!important;font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;padding:6px 10px!important}
.theme-preview{--pv-brand:#0B8F5A;--pv-on-brand:#fff;--pv-link:#0B8F5A;--pv-accent:#FF6B4A;--pv-on-accent:#fff;--pv-feature:#5B3CC4;--pv-on-feature:#fff;--pv-ink:#15171A;--pv-bg:#fff;--pv-muted:#6B7079;padding:14px}
.pv-label{margin:0 0 8px}
.pv-page{border:1px solid #E5E7EB;border-radius:14px;overflow:hidden;background:var(--pv-bg);color:var(--pv-ink)}
.pv-top{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08)}
.pv-mark{width:20px;height:20px;border-radius:6px;background:var(--pv-brand)}
.pv-name{font-weight:800;font-size:14px;color:var(--pv-ink)}
.pv-name b{color:var(--pv-brand)}
.pv-search{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--pv-muted);background:rgba(0,0,0,.05);border-radius:999px;padding:4px 4px 4px 10px}
.pv-search i{width:18px;height:18px;border-radius:50%;background:var(--pv-brand)}
.pv-body{padding:14px}
.pv-title{margin:0 0 6px;font-size:16px;color:var(--pv-ink)}
.pv-text{margin:0 0 12px;font-size:13px;color:var(--pv-muted)}
.pv-text a{color:var(--pv-link);font-weight:650}
.pv-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pv-btn{background:var(--pv-brand);color:var(--pv-on-brand);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px}
.pv-chip{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:650;background:#fff;color:#15171A}
.pv-count{background:var(--pv-accent);color:var(--pv-on-accent);border-radius:999px;padding:1px 7px;font-size:11px;margin-left:3px}
.pv-feature{background:var(--pv-feature);color:var(--pv-on-feature);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.pv-feature b{font-size:15px}
.access-edit{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.access-edit summary{cursor:pointer}
.access-form{margin-top:12px;display:grid;gap:10px;max-width:520px}
.access-form .field{margin:0}
.pass-modes{border:0;padding:0;margin:0;display:grid;gap:6px}
.pass-modes legend{font-weight:700;margin-bottom:4px;font-size:14px}
.mt-sm{margin-top:4px}
.change-user{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:6px 0 12px}
.change-user.is-requested{border-color:var(--brand);background:var(--brand-l)}
.change-user-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.change-user-row input{flex:1 1 200px;max-width:280px}