/**
 * Mundo Drone · Componente común «caja» · componentes/caja/caja.css  (v3.3, 31/10/2026)
 * Caja / ficha: placa interior hundida + tipografía de ficha. Lleva por defecto el borde «metal-frame»
 * (dependencia declarada en componentes.json → "usa": ["metal-frame"]; su CSS se carga antes).
 *
 * Tokens: --md-cyan · --md-text · --md-text-dim · --md-fhud · --md-ftac · --md-fmono (globales) y, propios,
 *   --md-caja-plate · --md-caja-plate-shadow · --md-caja-list · --md-caja-divider · --md-caja-icon-stroke ·
 *   --md-caja-icon-label · --md-caja-icon-label-size (por breakpoint).  Respaldo = valores exactos de la referencia.
 * Clases: .md-caja, .md-caja__plate|body|kicker|title|link|subtitle|list|icons|icon.  Alias legacy: .inner-plate.
 */
.md-caja {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  isolation: isolate;   /* la placa (::before, z-index −1) queda bajo el contenido sin posicionar a los hijos */
}

/* Placa interior hundida (pseudo-elemento sobre el marco) */
.md-caja.md-frame::before,
.md-caja--plano::before {
  content: '';
  position: absolute;
  inset: var(--mf-pad, 3px);
  border-radius: var(--mf-radius-inner, 11px);
  background: var(--md-caja-plate, radial-gradient(ellipse at 20% 15%, rgba(200, 210, 220, 0.10), transparent 48%), linear-gradient(135deg, rgba(28, 32, 38, 0.94), rgba(8, 10, 14, 0.98)));
  box-shadow: var(--md-caja-plate-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 28px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: -1;
}
/* Sin marco (marco => false): solo la placa, con el radio exterior */
.md-caja--plano { border-radius: var(--md-mf-radius, 14px); overflow: hidden; }
.md-caja--plano::before { inset: 0; border-radius: inherit; }

/* Placa como elemento (cuando se necesita contenido recortado dentro) */
.md-caja__plate,
.inner-plate {
  position: relative;
  z-index: 0;
  border-radius: var(--mf-radius-inner, 11px);
  background: var(--md-caja-plate, radial-gradient(ellipse at 20% 15%, rgba(200, 210, 220, 0.10), transparent 48%), linear-gradient(135deg, rgba(28, 32, 38, 0.94), rgba(8, 10, 14, 0.98)));
  box-shadow: var(--md-caja-plate-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 28px rgba(0, 0, 0, 0.45));
  overflow: hidden;
}

.md-caja__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem 1.05rem;
}

/* Tipografía ficha.php escalada */
.md-caja__kicker {
  font-family: var(--md-fmono, 'Share Tech Mono', 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--md-cyan, #00d4ff);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.md-caja__kicker::before {
  content: '//';
  content: '//' / '';
  color: var(--md-cyan, #00d4ff);
}

.md-caja__title {
  font-family: var(--md-fhud, 'Orbitron', system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 0;
  color: var(--md-text, #e8edf2);
  text-shadow:
    0 2px 0 #000,
    0 0 14px rgba(255, 255, 255, 0.12);
}

.md-caja__subtitle {
  font-family: var(--md-ftac, 'Rajdhani', sans-serif);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--md-text-dim, rgba(200, 208, 216, 0.74));
  margin: 0;
  line-height: 1.45;
}

.md-caja__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--md-ftac, 'Rajdhani', sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--md-caja-list, rgba(200, 208, 216, 0.82));
}
.md-caja__list li {
  position: relative;
  padding: 0.22rem 0 0.22rem 1.1rem;
}
.md-caja__list li::before {
  content: '▸';
  content: '▸' / '';
  position: absolute;
  left: 0;
  color: var(--md-cyan, #00d4ff);
  font-size: 0.75rem;
}

/* Fila de iconos opcional */
.md-caja__icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 0 0;
  list-style: none;
  border-top: 1px solid var(--md-caja-divider, rgba(160, 170, 180, 0.14));
}
.md-caja__icons--n2 { grid-template-columns: repeat(2, 1fr); }
.md-caja__icons--n3 { grid-template-columns: repeat(3, 1fr); }
.md-caja__icons--n5 { grid-template-columns: repeat(5, 1fr); }
.md-caja__icons--n6 { grid-template-columns: repeat(6, 1fr); }

.md-caja__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.md-caja__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--md-caja-icon-stroke, #b8c2cc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(0 -0.5px 0 rgba(0, 0, 0, 0.45));
}
.md-caja__icon span {
  font-family: var(--md-fmono, 'Share Tech Mono', 'JetBrains Mono', monospace);
  font-size: var(--md-caja-icon-label-size, 0.55rem);
  line-height: 1.25;
  color: var(--md-caja-icon-label, rgba(200, 208, 216, 0.65));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══ Caja enlazada (toda la caja clicable, patrón «stretched link»: un solo <a> en el título) ═══ */
.md-caja__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.md-caja__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--mf-radius, 14px);
}
.md-caja--enlace { cursor: pointer; transition: transform 0.16s ease, filter 0.2s ease; }
.md-caja--enlace:hover { transform: translateY(-2px); filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.22)); }
.md-caja--enlace:hover .md-caja__title { color: #ffffff; }
.md-caja--enlace:has(.md-caja__link:focus-visible) {
  outline: 2px solid var(--md-cyan, #00d4ff);
  outline-offset: 3px;
}
/* Respaldo sin :has(): el foco se ve en el título */
.md-caja__link:focus-visible { text-decoration: underline; text-decoration-color: var(--md-cyan, #00d4ff); text-underline-offset: 4px; }

/* Texto solo para lectores de pantalla */
.md-caja__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ Responsive caja (padding + tipo) ═══ */
@media (max-width: 900px) {
  .md-caja__body { gap: 0.7rem; padding: 0.85rem 0.9rem 0.95rem; }
  .md-caja__title { font-size: 0.98rem; }
  .md-caja__subtitle,
  .md-caja__list { font-size: 0.84rem; }
}
@media (max-width: 640px) {
  .md-caja__body { gap: 0.55rem; padding: 0.7rem 0.75rem 0.8rem; }
  .md-caja__kicker { font-size: 0.55rem; letter-spacing: 0.16em; }
  .md-caja__title { font-size: 0.92rem; letter-spacing: 0.03em; }
  .md-caja__subtitle,
  .md-caja__list { font-size: 0.8rem; }
  .md-caja__icons { gap: 0.35rem; padding-top: 0.55rem; }
  .md-caja__icon svg { width: 24px; height: 24px; }
  .md-caja__icon span { font-size: var(--md-caja-icon-label-size, 0.5rem); }
}
@media (max-width: 380px) {
  .md-caja__body { padding: 0.6rem 0.65rem 0.7rem; }
  .md-caja__title { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .md-caja--enlace { transition: none; }
  .md-caja--enlace:hover { transform: none; }
}

/* Contenido extra (slot): elementos dentro de la caja, por encima del enlace estirado */
.md-caja__slot { position: relative; z-index: 3; }

/* v4.0 · Texto mínimo global de 12 px (aprobado): kicker y etiquetas de iconos nunca por debajo de --md-el-min-txt. */
.md-caja__kicker { font-size: max(var(--md-el-min-txt, 12px), 0.62rem); }
.md-caja__icon span { font-size: max(var(--md-el-min-txt, 12px), var(--md-caja-icon-label-size, 0.55rem)); }
@media (max-width: 640px) {
  .md-caja__kicker { font-size: var(--md-el-min-txt, 12px); }
  .md-caja__icon span { font-size: max(var(--md-el-min-txt, 12px), var(--md-caja-icon-label-size, 0.5rem)); }
}