/* ============================================================
   Panel del usuario — [mid_user_panel] — v1.0.216
   Módulos: Resumen · Mini-Páginas · Plantillas · Ruleta · Imágenes · Leads ·
            Reseñas · Analítica · Mi Plan · Cuenta

   Qué cambia en esta ronda (aspecto, sin tocar la lógica):
   - Una sola cabecera (saludo + plan), ya no se repite el título del shell.
   - Métricas con icono y mejor jerarquía; acciones rápidas en tarjetas.
   - «Primeros pasos» para quien acaba de entrar: no se pierde.
   - Listas con icono/inicial, tablas y planes más legibles.
   - Se usan los tokens del design system (--mid-*). Las reglas que pisan
     componentes COMPARTIDOS van bajo `.mid-upanel` para no afectar a los
     otros paneles de sistema que cargan esta misma hoja.

   Responsive: escritorio (>1023px), tablet (768–1023px) y móvil (≤767px / ≤420px).
   ============================================================ */

/* Utilidades */
.mid-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mid-muted { color: var(--mid-text-muted); font-size: 13px; margin: 6px 0; }
.mid-muted--xs { font-size: 12px; }
.mid-muted--danger { color: var(--mid-danger); }
.mid-muted--sm { font-size: 12.5px; margin: 0; max-width: 52ch; }
.mid-link-sm { font-size: 12.5px; font-weight: 600; text-decoration: none; }
.mid-link-sm:hover { text-decoration: underline; }
.mid-inline-form { display: contents; }
.mid-inline { display: inline; margin: 0; }

/* ---------- Panel y cabecera ---------- */
.mid-upanel { gap: 18px; }
.mid-upanel__gate { text-align: center; padding: 30px 20px; }

.mid-upanel__hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg);
  background-color: var(--mid-surface);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--mid-primary-soft) 70%, #fff) 0%, rgba(255,255,255,0) 58%),
    var(--mid-surface);
  box-shadow: var(--mid-shadow);
}
.mid-upanel__hello h1 { margin: 0 0 4px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.025em; }
.mid-upanel__hello p { margin: 0; color: var(--mid-text-muted); font-size: 13.5px; }
.mid-upanel__plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mid-upanel__notice { display: block; }
.mid-upanel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mid-upanel__head .mid-muted { margin: 2px 0 0; }
.mid-module__title { margin: 0; font-size: 1.1rem; letter-spacing: -.015em; }

/* Tarjeta de creación: la acción principal del panel, con su propio encabezado. */
.mid-upanel__create-card { display: flex; flex-direction: column; gap: 12px; }
.mid-upanel__create-head h2 { margin: 0; }
.mid-upanel__create-head p { margin: 2px 0 0; }
.mid-upanel__new { background: var(--mid-surface); border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg); box-shadow: var(--mid-shadow); padding: 8px 10px; }
.mid-upanel__create { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mid-upanel__create .mid-input { width: min(340px, 100%); flex: 1 1 220px; }
.mid-upanel__quick-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tarjetas de acción rápida ---------- */
.mid-upanel__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mid-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--mid-radius-lg);
  background: var(--mid-surface); border: 1px solid var(--mid-border);
  box-shadow: var(--mid-shadow); text-decoration: none; color: var(--mid-text);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.mid-tile:hover { border-color: #bfdbfe; box-shadow: var(--mid-shadow-lg); transform: translateY(-1px); }
.mid-tile__ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  background: var(--mid-primary-soft); color: var(--mid-primary);
  display: grid; place-items: center; font-size: 17px;
}
.mid-tile__body { display: flex; flex-direction: column; min-width: 0; }
.mid-tile__body strong { font-size: 13.5px; font-weight: 700; }
.mid-tile__body span { font-size: 12px; color: var(--mid-text-muted); }

/* ---------- Primeros pasos ---------- */
.mid-steps__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mid-steps__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--mid-text-muted); }
.mid-steps__list li.is-done { color: var(--mid-text); font-weight: 600; }
.mid-steps__dot {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 999px;
  background: var(--mid-surface-muted); border: 1px solid var(--mid-border);
  color: var(--mid-text-muted); font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.mid-steps__list li.is-done .mid-steps__dot { background: var(--mid-success-soft); border-color: #bbf7d0; color: #15803d; }

/* ---------- Pestañas de módulos (solo fuera del shell) ---------- */
.mid-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg); background: var(--mid-surface); box-shadow: var(--mid-shadow); }
.mid-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--mid-text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.mid-tab:hover { background: var(--mid-surface-muted); color: var(--mid-text); }
.mid-tab.is-active { background: var(--mid-primary-soft); border-color: #bfdbfe; color: var(--mid-primary); }
.mid-tab__icon { font-size: 14px; line-height: 1; }
.mid-tab__label { white-space: nowrap; }
.mid-tab__count { background: rgba(100,116,139,.14); border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 18px; font-weight: 700; }
.mid-tab.is-active .mid-tab__count { background: rgba(29,78,216,.16); }
.mid-module { display: flex; flex-direction: column; gap: 16px; }
/* v1.0.223 — EL CONTENIDO DE UN MÓDULO NO PUEDE EMPUJAR EL ANCHO DE LA PÁGINA.
   Un texto largo sin puntos de corte (o una tabla ancha) dentro de la columna flex hacía que el
   navegador contara ese ancho como desborde de TODA la página: medido, tres módulos del superadmin
   sacaban 240px de scroll horizontal a 390px. Se recorta aquí, que es donde sobra. */
.mid-upanel .mid-module { overflow-x: hidden; }

/* ---------- Métricas (KPIs) ---------- */
.mid-upanel .mid-kpi { gap: 14px; }
.mid-upanel .mid-kpi__card {
  position: relative; overflow: hidden;
  padding: 16px; border-radius: var(--mid-radius-lg);
  border: 1px solid var(--mid-border); background: var(--mid-surface);
  box-shadow: var(--mid-shadow);
  transition: border-color .14s, box-shadow .14s;
}
.mid-upanel .mid-kpi__card:hover { border-color: var(--mid-border-strong); box-shadow: var(--mid-shadow-lg); }
.mid-kpi__top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.mid-kpi__ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: var(--mid-primary-soft); color: var(--mid-primary);
  display: grid; place-items: center; font-size: 14px;
}
.mid-upanel .mid-kpi__label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-text-faint); font-weight: 800; }
.mid-upanel .mid-kpi__value { font-size: clamp(1.5rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mid-kpi__of { font-size: 13px; font-weight: 700; color: var(--mid-text-faint); }
.mid-kpi__hint { margin-top: 6px; font-size: 12px; color: var(--mid-text-muted); }
.mid-kpi__hint a { font-weight: 600; }

/* v1.0.222 — Rejilla de 6 métricas (el resumen del superadmin): 3+3, que queda equilibrado y deja
   cada tarjeta con sitio. Con `auto-fit` salían 5 arriba y 1 sola abajo. */
.mid-upanel .mid-kpi--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .mid-upanel .mid-kpi--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .mid-upanel .mid-kpi--tres { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dos columnas (Resumen, Cuenta) ---------- */
.mid-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.mid-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mid-card__head .mid-card__title { margin: 0; }

/* Listas compactas (últimas páginas / últimos leads) */
.mid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mid-list__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mid-surface-muted); font-size: 13.5px; }
.mid-list__row:last-child { border-bottom: 0; }
.mid-list__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mid-list__meta { color: var(--mid-text-faint); font-size: 12px; white-space: nowrap; }
.mid-list__ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: var(--mid-surface-muted); border: 1px solid var(--mid-border);
  display: grid; place-items: center; font-size: 13px; color: var(--mid-text-muted);
}
.mid-list__avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px;
  background: linear-gradient(140deg, var(--mid-primary-soft), #c7d2fe);
  border: 1px solid #c7d2fe; color: var(--mid-primary);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
}

/* ---------- Estados vacíos ---------- */
.mid-empty { padding: 30px 16px; }
.mid-empty__icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: var(--mid-primary-soft); color: var(--mid-primary); display: grid; place-items: center; font-size: 24px; }
.mid-empty h3 { margin: 0 0 6px; font-size: 16.5px; }
.mid-empty p { margin: 0 auto 12px; max-width: 46ch; font-size: 13.5px; }
.mid-empty__cta { margin: 0; }

/* ---------- Plantillas ---------- */
.mid-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mid-template { background: var(--mid-surface); border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg); box-shadow: var(--mid-shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .14s, box-shadow .14s, transform .14s; }
.mid-template:hover { border-color: #bfdbfe; box-shadow: var(--mid-shadow-lg); transform: translateY(-1px); }
.mid-template__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mid-template__title { margin: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.mid-template code { font-size: 11.5px; }
.mid-template .mid-button { margin-top: auto; justify-content: center; }

/* ---------- Leads y Analítica (tablas que se apilan en móvil) ---------- */
.mid-field-inline { display: flex; align-items: center; gap: 8px; }
.mid-field-inline label { font-size: 12.5px; color: var(--mid-text-muted); font-weight: 600; }
.mid-field-inline .mid-select { width: auto; min-width: 200px; }
.mid-lead__field { overflow-wrap: anywhere; }
.mid-lead__key { color: var(--mid-text-faint); font-size: 11.5px; text-transform: lowercase; }
.mid-bar { position: relative; height: 8px; min-width: 120px; background: var(--mid-surface-muted); border-radius: 999px; overflow: hidden; }
.mid-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, var(--mid-primary)); border-radius: 999px; transition: width .2s; }
.mid-bar__value { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; }

/* ---------- Mi Plan: medidores y comparativa ---------- */
.mid-meters { display: grid; gap: 14px; }
.mid-meter__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--mid-text-muted); margin-bottom: 6px; }
.mid-meter__label { font-weight: 700; color: var(--mid-text); }
.mid-meter__track { background: var(--mid-surface-muted); height: 9px; border-radius: 999px; overflow: hidden; }
.mid-meter__fill { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, var(--mid-primary)); border-radius: 999px; }
.mid-meter.is-full .mid-meter__fill { background: var(--mid-danger); }
.mid-meter.is-full .mid-meter__value { color: var(--mid-danger); font-weight: 700; }
.mid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
/* v1.0.226 — Cuando la tarjeta es un FORMULARIO (no una tarjeta de precios), va a una columna: el
   formulario trae los 44 widgets y en 3 columnas no cabe nada legible. */
.mid-plans--edit { grid-template-columns: minmax(0, 1fr); }
.mid-plan { background: var(--mid-surface); border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg); box-shadow: var(--mid-shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mid-plan.is-current { border-color: #93c5fd; box-shadow: 0 0 0 3px var(--mid-primary-soft); }
.mid-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mid-plan__name { margin: 0; font-size: 15px; }
.mid-plan__price { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.mid-plan__features { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--mid-text-muted); display: flex; flex-direction: column; gap: 5px; }
.mid-plan__features li::before { content: "✓ "; color: var(--mid-success); font-weight: 700; }
.mid-plan .mid-button { margin-top: auto; justify-content: center; }

/* v1.0.233 — Crear cuentas y límites propios por usuario (módulo Usuarios del superadmin). */
/* La celda de Acciones puede crecer (lleva el formulario de límites): el resto va arriba, si no la
   fila queda con el nombre flotando en el centro. */
.mid-table--sa td, .mid-table--sa th { vertical-align: top; }
.mid-create { margin: 4px 0 16px; padding: 0; overflow: hidden; }
.mid-create__summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 14px; color: var(--mid-text); list-style: none; }
.mid-create__summary::-webkit-details-marker { display: none; }
.mid-create[open] .mid-create__summary { border-bottom: 1px solid var(--mid-border); }
.mid-create__form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mid-create__invite { padding: 10px 12px; background: var(--mid-surface-muted); border: 1px solid var(--mid-border); border-radius: 10px; }
.mid-limits { margin-top: 8px; }
.mid-limits__summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--mid-primary); display: inline-flex; align-items: center; gap: 6px; }
.mid-limits__form { margin-top: 10px; padding: 12px; background: var(--mid-surface-muted); border: 1px solid var(--mid-border); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.mid-limits__hint { margin: 0; font-size: 11px; font-weight: 500; color: var(--mid-text-muted); line-height: 1.45; }
.mid-limits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mid-limits__grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--mid-text); }
.mid-limits__check { font-size: 11px; align-items: flex-start; }

/* ---------- Imágenes ---------- */
.mid-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mid-media__item { margin: 0; padding: 6px; background: var(--mid-surface); border: 1px solid var(--mid-border); border-radius: var(--mid-radius); box-shadow: var(--mid-shadow); }
.mid-media__item img { width: 100%; height: 92px; object-fit: cover; border-radius: var(--mid-radius-sm); display: block; }
.mid-media__item figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }

/* ---------- Cuenta ---------- */
.mid-form { display: flex; flex-direction: column; gap: 12px; }
/* `.mid-form__field` y `.mid-check` viven en `app.css` (v1.0.226): los usa también el formulario de
   planes del wp-admin, que no carga esta hoja. */
.mid-form__field label { font-size: 12.5px; font-weight: 700; color: var(--mid-text); }.mid-form__hint { font-size: 11.5px; color: var(--mid-text-faint); }
.mid-form .mid-button { align-self: flex-start; }
.mid-upanel__session { display: flex; flex-direction: column; gap: 10px; }
.mid-datalist { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
.mid-datalist dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-text-faint); font-weight: 700; }
.mid-datalist dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }

/* ---------- Tarjeta de Mini-Página: acciones secundarias ---------- */
.mid-page-card__more { border-top: 1px solid var(--mid-surface-muted); padding-top: 8px; }
.mid-page-card__more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--mid-text-muted); }
.mid-page-card__more > summary:hover { color: var(--mid-text); }
.mid-rename { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mid-rename label { font-size: 12px; color: var(--mid-text-muted); }
.mid-rename__row { display: flex; gap: 6px; flex-wrap: wrap; }
.mid-rename__row .mid-input { flex: 1; min-width: 180px; }
.mid-page-card__url.is-muted { color: var(--mid-text-muted); }
.mid-page-card__date { color: var(--mid-text-faint); white-space: nowrap; }

/* ---------- Objetivos de toque (medidos en el navegador, no supuestos) ----------
   En el arnés responsive los botones pequeños medían 27px de alto y el «Más opciones» 19px: en móvil
   quedan por debajo del mínimo cómodo (~32px) y se fallan los toques. El alto se sube SOLO dentro del
   panel del usuario para no cambiar los botones del resto del administrador. */
.mid-upanel .mid-button { min-height: 40px; }
.mid-upanel .mid-btn-sm { min-height: 34px; }
.mid-upanel .mid-link-sm { display: inline-flex; align-items: center; min-height: 32px; }
.mid-upanel .mid-page-card__more > summary { display: flex; align-items: center; gap: 6px; min-height: 36px; }

/* ---------- Foco visible ---------- */
.mid-tab:focus-visible, .mid-tile:focus-visible, .mid-page-card__more > summary:focus-visible, .mid-link-sm:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 8px; }

/* ============================================================
   TABLET (768–1023px): una columna en los bloques de dos y rejillas más justas
   ============================================================ */
@media (max-width: 1023px) {
  .mid-cols { grid-template-columns: minmax(0, 1fr); }
  .mid-upanel__create .mid-input { width: 100%; }
  .mid-upanel__new { width: 100%; }
  .mid-upanel__new .mid-upanel__create { width: 100%; }
  .mid-upanel__new .mid-button { flex: 0 0 auto; }
  .mid-templates { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .mid-plans { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .mid-upanel__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   MÓVIL (≤767px): pestañas que se envuelven, tablas en tarjetas, acciones a lo ancho
   ============================================================ */
@media (max-width: 767px) {
  /* v1.0.122 — Las pestañas se ENVUELVEN: nada de desplazamiento lateral dentro del panel (lo pedido:
     «que en móvil no tenga scroll de izquierda y derecha»). Estas pestañas solo se ven cuando el
     shortcode está FUERA del shell: dentro del shell la navegación es su menú. */
  .mid-tabs { flex-wrap: wrap; overflow-x: visible; }
  .mid-tab { flex: 0 1 auto; min-width: 0; }
  .mid-upanel__hero { flex-direction: column; align-items: stretch; }
  .mid-upanel__plan { justify-content: space-between; }
  .mid-upanel__head { flex-direction: column; align-items: stretch; }
  .mid-upanel__create .mid-button { width: 100%; justify-content: center; }
  .mid-upanel__quick-links .mid-button { width: 100%; justify-content: center; }
  .mid-upanel__tiles { grid-template-columns: minmax(0, 1fr); }
  .mid-plans { grid-template-columns: minmax(0, 1fr); }
  .mid-templates { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .mid-media { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .mid-field-inline { flex-direction: column; align-items: stretch; }
  .mid-field-inline .mid-select { width: 100%; min-width: 0; }
  .mid-datalist { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tablas → tarjetas: cada fila con su etiqueta (data-label) y sin scroll horizontal */
  .mid-table--leads thead, .mid-table--analytics thead, .mid-table--sa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mid-table--leads tr, .mid-table--analytics tr, .mid-table--sa tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--mid-border); }
  .mid-table--leads tr:last-child, .mid-table--analytics tr:last-child, .mid-table--sa tr:last-child { border-bottom: 0; }
  .mid-table--leads td, .mid-table--analytics td, .mid-table--sa td { display: block; border: 0; padding: 3px 0; }
  .mid-table--leads td::before, .mid-table--analytics td::before, .mid-table--sa td::before {
    content: attr(data-label) ": ";
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mid-text-faint);
  }
  .mid-table--analytics .mid-bar { min-width: 0; }
  .mid-table--analytics .mid-bar__value { margin-left: 6px; }
  /* v1.0.221 — Las tablas del superadmin se apilan en móvil. Además de leerse mejor, es lo que
     impide que una tabla ancha empuje el ancho del documento (medido: desbordaba 92px a 390). */
  .mid-table--sa td:empty { display: none; }
  .mid-table--sa td::before { display: block; }
}

/* ============================================================
   MÓVIL PEQUEÑO (≤420px)
   ============================================================ */
@media (max-width: 420px) {
  .mid-upanel__create .mid-input { width: 100%; }
  .mid-datalist { grid-template-columns: minmax(0, 1fr); }
  .mid-list__meta { display: none; }
  .mid-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
 * v1.0.218 — EL EDITOR DE PREMIOS DE LA RULETA
 *
 * QUÉ ESTABA MAL (de fondo, no de estética): el panel seguía ofreciendo un campo
 * «peso» y calculaba con él la barra de reparto y los porcentajes, pero el motor
 * dejó de usarlo en la v1.0.194: desde entonces el disco reparte los 360° en
 * rebanadas IGUALES y el sorteo es uniforme. O sea, el dueño movía un control
 * que NO hacía nada y veía un reparto que no era el que se publica.
 *
 * Ahora la sección dice la verdad y se ve como lo que es:
 *  · una VISTA PREVIA del disco (el mismo reparto que `PrizeWheelWidget::stops()`);
 *  · una fila por premio: color · texto · pegatina · cuota · quitar;
 *  · «+ Añadir premio» y quitar con JS; sin JS, una fila sin texto no se guarda.
 * ========================================================================== */
.mid-prizes { border: 1px solid var(--mid-border); border-radius: var(--mid-radius-lg); padding: 16px; margin: 14px 0; background: var(--mid-surface); box-shadow: var(--mid-shadow); }
.mid-prizes__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--mid-surface-muted); }
.mid-prizes__id { display: flex; flex-direction: column; min-width: 0; }
.mid-prizes__id strong { font-size: 15px; overflow-wrap: anywhere; }
.mid-prizes__id .mid-muted { font-size: 12px; }
.mid-prizes__alert { margin: 12px 0 0; }

.mid-prizes__layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 0 4px; }

/* --- Vista previa del disco: mismo reparto que el publicado --- */
.mid-prizes__preview { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mid-prizes__disc { position: relative; width: 158px; height: 158px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.10), 0 6px 18px rgba(15,23,42,.12); }
.mid-prizes__hub { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25); }
.mid-prizes__pointer { position: absolute; left: 50%; top: -9px; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid var(--mid-primary); filter: drop-shadow(0 1px 2px rgba(15,23,42,.3)); }
.mid-prizes__preview-note { font-size: 11.5px; line-height: 1.5; text-align: center; margin: 0; }

/* --- Lista de premios --- */
.mid-prizes__list { min-width: 0; }
.mid-prizes__listhead,
.mid-prize { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) 200px 46px 30px; align-items: center; gap: 8px; }
.mid-prizes__listhead { padding: 0 8px 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-text-faint); }
.mid-prizes__rows { display: flex; flex-direction: column; gap: 8px; }
.mid-prize { padding: 7px 8px; border: 1px solid var(--mid-surface-muted); border-radius: 10px; background: #fbfdff; transition: border-color .14s, background .14s; }
.mid-prize:focus-within { border-color: #bfdbfe; background: #fff; }
.mid-prize.is-empty { background: #fcfcfd; border-style: dashed; }
.mid-prize__n { font-size: 11px; font-weight: 800; color: var(--mid-text-faint); text-align: center; }
.mid-prize__color { display: block; }
.mid-prize__color input[type="color"] { width: 34px; height: 32px; padding: 0; border: 1px solid var(--mid-border-strong); border-radius: 8px; background: none; cursor: pointer; display: block; }
.mid-prize__label,
.mid-prize__icon select,
.mid-prize__icon input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--mid-border-strong); border-radius: 8px; font: inherit; font-size: 13px; color: var(--mid-text); background: #fff; }
.mid-prize__label:focus, .mid-prize__icon select:focus, .mid-prize__icon input:focus { outline: 2px solid #bfdbfe; border-color: #93c5fd; }
.mid-prize__icon { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 6px; }
.mid-prize__share { font-size: 12px; font-weight: 800; color: var(--mid-primary); text-align: right; font-variant-numeric: tabular-nums; }
.mid-prize__del { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--mid-border); background: #fff; color: var(--mid-text-faint); font-size: 17px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.mid-prize__del:hover { background: var(--mid-danger-soft); border-color: #fecaca; color: var(--mid-danger); }
.mid-prizes__add { margin-top: 10px; }
.mid-prizes__hint { margin: 12px 0 10px; font-size: 12px; line-height: 1.6; }

/* Tablet: la vista previa pasa a la izquierda de la lista, en una fila */
@media (max-width: 1023px) {
  .mid-prizes__layout { grid-template-columns: minmax(0, 1fr); }
  .mid-prizes__preview { flex-direction: row; align-items: center; gap: 16px; }
  .mid-prizes__preview-note { text-align: left; }
}
/* La pegatina baja a su propio renglón: seis columnas no caben */
@media (max-width: 900px) {
  .mid-prizes__listhead { display: none; }
  .mid-prize { grid-template-columns: 22px 38px minmax(0, 1fr) 46px 30px; }
  .mid-prize__n { grid-column: 1; grid-row: 1; }
  .mid-prize__color { grid-column: 2; grid-row: 1; }
  .mid-prize__label { grid-column: 3; grid-row: 1; }
  .mid-prize__share { grid-column: 4; grid-row: 1; }
  .mid-prize__del { grid-column: 5; grid-row: 1; }
  .mid-prize__icon { grid-column: 2 / 6; grid-row: 2; }
}
@media (max-width: 560px) {
  .mid-prizes { padding: 14px 12px; }
  .mid-prize { grid-template-columns: 22px 38px minmax(0, 1fr) 30px; row-gap: 8px; }
  .mid-prize__n { grid-column: 1; grid-row: 1; }
  .mid-prize__color { grid-column: 2; grid-row: 1; }
  .mid-prize__label { grid-column: 3; grid-row: 1; }
  .mid-prize__del { grid-column: 4; grid-row: 1; }
  .mid-prize__share { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .mid-prize__icon { grid-column: 1 / 5; grid-row: 3; }
  .mid-prizes__preview { flex-direction: column; }
  .mid-prizes__preview-note { text-align: center; }
}

/* ============================================================
   v1.0.215 — LA PESTAÑA RULETA: cuentas, progreso y la lista de participantes.
   Todo con los tokens del design system, para que no desentone con el resto del panel.
   ============================================================ */

/* Las cuentas de un vistazo. */
.mid-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 10px; }
.mid-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--mid-surface); border: 1px solid var(--mid-border);
  border-radius: var(--mid-radius-lg); box-shadow: var(--mid-shadow);
}
.mid-stat__n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mid-stat__t { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mid-text-muted); }
.mid-stat--ok { border-color: color-mix(in srgb, var(--mid-success, #16a34a) 40%, var(--mid-border)); }
.mid-stat--ok .mid-stat__n { color: var(--mid-success, #16a34a); }
.mid-stat--warn { border-color: color-mix(in srgb, var(--mid-warning, #d97706) 40%, var(--mid-border)); }
.mid-stat--warn .mid-stat__n { color: var(--mid-warning, #d97706); }

/* La barra de progreso de entrega. */
.mid-bar { height: 8px; border-radius: 999px; background: var(--mid-surface-muted, #eef2f7); overflow: hidden; margin: 0 0 14px; }
.mid-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--mid-success, #16a34a); transition: width .3s ease; }

/* El desglose por premio, plegado para no llenar la pantalla. */
.mid-details { margin: 0 0 14px; }
.mid-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mid-text); padding: 6px 0; }
.mid-counts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; }
.mid-counts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--mid-surface-muted, #f8fafc); border-radius: var(--mid-radius, 8px); font-size: 13px; }
.mid-counts__k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mid-counts__v { font-weight: 800; font-variant-numeric: tabular-nums; }

/* La lista de participantes. */
.mid-table--datos td { vertical-align: middle; }
.mid-table--datos tr.is-done { background: color-mix(in srgb, var(--mid-success, #16a34a) 6%, transparent); }
.mid-check input { margin: 0; cursor: pointer; }
.mid-button--danger { background: transparent; border-color: color-mix(in srgb, var(--mid-danger, #dc2626) 45%, var(--mid-border)); color: var(--mid-danger, #dc2626); }
.mid-button--danger:hover { background: color-mix(in srgb, var(--mid-danger, #dc2626) 10%, transparent); }
.mid-row-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mid-border); }

/* En pantalla estrecha, las cuentas se ponen de dos en dos. */
@media (max-width: 767px) {
  .mid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mid-row-end { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   v1.0.221 — PANEL DEL SUPERADMIN ([mid_superadmin_panel])
   Reutiliza el mismo lenguaje visual del panel del usuario (raíz `.mid-upanel`),
   así que aquí solo van las piezas propias: las acciones por fila de las tablas,
   el formulario de cupones y las estrellas de las reseñas.
   ============================================================ */
.mid-sa-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Los formularios en línea son `display:contents`: sus campos son hijos directos de la celda. */
.mid-sa-actions .mid-select { width: auto; min-width: 130px; }
.mid-sa-actions .mid-button { white-space: nowrap; }

.mid-sa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mid-sa-form__wide { grid-column: 1 / -1; }

.mid-sa-stars { color: var(--mid-warning); letter-spacing: 1px; }

/* Galería de iconos propios del superadmin */
.mid-sa-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mid-sa-icon { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: var(--mid-surface); border: 1px solid var(--mid-border); border-radius: var(--mid-radius); box-shadow: var(--mid-shadow); }
.mid-sa-icon__box { width: 44px; height: 44px; display: grid; place-items: center; color: var(--mid-primary); background: var(--mid-primary-soft); border-radius: 12px; }
.mid-sa-icon__box svg { width: 24px; height: 24px; display: block; }
.mid-sa-icon figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.mid-sa-icon figcaption strong { font-size: 13px; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .mid-sa-actions { flex-direction: column; align-items: stretch; }
  .mid-sa-actions .mid-select { width: 100%; min-width: 0; }
  .mid-sa-actions .mid-button { width: 100%; justify-content: center; }
}