/* Panel de Duxels (admin.duxels.com): el shell (el header 2 y el footer 2 comunes de duxels-shared, el menú de los servicios a la izquierda + contenedor), con la misma paleta y
   tipografía que la página Precios. El Worker pone el header y el footer (src/site-chrome.js) y agrega sus hojas, /shared/<versión>/chrome/chrome.css y header2.css, al FINAL del
   <head>: se cargan DESPUÉS de esta. Por eso lo que aquí acomoda la paleta lleva `html` delante (una clase más de especificidad: gana a la hoja común aunque llegue después).
   El header 2 es `fixed` y deja el hueco en el <body> (margin-top: var(--dxh-h), margin-left: var(--dxh-side-w)): aquí no se le reserva nada más. */
html:root {
  --bg: #0b1020; --card: #121a33; --line: #26304f; --text: #e8ecf8; --muted: #a4adc8;
  --blue: #2a86ff; --green: #22b14c; --red: #f0392f; --radius: 12px; --menu: 248px;
  /* el alto del header 2 (header2.css lo define en <html>: 64px, 56 en celular); 0 si el header no se pudo dibujar */
  --top: var(--dxh-h, 0px);
}
* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: calc(100vh - var(--top)); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); font-size: .9rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
[hidden] { display: none !important; }

/* the common footer (duxels-shared) closes the page under the menu and the container */
html.admin-page .foot { grid-column: 1 / -1; }
/* mundo.css lifts its own cards on hover; the panel's cards stay put */
.card { transition: none; border-top-width: 1px; }
.card:hover, .card:focus-within { transform: none; box-shadow: none; }

/* the layout: (the fixed header 2 is outside the grid) the menu on the left and the container with the rest of the screen, then the footer */
.shell { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: var(--bg); }
.menu { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; background: var(--card); border-right: 1px solid var(--line); }
/* three levels (Chapa, 2026-10-20), each one indented further:
   1. the group (Secciones, Servicios, Productos): only a title, nothing to click
   2. the service (Page, Payments…): a <details> the person folds; it opens nothing itself
   3. the page (Catálogo, Precios…): the only thing that opens content */
.grp { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.grp > h2 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 4px; padding: 0 10px; }
.svc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px 4px 20px; border-radius: 8px; user-select: none; }
.svc > summary::-webkit-details-marker { display: none; }
.svc > summary::before { content: "▸"; width: .8em; flex: none; color: var(--muted); transition: transform .15s ease; }
.svc[open] > summary::before { transform: rotate(90deg); }
.svc > summary h3 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .92rem; font-weight: 600; color: var(--text); }
.svc > summary:hover { background: rgba(42, 134, 255, .12); }
.svc > summary:focus-visible, .menu li a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.svc[open] > ul { margin: 2px 0 6px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu li a { display: flex; gap: 8px; align-items: center; color: var(--text); text-decoration: none; border-radius: 8px; padding: 5px 10px 5px 46px; }
.menu li a:hover, .menu li a:focus-visible { background: rgba(42, 134, 255, .12); }
.menu li a[aria-current="page"] { background: rgba(42, 134, 255, .22); box-shadow: inset 3px 0 0 var(--blue); font-weight: 600; }
.menu .ico, .home .ico { width: 1.3em; text-align: center; flex: none; }
/* a service still to come: level 2, greyed, nothing to fold or open (the empty space stands where the arrow would be) */
/* a service still to come: greyed, it folds open on its mini ficha (what it is, its domain) and opens no page */
.menu .svc.soon > summary h3 { color: var(--muted); font-weight: 500; flex-wrap: wrap; }
.menu .ficha { margin: 2px 10px 8px 40px; padding: 8px 10px; border-left: 2px solid var(--line); font-size: .84rem; color: var(--muted); }
.menu .ficha p { margin: 0 0 4px; overflow-wrap: anywhere; }
.menu .ficha p:last-child { margin-bottom: 0; }
.menu .ficha .dom { color: var(--text); }
.tag { font-size: .68rem; text-transform: none; letter-spacing: 0; border: 1px dashed var(--line); border-radius: 999px; padding: 0 7px; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: flex; gap: 6px; align-items: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 5px 12px; cursor: default; }
.chips .tag { border: 0; padding: 0; }
.view { min-width: 0; height: calc(100vh - var(--top)); display: flex; flex-direction: column; }
.frame-host { flex: 1; min-height: 0; display: flex; }
.frame-host:empty { display: none; }
.refused { padding: 24px; color: var(--muted); }
.refused a { color: var(--blue); font-weight: 600; }
.frame-host iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }

/* the home: a greeting and every service with its pages */
.home { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 64px; }
.home > * { max-width: 1080px; }
.groups { display: grid; gap: 36px; margin-top: 24px; }
.grp-block { display: grid; gap: 20px; }
.grp-block > h2 { font-size: 1.3rem; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.svc-block h3 { font-size: 1.05rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.section { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.section h4 { font-size: 1rem; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.section p { color: var(--muted); flex: 1; }
a.section:hover, a.section:focus-visible { border-color: var(--blue); outline: none; }
.go { color: var(--blue); font-weight: 600; }

/* the menu button of the pages: only where the services' menu is off-canvas (header 2 has no place for it: its ☰ is the package's own side menu, the panel's main sections) */
.pbar, .menu-btn { display: none; }
.scrim { display: none; }
/* up to 1100px the services' menu would take the content's room next to the package's side menu (256px): it leaves the grid and comes out over the page with the button of .pbar */
@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .pbar { display: flex; flex: none; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
  .menu-btn { display: block; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .95rem; line-height: 1; min-height: 44px; padding: 6px 14px; cursor: pointer; }
  .menu-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  .svc > summary, .menu li a { min-height: 44px; }
  .menu { position: fixed; z-index: 40; left: 0; top: var(--top); bottom: 0; height: auto; width: min(82vw, 300px); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .menu-open .menu { transform: none; visibility: visible; }
  .menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  .view { height: calc(100dvh - var(--top)); min-height: 0; }
  .home { padding: 18px 16px 48px; }
}
/* the package's side menu: the items the account's role does not open stay out (sections/admin.js decides once /api/me answers, like the panel's own menu; until then only «Inicio» shows) */
.dxh-items li + li:not([data-dx]) { display: none; }
/* Clerk's user button takes the place of the header's avatar link */
.dxh-right .user-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }