/* ==========================================================================
   Sidera Cosmos — estilos de la calculadora de peso en otros planetas
   Extiende css/site.css y css/eclipse.css: aquí sólo nacen clases NUEVAS.
   Ninguna clase existente se redefine y ningún hex vive en este archivo:
   todos los colores salen de los tokens de :root de css/site.css (GOB-01).
   ========================================================================== */

/* ------------------------------------------------------ Calculadora ----- */

/* Caja de entrada. Va sobre --surface para que el texto no se apoye en el
   campo estrellado del hero (ACC-04). */
.calc {
  margin-top: 1.7rem;
  padding: 1.3rem 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  max-width: 34rem;
}

.calc-label {
  display: block;
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.55rem;
}

.calc-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.calc-input {
  flex: 1 1 8rem;
  min-width: 7rem;
  font-family: var(--font-sidera);
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  line-height: 1.3;
  /* El campo es numérico pero se declara text para poder aceptar el punto
     decimal en cualquier teclado; el filtrado lo hace el script. */
  -moz-appearance: textfield;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input:focus-visible { border-color: var(--amber); }

/* Selector de unidad: dos botones de radio disfrazados de conmutador. Sin
   JavaScript siguen siendo un formulario legible y navegable con teclado. */
.unidad {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.18rem;
  gap: 0.15rem;
  margin: 0;
  background: var(--bg);
}
.unidad legend {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.unidad input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.unidad label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  /* Alto útil de 44 px con el relleno del contenedor: es el objetivo táctil
     que pide la pasada en teléfono. */
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-sidera);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.unidad input:checked + label {
  background: var(--surface-2);
  color: var(--text);
}
.unidad input:focus-visible + label {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.calc-equivalencia {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Los botones conservan el tamaño de .btn de site.css: recortarles el relleno
   les dejaba 39 px de alto, por debajo del objetivo táctil cómodo en
   teléfono. Aquí sólo se coloca la fila. */
.calc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.calc-aviso {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Zona de copiado del botón Compartir: sólo aparece cuando el navegador no
   tiene ni Web Share ni portapapeles. */
.compartir-caja {
  margin-top: 0.9rem;
  display: none;
}
.compartir-caja[data-visible="si"] { display: block; }
.compartir-caja textarea {
  width: 100%;
  min-height: 5.2rem;
  font-family: var(--font-sidera);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  resize: vertical;
}

/* ------------------------------------------------------- Resultados ----- */

.peso-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}

.peso-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.05rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.peso-dibujo {
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 0.25rem;
}
.peso-dibujo svg { width: 100%; height: 100%; display: block; }

.peso-card h3 {
  font-size: 1.02rem;
  margin: 0;
}

.peso-valor {
  font-family: var(--font-sidera);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 1.8rem);
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-wrap: anywhere;
}
/* La estrella de neutrones es la única cifra que se dice con palabras
   ("14 millones de millones"). Al cuerpo del resto de las tarjetas ocupaba
   tres líneas y se comía la tarjeta: aquí baja un peldaño. */
.peso-card[data-cuerpo="estrella-de-neutrones"] .peso-valor {
  font-size: clamp(1.1rem, 3.6vw, 1.32rem);
  line-height: 1.3;
}

.peso-valor .peso-unidad {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.18em;
}

.peso-ratio {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Barra comparativa. Escala LINEAL de 0 a 2.5 veces la gravedad terrestre;
   la marca fina señala la Tierra, en 1.0. Las barras del Sol y de la estrella
   de neutrones se salen de esa escala y se dibujan cortadas: el borde
   discontinuo lo declara y el pie de la sección también. */
.barra {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin: 0.2rem 0 0;
}
.barra::after {
  /* Marca de la Tierra en 1.0 sobre una escala que llega a 2.5 */
  content: "";
  position: absolute;
  left: 40%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.barra-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
}
.peso-card[data-regimen="mas"] .barra-fill { background: var(--amber); }
.peso-card[data-cortada="si"] .barra-fill {
  /* Barra cortada: el degradado se desvanece contra el borde para que se vea
     que la escala no llega hasta ahí. */
  background: linear-gradient(to right, var(--amber) 78%, var(--surface-2));
}

.peso-g {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Leyenda del código de color. Todo esquema del sitio lleva la suya visible
   (COL-06). */
.leyenda {
  margin: 1.3rem 0 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.leyenda ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.leyenda li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.leyenda .muestra {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  transform: translateY(0.08rem);
}
.leyenda .muestra[data-color="teal"] { background: var(--teal); }
.leyenda .muestra[data-color="ambar"] { background: var(--amber); }
.leyenda .muestra[data-color="gris"] { background: var(--grey-own); }
.leyenda .muestra[data-color="magenta"] { background: var(--magenta); }
.leyenda .muestra[data-color="ambar-dibujo"] { background: var(--amber-mark); }

/* ---------------------------------------------- Diagrama de las flechas - */

/* Clase propia y no .moon-figure: aquella limita el SVG a 19 rem y le pone
   un halo ámbar, que aquí sobra. */
.diagrama-peso {
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
/* 30 rem y no más: los rótulos del SVG están dimensionados para que se lean en
   un teléfono de 360 px, así que a un ancho mayor crecerían por encima del
   cuerpo del texto y el diagrama se comería la página. */
.diagrama-peso svg {
  width: 100%;
  max-width: 30rem;
  height: auto;
  display: block;
}
.diagrama-peso figcaption {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 30rem;
  line-height: 1.55;
}

/* -------------------------------------------------- Tabla de gravedad --- */

/* Contenedor propio y no .table-scroll de la página del eclipse: aquella clase
   lleva un ::before con el texto "Desliza la tabla para ver más ciudades", que
   aquí sería mentira. Se replica sólo la sombra de scroll del borde derecho,
   con la misma técnica de dos capas: la "tapa" viaja con el contenido
   (attachment local) y tapa la sombra al llegar al final; la sombra se queda
   pegada al borde visible. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(to left, var(--surface) 45%, var(--surface-0)),
    linear-gradient(to left, var(--scrim), var(--scrim-0));
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 1.15rem 100%;
  background-attachment: local, scroll;
  padding: 0.2rem 1rem 0.6rem;
}
.tabla-scroll:focus-visible { outline-offset: -3px; }

.gravedad-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.gravedad-tabla th,
.gravedad-tabla td {
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.7rem 0.55rem 0;
  text-align: right;
}
.gravedad-tabla th[scope="row"],
.gravedad-tabla thead th:first-child {
  text-align: left;
  font-weight: 600;
  white-space: normal;
}
.gravedad-tabla thead th {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom-color: var(--border-strong);
}
.gravedad-tabla tbody th { color: var(--text); }
.gravedad-tabla tbody td { color: var(--text-muted); }

/* --------------------------------------------------------- Teléfono ---- */

@media (max-width: 26rem) {
  .peso-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .peso-card { padding: 0.85rem 0.75rem 0.9rem; }
  .peso-dibujo { width: 3.4rem; height: 3.4rem; }
  .peso-valor { font-size: 1.32rem; }
  .calc-input { font-size: 1.28rem; }
}