/* ==========================================================================
   admin.css · Panel de administración.

   Tema CLARO, a diferencia del juego: se opera de día, en una laptop, leyendo
   tablas largas.

   El chrome usa el verde institucional de Megalabs y no el violeta de la
   agencia: a este panel entra el equipo del cliente, no nosotros.

   Quien lo usa NO es técnico: es alguien de marketing que necesita cargar
   preguntas, cambiar los logos del front y bajar la base en Excel. Todo tiene
   que ser obvio sin explicación.
   ========================================================================== */

:root {
  --admin-chrome: var(--teal-600, #008063);
  --admin-bg: #F6F5F9;
  --admin-superficie: #FFFFFF;
  --admin-borde: #E2E0EA;
  --admin-texto: var(--ink-900, #1A1F1F);
  --admin-texto-2: var(--ink-500, #7A8991);
  /* Alias: el CSS agregado después usa este nombre. */
  --admin-texto-suave: var(--admin-texto-2);
  --admin-radio: 12px;
  --admin-sombra: 0 1px 2px rgba(26, 31, 31, 0.06), 0 4px 16px rgba(26, 31, 31, 0.05);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  /* 16px, no 14: la tabla de participantes se lee durante horas. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--admin-texto);
  background: var(--admin-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--admin-chrome); }

:focus-visible {
  outline: 3px solid var(--admin-chrome);
  outline-offset: 2px;
  border-radius: 6px;
}

.tabular { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Login
   ========================================================================== */
.login-body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, #FFFFFF 0%, var(--admin-bg) 55%, #E6F0EC 100%);
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100%, 440px);
}
.login__marca { width: 200px; height: auto; }

.login__caja {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 32px;
  border-radius: var(--admin-radio);
  background: var(--admin-superficie);
  border: 1px solid var(--admin-borde);
  box-shadow: var(--admin-sombra);
}

.login__titulo { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.login__bajada { color: var(--admin-texto-2); font-size: 15px; }
.login__pie { color: var(--admin-texto-2); font-size: 13px; text-align: center; }

/* ==========================================================================
   Campos
   ========================================================================== */
.campo-admin { display: flex; flex-direction: column; gap: 6px; }
.campo-admin__label { font-size: 14px; font-weight: 600; }

.campo-admin__input,
.campo-admin select,
.campo-admin textarea,
select.campo-admin__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--admin-borde);
  background: #FFF;
  transition: border-color 140ms ease;
}
.campo-admin__input:focus,
.campo-admin textarea:focus { border-color: var(--admin-chrome); outline: none; }
.campo-admin textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.campo-admin__ayuda { font-size: 13px; color: var(--admin-texto-2); }

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--admin-borde);
  border-radius: 8px;
  background: #FFF;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}
.boton:hover { background: #FAFAFC; }
.boton:active { transform: scale(0.98); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.boton--primario {
  background: var(--admin-chrome);
  border-color: var(--admin-chrome);
  /* Blanco sobre violeta Porta: 10.55:1. El único par de marca que lo permite. */
  color: #FFF;
}
.boton--primario:hover { background: #43206C; }

.boton--peligro { border-color: #D93A3A; color: #B32A2A; }
.boton--peligro:hover { background: #FDF2F2; }

.boton--ancho { width: 100%; }
.boton--chico { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Estructura del panel
   ========================================================================== */
.panel {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.lateral {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  background: var(--admin-chrome);
  color: #FFF;
}
/* La versión blanca completa, que va directo sobre el chrome oscuro. El
   genérico a color queda para el login, que tiene fondo claro. */
.lateral__marca { width: 150px; height: auto; margin: 4px 8px 22px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.nav__item:hover { background: rgba(255, 255, 255, 0.1); color: #FFF; }
.nav__item[aria-current='page'] { background: rgba(255, 255, 255, 0.18); color: #FFF; }
.nav__item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lateral__pie {
  margin-top: auto;
  padding: 12px 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.contenido { padding: 28px 32px 64px; min-width: 0; }

.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.encabezado h1 { font-family: var(--font-display); font-size: 27px; font-weight: 700; }
.encabezado p { color: var(--admin-texto-2); font-size: 15px; }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Tarjetas y métricas
   ========================================================================== */
.tarjeta {
  padding: 20px;
  border-radius: var(--admin-radio);
  background: var(--admin-superficie);
  border: 1px solid var(--admin-borde);
  box-shadow: var(--admin-sombra);
}
.tarjeta + .tarjeta { margin-top: 18px; }
.tarjeta__titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.metrica {
  padding: 18px;
  border-radius: var(--admin-radio);
  background: var(--admin-superficie);
  border: 1px solid var(--admin-borde);
  box-shadow: var(--admin-sombra);
}
.metrica__valor {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metrica__label { font-size: 13.5px; color: var(--admin-texto-2); margin-top: 2px; }
/* La métrica que importa es cuánta gente participó: se destaca sola. */
.metrica--destacada { background: var(--admin-chrome); border-color: var(--admin-chrome); color: #FFF; }
.metrica--destacada .metrica__label { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   Alertas
   ========================================================================== */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid;
  font-size: 14.5px;
  font-weight: 500;
}
.alerta--error   { background: #FDF2F2; border-color: #F0C4C4; color: #93231F; }
.alerta--aviso   { background: #FEF6E3; border-color: #F4DFA8; color: #7A5307; }
.alerta--ok      { background: #EFF7EA; border-color: #CBE3BC; color: #3B6B22; }
.alerta[hidden]  { display: none; }
.alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

/* ==========================================================================
   Tabla
   ========================================================================== */
.tabla-marco {
  border-radius: var(--admin-radio);
  background: var(--admin-superficie);
  border: 1px solid var(--admin-borde);
  box-shadow: var(--admin-sombra);
  /* Scroll propio: el body nunca scrollea de costado. */
  overflow-x: auto;
}

.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th, .tabla td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #FBFAFD;
  border-bottom: 1.5px solid var(--admin-borde);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-texto-2);
}
.tabla tbody tr { border-bottom: 1px solid #F0EFF4; }
.tabla tbody tr:nth-child(even) { background: #FCFCFD; }
.tabla tbody tr:hover { background: #F7F5FB; }
.tabla td.envolver { white-space: normal; min-width: 300px; }
.tabla__acciones { display: flex; gap: 6px; }

.vacio { padding: 44px 20px; text-align: center; color: var(--admin-texto-2); }

/* ==========================================================================
   Chips
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.chip--generales  { background: #D9F2F2; color: #0A5F5F; }
.chip--repofloran { background: #FCE7F1; color: #B32A6F; }
.chip--gris       { background: #EEEDF2; color: #55525F; }
.chip--kiosco     { background: #E8F0FB; color: #24507F; }
.chip--offline    { background: #FEF6E3; color: #7A5307; }
.chip--manual     { background: #EEEDF2; color: #55525F; }
.chip--ok         { background: #EFF7EA; color: #3B6B22; }
.chip--revisar    { background: #FEF6E3; color: #7A5307; }
.chip--activa     { background: #EFF7EA; color: #3B6B22; }
.chip--inactiva   { background: #F4F3F6; color: #78757F; }

/* Barra de % de acierto. Fuera de rango es una SEÑAL, no un error: menos de
   30% suele ser una pregunta ambigua; más de 95%, una trivial. */
.barra { display: flex; align-items: center; gap: 8px; min-width: 118px; }
.barra__pista { flex: 1; height: 7px; border-radius: 999px; background: #ECEAF1; overflow: hidden; }
.barra__valor { height: 100%; border-radius: 999px; background: #6FB043; }
.barra[data-fuera] .barra__valor { background: #D93A3A; }
.barra__num { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ==========================================================================
   Filtros
   ========================================================================== */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--admin-radio);
  background: var(--admin-superficie);
  border: 1px solid var(--admin-borde);
}
.filtros .campo-admin { min-width: 148px; }
.filtros .campo-admin--ancho { flex: 1 1 260px; }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--admin-texto-2);
}

/* ==========================================================================
   Toggle
   ========================================================================== */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__pista {
  width: 46px; height: 26px; border-radius: 999px;
  background: #D2CFDC; position: relative; transition: background-color 160ms ease; flex: none;
}
.toggle__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 160ms ease;
}
.toggle input:checked + .toggle__pista { background: #6FB043; }
.toggle input:checked + .toggle__pista::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle__pista { outline: 3px solid var(--admin-chrome); outline-offset: 2px; }

/* Interruptores de emergencia: se usan durante el evento, con apuro. */
.emergencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.emergencia__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--admin-borde); background: #FFF;
}
.emergencia__item strong { display: block; font-size: 15px; }
.emergencia__item span { font-size: 13px; color: var(--admin-texto-2); }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: rgba(26, 31, 31, 0.55);
}
.modal[hidden] { display: none; }
.modal__caja {
  width: min(100%, 940px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px;
  border-radius: 14px;
  background: var(--admin-superficie);
  box-shadow: 0 24px 64px rgba(26, 31, 31, 0.28);
}
.modal__titulo { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 16px; }
.modal__pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ==========================================================================
   Editor de preguntas + previsualización TV
   ========================================================================== */
.editor { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.editor__campos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.opcion-editor {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--admin-borde);
  border-radius: 10px;
}
.opcion-editor:has(input[type='radio']:checked) { border-color: #6FB043; background: #FAFDF8; }
.opcion-editor__marca { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; }
.opcion-editor__letra { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.opcion-editor input[type='radio'] { width: 22px; height: 22px; accent-color: #6FB043; }

.contador { font-size: 12.5px; color: var(--admin-texto-2); text-align: right; }
.contador[data-excedido] { color: #B32A2A; font-weight: 700; }

/**
 * Previsualización en formato TV. Sin esto alguien carga una pregunta de 350
 * caracteres, se ve horrible en la TV y nadie lo nota hasta que hay público
 * delante (docs/05-PANEL-ADMIN.md §5.3).
 */
.previsualizacion { position: sticky; top: 20px; align-self: start; }
.previsualizacion__marco {
  aspect-ratio: 9 / 16;
  padding: 16px;
  border-radius: 14px;
  border: 3px solid #2B3333;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #0C7A7A 0%, #084848 45%, #042E2E 100%);
  color: #FFF;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  overflow: hidden;
}
.previsualizacion__eyebrow { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #8CCECE; text-align: center; }
.previsualizacion__pregunta {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  align-self: center;
  text-wrap: balance;
}
.previsualizacion__opciones { display: flex; flex-direction: column; gap: 6px; }
.previsualizacion__opcion {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;
  padding: 8px; border-radius: 8px;
  background: #0A5F5F; border: 1px solid rgba(75,188,188,.4);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; line-height: 1.25;
}
.previsualizacion__token {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #00ABAC; color: #1A1F1F; font-weight: 800; font-size: 10px;
}
.previsualizacion__aviso { margin-top: 10px; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 16px; border-radius: 10px; background: var(--admin-texto); color: #FFF;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.24);
  animation: toast-entra 180ms ease both;
}
.toast--error { background: #B32A2A; }
.toast--ok { background: #3B6B22; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive · alguien va a abrir esto desde el celular, parado en el stand
   ========================================================================== */
@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
  .lateral {
    position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 8px; overflow-x: auto;
  }
  .lateral__marca, .lateral__pie { display: none; }
  .nav__item { flex: none; padding: 9px 12px; font-size: 14px; }
  .contenido { padding: 18px 14px 56px; }
  .editor { grid-template-columns: 1fr; }
  .previsualizacion { position: static; max-width: 300px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   UTILIDADES
   --------------------------------------------------------------------------
   La CSP del sitio no permite 'unsafe-inline' en style-src, así que NINGÚN
   componente puede usar el atributo style="". Estas clases reemplazan lo que
   normalmente se escribiría inline. Verificado en el navegador: con estilos
   inline, la consola se llena de violaciones de CSP y el layout se rompe.

   Único valor dinámico permitido: element.style.setProperty('--x', v), que la
   CSP sí acepta. Por eso las barras usan --pct en vez de width inline.
   ========================================================================== */
.pila        { display: flex; flex-direction: column; gap: 14px; }
.pila--16    { display: flex; flex-direction: column; gap: 16px; }
.pila--form  { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.fila        { display: flex; gap: 12px; flex-wrap: wrap; }
.contents    { display: contents; }
.min0        { min-width: 0; }

.apagado     { color: var(--admin-texto-2); }
.nota        { color: var(--admin-texto-2); font-size: 14.5px; }
.nota--sm    { color: var(--admin-texto-2); font-size: 14px; }
.nota--mb    { margin-bottom: 12px; }
.mb-8        { margin-bottom: 8px; }
.mb-14       { margin-bottom: 14px; }
.mb-18       { margin-bottom: 18px; }
.mt-12-fuerte { margin-top: 12px; font-weight: 600; }
.mt-14       { margin-top: 14px; }
.pt-6        { padding-top: 6px; }

.semilla {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
}
.detalle-json {
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
}
.detalle-resumen { cursor: pointer; font-size: 13.5px; }

/* Gráfico de actividad por hora. La altura de cada barra llega por la custom
   property --alto, que la CSP sí permite setear desde JS. */
.grafico { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.grafico__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.grafico__barra {
  width: 100%;
  background: var(--admin-chrome);
  border-radius: 4px 4px 0 0;
  height: var(--alto, 4%);
  min-height: 4px;
}
.grafico__n { font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico__hora { font-size: 11px; color: var(--admin-texto-2); }

/* La barra de % de acierto también toma su ancho de una custom property. */
.barra__valor { width: var(--pct, 0%); }

.nav__item--salir { margin-top: 6px; }

/* La zona de riesgo se distingue del resto de Configuración: lo que hay
   adentro es irreversible y no puede parecer un ajuste más. */
.tarjeta--riesgo {
  border-color: #F0C4C4;
  background: #FEFAFA;
}
.tarjeta--riesgo .tarjeta__titulo { color: #93231F; }

/* ==========================================================================
   Componentes agregados para Megalabs: selector de imagen, listas del front y
   estado de la sala.
   ========================================================================== */

/* El input de archivo real: se opera desde un botón, pero tiene que seguir
   existiendo en el DOM y ser alcanzable por teclado. `display: none` lo saca
   del orden de foco; esto no. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.imagen-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.imagen-selector__vista {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 8px;
  border: 1px dashed var(--admin-borde);
  border-radius: var(--admin-radio);
  background: var(--admin-bg);
}

.imagen-selector__img {
  max-height: 68px;
  max-width: 100%;
  width: auto;
}

.imagen-selector__vacio {
  font-size: 12px;
  color: var(--admin-texto-suave);
}

.imagen-selector__acciones {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Miniatura dentro de una tabla o de la previsualización. */
.miniatura {
  height: 32px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}

/* El editor de opciones pasa a cuatro columnas: marca, texto, imagen, quitar. */
.opcion-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 140px auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--admin-borde);
}

.lista-marca {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* `start` y no `end`: el selector de imagen ahora es alto —trae la spec, la
   vista previa, las medidas y los avisos— y alinear abajo dejaba el campo del
   nombre flotando solo al pie de una columna vacía. */
.lista-marca__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--admin-borde);
}

.presencia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.presencia__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--admin-borde);
}

.presencia__punto--ok {
  background: #2E9E52;
  box-shadow: 0 0 8px rgba(46, 158, 82, 0.5);
}

@media (max-width: 900px) {
  .opcion-editor,
  .lista-marca__item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Especificaciones y biblioteca del selector de imágenes.
   Existen porque los dos errores que más cuestan al cargar material —una
   imagen sin transparencia y una demasiado chica— no se ven en una miniatura
   de 80 píxeles: se ven en la TV, el día del evento.
   -------------------------------------------------------------------------- */

.imagen-selector__spec {
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-chrome);
  margin: 0;
}

.imagen-selector__nota {
  font-size: 12px;
  color: var(--admin-texto-2);
  line-height: 1.35;
  margin: 0;
}

.imagen-selector__medidas {
  font-size: 12px;
  color: var(--admin-texto-2);
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
  margin: 0;
}

.imagen-selector__avisos:empty {
  display: none;
}

.imagen-selector__avisos .alerta {
  font-size: 12px;
  padding: 6px 10px;
  margin-top: 6px;
}

/* La galería se abre acá adentro y no en un modal: el panel tiene uno solo, y
   abrirlo desde el editor de preguntas vaciaría la pregunta a medio escribir. */
.galeria {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--admin-borde);
  border-radius: var(--admin-radio);
  background: var(--admin-bg);
  max-height: 320px;
  overflow-y: auto;
}

.galeria__grupo + .galeria__grupo {
  margin-top: 12px;
}

.galeria__titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-texto-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

.galeria__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.galeria__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.galeria__boton {
  display: grid;
  place-items: center;
  height: 68px;
  padding: 6px;
  border: 1px solid var(--admin-borde);
  border-radius: 8px;
  /* Un damero claro detrás: es la única forma de VER la transparencia en una
     miniatura, y es justamente lo que hay que poder ver antes de elegir. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #E8ECEA 25%, transparent 25%),
    linear-gradient(-45deg, #E8ECEA 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E8ECEA 75%),
    linear-gradient(-45deg, transparent 75%, #E8ECEA 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  cursor: pointer;
}

.galeria__boton:hover {
  border-color: var(--admin-chrome);
}

.galeria__boton img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.galeria__medida {
  font-size: 10px;
  color: var(--admin-texto-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.galeria__borrar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--admin-borde);
  background: var(--admin-superficie);
  color: var(--admin-texto-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.galeria__borrar:hover {
  background: #C4452C;
  border-color: #C4452C;
  color: #fff;
}

/* La vista previa también con damero: si el packshot trae fondo blanco, acá se
   nota antes de guardarlo. */
.imagen-selector__vista {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #E8ECEA 25%, transparent 25%),
    linear-gradient(-45deg, #E8ECEA 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E8ECEA 75%),
    linear-gradient(-45deg, transparent 75%, #E8ECEA 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

/* Los dos logos de cabecera, uno al lado del otro y con el mismo ancho: son el
   par que se ve junto en la TV, y compararlos ahí ahorra abrirla. */
.logos-cabecera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Actualizar · versión instalada, commits pendientes y bitácora.
   -------------------------------------------------------------------------- */

.datos-version {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.dato__valor {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.version__asunto {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--admin-borde);
  font-size: 15px;
  color: var(--admin-texto-2);
}

/* La lista de lo que se va a aplicar. Mostrar cuántos commits hay no alcanza:
   quien aprieta el botón quiere saber QUÉ entra. */
.commits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  max-height: 260px;
  overflow-y: auto;
}

.commit {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--admin-bg);
  font-size: 14px;
}

.commit__hash {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--admin-chrome);
  font-weight: 600;
}

.commit__asunto {
  overflow-wrap: anywhere;
}

.commit__autor {
  color: var(--admin-texto-2);
  font-size: 13px;
  white-space: nowrap;
}

.bitacora {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #1A211F;
  color: #E4EAE8;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}