/* ======== VARIABLES ======== */
:root {
  color-scheme: dark;
  --fondo:        #17171e;
  --superficie:   #1c1c26;
  --superficie2:  #21212d;
  --borde:        #2a2a3a;
  --texto:        #b8bfcc;
  --tenue:        #3e3e4f;
  --IAG_grisclaro:#3e3e4f;
  --IAG_textosc:  #17171e;
  --luna:         #40a1be;
  --sol:          #e2c74c;
  --combinado:    #7b9aff;
  --positivo:     #4de8a0;
  --negativo:     #e85a6a;
  --neutro:       #3e3e4f;
  --marcador:     #fff;
  --fuente-d: 'Product Sans', sans-serif;
  --fuente-m: 'Product Sans', sans-serif;
  --color-actual: #783a53;
  --esp-xs: clamp(.2rem, 1vw, .4rem);
  --esp-sm: clamp(.4rem, 1.8vw, .65rem);
  --esp-md: clamp(.6rem, 3vw, 1rem);
  --texto-xs:   clamp(.82rem, 3.5vw, .92rem);
  --texto-sm:   clamp(.92rem, 4.2vw, 1.04rem);
  --texto-base: clamp(1rem,   4.8vw, 1.14rem);
  --texto-lg:   clamp(1.3rem, 5.8vw, 1.65rem);
  --texto-val:  clamp(2rem, 10vw, 3.5rem);
  --radio: 6px;
  --zona-inferior: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0 }
html { height: 100%; -webkit-text-size-adjust: 100% }
body {
  font-family: var(--fuente-m); font-size: var(--texto-base); font-weight: 300;
  background: var(--fondo); color: var(--color-actual); line-height: 1.4;
  min-height: 100%; overflow-x: hidden;
  forced-color-adjust: none;
}
/* Bloquear extensiones de dark mode (Dark Reader, etc.) */
svg { forced-color-adjust: none; }

/* ======== DISEÑO ======== */
.app {
  max-width: 680px; margin: 0 auto;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: var(--esp-sm) var(--esp-md) calc(var(--esp-sm) + var(--zona-inferior));
  gap: var(--esp-sm);
}

/* Pantallas altas: fijar al viewport */
@media (min-height: 560px) {
  body { height: 100%; overflow: hidden }
  .app { height: 100dvh; min-height: 0 }
}

/* ======== ENCABEZADO ======== */
.encabezado { text-align: center; flex-shrink: 0 }
.encabezado .fecha-hora {
  font-size: var(--texto-xs); color: var(--tenue);
  display: flex; justify-content: center;
  gap: var(--esp-xs); flex-wrap: wrap;
  margin-top: 2px;
}
.encabezado .fecha-hora span { white-space: nowrap }

/* ======== GRÁFICA ======== */
.contenedor-grafica {
  flex: 1; min-height: 180px;
  display: flex; flex-direction: column;
  background: transparent;
  border: none;
  border-radius: var(--radio);
  overflow: hidden;
}
.contenedor-svg {
  flex: 1; min-height: 0;
  position: relative;
}
.contenedor-svg svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.leyenda {
  display: flex; gap: clamp(.8rem, 5vw, 2rem); justify-content: center;
  padding: 2px 0 var(--esp-xs);
  margin-left: 58px; margin-right: 58px;
  font-size: clamp(.78rem, 3.5vw, .88rem); font-weight: 700; color: var(--tenue);
  flex-shrink: 0; transition: opacity .4s;
}
.leyenda span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center;
}
.leyenda svg { vertical-align: middle; margin-right: 5px; }
.leyenda.oculta { opacity: 0; pointer-events: none }

/* ======== SELECTOR DE VISTA ======== */
.fila-vistas {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--esp-xs) var(--esp-md); flex-shrink: 0;
  position: relative;
}
.linea-vistas {
  position: absolute; height: 4px; border-radius: 2px;
  background: #3e3e4f; pointer-events: none; z-index: 0;
}
.btn-vista {
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: var(--esp-xs) 4px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  position: relative; z-index: 1;
}
.dot-vista {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2.5px solid #3e3e4f; background: #17171e; display: block;
  transition: background .2s, border-color .2s;
}
.btn-vista.activo .dot-vista { background: var(--color-actual); border-color: var(--color-actual); }
.etq-vista {
  font-family: var(--fuente-m); font-size: var(--texto-xs); font-weight: 700;
  color: var(--tenue); white-space: nowrap; text-transform: uppercase;
}
.btn-vista.activo .etq-vista { color: var(--color-actual); }

/* ======== BARRA ACTIVIDAD (actividad seleccionada) ======== */
.barra-actividad {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 7px 10px;
  font-size: var(--texto-xs); color: var(--texto);
  cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ba-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0 }
.ba-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.ba-estado { flex-shrink: 0; font-size: .82em; opacity: .9; white-space: nowrap }
.ba-cerrar {
  flex-shrink: 0; color: var(--tenue); padding: 2px 5px; cursor: pointer;
  border-radius: 4px; transition: color .15s, background .15s;
}
.ba-cerrar:hover { color: var(--texto); background: var(--borde) }

/* ======== BARRA INFERIOR ======== */
.barra-acciones {
  display: flex; justify-content: center; gap: var(--esp-sm);
  flex-shrink: 0; padding: var(--esp-xs) 0;
}
.btn-accion {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--tenue);
  font-family: var(--fuente-m); font-size: var(--texto-xs);
  padding: 8px 16px; cursor: pointer; transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-accion:hover, .btn-accion:active { border-color: var(--neutro); color: var(--texto) }
.btn-accion.activo { border-color: var(--color-actual); color: var(--texto) }

/* ── Tooltip extremos ── */
#tooltipExtremo {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--superficie2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 12px;
  font-family: var(--fuente-m); font-size: var(--texto-xs);
  color: var(--texto); white-space: nowrap;
  box-shadow: 0 4px 16px #00000060;
}

/* ======== MODALES ======== */
.fondo-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.fondo-modal.abierto { opacity: 1; pointer-events: auto }
.modal {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio) var(--radio) 0 0;
  width: 100%; max-width: 560px;
  max-height: 85vh; max-height: 85dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--esp-md) var(--esp-md) calc(var(--esp-md) + var(--zona-inferior));
  transform: translateY(20px); transition: transform .3s;
}
.fondo-modal.abierto .modal { transform: translateY(0) }

/* Pantallas más amplias: centrar modal */
@media (min-width: 480px) {
  .fondo-modal { align-items: center }
  .modal {
    border-radius: var(--radio);
    max-width: min(92vw, 560px);
    width: auto; min-width: 380px;
    padding: var(--esp-md);
  }
}

.modal h2 {
  font-family: var(--fuente-d); font-size: var(--texto-lg); font-weight: 400;
  color: var(--luna); margin-bottom: var(--esp-sm);
}
.modal h3 {
  font-size: var(--texto-sm); color: var(--combinado); font-weight: 400;
  margin: var(--esp-sm) 0 var(--esp-xs);
}
.modal p, .modal .fila-dato {
  font-size: var(--texto-xs); color: var(--tenue); line-height: 1.6;
  margin-bottom: var(--esp-xs);
}
.modal code { color: var(--texto); font-weight: 400; word-break: break-all }
.modal .fila-dato {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--borde); padding: 4px 0;
}
.modal .fila-dato:last-child { border-bottom: none }
.modal .clave { color: var(--tenue) }
.modal .valor { color: var(--texto); font-weight: 400; text-align: right }
.modal .btn-cerrar {
  display: block; margin: var(--esp-sm) auto 0;
  background: none; border: 1px solid var(--borde); border-radius: 4px;
  color: var(--tenue); font-family: var(--fuente-m); font-size: var(--texto-xs);
  padding: 8px 24px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal .btn-cerrar:active { border-color: var(--neutro); color: var(--texto) }

/* ======== MODAL ACTIVIDADES ======== */
.buscador-actividad {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 6px; padding: 8px 10px; color: var(--texto);
  font-family: var(--fuente-m); font-size: var(--texto-sm);
  margin-bottom: var(--esp-sm); -webkit-appearance: none;
}
.buscador-actividad:focus { outline: none; border-color: var(--combinado) }
.chips-categoria {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--esp-sm);
}
.chip-categoria {
  background: none; border: 1px solid var(--borde); border-radius: 999px;
  color: var(--tenue); font-family: var(--fuente-m); font-size: var(--texto-xs);
  padding: 5px 12px; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.chip-categoria:hover { border-color: var(--neutro); color: var(--texto) }
.chip-categoria.activo { border-color: var(--combinado); color: var(--combinado); background: rgba(123,154,255,.1) }

.lista-actividades {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.item-actividad {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.item-actividad:hover { background: var(--superficie2) }
.item-actividad.activo { border-color: var(--combinado); background: rgba(123,154,255,.08) }
.item-act-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0 }
.item-act-nombre { flex: 1; font-size: var(--texto-xs); color: var(--texto) }
.item-act-rango { flex-shrink: 0; font-size: .74rem; color: var(--tenue); font-family: var(--fuente-m) }
.item-quitar { justify-content: center; color: var(--negativo); font-size: var(--texto-xs); border: 1px dashed var(--borde) }
.item-quitar:hover { background: rgba(232,90,106,.1) }
.sin-resultados-act { text-align: center; color: var(--tenue); font-size: var(--texto-xs); padding: 20px 0 }

/* Modal superpuesto (compartir) — z-index mayor, fondo más leve */
.fondo-modal-comp {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.fondo-modal-comp.abierto { opacity: 1; pointer-events: auto }
.fondo-modal-comp .modal { transform: translateY(20px); transition: transform .3s; }
.fondo-modal-comp.abierto .modal { transform: translateY(0) }
@media (min-width: 480px) {
  .fondo-modal-comp { align-items: center }
  .fondo-modal-comp .modal { border-radius: var(--radio); max-width: min(92vw,560px); width: 100%; }
}

/* Modal de configuración */
.grilla-config {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-sm);
  margin: var(--esp-sm) 0;
}
.grilla-config label {
  display: block; font-size: var(--texto-xs); color: var(--tenue);
  margin-bottom: 3px;
}
.grilla-config input {
  width: 100%; background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 4px; padding: 8px; color: var(--texto);
  font-family: var(--fuente-m); font-size: var(--texto-sm); text-align: center;
  -webkit-appearance: none;
}
.grilla-config input:focus { outline: none; border-color: var(--combinado) }
.acciones-config {
  display: flex; gap: var(--esp-sm); justify-content: center;
  margin-top: var(--esp-sm);
}
.acciones-config button {
  background: none; border: 1px solid var(--borde); border-radius: 4px;
  color: var(--texto); font-family: var(--fuente-m); font-size: var(--texto-xs);
  padding: 8px 18px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.acciones-config button:active { border-color: var(--neutro) }
.acciones-config button.primario { background: var(--borde); color: var(--luna) }

/* ======== TELÉFONOS PEQUEÑOS ======== */
@media (max-height: 559px) {
  .contenedor-grafica { min-height: 140px }
}

/* ======== MODAL INFO IAG ======== */
.fondo-modal-iag {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
}
.modal-iag {
  position: relative;
  background: var(--superficie);
  border: 2px solid #783a53;
  border-radius: var(--radio);
  width: min(92vw, 380px);
  padding: var(--esp-md);
  padding-top: calc(42px + var(--esp-sm)); /* espacio para el badge flotante */
  will-change: transform, opacity;
}

/* Badge flotante en el borde superior */
.iag-badge-envoltorio {
  position: absolute;
  top: -38px;
  left: 50%; transform: translateX(-50%);
  width: 72px; height: 72px;
}
.iag-badge-halo {
  position: absolute; inset: 4px; border-radius: 50%;
  background: #17171e;
  border: 2.5px solid #783a53; /* sobreescrito por JS */
}
.iag-badge {
  position: absolute;
  inset: 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; color: #17171e;
  font-family: var(--fuente-m); background: #783a53;
}

/* Título centrado */
.iag-titulo {
  font-family: var(--fuente-d); font-size: var(--texto-sm);
  font-weight: 700; color: #783a53;
  text-align: center; margin-bottom: 2px;
}
.iag-subtitulo {
  font-size: var(--texto-xs); color: var(--tenue);
  text-align: center; margin-bottom: var(--esp-sm);
}

/* Fila astros */
.iag-fila-astros {
  display: flex; align-items: stretch;
  border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden; margin-bottom: var(--esp-sm);
}
.iag-astro {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: var(--esp-sm) var(--esp-xs);
}
.iag-sep-v { width: 1px; background: var(--borde); flex-shrink: 0; }

/* Sprite luna */
.iag-sprite-luna {
  width: 88px; height: 88px; border-radius: 50%;
  background-image: url('iag_28_lunas_sprite.png');
  background-size: 2800% auto;
  background-repeat: no-repeat;
  background-position-x: 0%;
}

/* Ícono sol */
.iag-icono-sol {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: #1c1812;
  line-height: 1;
}

/* Textos de cada astro */
.iag-astro-nombre {
  font-size: .75rem; color: var(--tenue); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.iag-astro-fase {
  font-size: var(--texto-xs); color: var(--tenue); text-align: center;
}
.iag-astro-fuerza {
  font-size: .72rem; color: var(--tenue); opacity: .7;
  font-family: var(--fuente-m); text-align: center;
}
/* 40: Ángulo horario */
.iag-astro-ha {
  font-size: .7rem; color: var(--tenue); opacity: .65;
  font-family: var(--fuente-m); text-align: center;
}
.iag-astro-contrib {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--fuente-m); margin-top: 2px; width: 100%;
}
.iag-val-num { font-size: var(--texto-sm); font-weight: 700; }
.iag-val-flecha { font-size: .82rem; opacity: .7; line-height: 1.1; }

/* 36: Mini barra de contribución (divergente, centro=0) */
.iag-contrib-bar {
  position: relative; width: 100%; height: 8px;
  margin: 5px 0 4px;
}
.iag-contrib-track {
  position: absolute; inset: 0;
  background: var(--borde); border-radius: 4px;
}
.iag-contrib-fill {
  position: absolute; top: 0; height: 100%; border-radius: 3px;
  transition: left .4s ease, width .4s ease;
}
.iag-contrib-bar::after {
  content: ''; position: absolute;
  left: 50%; top: -2px;
  width: 1.5px; height: calc(100% + 4px);
  background: var(--neutro); transform: translateX(-50%);
  z-index: 1;
}
.iag-contrib-val {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--texto-sm); font-weight: 700;
}
.iag-contrib-arrow { font-size: .82rem; opacity: .7; }

/* 39: Tendencia en badge */
.iag-tendencia {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; line-height: 1;
}

/* 37+38: Ciclo lunar */
.iag-ciclo-bloque {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--esp-xs); margin-bottom: var(--esp-sm);
}
.iag-ciclo-cab {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: var(--tenue); margin-bottom: 6px;
  gap: 4px;
}
.iag-ciclo-barra-envoltorio {
  position: relative; padding-top: 22px;
}
.iag-ciclo-iconos {
  position: absolute; top: 0; left: 0; right: 0;
}
.iag-ciclo-icono-wrap {
  position: absolute; transform: translateX(-50%);
}
.iag-mini-luna {
  width: 18px; height: 18px; border-radius: 50%;
  background-image: url('iag_28_lunas_sprite.png');
  background-size: 2800% auto; background-repeat: no-repeat;
  background-position-y: center;
}
.iag-ciclo-barra-bg {
  height: 5px; background: var(--borde); border-radius: 3px;
  position: relative;
}
.iag-ciclo-fill {
  height: 100%; background: #c8d4e8; border-radius: 3px;
  transition: width .5s ease;
}
.iag-ciclo-proximo-fila {
  position: relative; height: 14px; margin-top: 3px; overflow: visible;
}
.iag-proximo-evento {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .6rem; color: var(--tenue); white-space: nowrap;
}

/* Fila actividades */
.iag-fila-actividades {
  border: 1px solid var(--borde); border-radius: 10px;
  padding: var(--esp-xs); margin-bottom: var(--esp-sm);
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texto-xs); color: var(--tenue);
}

/* Texto inferior */
.iag-texto {
  font-size: var(--texto-xs); color: var(--tenue);
  line-height: 1.55; text-align: center;
  padding-top: var(--esp-xs);
}

/* 42: Nota de configuración */
.iag-config-nota {
  font-size: .68rem; color: var(--tenue); text-align: center;
  padding-top: var(--esp-xs); opacity: .6;
}