/* ═══════════════════════════════════════════════════════════
   simuladores-widgets.css — Sistema visual compartido de
   los widgets de laboratorio de Cinemática
   Elemental W · simuladores/_compartido/
   (antes: simuladores/cinematica/cinematica-simuladores.css —
   movido y renombrado, ver contexto-simuladores-cinematica-v3.md §0)

   Requiere, cargados ANTES en el <head>:
     css/design-tokens.css
     css/themes.css          (habilita [data-ew-theme="..."])
     css/ui-components.css   (.ew-button, .ew-card, focus-visible)
     css/motion.css          (.ew-motion-fade / .ew-motion-reveal)

   No depende de Fisica/css/fisica-base.css ni de
   simuladores/simuladores.css — cada simulador de cinemática
   es visualmente parte del sistema "chispa" raíz, aislado de
   los otros dos sistemas del proyecto (regla de autonomía de
   módulo, ver ARQUITECTURA_FISICA.md).

   Prefijo de clases: simc- ("SIMuladores de Cinemática").
   Modificador --<slug> por simulador (--pendulo, --caida-libre)
   solo para ajustes muy puntuales; el grueso del look es
   compartido aquí.
═══════════════════════════════════════════════════════════ */

/* Reset de box-sizing propio del sistema "chispa" de widgets.
   No asumir que main.css (que trae este reset a nivel global) ya
   está cargado — pendulo.html (standalone) NO lo carga, solo el
   CSS de "chispa". Sin esto, el widget queda en box-sizing:
   content-box (el default del navegador): su padding se SUMA al
   100% de ancho en vez de restarse, y se desborda de su
   contenedor — causa real del "desfase" en celular y de anchos
   que no cuadran en PC. */
:where(.simc-widget, .simc-overlay),
:where(.simc-widget, .simc-overlay) *,
:where(.simc-widget, .simc-overlay) *::before,
:where(.simc-widget, .simc-overlay) *::after {
  box-sizing: border-box;
}

:root {
  /* Tokens locales del widget, derivados de --ew-* */
  --simc-radius: var(--ew-radius-lg);
  --simc-borde: 1px solid var(--ew-color-border);
  --simc-sombra: var(--ew-shadow-md);

  --simc-lienzo-alto-compacto: clamp(180px, 32vw, 240px);
  --simc-lienzo-alto-completo: clamp(320px, 52vh, 560px);

  --simc-espacio: var(--ew-space-4);
}

/* ══════════════════════════════════════════════════════════
   WIDGET — contenedor raíz
══════════════════════════════════════════════════════════ */

.simc-widget {
  display: flex;
  flex-direction: column;
  gap: var(--simc-espacio);

  width: 100%;
  padding: var(--ew-space-4);

  background: var(--ew-color-surface);
  border: var(--simc-borde);
  border-radius: var(--simc-radius);
  box-shadow: var(--simc-sombra);

  font-family: var(--ew-font-body);
  color: var(--ew-color-text);

  /* El layout de 2 columnas (básicos + avanzado) y otros ajustes
     de "modo completo" deben reaccionar al ANCHO REAL del widget,
     no al viewport — el widget vive dentro de contenedores con
     max-width propio (640px en el hub y en pendulo.html), así que
     un @media basado en viewport se dispara aunque el widget mismo
     esté angosto (esto rompía el layout en PC: grid de 2 columnas
     apretado en una caja de 640px). container-type habilita que
     las reglas @container de abajo midan ESTA caja, no la ventana. */
  container-type: inline-size;
}

.simc-widget--modo-completo {
  height: 100%;
  padding: var(--ew-space-5);
  gap: var(--ew-space-5);
}

/* ---------- Encabezado ---------- */

.simc-widget__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ew-space-2) var(--ew-space-3);
}

.simc-widget__badge {
  order: -1;
  flex: 0 0 100%;

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ew-color-primary);
}

.simc-widget__titulo {
  flex: 1 1 auto;
  min-width: 0;

  margin: 0;

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-lg);
  line-height: 1.2;
  color: var(--ew-color-text);
}

.simc-widget--modo-completo .simc-widget__titulo {
  font-size: var(--ew-text-2xl);
}

.simc-widget__boton-entrar {
  flex: 0 0 auto;
  font-size: var(--ew-text-sm);
  padding: 0.55rem 1rem;
  min-height: 38px;
}

/* ---------- Lienzo (donde cada simulador dibuja su SVG) ---------- */

.simc-widget__lienzo {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--simc-lienzo-alto-compacto);

  background: var(--ew-color-surface-soft);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);

  overflow: hidden;
}

.simc-widget--modo-completo .simc-widget__lienzo {
  height: var(--simc-lienzo-alto-completo);
}

.simc-widget__lienzo svg {
  width: 100%;
  height: 100%;
}

/* Tablas de registro opcionales de los laboratorios. El historial vive
   en memoria dentro de cada instancia y, por tanto, se limpia al recargar. */
.simc-widget__avanzado .parabolico-historial,
.simc-widget__avanzado .caida-libre-historial {
  overflow-x: auto;
  font-size: var(--ew-text-xs);
}

.simc-widget__avanzado .parabolico-historial table,
.simc-widget__avanzado .caida-libre-historial table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.simc-widget__avanzado .parabolico-historial caption,
.simc-widget__avanzado .caida-libre-historial caption {
  margin-bottom: var(--ew-space-2);
  text-align: left;
  font-weight: 600;
  color: var(--ew-color-text);
}

.simc-widget__avanzado .parabolico-historial th,
.simc-widget__avanzado .parabolico-historial td,
.simc-widget__avanzado .caida-libre-historial th,
.simc-widget__avanzado .caida-libre-historial td {
  padding: var(--ew-space-2);
  border-bottom: 1px solid var(--ew-color-border);
  text-align: left;
  white-space: nowrap;
}

.simc-widget__avanzado .parabolico-historial th,
.simc-widget__avanzado .caida-libre-historial th {
  color: var(--ew-color-text-muted);
  font-weight: 600;
}

/* ---------- Lecturas compactas (solo modo compacto) ---------- */
/* Línea de texto pequeña, de solo lectura, debajo del lienzo.
   Sin etiquetas (ej. "T ≈ 1.42 s · ω = -0.87 rad/s") — el modo
   completo usa su propia sección con etiquetas en su lugar. */

.simc-widget__lecturas-compactas {
  margin: calc(var(--ew-space-2) * -1) 0 0;

  font-size: var(--ew-text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ew-color-text-muted);
}

/* ---------- Barra de reproducción (Pausar / Reiniciar) ---------- */
/* Solo existe en modo completo. En compacto se oculta por completo
   (el widget compacto se reproduce siempre, sin control de pausa,
   y no tiene botón de reinicio — los sliders que sí necesitan
   "reiniciar" algo, como el ángulo inicial, lo resuelven con un
   salto directo de estado en vez de depender de este botón). */

.simc-widget--modo-compacto .simc-widget__barra {
  display: none;
}

.simc-widget__barra {
  display: flex;
  gap: var(--ew-space-2);
}

.simc-widget__boton-reproducir,
.simc-widget__boton-reiniciar {
  flex: 1 1 0;
  font-size: var(--ew-text-sm);
  min-height: 40px;
  padding: 0.6rem 1rem;
}

.simc-widget--modo-completo .simc-widget__barra {
  flex: 0 0 auto;
}

.simc-widget--modo-completo .simc-widget__boton-reproducir,
.simc-widget--modo-completo .simc-widget__boton-reiniciar {
  flex: 0 1 220px;
}

/* ---------- Controles básicos / avanzados ---------- */

.simc-widget__controles {
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-3);
}

.simc-widget__avanzado {
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-3);

  padding-top: var(--ew-space-4);
  border-top: 1px dashed var(--ew-color-border-strong);
}

.simc-widget__avanzado[hidden] {
  display: none;
}

/* En modo completo con espacio de sobra, controles básicos y
   avanzados conviven en dos columnas — pero "espacio de sobra"
   se mide del ANCHO REAL del widget (container query), no del
   viewport. Con esto, el hub y pendulo.html (ambos con tope de
   640px) se quedan en una columna prolija en vez de apretar 2
   columnas por error; un contexto realmente ancho (ej. el overlay
   de pantalla completa, hasta 76rem) sí puede activarlo. */
@container (min-width: 680px) {
  .simc-widget--modo-completo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'lienzo'
      'barra'
      'controles';
  }

  .simc-widget--modo-completo.simc-widget--tiene-avanzado {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      'header   header'
      'lienzo   avanzado'
      'barra    avanzado'
      'controles avanzado';
  }

  .simc-widget--modo-completo .simc-widget__header { grid-area: header; }
  .simc-widget--modo-completo .simc-widget__lienzo { grid-area: lienzo; }
  .simc-widget--modo-completo .simc-widget__barra { grid-area: barra; }
  .simc-widget--modo-completo .simc-widget__controles { grid-area: controles; }
  .simc-widget--modo-completo .simc-widget__avanzado {
    grid-area: avanzado;
    padding-top: 0;
    padding-left: var(--ew-space-4);
    border-top: none;
    border-left: 1px dashed var(--ew-color-border-strong);
  }
}

/* ══════════════════════════════════════════════════════════
   CONTROL DESLIZANTE ETIQUETADO (slider reutilizable)
══════════════════════════════════════════════════════════ */

.simc-control__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ew-space-2);

  margin-bottom: var(--ew-space-1);
}

.simc-control__etiqueta {
  font-size: var(--ew-text-sm);
  font-weight: 600;
  color: var(--ew-color-text);
}

.simc-control__valor {
  font-variant-numeric: tabular-nums;
  font-size: var(--ew-text-sm);
  font-weight: 700;
  color: var(--ew-color-primary);
}

.simc-control__input {
  width: 100%;
  height: 36px;

  accent-color: var(--ew-color-primary);
  cursor: pointer;
}

.simc-control__input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 3px;
  border-radius: var(--ew-radius-sm);
}

/* ══════════════════════════════════════════════════════════
   MASCOTA CHISPA (feedback)
══════════════════════════════════════════════════════════ */

.simc-mascota {
  display: flex;
  align-items: center;
  gap: var(--ew-space-2);

  padding: var(--ew-space-2) var(--ew-space-3);

  background: var(--ew-color-primary-soft);
  border-radius: var(--ew-radius-md);
}

.simc-mascota__img {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.simc-mascota__texto {
  margin: 0;
  font-size: var(--ew-text-sm);
  color: var(--ew-color-text);
}

/* ══════════════════════════════════════════════════════════
   OVERLAY DE PANTALLA COMPLETA
══════════════════════════════════════════════════════════ */

.simc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;

  padding: clamp(0.75rem, 2vw, 2rem);
  overflow-y: auto;

  background: color-mix(in srgb, var(--ew-palette-purple-ink) 55%, black 15%);

  animation: ew-fade-in 220ms ease forwards;
}

.simc-overlay__panel {
  position: relative;

  width: min(100%, var(--ew-container-lg));
  height: fit-content;
  min-height: min(100%, 640px);

  padding: clamp(1rem, 3vw, 2.5rem);

  background: var(--ew-color-background);
  border-radius: var(--ew-radius-xl);
  box-shadow: var(--ew-shadow-lg);

  animation: ew-fade-up 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.simc-overlay__cerrar {
  position: sticky;
  top: 0;
  float: right;

  margin-bottom: var(--ew-space-3);

  font-size: var(--ew-text-sm);
  min-height: 40px;
}

.simc-overlay__contenido {
  clear: both;
}

@media (prefers-reduced-motion: reduce) {
  .simc-overlay,
  .simc-overlay__panel {
    animation: none;
  }

  .simc-mascota {
    animation: none;
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — móvil
══════════════════════════════════════════════════════════ */

@container (max-width: 480px) {
  .simc-widget__header {
    flex-direction: column;
    align-items: stretch;
  }

  .simc-widget__boton-entrar {
    width: 100%;
  }

  /* Pausar/Reiniciar se quedan SIEMPRE en fila (nunca en columna).
     Antes esto pasaba a flex-direction: column, y como los botones
     usan flex: 0 1 220px en modo completo, ese 220px — pensado como
     ANCHO — pasaba a leerse como ALTO al cambiar de eje, dejando
     botones enormes y desproporcionados. En fila, con shrink
     habilitado, se comprimen prolijamente sin importar qué tan
     angosto sea el widget. */
  .simc-widget--modo-completo .simc-widget__boton-reproducir,
  .simc-widget--modo-completo .simc-widget__boton-reiniciar {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.5rem;
    font-size: var(--ew-text-xs);
  }
}