/* ═══ ControlPanel (R-45) ═══════════════════════════════════════════════
   /controlpanel/: las 16 pestañas de administración con los componentes de
   base.css (tabs, card, form, field, button, chip, callout, dialog--sheet).
   Acá solo va lo propio del panel: bloques, filas de listas, estado actual,
   editor de formato, zona de imágenes, checklist de la tienda, tarjetas de
   estadísticas y el hilo de un reclamo.
   Prioridad funcional: sin animaciones propias. Mobile-first: todo en una
   columna y, desde 700 px, formularios de dos columnas y filas con acciones
   al costado. Colores por la regla de la rareza: naranja = lo que está
   activo y tapa o avisa, verde = apagado / resuelto, azul = el staff,
   dorado = WCoin, rojo = error. */

/* ── Guardia de permisos ──────────────────────────────────────────── */
.cp-guard { margin-top: var(--space-lg); }

/* ── Pestañas: son muchas, se acomodan en varias filas en vez de quedar
   escondidas en un scroll horizontal. En el celular no quedan fijas: con
   varias filas taparían media pantalla. ─────────────────────────────── */
.cp-tabs {
  position: static;
  flex-wrap: wrap;
  margin-inline: 0;
  padding-inline: 0;
  overflow-x: visible;
}
.cp-tabs .tabs__tab { padding: 0 var(--space-sm); }
@media (min-width: 900px) {
  .cp-tabs { position: sticky; }
}

/* ── Panel de una pestaña y sus bloques ───────────────────────────── */
.cp-panel {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}
.cp-block {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  min-width: 0;
}
.cp-block__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}
.cp-block__subtitle {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
}

/* ── Estado actual (aviso, apertura, popup) ───────────────────────── */
.cp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  overflow-wrap: anywhere;
}
.cp-status__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Formularios: dos columnas desde 700 px ───────────────────────── */
.cp-fields {
  display: grid;
  gap: var(--space-md);
}
.cp-fields > * { min-width: 0; }
@media (min-width: 700px) {
  .cp-fields { grid-template-columns: repeat(2, 1fr); }
}

/* El JSON de Info del servidor: monoespaciado y alto */
.field__control.cp-json {
  min-height: var(--json-editor-min-height);
  font-family: var(--font-mono);
}

/* ── Listas: una fila por noticia, descarga, evento, reporte… ─────── */
.cp-list { display: grid; }
.cp-row {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.cp-row:last-child { border-bottom: 0; }
.cp-row__info {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}
.cp-row__title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}
.cp-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.cp-row__excerpt { overflow-wrap: anywhere; }
.cp-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
/* Botones de fila tan tocables como el resto del sitio */
.cp-row__actions .button { min-height: var(--touch-target); }
@media (min-width: 700px) {
  .cp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .cp-row--top { align-items: start; }
  .cp-row__actions { justify-content: flex-end; }
}

/* Datos de cobro (R-65): alias y CBU en monoespaciada, que se leen letra por letra; el valor
   nuevo resalta en la hoja de confirmación y en el historial */
.cp-change__value {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
.cp-change__value--new {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
/* En la hoja de confirmación el antes y el ahora van a tamaño de lectura, no de nota */
.cp-change__line { font-size: var(--font-size-base); }

.cp-message {
  padding: var(--space-sm) 0;
  color: var(--color-text-muted);
}
.cp-message--danger { color: var(--color-danger); }

/* ── Editor de formato (noticias y eventos) ───────────────────────── */
.cp-editor {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}
.cp-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.cp-editor__tool {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-md);
}
.cp-editor__tool:hover { border-color: var(--color-data); }
.cp-editor__tool[aria-pressed="true"],
.cp-editor__tool[aria-expanded="true"] {
  border-color: var(--color-data);
  color: var(--color-data);
}
.cp-editor__emoji {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--touch-target), 1fr));
  gap: var(--space-3xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}
.cp-editor__emoji-button {
  min-height: var(--touch-target);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--font-size-heading-sm);
}
.cp-editor__emoji-button:hover { background: var(--color-bg); }
.cp-editor__preview {
  min-height: var(--textarea-min-height);
  padding: var(--space-sm);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* ── Zona para elegir o arrastrar archivos ────────────────────────── */
/* El <input type="file"> queda oculto a la vista pero enfocable: su <label> es la zona
   que se toca, y muestra el foco del input */
.cp-dropzone {
  display: grid;
  gap: var(--space-2xs);
  min-height: var(--touch-target);
  padding: var(--space-md);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
  cursor: pointer;
}
.cp-dropzone:hover,
.cp-dropzone[data-drag-over] { border-color: var(--color-data); }
.cp-dropzone__input:focus-visible + .cp-dropzone {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}
.cp-dropzone[aria-busy="true"] { cursor: progress; }
.cp-dropzone__title {
  color: var(--color-data);
  font-weight: var(--font-weight-bold);
}
.cp-dropzone__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.cp-dropzone__preview {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}
.cp-dropzone__image {
  max-width: 100%;
  max-height: var(--upload-preview-max-height);
  width: auto;
  height: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* ── Checklist de los 5 archivos del catálogo ─────────────────────── */
.cp-checklist {
  display: grid;
  gap: var(--space-xs);
}
.cp-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}
.cp-checklist__item--done {
  border-color: var(--color-success);
  color: var(--color-text);
}
.cp-checklist__label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Estadísticas de la tienda ────────────────────────────────────── */
.cp-stats {
  display: grid;
  gap: var(--space-sm);
}
@media (min-width: 700px) {
  .cp-stats { grid-template-columns: repeat(3, 1fr); }
}
/* El número arriba y el rótulo debajo; en el HTML el rótulo (dt) va primero */
.cp-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
}
.cp-stat__value {
  font-family: var(--font-display);
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-none);
}
.cp-stat__value--wcoin { color: var(--color-valuable); }
.cp-stat__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ── Hilo de un reclamo (vista del staff) ─────────────────────────── */
.cp-ticket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.cp-thread {
  display: grid;
  gap: var(--space-sm);
}
.cp-ticket-message {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
/* La respuesta del staff: acento azul, la voz oficial */
.cp-ticket-message--staff { border-left: var(--accent-border-width) solid var(--color-data); }
.cp-ticket-message__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.cp-ticket-message__author {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
/* El texto del jugador conserva sus saltos de línea */
.cp-ticket-message__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cp-ticket-message__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.cp-ticket-message__image {
  width: var(--ticket-image-size);
  height: var(--ticket-image-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* ── Hoja de confirmación: con una alternativa son tres botones, uno debajo del otro ── */
.cp-confirm-actions .button { white-space: normal; }
.cp-confirm-actions[data-has-alternative] { grid-template-columns: 1fr; }