/* ============================================================
   LAYOUT · header, portada, carta, info, admin, dashboard
   ============================================================ */

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:18px;}
.brandmark{display:flex;align-items:center;gap:11px;cursor:pointer;flex-shrink:0;}
.brandmark .seal{width:38px;height:38px;border-radius:9px;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-family:var(--font-display);font-size:19px;overflow:hidden;}
.brandmark .seal img{width:100%;height:100%;object-fit:cover;}
.brandmark .bn{font-family:var(--font-display);font-size:20px;line-height:1;letter-spacing:.01em;}
.brandmark .bt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;}
.tabs{display:flex;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:30px;font-size:14px;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;transition:.15s;border:1px solid transparent;}
.tab:hover{background:var(--surface);}
.tab.active{background:var(--accent);color:#fff;}
.tab .dot{width:8px;height:8px;border-radius:50%;}
.topbar .spacer{flex:1;}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:var(--ink);flex-shrink:0;}
.menu-btn:hover{background:var(--surface);}

/* mobile drawer */
.drawer-scrim{position:fixed;inset:64px 0 0;background:rgba(30,20,12,.28);z-index:48;animation:fade .15s ease;}
.mobile-drawer{position:absolute;top:100%;left:0;right:0;z-index:49;background:var(--surface-hi);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);padding:12px;display:flex;flex-direction:column;gap:3px;animation:slidedown .2s ease;}
@keyframes slidedown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-drawer .md-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:6px 12px 4px;}
.mobile-drawer .md-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--ink);text-align:left;}
.mobile-drawer .md-item:hover{background:var(--surface);}
.mobile-drawer .md-item.active{background:var(--accent-tint);color:var(--accent-deep);}
.mobile-drawer .md-item.cta{background:var(--accent);color:#fff;margin-top:4px;justify-content:center;}
.mobile-drawer .md-sep{height:1px;background:var(--line-soft);margin:6px 4px;}

/* ---------------- portada ---------------- */
.portada{max-width:var(--maxw);margin:0 auto;padding:42px 22px 80px;}
.hero{text-align:center;padding:46px 16px 40px;position:relative;}
.hero .kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--clay);font-weight:700;}
.hero h1{font-family:var(--font-display);font-size:clamp(46px,9vw,88px);line-height:.96;margin:16px 0 0;font-weight:400;letter-spacing:.01em;}
.hero .lede{font-size:clamp(15px,2vw,18px);color:var(--ink-soft);max-width:540px;margin:18px auto 0;line-height:1.6;}
.hero .rule{width:60px;height:2px;background:var(--clay);margin:26px auto 0;border-radius:2px;}
.carta-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;}
.carta-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);min-height:280px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px;transition:.22s;box-shadow:var(--shadow-sm);isolation:isolate;}
.carta-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.carta-card .cc-bg{position:absolute;inset:0;z-index:-1;opacity:.14;
  background:radial-gradient(circle at 70% 20%, var(--accent), transparent 60%);}
.carta-card .cc-ico{position:absolute;top:24px;right:24px;width:56px;height:56px;border-radius:14px;
  background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);}
.carta-card .cc-kind{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;}
.carta-card h2{font-family:var(--font-display);font-size:30px;margin:7px 0 6px;font-weight:400;line-height:1.05;}
.carta-card .cc-meta{font-size:13px;color:var(--ink-soft);}
.carta-card .cc-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;font-size:13.5px;color:var(--accent-deep);}
.portada-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:46px;
  padding-top:34px;border-top:1px solid var(--line);}
.foot-item{display:flex;gap:12px;align-items:flex-start;}
.foot-item .fi-ico{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--clay);flex-shrink:0;}
.foot-item .fi-l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.foot-item .fi-v{font-size:14px;color:var(--ink);margin-top:2px;}

/* ---------------- carta view ---------------- */
.carta-wrap{max-width:var(--maxw);margin:0 auto;padding:26px 22px 90px;display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start;}
.cat-nav{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px;}
.cat-nav .cn-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:10px;padding-left:12px;}
.cat-link{text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-soft);transition:.13s;
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cat-link:hover{background:var(--surface);color:var(--ink);}
.cat-link.active{background:var(--accent-tint);color:var(--accent-deep);font-weight:700;}
.cat-link .cl-n{background:var(--paper-2);color:var(--ink-faint);font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;}
.cat-link.active .cl-n{background:var(--accent);color:#fff;}

.carta-main{min-width:0;}
.carta-head{margin-bottom:8px;}
.carta-head .ch-kind{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;}
.carta-head h1{font-family:var(--font-display);font-size:clamp(34px,5vw,46px);margin:8px 0 0;font-weight:400;}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface-hi);border:1px solid var(--line);
  border-radius:30px;padding:10px 16px;margin:22px 0 8px;max-width:380px;}
.searchbar input{border:none;background:none;outline:none;flex:1;font-size:14.5px;}
.searchbar .clr{color:var(--ink-faint);}

.cat-section{margin-top:42px;scroll-margin-top:84px;}
.cat-section-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:10px;}
.cat-section-head h2{font-family:var(--font-display);font-size:26px;margin:0;font-weight:400;letter-spacing:.02em;text-transform:uppercase;}
.cat-section-head .csh-sub{font-size:13px;color:var(--ink-soft);font-style:italic;}
.subcat{margin-top:26px;}
.subcat-title{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 4px;
  display:flex;align-items:center;gap:9px;}
.subcat-title::after{content:"";flex:1;height:1px;background:var(--line);}

.prow{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.prow:last-child{border-bottom:none;}
.prow .pthumb{width:62px;height:62px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--line);}
.prow .pmain{flex:1;min-width:0;}
.prow .pname-line{display:flex;align-items:baseline;gap:12px;}
.prow .pname{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.01em;flex:1;text-wrap:pretty;}
.prow .leader{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:18px;}
.prow .pprice{font-family:var(--font-display);font-size:17px;color:var(--accent-deep);white-space:nowrap;font-weight:400;margin-left:auto;}
.prow .pprice.mod{color:var(--ink-soft);font-size:14px;}
.prow .pdesc{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px;max-width:62ch;text-wrap:pretty;}
.prow .pvariants{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.pvar{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:4px 10px;}
.pvar b{font-family:var(--font-display);font-weight:400;color:var(--accent-deep);}
.prow .pstar{color:var(--ocre-deep);flex-shrink:0;margin-top:2px;}

/* mobile category bar */
.mcat-bar{display:none;position:sticky;top:64px;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 0;margin:0 -22px 0;}
.mcat-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 22px;scrollbar-width:none;}
.mcat-scroll::-webkit-scrollbar{display:none;}

/* ---------------- info / reserva ---------------- */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.info-line{display:flex;gap:13px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.info-line .il-ico{width:40px;height:40px;border-radius:10px;background:var(--accent-tint);color:var(--accent-deep);display:grid;place-items:center;flex-shrink:0;}
.info-line .il-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.info-line .il-v{font-size:14.5px;margin-top:3px;}
.socials{display:flex;gap:10px;margin-top:6px;}
.soc-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-soft);transition:.15s;}
.soc-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);}

/* ============================================================
   ADMIN
   ============================================================ */
.admin{min-height:100vh;background:var(--paper);}
.admin-top{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);}
.admin-top-inner{max-width:1240px;margin:0 auto;padding:0 18px;min-height:58px;display:flex;align-items:center;gap:14px;}
.admin-top .at-brand{font-family:var(--font-display);font-size:18px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.admin-top .at-brand .pill{font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:var(--clay);padding:3px 9px;border-radius:20px;font-family:var(--font-body);font-weight:700;}
.admin-nav{display:flex;gap:4px;}
.admin-nav button{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;color:rgba(243,234,219,.65);display:flex;align-items:center;gap:7px;transition:.14s;white-space:nowrap;}
.admin-nav button:hover{color:#fff;background:rgba(255,255,255,.08);}
.admin-nav button.active{color:var(--ink);background:var(--paper);}
.admin-nav .navbadge{background:var(--clay);color:#fff;font-size:10px;font-weight:700;border-radius:20px;padding:1px 6px;}
.admin-top .at-meta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.admin-top .at-sync{font-size:11.5px;color:rgba(243,234,219,.62);display:flex;align-items:center;gap:5px;white-space:nowrap;}
.admin-top .at-user{font-size:12.5px;text-align:right;line-height:1.2;white-space:nowrap;}
.admin-top .at-user b{display:block;color:var(--paper);font-weight:600;}
.admin-top .at-user span{display:block;font-size:10.5px;color:rgba(243,234,219,.55);}
.admin-top .at-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.admin-top .at-actions .at-ico{color:rgba(243,234,219,.72);}
.admin-top .at-actions .at-ico:hover{background:rgba(255,255,255,.12);color:#fff;}
.admin-body{max-width:1240px;margin:0 auto;padding:26px 22px 80px;}
.admin-h{font-family:var(--font-display);font-size:30px;font-weight:400;margin:0 0 4px;}
.admin-sub{color:var(--ink-soft);font-size:14px;margin:0 0 22px;}

/* content tree */
.tree-layout{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;}
.panel{background:var(--surface-hi);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.panel-head{padding:13px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;}
.panel-head h4{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.panel-body{padding:8px;}
.carta-pick{display:flex;gap:6px;padding:8px;}
.carta-pick button{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid var(--line);color:var(--ink-soft);transition:.14s;}
.carta-pick button.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.trow{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;transition:.12s;}
.trow:hover{background:var(--surface);}
.trow.active{background:var(--accent-tint);}
.trow .tname{flex:1;min-width:0;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow .tcount{font-size:11px;color:var(--ink-faint);font-weight:700;background:var(--paper-2);padding:1px 7px;border-radius:20px;}
.trow .tactions{display:flex;gap:1px;opacity:0;transition:.12s;}
.trow:hover .tactions,.trow.active .tactions{opacity:1;}
.tmove{display:flex;flex-direction:column;}
.tmove button{width:22px;height:14px;display:grid;place-items:center;color:var(--ink-faint);}
.tmove button:hover{color:var(--accent);}

.prod-admin-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-hi);margin-bottom:8px;transition:.12s;}
.prod-admin-row:hover{border-color:var(--ink-faint);box-shadow:var(--shadow-sm);}
.prod-admin-row.inactive{opacity:.55;}
.prod-admin-row .pa-thumb{width:46px;height:46px;border-radius:9px;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-faint);overflow:hidden;flex-shrink:0;}
.prod-admin-row .pa-thumb img{width:100%;height:100%;object-fit:cover;}
.prod-admin-row .pa-main{flex:1;min-width:0;}
.prod-admin-row .pa-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px;}
.prod-admin-row .pa-meta{font-size:12.5px;color:var(--ink-faint);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch;}
.prod-admin-row .pa-price{font-family:var(--font-display);font-size:15px;color:var(--accent-deep);white-space:nowrap;}

.section-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap;}
.crumb{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:14px;flex-wrap:wrap;}
.crumb b{color:var(--ink);font-weight:700;}
.crumb .sep{color:var(--ink-faint);}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;}
.dash-tab{padding:9px 16px;border-radius:30px;font-size:14px;font-weight:600;border:1px solid var(--line);color:var(--ink-soft);transition:.14s;}
.dash-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px;}
.stat{background:var(--surface-hi);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.stat .s-l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}
.stat .s-v{font-family:var(--font-display);font-size:32px;margin-top:8px;line-height:1;}
.stat .s-sub{font-size:12.5px;color:var(--ink-soft);margin-top:6px;}
.card{background:var(--surface-hi);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.card-h h3{font-family:var(--font-display);font-size:20px;font-weight:400;margin:0;}

table.gc{width:100%;border-collapse:collapse;font-size:13.5px;}
table.gc th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);}
table.gc td{padding:9px 10px;border-bottom:1px solid var(--line-soft);}
table.gc th.num,table.gc td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.gc tr:last-child td{border-bottom:none;}
.bar-track{height:8px;background:var(--paper-2);border-radius:20px;overflow:hidden;min-width:60px;}
.bar-fill{height:100%;background:var(--accent);border-radius:20px;}

/* menu engineering quadrants */
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.quad{border-radius:var(--radius);padding:16px;border:1px solid var(--line);min-height:120px;}
.quad .q-l{font-family:var(--font-display);font-size:18px;}
.quad .q-d{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.quad .q-items{margin-top:10px;display:flex;flex-direction:column;gap:4px;font-size:13px;}
.quad.star{background:rgba(188,134,56,.10);border-color:rgba(188,134,56,.35);}
.quad.horse{background:rgba(94,107,59,.10);border-color:rgba(94,107,59,.3);}
.quad.puzzle{background:rgba(122,50,67,.09);border-color:rgba(122,50,67,.3);}
.quad.dog{background:rgba(120,90,50,.08);border-color:var(--line);}

.day-prod-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.day-prod-row .dp-main{flex:1;min-width:0;}
.day-prod-row .dp-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.day-prod-row .dp-cat{font-size:11.5px;color:var(--ink-faint);}
.qty-input{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.qty-input button{width:30px;height:32px;display:grid;place-items:center;color:var(--ink-soft);background:var(--surface);}
.qty-input button:hover{background:var(--accent);color:#fff;}
.qty-input input{width:46px;height:32px;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);outline:none;font-weight:700;}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;}
.login-card{background:var(--surface-hi);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;max-width:380px;width:100%;box-shadow:var(--shadow-lg);text-align:center;}
.login-card .lc-seal{width:58px;height:58px;border-radius:14px;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin:0 auto 16px;font-family:var(--font-display);font-size:26px;}

.fab-admin{position:fixed;bottom:18px;right:18px;z-index:60;width:44px;height:44px;border-radius:50%;background:var(--ink);
  color:var(--paper);display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:.32;transition:.2s;}
.fab-admin:hover{opacity:1;transform:scale(1.06);}

/* ---------------- responsive ---------------- */
@media(max-width:880px){
  .carta-wrap{grid-template-columns:1fr;gap:0;}
  .cat-nav{display:none;}
  .mcat-bar{display:block;}
  .carta-cards{grid-template-columns:1fr;}
  .tree-layout{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .brandmark .bt{display:none;}
  .quad-grid{grid-template-columns:1fr;}
  .brand-cols{grid-template-columns:1fr !important;}
  .resumen-cols{grid-template-columns:1fr !important;}
  .admin-top .at-user{display:none;}
}
@media(max-width:1100px){
  /* el panel pasa a 2 filas: marca + estado + controles arriba, navegación abajo */
  .admin-top-inner{flex-wrap:wrap;min-height:0;padding:8px 16px;gap:8px 10px;}
  .admin-nav{order:5;flex-basis:100%;width:100%;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .admin-nav::-webkit-scrollbar{display:none;}
}
@media(max-width:720px){
  .tabs{display:none;}
  .topbar-actions{display:none;}
  .menu-btn{display:flex;}
}
@media(max-width:560px){
  .topbar-inner{padding:0 14px;gap:10px;}
  .brandmark .bn{font-size:17px;}
  .portada{padding:22px 14px 60px;}
  .carta-wrap{padding:18px 14px 80px;}
  .mcat-bar{margin:0 -14px;}
  .mcat-scroll{padding:0 14px;}
  .prow .pthumb{width:50px;height:50px;}
  .admin-body{padding:18px 14px 70px;}
  .admin-nav button span.lbl{display:none;}
  .admin-top .at-name{display:none;}
  .admin-top .at-sync{display:none;}
  .admin-top .at-actions .btn.sm .lbl{display:none;}
  .admin-top .at-actions .btn.sm{padding:7px 9px;}
  .dash-tab{font-size:13px;padding:8px 12px;}
}