/**
 * Mundo Drone · Componente común «metal-frame» · componentes/metal-frame/metal-frame.css  (v3.3, 31/10/2026)
 * Borde cromado mecanizado (marco metálico) de TODAS las cajas y tarjetas de la web. Origen: caja.html + landing v07.
 *
 * Tokens (tema.json → Admin → Codex → Tema, grupo «Componentes · marco y caja»):
 *   --md-metal-gloss · --md-mf-pad · --md-mf-radius · --md-mf-radius-inner · --md-mf-shadow-y · --md-mf-shadow-blur ·
 *   --md-mf-shadow-alpha · --md-mf-thick-* · --md-mf-slim-*  (+ valores por breakpoint 900 / 640 / 380 px)
 * Cada var() lleva como respaldo el valor exacto de la referencia en ese breakpoint: el componente funciona igual
 * copiado a otro proyecto sin tema.json.  No toca los tokens globales --md-frame-* (los usan las tarjetas v2 aprobadas).
 *
 * Uso:  <div class="md-frame [md-frame--thick|md-frame--slim]">…</div>   o   md_component('metal-frame', [...])
 * Alias legacy: .aero-frame (= .md-frame).
 */
.md-frame,
.aero-frame {
  --mf-pad: var(--md-mf-pad, 3px);
  --mf-radius: var(--md-mf-radius, 14px);
  --mf-radius-inner: var(--md-mf-radius-inner, 11px);
  --mf-shadow-y: var(--md-mf-shadow-y, 16px);
  --mf-shadow-blur: var(--md-mf-shadow-blur, 40px);
  --mf-shadow-alpha: var(--md-mf-shadow-alpha, 0.55);
  position: relative;
  box-sizing: border-box;
  padding: var(--mf-pad);
  background: var(--md-metal-gloss, linear-gradient(135deg, #ffffff 0%, #d0d8e0 10%, #9aa4b0 22%, #4a525c 38%, #1e2228 48%, #3a424c 55%, #8a949e 70%, #c8d0d8 85%, #f0f4f8 100%));
  border-radius: var(--mf-radius);
  border: none;
  box-shadow:
    0 var(--mf-shadow-y) var(--mf-shadow-blur) rgba(0, 0, 0, var(--mf-shadow-alpha)),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Variante gruesa (prototipo caja.html) */
.md-frame--thick {
  --mf-pad: var(--md-mf-thick-pad, 7px);
  --mf-radius: var(--md-mf-thick-radius, 24px);
  --mf-radius-inner: var(--md-mf-thick-radius-inner, 18px);
}

/* Variante compacta (nav / chips) */
.md-frame--slim {
  --mf-pad: var(--md-mf-slim-pad, 2px);
  --mf-radius: var(--md-mf-slim-radius, 10px);
  --mf-radius-inner: var(--md-mf-slim-radius-inner, 8px);
}

/* Contenido directo del marco (modo open/close sin caja): placa lisa con el radio interior */
.md-frame__in {
  border-radius: var(--mf-radius-inner);
  overflow: hidden;
}

/* ─── Tablet ≤ 900px ─── */
@media (max-width: 900px) {
  .md-frame,
  .aero-frame {
    --mf-pad: var(--md-mf-pad, 2.5px);
    --mf-radius: var(--md-mf-radius, 12px);
    --mf-radius-inner: var(--md-mf-radius-inner, 9.5px);
    --mf-shadow-y: var(--md-mf-shadow-y, 12px);
    --mf-shadow-blur: var(--md-mf-shadow-blur, 28px);
    --mf-shadow-alpha: var(--md-mf-shadow-alpha, 0.5);
  }
  .md-frame--thick {
    --mf-pad: var(--md-mf-thick-pad, 5px);
    --mf-radius: var(--md-mf-thick-radius, 18px);
    --mf-radius-inner: var(--md-mf-thick-radius-inner, 14px);
  }
  .md-frame--slim {
    --mf-pad: var(--md-mf-slim-pad, 2px);
    --mf-radius: var(--md-mf-slim-radius, 9px);
    --mf-radius-inner: var(--md-mf-slim-radius-inner, 7px);
  }
}

/* ─── Móvil ≤ 640px ─── */
@media (max-width: 640px) {
  .md-frame,
  .aero-frame {
    --mf-pad: var(--md-mf-pad, 2px);
    --mf-radius: var(--md-mf-radius, 10px);
    --mf-radius-inner: var(--md-mf-radius-inner, 8px);
    --mf-shadow-y: var(--md-mf-shadow-y, 8px);
    --mf-shadow-blur: var(--md-mf-shadow-blur, 20px);
    --mf-shadow-alpha: var(--md-mf-shadow-alpha, 0.45);
    /* relieve inset un poco más suave en pantallas densas */
    box-shadow:
      0 var(--mf-shadow-y) var(--mf-shadow-blur) rgba(0, 0, 0, var(--mf-shadow-alpha)),
      0 0 0 1px rgba(0, 0, 0, 0.4),
      inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
      inset 0 -1px 1.5px rgba(0, 0, 0, 0.45);
  }
  .md-frame--thick {
    --mf-pad: var(--md-mf-thick-pad, 4px);
    --mf-radius: var(--md-mf-thick-radius, 14px);
    --mf-radius-inner: var(--md-mf-thick-radius-inner, 11px);
  }
  .md-frame--slim {
    --mf-pad: var(--md-mf-slim-pad, 1.5px);
    --mf-radius: var(--md-mf-slim-radius, 8px);
    --mf-radius-inner: var(--md-mf-slim-radius-inner, 6.5px);
  }
}

/* ─── Móvil estrecho ≤ 380px ─── */
@media (max-width: 380px) {
  .md-frame,
  .aero-frame {
    --mf-pad: var(--md-mf-pad, 1.5px);
    --mf-radius: var(--md-mf-radius, 9px);
    --mf-radius-inner: var(--md-mf-radius-inner, 7.5px);
    --mf-shadow-y: var(--md-mf-shadow-y, 6px);
    --mf-shadow-blur: var(--md-mf-shadow-blur, 16px);
  }
  .md-frame--thick {
    --mf-pad: var(--md-mf-thick-pad, 3px);
    --mf-radius: var(--md-mf-thick-radius, 12px);
    --mf-radius-inner: var(--md-mf-thick-radius-inner, 9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-frame, .aero-frame { transition: none !important; }
}