/* ==========================================================================
   Momentia — paneles (anfitrión y administración)
   ========================================================================== */

.panel { background: var(--paper); min-height: 100vh; }
.muted { color: var(--ink-soft); }
.hint { color: var(--ink-soft); font-size: .85rem; }
.center { text-align: center; }
.stack-lg { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }

/* ---------- Chips y pills ---------- */
.status-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 650; background: rgb(255 255 255 / .12); color: var(--flash); }
.status-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-chip--active i { background: #3ee08f; box-shadow: 0 0 0 4px rgb(62 224 143 / .2); animation: pulse 2s infinite; }
.status-chip--pending i { background: var(--marigold); }
.status-chip--expired i, .status-chip--cancelled i { background: #ff6b7f; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(62 224 143 / 0); } }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: var(--r-pill); font-size: .78rem; font-weight: 650; font-family: var(--font-body); letter-spacing: 0; vertical-align: middle; background: var(--paper); color: var(--ink-soft); white-space: nowrap; }
.pill .i { width: .95em; height: .95em; }
.pill--ok, .pill--active, .pill--approved { background: var(--ok-bg); color: var(--ok); }
.pill--warn, .pill--pending { background: var(--warn-bg); color: var(--warn); }
.pill--bad, .pill--expired, .pill--cancelled, .pill--rejected { background: var(--bad-bg); color: var(--bad); }
.pill--brand { background: rgb(255 62 138 / .12); color: var(--fucsia-deep); }

/* ---------- Encabezado del anfitrión ---------- */
.host-top { background: var(--night); color: var(--flash); position: relative; overflow: hidden; padding-bottom: 2.4rem; }
.host-top::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgb(255 62 138 / .35), transparent 62%); pointer-events: none; }
.host-top::after { content: ""; position: absolute; left: -120px; bottom: -220px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgb(168 148 255 / .25), transparent 65%); pointer-events: none; }
.host-top > * { position: relative; z-index: 1; }
.host-top__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.host-top__tag { font-size: .88rem; color: rgb(255 247 234 / .65); }
.host-top__hero { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding-top: 1.6rem; }
.host-top__title h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: .8rem 0 .5rem; }
.host-top__title p { color: rgb(255 247 234 / .72); }
.host-top__title p .i { display: inline; vertical-align: -3px; margin-right: .4rem; color: var(--marigold); }

.linkbox { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-lg); padding: 1rem 1.1rem; min-width: 320px; backdrop-filter: blur(8px); }
.linkbox__label { display: block; font-size: .82rem; color: rgb(255 247 234 / .6); margin-bottom: .45rem; }
.linkbox__row { display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.linkbox__row a { color: var(--flash); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.linkbox__row a:hover { text-decoration: underline; }

.subnav { position: sticky; top: 0; z-index: 20; background: rgb(245 244 249 / .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav__row { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: .95rem .9rem; font-weight: 600; font-size: .94rem; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--ink); border-color: var(--fucsia); }

.panel-main { display: grid; gap: 1.5rem; padding-block: 1.8rem 4rem; }
.panel-main > section { scroll-margin-top: 70px; }
.panel-foot { text-align: center; color: var(--ink-soft); font-size: .9rem; }
.panel-foot a { color: var(--fucsia-deep); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; display: grid; gap: .35rem; align-content: start; }
.kpi__label { display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.kpi__label .i { color: var(--fucsia); }
.kpi__value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.kpi__value small { font-size: .95rem; font-weight: 600; color: var(--ink-faint); margin-left: .3rem; letter-spacing: 0; }
.kpi__foot { font-size: .84rem; color: var(--ink-soft); }
.kpi__foot em { font-style: normal; color: var(--warn); font-weight: 600; }
.kpi--photos { background: linear-gradient(150deg, #fff 55%, #ffeef5); }
.meter { height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; margin-top: .35rem; }
.meter i { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--fucsia), var(--marigold)); border-radius: inherit; }

/* ---------- Accesos rápidos ---------- */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.quick__item { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: 1rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.quick__item .i { grid-row: span 2; width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--night); color: var(--marigold); }
.quick__item b { font-weight: 700; }
.quick__item span { font-size: .85rem; color: var(--ink-soft); }
.quick__item:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--shadow-print); }
.quick__item:nth-child(1) .i { background: var(--fucsia); color: #fff; }

/* ---------- Tarjetas de sección ---------- */
.panel-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; }
.panel-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.panel-card__head h2 { font-size: 1.45rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel-card__head p { margin-top: .3rem; font-size: .93rem; }
.panel-card--flush { padding: 0; overflow: hidden; }
.panel-card--flush .panel-card__head { padding: 1.3rem 1.5rem 0; }

.seg { display: inline-flex; padding: 4px; background: var(--paper); border-radius: var(--r-pill); gap: 2px; }
.seg button, .seg a { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; padding: .45rem .95rem; border-radius: var(--r-pill); font-weight: 600; font-size: .88rem; color: var(--ink-soft); cursor: pointer; text-decoration: none; }
.seg .i { width: 1em; height: 1em; }
.seg .is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgb(20 14 38 / .12); }

/* ---------- Grilla de moderación ---------- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .75rem; }
.mod-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--paper); isolation: isolate; }
.mod-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.mod-tile:hover img { transform: scale(1.04); }
.mod-tile figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: .3rem; padding: 2rem .5rem .5rem; background: linear-gradient(transparent, rgb(20 14 38 / .8)); color: #fff; font-size: .78rem; }
.mod-tile__by { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-bottom: .35rem; }
.mod-tile__by .i { width: .9em; height: .9em; color: var(--fucsia); fill: var(--fucsia); }
.mod-tile__actions { display: flex; gap: 4px; flex: none; }
.mod-tile__actions button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgb(255 255 255 / .18); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s; }
.mod-tile__actions button:hover { background: rgb(255 255 255 / .34); }
.mod-tile__actions .i { width: 16px; height: 16px; }
.mod-tile.is-featured [data-act=feature] { background: var(--marigold); color: var(--night); }
.mod-tile.is-featured [data-act=feature] .i { fill: currentColor; }
.mod-tile.is-cover [data-act=cover] { background: var(--fucsia); }
.mod-tile.is-featured { box-shadow: 0 0 0 3px var(--marigold); }
.mod-tile__badge { position: absolute; top: .5rem; left: .5rem; padding: .2rem .55rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; background: var(--fucsia); color: #fff; display: none; }
.mod-tile.is-cover .mod-tile__badge--cover { display: block; }
.mod-empty { display: grid; justify-items: center; gap: .6rem; padding: 2.5rem 1rem; text-align: center; color: var(--ink-soft); border: 2px dashed var(--line); border-radius: var(--r-lg); }
.mod-empty .i { width: 38px; height: 38px; color: var(--lilac); }

/* ---------- Mensajes ---------- */
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.msg { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.msg.is-pending { background: #fffaf0; border-color: #f5e2b8; }
.msg__body p { font-size: .98rem; }
.msg__body footer { margin-top: .35rem; font-size: .84rem; color: var(--ink-soft); display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.msg__state { display: none; }
.msg.is-pending .msg__state { display: inline-flex; }
.msg__actions { display: flex; gap: .3rem; flex: none; }
.msg .msg__approve { display: none; }
.msg.is-pending .msg__approve { display: inline-flex; }
.msg.is-pending .msg__hide { display: none; }

/* ---------- Personalización ---------- */
.custom { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
.settings { display: grid; gap: 1.6rem; }
.settings__group { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.settings__group legend { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .9rem; padding: 0; }
.settings__save { display: flex; gap: .6rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--line); }

.theme-group { display: block; margin: .5rem 0 -.3rem; font-size: .82rem; font-weight: 650; color: var(--ink-soft); }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .7rem; }
.theme-opt { position: relative; display: grid; gap: .4rem; padding: 5px 5px .5rem; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.theme-opt:hover { transform: translateY(-2px); }
.theme-opt input { position: absolute; opacity: 0; }
.theme-opt:has(input:checked) { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgb(255 62 138 / .14); }
.theme-opt:has(input:focus-visible) { outline: 3px solid var(--marigold); }
.theme-opt b { font-size: .86rem; text-align: center; }

.gal-palette { display: grid; gap: .8rem; padding: .9rem; border-radius: var(--r-md); background: var(--paper); }
.gal-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.gal-preset { display: flex; height: 34px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(20 14 38 / .12); transition: transform .15s; }
.gal-preset:hover { transform: translateY(-2px); }
.gal-preset i { flex: 1; } .gal-preset i:first-child { flex: 2; }
.gal-preset.is-on { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fucsia); }
.gal-colors { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 320px; }
.gal-colors label { display: grid; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.gal-colors input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; }

.swatches { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.swatch { position: relative; cursor: pointer; }
.swatch input[type=radio] { position: absolute; opacity: 0; }
.swatch i { display: block; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: transform .15s; }
.swatch:hover i { transform: scale(1.08); }
.swatch:has(input:checked) i { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.swatch--custom input[type=color] { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); cursor: pointer; }
.swatch--custom input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch--custom input[type=color]::-webkit-color-swatch { border: 3px solid var(--white); border-radius: 50%; }

.toggle { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__ui { flex: none; position: relative; width: 46px; height: 28px; border-radius: 99px; background: #d9d6e3; transition: background .2s; margin-top: 2px; }
.toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ease); }
.toggle input:checked + .toggle__ui { background: var(--fucsia); }
.toggle input:checked + .toggle__ui::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__ui { outline: 3px solid var(--marigold); outline-offset: 2px; }
.toggle b { display: block; font-weight: 650; }
.toggle small { display: block; color: var(--ink-soft); font-size: .86rem; margin-top: .15rem; }

/* Vista previa tipo celular */
.preview { position: sticky; top: 80px; }
.preview__phone { width: 100%; aspect-ratio: 9 / 17; border-radius: 34px; border: 8px solid #0d0a18; overflow: hidden; box-shadow: var(--shadow-print); background: #0d0a18; }

/* ==========================================================================
   Administración
   ========================================================================== */
.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-side { background: var(--night); color: var(--flash); padding: 1.3rem 1rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.6rem; }
.admin-side .brand { color: var(--flash); padding-inline: .5rem; }
.admin-side__tag { display: block; font-size: .75rem; color: rgb(255 247 234 / .5); padding-inline: .55rem; margin-top: -1.2rem; }
.admin-nav { display: grid; gap: 2px; }
.admin-nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border-radius: 12px; text-decoration: none; color: rgb(255 247 234 / .72); font-weight: 550; font-size: .95rem; transition: background .15s, color .15s; }
.admin-nav a:hover { background: rgb(255 255 255 / .06); color: var(--flash); }
.admin-nav a.is-active { background: rgb(255 62 138 / .16); color: #fff; }
.admin-nav a.is-active .i { color: var(--fucsia); }
.admin-nav .count { margin-left: auto; font-size: .75rem; background: var(--marigold); color: var(--night); padding: .05rem .5rem; border-radius: 99px; font-weight: 700; }
.admin-side__foot { margin-top: auto; display: grid; gap: 2px; }
.admin-side__foot a { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 12px; text-decoration: none; color: rgb(255 247 234 / .6); font-size: .9rem; }
.admin-side__foot a:hover { background: rgb(255 255 255 / .06); color: var(--flash); }

.admin-main { padding: 1.8rem clamp(1rem, 3vw, 2.4rem) 4rem; min-width: 0; display: grid; gap: 1.5rem; align-content: start; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.admin-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.admin-head p { color: var(--ink-soft); margin-top: .35rem; }
.admin-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-crumb { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--ink-soft); text-decoration: none; margin-bottom: .4rem; }
.admin-crumb:hover { color: var(--fucsia-deep); }
.admin-topbar { display: none; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; background: #faf9fc; }
.table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fbfaff; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { color: inherit; }
.table .strong { font-weight: 650; text-decoration: none; }
.table .strong:hover { color: var(--fucsia-deep); }
.table .sub { display: block; font-size: .82rem; color: var(--ink-soft); }
.table .actions { text-align: right; white-space: nowrap; }
.table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-soft); }

.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search .i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }
.search input { width: 100%; min-height: 42px; padding: .55rem .9rem .55rem 2.5rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--white); }
.search input:focus { outline: none; border-color: var(--fucsia); }

.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 1rem; }
.chart__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.chart__bar i { display: block; width: 100%; min-height: 3px; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--fucsia), #ff8db8); opacity: .9; transition: opacity .15s; }
.chart__bar:hover i { opacity: 1; background: var(--night); }
.chart__bar span { position: absolute; bottom: calc(var(--h) + 6px); font-size: .72rem; font-weight: 700; background: var(--night); color: #fff; padding: .15rem .4rem; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.chart__bar:hover span { opacity: 1; }
.chart__axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-faint); margin-top: .5rem; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--fucsia); flex: none; }
.feed__main { flex: 1; min-width: 0; }
.feed__main b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__main small { color: var(--ink-soft); }
.feed a { text-decoration: none; }

.form-card { display: grid; gap: 1rem; }
.inline-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.inline-form .field { flex: 1; min-width: 140px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.dl-grid dt { font-size: .82rem; color: var(--ink-soft); }
.dl-grid dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.plan-edit { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto auto; gap: .6rem; align-items: end; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.plan-edit:last-child { border-bottom: 0; }
.plan-edit .field input { min-height: 42px; }
.plan-edit .toggle { align-self: center; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--night); position: relative; overflow: hidden; }
.login::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -300px; right: -200px; background: radial-gradient(circle, rgb(255 62 138 / .35), transparent 65%); }
.login::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; bottom: -250px; left: -150px; background: radial-gradient(circle, rgb(168 148 255 / .28), transparent 65%); }
.login__card { position: relative; z-index: 1; width: min(100%, 400px); background: var(--white); border-radius: 26px; padding: 2.2rem; display: grid; gap: 1.1rem; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); }
.login__card h1 { font-size: 1.7rem; }
.login__card .brand { margin-bottom: .4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .kpis, .quick { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .custom { grid-template-columns: 1fr; }
  .preview { display: none; }
  .host-top__hero { grid-template-columns: 1fr; gap: 1.2rem; }
  .linkbox { min-width: 0; }
  .admin { grid-template-columns: 1fr; }
  .admin-side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .25s var(--ease); }
  .admin.nav-open .admin-side { transform: none; box-shadow: 0 0 0 100vmax rgb(20 14 38 / .5); }
  .admin-topbar { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: var(--night); color: var(--flash); position: sticky; top: 0; z-index: 40; }
  .admin-topbar button { background: none; border: 0; color: inherit; padding: .4rem; cursor: pointer; }
  .plan-edit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kpis { gap: .6rem; }
  .kpi { padding: .9rem; }
  .kpi__value { font-size: 1.6rem; }
  .quick { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .panel-card { padding: 1.1rem; }
  .msg { flex-direction: column; align-items: stretch; }
  .mod-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .linkbox__row { flex-direction: column; align-items: stretch; }
  .chart { height: 120px; gap: 2px; }
}

/* Prórroga */
.grace { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: var(--r-lg);
  background: linear-gradient(120deg, #fff6e6, #fff); border: 1px solid #f3dca8; }
.grace__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--warn-bg); color: var(--warn); }
.grace__text > b { display: block; font-size: 1.02rem; }
.grace__text span { color: var(--ink-soft); font-size: .93rem; }
.grace__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-edit { display: flex; align-items: center; gap: .3rem; }
.inline-edit input { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 8px; padding: .25rem .4rem; font: inherit; font-weight: 600; background: transparent; }
.inline-edit input:hover, .inline-edit input:focus { border-color: var(--line); background: var(--white); outline: none; }
.wa-btn { background: #1fa855 !important; color: #fff !important; border-color: #1fa855 !important; }
.quick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 760px) { .grace { grid-template-columns: 1fr; } }

/* Responsive: nada ensancha la página en el celular */
html, body { overflow-x: clip; }
.table-wrap { position: relative; max-width: 100%; }
.admin-main > *, .two-col > *, .panel-main > *, .custom > * { min-width: 0; }
@media (max-width: 700px) {
  .filters { align-items: stretch; }
  .filters .search { max-width: none; }
  .filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .seg a, .filters .seg button { white-space: nowrap; }
  .admin-head__actions { width: 100%; }
  .dl-grid { grid-template-columns: 1fr 1fr; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .field { min-width: 0; }
}

/* Editor de invitación */
.quick__item--new .i { background: var(--fucsia) !important; color: #fff !important; }
.seg-opt { display: inline-block; padding: .5rem 1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.seg input:checked + .seg-opt { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgb(20 14 38 / .12); }
.inv-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.inv-media__item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper); }
.inv-media__item img { width: 100%; height: 100%; object-fit: cover; }
.inv-media__item form { position: absolute; top: 6px; right: 6px; }
.inv-media__item button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgb(20 14 38 / .6); color: #fff; cursor: pointer; }
.inv-media__item .i { width: 16px; height: 16px; }
.inv-place-edit { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--paper); margin: .4rem 0 1rem; }
.panel .ev.gmini[data-theme="noche"] .gmini__title { text-transform: uppercase; }

.inv-custom { margin-top: 1.4rem; padding: 1.1rem; border-radius: var(--r-md); background: var(--paper); }
.inv-colors { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
@media (max-width: 560px) { .inv-colors { grid-template-columns: repeat(2, 1fr); } }

.skin-filter { flex-wrap: wrap; margin-bottom: .6rem; }
.skin-filter button { white-space: nowrap; }

/* ==========================================================================
   Páginas del organizador
   ========================================================================== */
.org-bar { background: var(--night); color: var(--flash); }
.org-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.org-bar__brand { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.org-bar__brand small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; opacity: .7; margin-left: .3rem; }
.org-bar__nav { display: flex; gap: .2rem 1.1rem; flex-wrap: wrap; align-items: center; }
.org-bar__nav a { color: rgb(255 247 234 / .82); text-decoration: none; font-weight: 600; font-size: .92rem; }
.org-bar__nav a:hover { color: #fff; }
.org-bar__out { display: inline-flex; gap: .3rem; align-items: center; }
.org-bar__out .i { width: 16px; height: 16px; }
.org-main { padding-top: 2rem; padding-bottom: 3rem; }
.org-auth { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 3rem; align-items: center; padding: 2rem 0; }
.org-auth--narrow { grid-template-columns: minmax(0, 440px); justify-content: center; }
.org-auth__intro h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; margin: 1rem 0; }
.org-auth__intro p { color: var(--ink-soft); font-size: 1.08rem; }
.org-auth__form h1 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .4rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { margin-top: .2rem; }
.field__err { color: #c0362c; font-size: .82rem; }
.slug-input { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm, 10px); background: #fff; overflow: hidden; }
.slug-input input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.slug-input b { padding: 0 .8rem; color: var(--ink-soft); font-weight: 500; font-size: .9rem; white-space: nowrap; }
.org-head { align-items: center; }
.org-head__id { display: flex; align-items: center; gap: 1rem; }
.org-head__logo { height: 56px; width: auto; max-width: 160px; object-fit: contain; }
.org-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.org-pack { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.6rem 1.3rem 1.3rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.org-pack.is-featured { border-color: var(--fucsia); box-shadow: 0 20px 40px -26px rgb(255 62 138 / .6); }
.org-pack__badge { position: absolute; top: -12px; left: 1.2rem; padding: .25rem .7rem; border-radius: 999px; background: var(--fucsia); color: #fff; font-size: .72rem; font-weight: 700; }
.org-pack h3 { font-family: var(--font-display); font-size: 1.25rem; }
.org-pack__price { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.org-pack__per { color: var(--ink-soft); font-size: .9rem; }
.org-pack ul { list-style: none; margin: .7rem 0 1.1rem; padding: 0; display: grid; gap: .45rem; flex: 1; font-size: .92rem; }
.org-pack li { display: flex; gap: .45rem; } .org-pack li .i { flex: none; width: 17px; height: 17px; color: var(--ok); margin-top: .1rem; }
.org-lots { margin-top: 1.2rem; } .org-lots summary { cursor: pointer; font-weight: 650; }
.org-brand { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
.org-preview { display: grid; gap: .6rem; }
.org-preview__box { padding: 1.2rem; border-radius: var(--r-md); background: var(--paper); text-align: center; }
.org-preview__box .brand-credit { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); text-decoration: none; }
.org-preview__box .brand-credit__logo { height: 28px; width: auto; }
.org-preview__box .brand-credit--sub { margin-left: .6rem; font-size: .85em; opacity: .7; }
.org-preview__poster { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 1rem; border-radius: var(--r-md); background: var(--night); color: #fff; font-weight: 700; }
.org-preview__poster img { height: 26px; width: auto; }
@media (max-width: 860px) { .org-auth, .org-brand { grid-template-columns: 1fr; } }
.org-bar__brand .mark { width: 30px; height: 30px; flex: none; } .org-bar__brand > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3rem; }

/* Respuestas en vivo */
.live-dot { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .2rem .55rem; border-radius: 999px; background: rgb(22 163 74 / .1); color: #15803d; font: 600 .72rem var(--font-body); vertical-align: middle; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .3; transform: scale(.7); } }
tr.is-new { animation: row-new 3s ease-out; }
@keyframes row-new { 0%, 40% { background: rgb(255 194 61 / .25); } 100% { background: transparent; } }
/* Tamaño del evento (organizador) */
.org-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.org-size { position: relative; display: grid; gap: .15rem; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; cursor: pointer; }
.org-size input { position: absolute; opacity: 0; }
.org-size:has(input:checked) { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgb(255 62 138 / .12); }
.org-size b { font-size: 1.05rem; }
.org-size__photos { font-weight: 650; }
.org-size__guests { font-size: .84rem; color: var(--ink-soft); }
.org-size__cost { margin-top: .35rem; justify-self: start; padding: .2rem .6rem; border-radius: 999px; background: rgb(255 62 138 / .1); color: var(--fucsia-deep); font-size: .78rem; font-weight: 700; }
.org-size.is-off { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Mesas y menús
   ========================================================================== */
.mesa-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.mesa-more { position: relative; }
.mesa-more > summary { list-style: none; cursor: pointer; }
.mesa-more > summary::-webkit-details-marker { display: none; }
.mesa-more[open] > form { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 20px 40px -20px rgb(20 14 38 / .35); min-width: 300px; }
.mesa-finder { margin: 0 .4rem; }
.board { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; margin-top: .8rem; }
.board__pool { position: sticky; top: 1rem; padding: .9rem; border-radius: var(--r-lg); background: var(--paper); border: 1.5px dashed var(--line); max-height: calc(100vh - 2rem); overflow: auto; }
.board__pool h3, .mtable h3 { font-size: 1rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.board__count { padding: .1rem .5rem; border-radius: 999px; background: var(--night); color: #fff; font-size: .78rem; }
.board__list { display: grid; gap: .4rem; min-height: 44px; align-content: start; }
.board__empty { display: none; color: var(--ink-soft); font-size: .9rem; text-align: center; padding: .6rem; }
.board__pool .board__list:not(:has(.chip-g)) .board__empty { display: block; }
.board__tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.mtable { padding: .8rem; border-radius: var(--r-lg); background: #fff; border: 1.5px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.mtable.is-over { border-color: #e5484d; }
.is-target { border-color: var(--fucsia) !important; box-shadow: 0 0 0 4px rgb(255 62 138 / .14); }
.mtable__head { display: flex; align-items: center; gap: .5rem; }
.mtable__num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--night); color: #fff; font-family: var(--font-display); }
.mtable__name { flex: 1; min-width: 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; font: 650 .95rem var(--font-body); padding: .3rem .2rem; }
.mtable__name:hover, .mtable__name:focus { border-bottom-color: var(--line); outline: none; }
.mtable__del { border: 0; background: none; color: var(--ink-soft); cursor: pointer; padding: .3rem; border-radius: 8px; }
.mtable__del:hover { background: rgb(229 72 77 / .1); color: #e5484d; }
.mtable__del .i { width: 16px; height: 16px; }
.mtable__occ { display: grid; gap: .3rem; margin: .5rem 0 .6rem; }
.mtable__bar { height: 6px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.mtable__bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .3s; }
.mtable.is-over .mtable__bar i { background: #e5484d; }
.mtable__nums { font-size: .84rem; color: var(--ink-soft); }
.mtable__nums input { width: 46px; padding: .1rem .3rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.mtable.is-over .mtable__nums b { color: #e5484d; }
.chip-g { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .5rem .6rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); cursor: grab; font-size: .88rem; transition: transform .15s, box-shadow .15s; }
.board__pool .chip-g { background: #fff; }
.mtable .chip-g { background: var(--paper); }
.chip-g:hover { box-shadow: 0 6px 14px -8px rgb(20 14 38 / .4); }
.chip-g.is-drag { opacity: .4; }
.chip-g.is-moved { animation: chip-in .5s ease-out; }
@keyframes chip-in { from { transform: scale(.9); background: rgb(255 194 61 / .4); } }
.chip-g__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-g__n { flex: none; min-width: 22px; height: 22px; padding: 0 .3rem; display: grid; place-items: center; border-radius: 99px; background: var(--night); color: #fff; font-size: .75rem; font-weight: 700; }
.chip-g__tag { font-size: .72rem; padding: .1rem .45rem; border-radius: 99px; background: rgb(255 194 61 / .2); color: #8a5a00; }
.chip-g__tag--diet { background: rgb(22 163 74 / .12); color: #15803d; }
.chip-g__move { flex-basis: 100%; display: none; padding: .3rem; border-radius: 8px; border: 1px solid var(--line); font: inherit; font-size: .82rem; }
@media (hover: none), (max-width: 760px) { .chip-g__move { display: block; } .chip-g { cursor: default; } }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } .board__pool { position: static; max-height: none; } }
.menu-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.menu-sum div { padding: 1rem; border-radius: var(--r-md); background: var(--paper); display: grid; gap: .2rem; }
.menu-sum b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.menu-sum span { color: var(--ink-soft); font-size: .88rem; }
.menu-sum .is-special { background: rgb(22 163 74 / .08); }

/* Lista para el salón (imprimible) */
.print-list { background: #fff; }
.plist { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.plist__head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; border-bottom: 2px solid var(--night); padding-bottom: .8rem; margin-bottom: 1rem; }
.plist__head h1 { font-family: var(--font-display); font-size: 1.8rem; }
.plist__head p { color: var(--ink-soft); flex: 1; }
.plist__menus { padding: .8rem 1rem; background: var(--paper); border-radius: 10px; margin-bottom: 1rem; }
.plist__menus h2 { font-size: 1rem; margin-bottom: .2rem; }
.plist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.plist__table { border: 1px solid #ccc; border-radius: 8px; padding: .7rem .8rem; break-inside: avoid; }
.plist__table h3 { font-size: 1rem; display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: .3rem; margin-bottom: .4rem; }
.plist__table ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .88rem; }
.plist__table li { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; }
.plist__table em { font-style: normal; font-size: .75rem; padding: 0 .35rem; border-radius: 4px; background: #f1f1f1; }
.plist__table em.is-diet { background: #e3f6e8; }
.plist__table--none { border-style: dashed; }
@media (max-width: 700px) { .plist__grid { grid-template-columns: 1fr; } }
@media print { .no-print { display: none !important; } .plist { padding: 0; } .plist__grid { grid-template-columns: repeat(3, 1fr); } @page { size: A4; margin: 12mm; } }
