/* Planos Tierra — sobre el boceto de Mattito y el lenguaje de dialed.gg:
   fondo blanco, la Tierra como protagonista, tipografía grotesca enorme en minúsculas,
   botones circulares y píldoras, casi sin texto. */
:root {
  --fondo: #ffffff;
  --tinta: #0a0a0a;
  --tenue: #8c8c8c;
  --linea: #e7e7e7;
  --suave: #f4f4f3;
  --naranjo: #F2542D;
  --peligro: #e5484d;
  --f-ui: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-dato: "Geist Mono", ui-monospace, Menlo, monospace;
  --radio: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.4 var(--f-ui);
  letter-spacing: -0.01em;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--naranjo); outline-offset: 2px; }

/* ---------- Pantalla de carga ---------- */
.carga {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--fondo);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  transition: opacity .6s ease, visibility 0s .6s;
}
.carga.fuera { opacity: 0; visibility: hidden; }
.carga-orbita {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1.5px solid var(--tinta);
  position: relative;
  margin-bottom: 34px;
  animation: girar 2.4s linear infinite;
}
.carga-orbita::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed var(--naranjo);
}
.carga-luna {
  box-shadow: 0 0 0 4px rgba(242, 84, 45, .18);
  position: absolute;
  top: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: var(--naranjo);
}
@keyframes girar { to { transform: rotate(360deg); } }
.carga-texto { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.carga-bajada { margin: 0; color: var(--tenue); font-size: 14px; }

/* ---------- Cabecera mínima ---------- */
.tope {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 32px;
  pointer-events: none;
}
.tope > * { pointer-events: auto; }
.marca { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.marca b { font-weight: 300; color: var(--tenue); margin-left: 1px; }
.contador { font: 13px var(--f-dato); color: var(--tenue); }
.contador b { color: var(--naranjo); font-weight: 500; }
.estado { margin-left: auto; font: 12px var(--f-dato); color: var(--tenue); max-width: 46ch; text-align: right; }
.estado.ocupado { color: var(--naranjo); }

/* ---------- Escena: la Tierra ---------- */
.escena { position: fixed; inset: 0; background: var(--fondo); }
.marco { position: absolute; inset: 0; transition: bottom .4s cubic-bezier(.2, .8, .2, 1); }
/* En el paso de cámara el globo se ve recortado en el formato del video: lo que ves es el cuadro final. */
body[data-paso="camara"] .marco {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linea), 0 30px 80px rgba(0, 0, 0, .06);
  transition: left .4s, top .4s, width .4s, height .4s;
}
#globo { position: absolute; inset: 0; }
#globo .cesium-viewer, #globo .cesium-widget, #globo .cesium-viewer-cesiumWidgetContainer { background: transparent; }
#globo .cesium-viewer-bottom { display: none; }
body.exportando .marco {
  inset: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(100vw, calc(100vh * var(--aspecto-num, 1.7778)));
  aspect-ratio: var(--aspecto, 16 / 9);
}
.guias { position: absolute; inset: 0; pointer-events: none; display: none; }
.guias i { position: absolute; background: rgba(0, 0, 0, .12); }
.guias i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.guias i:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.guias i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.guias i:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }
body[data-pro="si"] .guias:not([hidden]) { display: block; }
.lectura {
  position: absolute;
  left: 12px;
  top: 10px;
  font: 10px/1.5 var(--f-dato);
  color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  white-space: pre-wrap;
  max-width: calc(100% - 24px);
  pointer-events: none;
  display: none;
}
body[data-pro="si"] .lectura { display: block; }

/* La palabra de pista, como el "set" de dialed */
.palabra {
  position: fixed;
  right: 40px;
  top: 64px;
  z-index: 5;
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: .9;
  pointer-events: none;
  transition: opacity .3s;
  text-align: right;
  color: var(--tinta);
}
.punto-final { font-style: normal; color: var(--naranjo); }
.palabra small { display: block; font-size: 14px; letter-spacing: -0.01em; font-weight: 400; color: var(--tenue); margin-top: 12px; }
/* En el paso de cámara la palabra se achica y el recuadro empieza debajo */
body[data-paso="camara"] .palabra { font-size: clamp(40px, 4.4vw, 64px); top: 58px; }
body[data-paso="camara"] .palabra small { margin-top: 8px; }

/* ---------- Paso 1: lugar a, lugar b y "listo, vamos" ----------
   Las tres cajas miden lo mismo y solo una está encendida a la vez:
   la caja que toca llenar o, con ambos lugares elegidos, el botón. */
:root { --caja-ancho: min(22vw, 330px); --caja-alto: 58px; }
.lugar {
  position: fixed;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  width: var(--caja-ancho);
  transition: opacity .35s, translate .35s;
}
.lugar-a { left: max(4vw, 24px); }
.lugar-b { right: max(4vw, 24px); }
.lugar input {
  width: 100%;
  height: var(--caja-alto);
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--fondo);
  padding: 0 22px 0 44px;
  font: 500 17px var(--f-ui);
  letter-spacing: -0.02em;
  color: var(--tinta);
  outline: none;
  text-overflow: ellipsis;
  transition: border-color .2s, box-shadow .2s;
}
.lugar input::placeholder { color: #b9b9b9; font-weight: 400; }
.lugar input::-webkit-search-cancel-button { display: none; }
/* Pin a la izquierda: un punto que late en la caja encendida y un pin naranjo en la elegida */
.lugar-pin {
  position: absolute;
  left: 20px;
  top: calc(var(--caja-alto) / 2);
  translate: 0 -50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #c9c9c9;
  pointer-events: none;
}
.lugar.activa input { border: 1.5px solid var(--tinta); box-shadow: 0 0 0 5px rgba(242, 84, 45, .12); }
.lugar.activa input::placeholder { color: var(--tinta); }
.lugar.activa .lugar-pin { border: 0; background: var(--naranjo); animation: latir 1.2s ease-in-out infinite; }
.lugar.elegido:not(.activa) .lugar-pin { border: 0; background: var(--naranjo); width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(242, 84, 45, .18); }
@keyframes latir { 50% { box-shadow: 0 0 0 7px rgba(242, 84, 45, 0); transform: scale(1.15); } 0% { box-shadow: 0 0 0 0 rgba(242, 84, 45, .45); } }

.sugerencias {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  border-radius: var(--radio);
  background: var(--fondo);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12), 0 0 0 1px var(--linea);
  display: grid;
  gap: 2px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
}
.sugerencias:empty { display: none; }
.sugerencias button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
}
.sugerencias button small { display: block; color: var(--tenue); font-size: 12px; }
.sugerencias button:hover, .sugerencias button:focus-visible { background: var(--suave); }

/* "listo, vamos": apagado hasta tener ambos lugares; después se enciende, crece y le salen rayos */
.seguir-ancla { position: fixed; left: 50%; bottom: 48px; translate: -50% 0; z-index: 10; width: var(--caja-ancho); }
.seguir {
  width: 100%;
  height: var(--caja-alto);
  background: var(--fondo);
  color: #b9b9b9;
  border-color: var(--linea);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s, border-color .25s;
}
.seguir:disabled { opacity: 1; }
body.lugares-listos .seguir { background: var(--tinta); color: #fff; border-color: var(--tinta); transform: scale(1.08); }
body.lugares-listos .seguir span[aria-hidden] { color: var(--naranjo); }
.rayos { position: absolute; left: -12%; top: -24px; width: 124%; height: calc(100% + 48px); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
body.lugares-listos .rayos { opacity: 1; transform: scale(1.06); }

body:not([data-paso="lugares"]) .lugar,
body:not([data-paso="lugares"]) .seguir-ancla { opacity: 0; pointer-events: none; }
body:not([data-paso="lugares"]) .lugar-a { translate: -40px -50%; }
body:not([data-paso="lugares"]) .lugar-b { translate: 40px -50%; }

/* ---------- Doodles ---------- */
.doodle { fill: none; stroke: var(--tinta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#temblor); pointer-events: none; }
.doodle text { font: 600 22px "Caveat", "Comic Sans MS", cursive; fill: var(--naranjo); stroke: none; }
.flecha { position: absolute; width: 180px; height: 96px; overflow: visible; bottom: calc(100% + 4px); stroke: var(--naranjo); opacity: 0; transition: opacity .3s; }
.lugar-a .flecha { left: 6px; }
.lugar-b .flecha { right: 6px; }
.lugar.activa .flecha { opacity: 1; }
.rayos path { stroke: var(--naranjo); stroke-width: 2; }
.destellos { position: fixed; z-index: 4; right: 330px; top: 72px; width: 160px; height: 90px; }
.destellos circle { fill: var(--naranjo); stroke: none; }
.garabato { position: fixed; z-index: 4; left: 34px; bottom: 40px; width: 140px; height: 40px; stroke: var(--naranjo); opacity: .9; }
body:not([data-paso="lugares"]) .destellos,
body:not([data-paso="lugares"]) .garabato { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .doodle { filter: none; }
  .lugar.activa .lugar-pin { animation: none; }
}

/* ---------- Botones base ---------- */
.pildora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--tinta);
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, opacity .2s;
}
.pildora:hover { transform: translateY(-1px); }
.pildora:active { transform: translateY(0) scale(.98); }
.pildora.negra { background: var(--tinta); color: #fff; }
.pildora.negra span[aria-hidden] { color: var(--naranjo); transition: translate .2s; }
.pildora.negra:hover span[aria-hidden] { translate: 3px 0; }
.pildora:disabled { opacity: .25; cursor: default; transform: none; }
.circulo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--tinta);
  background: var(--fondo);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
}
.circulo:hover { background: var(--naranjo); border-color: var(--naranjo); color: #fff; }
.circulo.chico { width: 40px; height: 40px; }
.circulo svg { width: 22px; height: 22px; }
.enlace { border: 0; background: transparent; color: var(--tenue); cursor: pointer; padding: 6px 0; font-size: 14px; }
.enlace:hover { color: var(--tinta); }

/* ---------- Mando inferior (paso 2) ---------- */
.mando {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding: 0 32px 28px;
  transition: opacity .35s, translate .35s, bottom .4s cubic-bezier(.2, .8, .2, 1);
}
body[data-paso="lugares"] .mando { opacity: 0; translate: 0 30px; pointer-events: none; }
.mando-der { display: flex; justify-content: flex-end; align-items: end; gap: 22px; }
.mando-centro { display: grid; gap: 16px; justify-items: center; }

.modos { display: flex; gap: 14px; }
.modo {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--tenue);
  width: 70px;
}
.modo svg {
  width: 58px;
  height: 58px;
  padding: 14px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--tinta);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.modo:hover svg { border-color: var(--tinta); transform: translateY(-2px); }
.modo[aria-pressed="true"] { color: var(--tinta); }
.modo[aria-pressed="true"] svg { background: var(--naranjo); color: #fff; border-color: var(--naranjo); }

.tiempo { display: flex; align-items: center; gap: 14px; width: min(46vw, 520px); }
.tiempo input[type="range"] { flex: 1; min-width: 0; accent-color: var(--naranjo); }
.tc { font: 12px var(--f-dato); font-variant-numeric: tabular-nums; color: var(--tenue); min-width: 8ch; }

.casillas { display: flex; align-items: end; gap: 10px; }
.casilla {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--tenue);
}
.casilla-img {
  width: 76px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--suave);
  border: 1px solid var(--linea);
  display: block;
}
.casilla-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casilla-img img:not([src]) { visibility: hidden; }
.casilla:hover .casilla-img { border-color: var(--tinta); }
.casilla[aria-pressed="true"] { color: var(--naranjo); }
.casilla[aria-pressed="true"] .casilla-img { border: 2px solid var(--naranjo); box-shadow: 0 0 0 4px rgba(242, 84, 45, .15); }

/* Formato del video */
.formatos { display: flex; align-items: end; gap: 4px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--linea); }
.formato { display: grid; justify-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font: 11px var(--f-dato); color: var(--tenue); width: 44px; }
.formato i { display: block; border: 1.5px solid currentColor; border-radius: 4px; }
.f-916 { width: 18px; height: 32px; }
.f-11 { width: 26px; height: 26px; }
.f-169 { width: 36px; height: 20px; }
.formato:hover { color: var(--tinta); }
.formato[aria-checked="true"] { color: var(--tinta); }
.formato[aria-checked="true"] i { background: var(--naranjo); border-color: var(--naranjo); }

/* Control de rotación: domo visto desde arriba. El punto naranjo es la cámara; el anillo, la rotación. */
.mando-izq { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rotador { display: grid; justify-items: center; gap: 4px; }
.rotador svg { width: 112px; height: 112px; touch-action: none; cursor: grab; overflow: visible; }
.rotador svg:active { cursor: grabbing; }
.r-anillo { fill: none; stroke: var(--tinta); stroke-width: .8; stroke-dasharray: 1.5 3.2; }
.r-domo { fill: none; stroke: var(--tinta); stroke-width: .8; }
.r-medio { stroke: var(--linea); }
.r-cruz { stroke: var(--linea); stroke-width: .8; }
.r-n { font: 9px var(--f-dato); fill: var(--tenue); text-anchor: middle; }
.r-mira { stroke: var(--naranjo); stroke-width: 1; }
.r-objetivo { fill: var(--tinta); }
.r-perilla { fill: var(--fondo); stroke: var(--tinta); stroke-width: 1; }
.r-camara { fill: var(--naranjo); stroke: var(--fondo); stroke-width: 1.5; }
.rotador:hover .r-camara { r: 7.5; }
.rotador-rotulo { font: 11px var(--f-dato); color: var(--tenue); }

/* Interruptor normal ↔ pro, como el "Easy" de dialed */
.interruptor { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.riel {
  width: 58px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--tinta);
  position: relative;
  transition: background .25s;
}
.perilla {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tinta);
  transition: translate .25s, background .25s;
}
.interruptor[aria-checked="true"] .riel { background: var(--naranjo); border-color: var(--naranjo); }
.interruptor[aria-checked="true"] .perilla { translate: 26px 0; background: #fff; }
.interruptor-texto { display: grid; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.interruptor-texto span { grid-area: 1 / 1; transition: opacity .2s; }
.interruptor[aria-checked="true"] .t-normal, .interruptor[aria-checked="false"] .t-pro { opacity: 0; }

/* ---------- Hoja pro ---------- */
.hoja {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 0;
  z-index: 14;
  height: min(46vh, 440px);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--linea);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  translate: 0 105%;
  visibility: hidden;
  transition: translate .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .4s;
}
body[data-pro="si"] .hoja { translate: 0 0; visibility: visible; transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
body[data-pro="si"] .mando { bottom: min(46vh, 440px); padding-bottom: 18px; }
.pestanas { display: flex; gap: 4px; padding: 14px 20px 0; overflow-x: auto; flex: none; align-items: center; }
.pestanas .cerrar-hoja { position: absolute; top: 12px; right: 16px; z-index: 1; border: 1px solid var(--tinta); background: var(--fondo); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 14px; font-weight: 500; }
.pestanas { padding-right: 96px !important; }
.pestanas .cerrar-hoja:hover { background: var(--tinta); color: #fff; }
.pestanas button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tenue);
  white-space: nowrap;
}
.pestanas button[aria-selected="true"] { background: var(--tinta); color: #fff; box-shadow: inset 0 -2px 0 var(--naranjo); }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 18px 24px 28px; }
.pestana {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px 28px;
  align-content: start;
}
.pestana[hidden] { display: none; }
.pestana > hr, .pestana > .nota, .pestana > fieldset, .pestana > .creditos, .pestana > ol, .pestana > ul { grid-column: 1 / -1; }

/* Controles finos dentro de la hoja */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label, legend { font-size: 12px; color: var(--tenue); }
.campo label output { float: right; font: 11px var(--f-dato); color: var(--tinta); font-variant-numeric: tabular-nums; }
.grilla2, .grilla3 { display: grid; gap: 10px 14px; }
.grilla2 { grid-template-columns: 1fr 1fr; }
.grilla3 { grid-template-columns: 1fr 1fr 1fr; }
.fila { display: flex; gap: 8px; }
.fila > input { flex: 1; min-width: 0; }
.grupo, .grupoNubes, .grupoEnfoque { display: grid; gap: 10px; }
.grupo[hidden], .grupoNubes[hidden], .grupoEnfoque[hidden] { display: none; }
.panel input[type="text"], .panel input[type="search"], .panel input[type="number"], .panel input[type="date"], .panel input[type="time"], .panel select, .panel textarea {
  width: 100%;
  min-width: 0;
  background: var(--suave);
  color: var(--tinta);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font: 13px var(--f-ui);
}
.panel input:focus, .panel select:focus, .panel textarea:focus { border-color: var(--tinta); outline: none; }
.panel input[type="number"] { font-family: var(--f-dato); font-size: 12.5px; }
.panel textarea { font: 12px/1.5 var(--f-dato); resize: vertical; }
.panel input[type="color"] { width: 100%; height: 34px; padding: 2px; background: var(--suave); border: 1px solid var(--linea); border-radius: 10px; }
.panel input[type="range"] { accent-color: var(--naranjo); width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--naranjo); }
fieldset.capas { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.btn {
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid var(--tinta);
  border-radius: 999px;
  padding: 8px 16px;
  font: 500 13px var(--f-ui);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--tinta); color: #fff; }
.btn[aria-pressed="true"] { background: var(--naranjo); border-color: var(--naranjo); color: #fff; }
.btn-ancho { width: 100%; }
.btn-primario { background: var(--tinta); color: #fff; }
.btn:disabled { opacity: .35; cursor: progress; }
progress { width: 100%; accent-color: var(--tinta); }
.nota { font-size: 12px; color: var(--tenue); margin: 0; }
.mono { font-family: var(--f-dato); }
hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: transparent; border: 1px solid var(--linea); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--tinta); }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.punto { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; background: var(--suave); border-radius: 12px; }
.punto-rol { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 600 12px var(--f-ui); border: 1px solid var(--tenue); color: var(--tenue); }
.punto-rol.extremo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.punto-datos { min-width: 0; display: grid; gap: 2px; }
.punto-datos input { padding: 4px 6px !important; background: transparent !important; font-weight: 600 !important; }
.punto-coord { font: 11px var(--f-dato); color: var(--tenue); padding-left: 7px; }
.punto-acc { display: flex; gap: 2px; }
.punto-acc button { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--tenue); }
.punto-acc button:hover { background: var(--fondo); color: var(--tinta); }
.resultados { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.resultados li button { width: 100%; text-align: left; background: transparent; border: 1px dashed var(--linea); border-radius: 10px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.creditos { font-size: 11px; color: var(--tenue); }
.creditos p { margin: 0 0 6px; }
#creditosCesium .cesium-widget-credits { position: static; display: block; padding: 0; }
#creditosCesium, #creditosCesium * { font-size: 10px !important; color: var(--tenue) !important; }

/* ---------- Pantallas de exportación ---------- */
.pantalla {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--fondo);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 22px 40px 40px;
  animation: entrar .35s ease-out;
}
.pantalla[hidden] { display: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pantalla-tope { display: flex; justify-content: space-between; align-items: center; }
.titular { font-size: clamp(40px, 6vw, 84px); font-weight: 500; letter-spacing: -0.055em; line-height: .95; margin: 28px 0 0; }
.bajada { color: var(--tenue); font-size: 16px; margin: 10px 0 0; }

.pantalla-pie { display: flex; justify-content: center; align-items: center; gap: 24px; }

/* Grabando: el número gigante, como el "206" de dialed */
#pantallaGrabando { place-content: center; justify-items: center; text-align: center; grid-template-rows: none; }
.numero-grande { font-size: clamp(140px, 26vw, 360px); font-weight: 500; letter-spacing: -0.07em; line-height: .85; font-variant-numeric: tabular-nums; }
.numero-grande small { font-size: .3em; color: var(--naranjo); letter-spacing: -0.03em; margin-left: .08em; }

/* Resultado */
.video-marco { border-radius: 22px; overflow: hidden; background: var(--tinta); aspect-ratio: var(--aspecto, 16 / 9); max-height: 70vh; max-width: min(62vw, 980px); box-shadow: 0 30px 80px rgba(0, 0, 0, .12); }
.video-marco video { width: 100%; height: 100%; display: block; object-fit: contain; }
#pantallaResultado { grid-template-rows: auto 1fr; }
.resultado-cuerpo { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 96px); min-height: 0; }
.resultado-texto { display: grid; justify-items: start; gap: 14px; max-width: 360px; }
.resultado-texto .titular { margin: 0 0 6px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .mando { grid-template-columns: auto 1fr; grid-template-areas: "centro centro" "izq der"; row-gap: 16px; }
  .mando-izq { grid-area: izq; align-self: center; }
  .mando-centro { grid-area: centro; }
  .mando-der { grid-area: der; }
  .lugar { width: min(30vw, 340px); }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .tope { padding: 14px 16px; gap: 14px; }
  .marca { font-size: 17px; }
  .estado { display: none; }
  body[data-pro="si"] .lectura { display: none; }
  .palabra { right: 16px; top: 46px; font-size: 44px; }
  .palabra small { font-size: 12px; margin-top: 6px; max-width: 30ch; margin-left: auto; }
  body[data-paso="camara"] .palabra small { display: none; }

  /* Paso 1: la Tierra arriba, las tres cajas abajo, del mismo ancho */
  :root { --caja-alto: 54px; }
  body[data-paso="lugares"] .marco { top: 120px; bottom: 260px; }
  .lugar { left: 16px; right: 16px; width: auto; top: auto; translate: none; }
  .lugar-a { bottom: 168px; }
  .lugar-b { bottom: 100px; }
  .lugar input { font-size: 16px; }
  .sugerencias { bottom: 100%; margin: 0 0 8px; }
  .seguir-ancla { left: 16px; right: 16px; width: auto; translate: none; bottom: 28px; }
  .seguir { font-size: 16px; }
  .flecha, .destellos, .garabato { display: none; }
  body:not([data-paso="lugares"]) .lugar-a,
  body:not([data-paso="lugares"]) .lugar-b { translate: 0 20px; }

  /* Paso 2: el visor arriba y los controles en filas */
  .mando {
    grid-template-columns: 1fr auto;
    grid-template-areas: "modos modos" "tiempo tiempo" "formatos casillas" "izq exportar";
    gap: 12px 10px;
    padding: 0 16px 16px;
  }
  .mando-centro, .mando-der { display: contents; }
  .modos { grid-area: modos; justify-content: space-between; gap: 0; }
  .tiempo { grid-area: tiempo; width: 100%; gap: 10px; }
  .formatos { grid-area: formatos; border-right: 0; padding-right: 0; margin-right: 0; align-self: end; }
  .casillas { grid-area: casillas; gap: 8px; }
  .mando-izq { grid-area: izq; align-self: center; flex-direction: row; align-items: center; gap: 12px; }
  .rotador svg { width: 76px; height: 76px; }
  .rotador-rotulo { display: none; }
  #abrirFormato { grid-area: exportar; padding: 12px 22px; font-size: 16px; }
  .modo { width: 56px; font-size: 11px; }
  .modo svg { width: 46px; height: 46px; padding: 11px; }
  .modo span { white-space: nowrap; }
  .solo-escritorio { display: none; }
  .circulo { width: 42px; height: 42px; }
  .circulo.chico { width: 36px; height: 36px; }
  .casilla-img { width: 56px; height: 36px; border-radius: 9px; }
  .formato { width: 36px; }
  .riel { width: 50px; height: 28px; }
  .perilla { width: 18px; height: 18px; }
  .interruptor[aria-checked="true"] .perilla { translate: 22px 0; }
  body[data-paso="camara"] .marco { border-radius: 16px; }

  /* La hoja pro ocupa el ancho y tapa los controles; se cierra con "listo" */
  .hoja { left: 0; right: 0; height: 58vh; border-radius: 22px 22px 0 0; z-index: 16; }
  body[data-pro="si"] .mando { bottom: 0; padding-bottom: 16px; }
  .pestanas { padding: 12px 12px 0; }
  .hoja-cuerpo { padding: 14px 16px 24px; }
  .pestana { grid-template-columns: 1fr; }

  /* Grabando y resultado */
  .pantalla { padding: 16px 16px 24px; }
  .resultado-cuerpo { flex-direction: column; gap: 20px; justify-content: start; padding-top: 12px; overflow-y: auto; }
  .video-marco { max-width: 100%; max-height: 52vh; }
  .resultado-texto { justify-items: stretch; text-align: left; max-width: none; width: 100%; gap: 10px; }
  .resultado-texto .titular { font-size: 44px; }
  .resultado-texto .pildora { width: 100%; }
  .numero-grande { font-size: 42vw; }
  .carga-texto { font-size: 34px; }
  .carga-orbita { width: 100px; height: 100px; margin-bottom: 26px; }
}

/* Con pantallas táctiles no hay hover: se evita que los botones queden "levantados" */
@media (hover: none) {
  .pildora:hover, .modo:hover svg { transform: none; }
  .circulo:hover { background: var(--fondo); color: var(--tinta); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Ayuda: "?" en cada opción pro ---------- */
.ayuda {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0 0 0 4px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #c9c9c9;
  background: var(--fondo);
  color: var(--tenue);
  font: 600 10px/1 var(--f-ui);
  cursor: help;
  vertical-align: 1px;
}
.ayuda:hover, .ayuda:focus-visible { border-color: var(--naranjo); color: var(--naranjo); }
.ayuda-globo {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tinta);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.ayuda-globo b { display: block; font-weight: 500; margin-bottom: 4px; color: var(--naranjo); }
.pestanas button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.campo label { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.campo label output { margin-left: auto; float: none; }

/* ---------- Escritorio: la hoja pro es un panel a la derecha, para no achicar el recuadro ---------- */
@media (min-width: 1101px) {
  .hoja {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    height: auto;
    border-radius: 26px 0 0 26px;
    border: 1px solid var(--linea);
    border-right: 0;
    translate: 105% 0;
    box-shadow: -18px 0 50px rgba(0, 0, 0, .06);
  }
  .pestanas { flex-wrap: wrap; padding: 18px 18px 4px; }
  .pestana { grid-template-columns: 1fr; }
  .hoja .grilla3 { grid-template-columns: 1fr 1fr; }
  body[data-pro="si"] .mando { bottom: 0; right: 400px; padding-bottom: 28px; }
  body[data-pro="si"] .palabra { right: 440px; }
  body[data-pro="si"] .tope .estado { margin-right: 400px; }
}

/* Imagen congelada del visor mientras se toman las miniaturas */
.congelado { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; pointer-events: none; }

/* ---------- Estilo rápido ---------- */
.estilo-ancla { position: relative; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--linea); }
.estilo-boton svg { background: var(--fondo); }
.estilo-boton[aria-expanded="true"] svg { border-color: var(--tinta); }
.estilo-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 30;
  width: 300px;
  padding: 16px 16px 18px;
  border-radius: 20px;
  background: var(--fondo);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 0 0 1px var(--linea);
  display: grid;
  gap: 8px;
  animation: entrar .2s ease-out;
}
.estilo-pop[hidden] { display: none; }
.estilo-tit { margin: 4px 0 0; font: 11px var(--f-dato); color: var(--tenue); }
.estilo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.estilo-fila button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--fondo);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  color: var(--tinta);
  padding: 0;
}
.estilo-fila button svg { width: 26px; height: 26px; }
.estilo-fila button:hover { border-color: var(--tinta); }
.estilo-fila button[aria-pressed="true"] { border: 2px solid var(--naranjo); }
.estilo-fila button.texto { width: auto; padding: 0 12px; font-size: 13px; }
.estilo-fila button.texto[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.estilo-sep { width: 1px; height: 26px; background: var(--linea); margin: 0 4px; }
.colores button { border-radius: 50%; width: 32px; height: 32px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.colores button[aria-pressed="true"] { border: 0; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--naranjo); }
.color-propio { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--tenue); display: grid; place-items: center; cursor: pointer; color: var(--tenue); overflow: hidden; }
.color-propio input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 760px) {
  .estilo-ancla { margin-left: 0; padding-left: 0; border-left: 0; }
  .estilo-pop { position: fixed; left: 16px; right: 16px; bottom: 200px; width: auto; }
  .modo { width: 50px; }
}

.fondos button { width: 32px; height: 32px; border-radius: 9px; background: var(--f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.fondos button[aria-pressed="true"] { border: 0; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--naranjo); }
.fondos .color-propio { border-radius: 9px; }
.estilo-pop { width: 316px; max-height: min(70vh, 560px); overflow-y: auto; }

/* Distancia: cerca ↔ lejos, bajo el control de rotación */
.distancia { width: 132px; display: grid; gap: 2px; }
.distancia label { display: flex; justify-content: space-between; align-items: baseline; font: 10px var(--f-dato); color: var(--tenue); }
.distancia output { color: var(--tinta); font-size: 11px; }
.distancia input { width: 100%; accent-color: var(--naranjo); margin: 0; }
@media (max-width: 760px) {
  .distancia { width: 104px; }
}

body.lugares-listos .seguir:hover { transform: scale(1.11); }

/* Velocidad: lenta · media · rápida, junto a la línea de tiempo */
.velocidad { display: flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; flex: none; }
.velocidad button { border: 0; background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--tenue); cursor: pointer; }
.velocidad button:hover { color: var(--tinta); }
.velocidad button[aria-checked="true"] { background: var(--tinta); color: #fff; }
.tiempo { width: min(58vw, 680px); }
@media (max-width: 760px) {
  .velocidad button { padding: 4px 8px; font-size: 11px; }
  .tc { display: none; }
}

/* Anillo de avance alrededor del número de la grabación */
.anillo-progreso { --anillo: min(74vmin, 640px); position: relative; width: var(--anillo); height: var(--anillo); display: grid; place-items: center; }
.anillo-progreso svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anillo-pista { fill: none; stroke: var(--linea); stroke-width: .6; }
.anillo-avance { fill: none; stroke: var(--tinta); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.anillo-inicio { fill: var(--tinta); }
.anillo-cabeza { fill: var(--naranjo); }
.anillo-centro { position: relative; display: grid; justify-items: center; text-align: center; }
#pantallaGrabando .numero-grande { font-size: calc(var(--anillo) * .36); }

/* Interruptor chico "con / sin gráfica" junto a exportar */
.interruptor.chico .riel { width: 42px; height: 24px; }
.interruptor.chico .perilla { top: 3px; left: 3px; width: 16px; height: 16px; }
.interruptor.chico[aria-checked="true"] .perilla { translate: 18px 0; }
.interruptor.chico .interruptor-texto { font-size: 13px; color: var(--tenue); min-width: 74px; }
.interruptor.chico { align-self: center; gap: 8px; }
@media (max-width: 760px) { .interruptor.chico { display: none; } }