/* Creative Media Hub — sistema de estilos de la plataforma.
   (Nada de esto viaja dentro de las creatividades: es solo la UI.) */

:root {
  --bg: #07090e;
  --bg-soft: #0d111a;
  --panel: #121826;
  --panel-2: #18202f;
  --line: #232c3d;
  --line-soft: #1a2233;
  --ink: #eef2f8;
  --ink-dim: #97a3b8;
  --ink-faint: #64708a;
  --brand: #3d7dff;
  --brand-soft: rgba(61, 125, 255, .14);
  --ok: #26c281;
  --warn: #f5a524;
  --err: #f5495e;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .5);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }

::selection { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------------ nav */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 14px 26px;
  background: rgba(7, 9, 14, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark {
  display: flex; gap: 2.5px; align-items: flex-end; height: 20px;
}
.logo-mark i {
  display: block; width: 4px; border-radius: 2px; background: var(--brand);
}
.logo-mark i:nth-child(1) { height: 10px; opacity: .55; }
.logo-mark i:nth-child(2) { height: 18px; }
.logo-mark i:nth-child(3) { height: 13px; opacity: .75; }
.logo-text strong { display: block; font-size: 14px; letter-spacing: .04em; }
.logo-text small { display: block; font-size: 10.5px; color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 7px 13px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--ink-dim);
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.is-active { background: var(--brand-soft); color: #9dc0ff; }

/* --------------------------------------------------------------- layout */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 26px; }

.hero { padding: 60px 0 40px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 47px); max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p { max-width: 62ch; color: var(--ink-dim); font-size: 16.5px; margin: 17px 0 0; }

.eyebrow {
  display: inline-block; margin-bottom: 15px;
  font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brand);
}

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 0 0 22px;
}
.section-head h2 { font-size: 21px; }
.section-head p { margin: 5px 0 0; color: var(--ink-dim); font-size: 14px; }

/* --------------------------------------------------------------- botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: 10px;
  background: var(--brand); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: filter .15s ease, transform .12s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; filter: none; }

/* El atributo `hidden` del navegador vale `display: none`, y lo pisa cualquier
   clase que declare un display propio. Como .btn declara inline-flex, un botón
   con `hidden` se seguía viendo —y no da error en ningún lado, se descubre
   mirando—. Es el mismo remiendo que ya tenía .dropdown-menu[hidden]. */
.btn[hidden] { display: none; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--panel); filter: none; }

.btn-soft { background: var(--panel-2); color: var(--ink); }
.btn-soft:hover { background: var(--line); filter: none; }

.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.grid-formats { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line); }

.card-body { padding: 18px 19px 19px; }
.card-body h3 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
.card-body p { margin: 7px 0 0; color: var(--ink-dim); font-size: 13.6px; line-height: 1.5; }

.code-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 5px;
  background: var(--brand-soft); color: #9dc0ff;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-dim);
  border: 1px solid var(--line-soft);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-live { background: rgba(38, 194, 129, .13); color: var(--ok); }
.badge-roadmap { background: rgba(245, 165, 36, .13); color: var(--warn); }
.badge-adapted { background: rgba(61, 125, 255, .13); color: #7ba7ff; }

/* -------------------------------------------------------------- mockups */

.stage {
  display: flex; align-items: center; justify-content: center;
  padding: 26px 18px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(61, 125, 255, .11), transparent 70%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
  min-height: 300px;
}

.mockup-phone {
  position: relative;
  padding: 11px 9px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2b3346, #141a26);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.mockup-phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 15px; border-radius: 999px; background: #0a0d14; z-index: 3;
}
.mockup-phone .screen {
  position: relative; overflow: hidden;
  border-radius: 25px; background: #000;
  width: 320px; height: 480px;
}

.mockup-browser {
  width: 100%;
  border-radius: 12px; overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.browser-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.browser-url {
  flex: 1; height: 21px; border-radius: 5px; background: var(--bg-soft);
  display: flex; align-items: center; padding: 0 9px;
  font-size: 10.5px; color: var(--ink-faint);
}
.browser-page {
  padding: 18px; background: #f4f6fa;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}

/* nota scrolleable para demostrar los formatos que reaccionan al scroll */
.browser-scroll { overflow-y: auto; background: #f4f6fa; }
.browser-scroll::-webkit-scrollbar { width: 7px; }
.browser-scroll::-webkit-scrollbar-thumb { background: #c3ccd8; border-radius: 4px; }

.scroll-cue {
  padding: 7px 12px;
  background: var(--panel-2);
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-dim); text-align: center;
}
.fake-line { width: 100%; max-width: 560px; height: 9px; border-radius: 5px; background: #dde3ec; }
.fake-line.short { width: 55%; }
.fake-line.title { height: 15px; background: #c8d2e0; width: 72%; }

.ad-slot {
  position: relative;
  background: #e9edf3;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.ad-slot iframe { display: block; border: 0; }

.frame-shell { position: relative; overflow: hidden; }
.frame-shell iframe { display: block; border: 0; transform-origin: top left; }

/* -------------------------------------------------------------- studio */

.studio { display: grid; grid-template-columns: 380px 1fr; min-height: calc(100vh - 55px); }
.studio-panel {
  border-right: 1px solid var(--line-soft);
  background: var(--bg-soft);
  padding: 22px 22px 60px;
  overflow-y: auto;
  max-height: calc(100vh - 55px);
}
.studio-preview {
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(61, 125, 255, .08), transparent 70%),
    var(--bg);
  overflow-y: auto;
  max-height: calc(100vh - 55px);
}

.steps { display: flex; gap: 5px; margin-bottom: 22px; }
.step {
  flex: 1; height: 3px; border-radius: 2px; background: var(--line-soft);
  transition: background .25s ease;
}
.step.is-done { background: var(--brand); }

.panel-title { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin: 26px 0 12px; }
.panel-title:first-of-type { margin-top: 0; }

.field { margin-bottom: 15px; }
.field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.8px; font-weight: 600; margin-bottom: 6px; color: var(--ink);
}
.field .counter { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.field .hint { font-size: 11.8px; color: var(--ink-faint); margin: 5px 0 0; line-height: 1.45; }

/* Se listan por tipo y no con `input` a secas para no pisar el selector de
   color ni las casillas. Faltaban email y password: los campos de las
   pantallas de ingreso quedaban blancos sobre el fondo oscuro. */
input[type="text"], input[type="url"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], input[type="datetime-local"],
textarea, select {
  width: 100%; padding: 9px 11px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13.5px;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); }
input::placeholder { color: var(--ink-faint); }

.color-row { display: flex; gap: 9px; align-items: center; }
input[type="color"] {
  width: 42px; height: 34px; padding: 2px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 36px; height: 20px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .18s ease; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .18s ease;
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch span:last-child { font-size: 13px; }

.drop {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 11px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); background: var(--panel);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.drop:hover { border-color: var(--brand); background: var(--panel-2); }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-thumb {
  width: 42px; height: 42px; border-radius: 7px; flex: none;
  background: var(--panel-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 17px;
}
.drop-meta { min-width: 0; flex: 1; }
.drop-meta strong { display: block; font-size: 12.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-meta small { display: block; font-size: 11.3px; color: var(--ink-faint); }
.drop.has-file { border-style: solid; border-color: var(--line); }
.drop.is-over { border-color: var(--brand); background: var(--brand-soft); }

.repeater-item {
  padding: 13px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.repeater-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.repeater-head strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.icon-btn {
  border: 0; background: transparent; color: var(--ink-faint);
  cursor: pointer; padding: 3px 6px; border-radius: 5px; font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: var(--panel-2); color: var(--err); }

.size-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.size-opt {
  position: relative;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
  cursor: pointer; transition: all .15s ease;
}
.size-opt input { position: absolute; opacity: 0; }
.size-opt strong { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.size-opt small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.size-opt.is-on { border-color: var(--brand); background: var(--brand-soft); }

/* ------------------------------------------------------------ preview */

/* Tres bloques en una fila: tamaños, dispositivo y acciones. Es grid y no flex
   porque el selector de dispositivo tiene que quedar centrado respecto de la
   fila entera, no del hueco que le dejen los otros dos —que cambian de ancho
   según cuántos tamaños haya elegidos—. */
.preview-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
}
.preview-head > .tabs:first-child { justify-self: start; flex-wrap: wrap; }
.tabs-dispositivo { justify-self: center; }
.preview-acciones { display: flex; gap: 9px; flex-wrap: wrap; justify-self: end; }

@media (max-width: 1180px) {
  .preview-head { grid-template-columns: 1fr; justify-items: center; }
  .preview-head > .tabs:first-child, .preview-acciones { justify-self: center; }
}
.tabs { display: flex; gap: 5px; background: var(--panel); padding: 4px; border-radius: 10px; }
.tab {
  padding: 6px 13px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-dim);
  font-family: inherit; font-size: 12.6px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-on { background: var(--brand); color: #fff; }

/* Alto fijo, no mínimo: la caja tiene que medir lo mismo con cualquier tamaño y
   con cualquier dispositivo. Con `min-height` la pantalla saltaba al pasar de un
   320x50 a un 300x1050 y había que volver a buscar todo con la vista. Lo que no
   entra lo acomoda el dispositivo por dentro, achicando la pieza. */
.preview-stage {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px;
  /* 600 = el dispositivo más alto (502 el teléfono) más su pie y el margen */
  padding: 26px; height: 600px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* ------------------------------------------- contexto unificado del preview */

.ctx { display: flex; flex-direction: column; align-items: center; gap: 13px; }

.ctx-pie {
  margin: 0; text-align: center;
  font-size: 12px; color: var(--ink-faint);
}

/* El recorte del dispositivo: acá adentro cae la nota y, si la pieza es
   intersticial, la capa que la tapa. */
.ctx-lienzo { position: relative; overflow: hidden; }

.ctx-navegador { flex: none; }

.ctx-scroll { overflow-y: auto; background: #f4f6fa; }
.ctx-scroll::-webkit-scrollbar { width: 7px; }
.ctx-scroll::-webkit-scrollbar-thumb { background: #c3ccd8; border-radius: 4px; }

/* La barra de dirección del teléfono. Es lo que hace evidente que atrás hay un
   sitio, también cuando el intersticial lo tapa. La dirección se apoya abajo:
   arriba pasa el recorte de la cámara y le partía el texto al medio. */
.mini-barra {
  height: 44px; display: flex; align-items: flex-end;
  padding: 0 11px 6px; background: #e6eaf1;
  border-bottom: 1px solid #d3dae5;
  font-size: 10px; color: #6b7688;
  white-space: nowrap; overflow: hidden;
}

.ctx-capa {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 11, .66);
}

.empty-state {
  text-align: center; color: var(--ink-faint); max-width: 42ch;
}
.empty-state h3 { font-size: 16px; color: var(--ink-dim); margin-bottom: 7px; }
.empty-state p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* ----------------------------------------------------------------- QA */

.qa {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
}
.qa-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 17px; border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.qa-head h3 { font-size: 14.5px; }
.qa-head p { margin: 3px 0 0; font-size: 12.3px; color: var(--ink-faint); }

.qa-list { padding: 6px 0; max-height: 260px; overflow-y: auto; }
.qa-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px 17px;
}
.qa-dot {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #06121a;
}
.qa-dot.ok { background: var(--ok); }
.qa-dot.warn { background: var(--warn); }
.qa-dot.error { background: var(--err); color: #fff; }
.qa-item strong { display: block; font-size: 13px; font-weight: 600; }
.qa-item small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-top: 2px; }
.qa-item.is-bad strong { color: var(--ink); }
.qa-item.is-bad small { color: #ffb3bd; }

.weights {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 12px 17px; border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.weight { font-size: 12px; color: var(--ink-faint); }
.weight strong { display: block; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.weight.over strong { color: var(--warn); }

/* --------------------------------------------------------------- misc */

.notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--brand-soft); border: 1px solid rgba(61, 125, 255, .25);
  font-size: 13px; color: #c3d8ff; line-height: 1.5;
}
.notice strong { color: #fff; }

.footer {
  margin-top: 70px; padding: 26px 0 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint); font-size: 12.5px;
}
.footer a { color: var(--ink-dim); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  padding: 12px 20px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 13.5px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; }
  .studio-panel { max-height: none; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .studio-preview { max-height: none; }
}

/* ═══════════════════════════════════════════ acceso y administración ═══ */

/* ---------------------------------------------- pantallas de ingreso */

.acceso {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
}
.acceso-caja {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.acceso-caja h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.acceso-caja > p { margin: 0 0 22px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; }
.acceso-caja .field { margin-bottom: 14px; }
.acceso-caja .btn { width: 100%; justify-content: center; margin-top: 6px; }
.acceso-marca {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 26px;
}
.acceso-pie {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-faint); line-height: 1.5;
}

/* El aviso no puede depender solo del color: se acompaña con un símbolo. */
.aviso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.45;
  margin-bottom: 16px;
}
.aviso::before { font-style: normal; flex: none; }
.aviso-error { background: rgba(245,73,94,.12); color: #ffb3bd; }
.aviso-error::before { content: "✕"; }
.aviso-ok { background: rgba(38,194,129,.12); color: #8ce9c0; }
.aviso-ok::before { content: "✓"; }
.aviso-info { background: var(--panel-2); color: var(--ink-dim); }
.aviso-info::before { content: "i"; font-weight: 700; opacity: .6; }

/* ------------------------------------------------- barra de sesión */

.sesion-barra { display: flex; align-items: center; gap: 12px; }
.sesion-org, .sesion-quien { font-size: 12.5px; color: var(--ink-dim); }
.sesion-quien em {
  font-style: normal; color: var(--ink-faint);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  margin-left: 5px;
}
.sesion-orgs {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 10px; font-family: inherit; font-size: 12.5px;
  max-width: 200px;
}

/* -------------------------------------------------- administración */

.admin { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .admin { grid-template-columns: 1fr; } }

.admin-lista { display: flex; flex-direction: column; gap: 8px; }
.org-item {
  text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.org-item:hover { border-color: var(--line); background: var(--panel-2); }
.org-item.is-on { border-color: var(--brand); background: var(--brand-soft); }
.org-item strong { font-size: 14px; font-weight: 650; }
.org-item span { font-size: 11.5px; color: var(--ink-dim); }
.org-item.esta-suspendida strong { opacity: .55; text-decoration: line-through; }

.admin-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.admin-panel h2 { margin: 0 0 3px; font-size: 18px; letter-spacing: -.02em; }
.admin-panel > p { margin: 0 0 20px; color: var(--ink-dim); font-size: 13px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); font-weight: 700;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--line);
}
.tabla td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .apagado { opacity: .5; }

.formato-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; margin: 0 5px 5px 0;
  border-radius: 100px; font-size: 11.5px;
  border: 1px solid var(--line); background: var(--panel-2);
  cursor: pointer; font-family: inherit; color: var(--ink-dim);
}
.formato-chip.esta-dado { border-color: var(--ok); color: #8ce9c0; background: rgba(38,194,129,.1); }
.formato-chip.solo-reapertura { border-color: var(--warn); color: #ffd48a; background: rgba(245,165,36,.08); }
.formato-chip:disabled { opacity: .5; cursor: wait; }

.enlace-copiar {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
}
.enlace-copiar input {
  flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
}

/* ---------------------------------------------- formulario de una marca */

.marca-form {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
}
.marca-form .panel-title { margin-top: 0; }
.marca-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.marca-form .color-row input[type="text"] {
  font-family: ui-monospace, Menlo, monospace;
  text-transform: lowercase;
}

/* El recuadro del logo. Va sobre un damero y no sobre un color liso: casi todos
   los logos son PNG con transparencia, y sobre un fondo plano no hay forma de
   distinguir un recorte de un rectángulo blanco —que es justo el error que se
   quiere ver antes de que llegue a una pieza—. */
.marca-logo {
  width: 96px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px;
  background-color: var(--panel);
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.marca-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.marca-logo span { font-size: 11px; color: var(--ink-faint); }

/* La biblioteca. Mismo damero que el logo y por lo mismo: casi todo lo que se
   guarda acá son recortes, y sobre un fondo liso no se distingue un PNG con
   transparencia de uno con fondo blanco. */
.marca-biblioteca { display: flex; flex-wrap: wrap; gap: 10px; }
.marca-img {
  position: relative; margin: 0; width: 104px;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background-color: var(--panel);
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.marca-img img { width: 100%; height: 66px; object-fit: contain; display: block; }
.marca-img figcaption {
  font-size: 11px; color: var(--ink-dim); padding: 5px 6px;
  background: var(--panel-2); border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.marca-img [data-sacar-img] {
  position: absolute; top: 2px; right: 2px; padding: 2px 7px; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--line);
}

/* -------------------------------------------------------------- dropdown
   Las acciones de la pieza (paquete, guía, ficha) en un solo botón. El menú se
   posiciona a la derecha porque cuelga del borde derecho de la barra: abriendo
   hacia la izquierda se salía de la pantalla en el ancho de una notebook. */

.dropdown { position: relative; display: inline-block; }

.dropdown-caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease;
}
.dropdown[data-abierto] .dropdown-caret { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 40;
  min-width: 310px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.dropdown-menu[hidden] { display: none; }

.dropdown-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--panel-2); outline: none; }
.dropdown-item:focus-visible { box-shadow: inset 0 0 0 1px var(--brand); }
.dropdown-item strong { font-weight: 600; }
.dropdown-item span { color: var(--ink-dim); font-size: 12.5px; line-height: 1.4; }
.dropdown-item:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------ ficha de especificaciones */

.spec-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow);
  /* El diálogo es una columna con el cuerpo scrolleable: sin esto el pie con el
     botón de descarga se va abajo de todo y hay que scrollear para encontrarlo. */
  flex-direction: column; overflow: hidden;
}
.spec-dialog[open] { display: flex; }
.spec-dialog::backdrop { background: rgba(4, 6, 11, .72); }

.spec-head, .spec-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: var(--panel-2); flex: 0 0 auto;
}
.spec-head { border-bottom: 1px solid var(--line); }
.spec-foot { border-top: 1px solid var(--line); }
.spec-head h2 { font-size: 17px; }
.spec-foot .hint { margin: 0; }

.spec-body { padding: 4px 20px 20px; overflow-y: auto; flex: 1 1 auto; }
.spec-body h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin: 24px 0 10px;
}
.spec-body code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: var(--bg-soft); padding: 1px 5px; border-radius: 5px;
}
.spec-tagline { margin: 16px 0 0; color: var(--ink-dim); font-size: 14px; }
.spec-resumen { margin: 8px 0 0; font-size: 14px; }

.spec-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-tabla th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-faint);
  padding: 0 10px 7px 0; border-bottom: 1px solid var(--line);
}
.spec-tabla td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec-tabla tr:last-child td { border-bottom: 0; }

.spec-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.spec-item:last-child { border-bottom: 0; }
.spec-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.spec-item p { margin: 3px 0; font-size: 13.5px; }
.spec-entrega { color: var(--ink); }
.spec-proceso, .spec-nota, .spec-sub { color: var(--ink-dim); }
.spec-sub { font-size: 12.5px; }

.spec-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--line);
}
.spec-tag-req { background: var(--brand-soft); color: #9dc0ff; border-color: transparent; }

.spec-lista { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-dim); }
.spec-lista li { margin-bottom: 6px; }
.spec-lista strong { color: var(--ink); }

.spec-aviso {
  margin: 12px 0 0; padding: 10px 13px;
  background: var(--bg-soft); border-left: 2px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; color: var(--ink-dim);
}
.spec-aviso strong { color: var(--ink); }

@media (max-width: 620px) {
  /* Colgado del borde derecho del botón, el menú se sale por la IZQUIERDA
     cuando la barra se centra: 310 px de menú no entran a la izquierda de un
     botón que quedó en el medio de una pantalla angosta, y la página empieza a
     scrollear de costado. En angosto se ancla a la ventana y el problema
     desaparece sin depender de dónde cayó el botón.

     Y se ancla ABAJO, no bajo el botón: con `position: fixed`, un `top: auto`
     cae en la posición ESTÁTICA, que en esta página está a casi 3000 px del
     inicio del documento y deja el menú fuera de la pantalla. El pie es el
     único punto que no depende de dónde quedó el botón. */
  .dropdown-menu {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    min-width: 0;
  }
  .spec-foot { flex-direction: column; align-items: stretch; }
  /* Las tablas no se apilan: en una ficha, "32 caracteres" sin el nombre del
     campo al lado no dice nada. Se scrollean. */
  .spec-body { overflow-x: hidden; }
  .spec-tabla { display: block; overflow-x: auto; white-space: nowrap; }
}