/*
 * Artenia phased shell hooks.
 * p0 is baseline; p1-p3 will activate progressive UI upgrades.
 */

html[data-shell-phase="p0"] {
  /* Baseline layout: no visual overrides yet. */
}

html[data-shell-phase="p1"] {
  /* Fase 1: shell unificado desktop/movil */
}

.phase-shell-slots {
  display: none;
}

html[data-page="mapa"][data-shell-phase="p1"] .phase-shell-slots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

html[data-page="mapa"][data-shell-phase="p1"] .phase-slot {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(117, 199, 214, 0.32);
  background: rgba(7, 29, 41, 0.78);
  color: #c6e9f1;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

html[data-page="mapa"][data-shell-phase="p1"] .phase-slot.is-active {
  border-color: rgba(124, 242, 255, 0.7);
  color: #e8fcff;
  background: linear-gradient(135deg, rgba(14, 62, 80, 0.9), rgba(11, 90, 104, 0.85));
  box-shadow: 0 0 0 1px rgba(124, 242, 255, 0.18), 0 8px 16px rgba(3, 20, 29, 0.35);
}

html[data-page="mapa"][data-shell-phase="p1"] .map-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 430px);
  grid-template-rows: auto auto minmax(460px, 64vh) auto auto auto;
  grid-template-areas:
    "map-header map-header"
    "map-topline map-topline"
    "map results"
    "legend ficha"
    "filters ficha"
    "social ficha";
  gap: 12px !important;
  align-items: start;
  padding: 12px !important;
  min-height: 100vh;
}

html[data-page="mapa"][data-shell-phase="p1"] .map-header {
  grid-area: map-header;
}

html[data-page="mapa"][data-shell-phase="p1"] .map-topline {
  grid-area: map-topline;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html[data-page="mapa"][data-shell-phase="p1"] #map {
  grid-area: map;
  width: 100%;
  min-height: 500px !important;
  height: min(70vh, 860px) !important;
  margin: 0 !important;
  border-radius: 20px;
}

html[data-page="mapa"][data-shell-phase="p1"] #resultsPanel {
  grid-area: results;
  position: sticky !important;
  top: 12px !important;
  right: auto !important;
  width: 100% !important;
  max-height: min(46vh, 500px) !important;
  display: block !important;
  z-index: 40 !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #fichaPanel {
  grid-area: ficha;
  position: sticky !important;
  top: calc(12px + min(46vh, 500px) + 12px) !important;
  right: auto !important;
  width: 100% !important;
  max-height: calc(100vh - 24px - min(46vh, 500px) - 12px) !important;
  display: block !important;
  z-index: 39 !important;
  overflow: auto !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #fichaBody:empty::before {
  content: "Selecciona un nodo en Neural para abrir Node Detail.";
  display: block;
  margin: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(106, 178, 194, 0.28);
  background: rgba(8, 32, 44, 0.52);
  color: #bedde6;
  font-size: 0.74rem;
  line-height: 1.45;
}

html[data-page="mapa"][data-shell-phase="p1"] #socialRail {
  grid-area: social;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #legendCard {
  grid-area: legend;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

html[data-page="mapa"][data-shell-phase="p1"] .map-filters-panel {
  grid-area: filters;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #btnCreateRouteFloat {
  grid-area: filters;
  position: static !important;
  justify-self: end;
  align-self: end;
  margin-top: 8px !important;
  display: inline-flex !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #resultsPanel,
html[data-page="mapa"][data-shell-phase="p1"] #fichaPanel,
html[data-page="mapa"][data-shell-phase="p1"] #socialRail,
html[data-page="mapa"][data-shell-phase="p1"] #legendCard,
html[data-page="mapa"][data-shell-phase="p1"] .map-filters-panel {
  border: 1px solid rgba(86, 158, 174, 0.3) !important;
  background: rgba(4, 23, 33, 0.82) !important;
  box-shadow: 0 14px 28px rgba(2, 11, 19, 0.24) !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #resultsPanel .results-head h3,
html[data-page="mapa"][data-shell-phase="p1"] #fichaPanel .ficha-head h3 {
  color: #eafaff !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #resultsPanel .result-info {
  color: #a9d2dc !important;
}

html[data-page="mapa"][data-shell-phase="p1"] #fichaPanel .ficha-card {
  background: rgba(7, 31, 43, 0.78);
  border-color: rgba(92, 162, 178, 0.34);
}

@media (max-width: 1100px) {
  html[data-page="mapa"][data-shell-phase="p1"] .map-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  html[data-page="mapa"][data-shell-phase="p1"] .map-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #map {
    order: 1;
    min-height: 360px !important;
    height: clamp(360px, 58dvh, 640px) !important;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #resultsPanel {
    order: 2;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #fichaPanel {
    order: 3;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    display: block !important;
    border-radius: 16px !important;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #socialRail {
    order: 4;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #legendCard {
    order: 5;
  }

  html[data-page="mapa"][data-shell-phase="p1"] .map-filters-panel {
    order: 6;
  }

  html[data-page="mapa"][data-shell-phase="p1"] #btnCreateRouteFloat {
    order: 7;
    justify-self: auto;
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}

html[data-page="mapa"][data-shell-stage="p2"] .phase-slot {
  border-color: rgba(117, 199, 214, 0.4);
}

html[data-page="mapa"][data-shell-stage="p2"] .phase-slot:focus-visible {
  outline: 2px solid rgba(124, 242, 255, 0.9);
  outline-offset: 1px;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #socialRail {
  grid-area: ficha !important;
  position: sticky !important;
  top: calc(12px + min(46vh, 500px) + 12px) !important;
  max-height: calc(100vh - 24px - min(46vh, 500px) - 12px) !important;
  overflow: auto !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #fichaPanel {
  grid-area: social !important;
  position: static !important;
  top: auto !important;
  max-height: min(36vh, 320px) !important;
  overflow: auto !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #resultsPanel {
  max-height: min(34vh, 300px) !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="node"] #socialRail {
  display: none !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="node"] #fichaPanel {
  top: 12px !important;
  max-height: calc(100vh - 24px) !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #socialRail,
html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #fichaPanel {
  display: none !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #legendCard {
  grid-area: ficha !important;
  position: sticky !important;
  top: 12px !important;
  max-height: min(48vh, 520px) !important;
  overflow: auto !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] .map-filters-panel {
  grid-area: results !important;
  position: sticky !important;
  top: calc(12px + min(48vh, 520px) + 12px) !important;
}

html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #resultsPanel {
  grid-area: social !important;
  max-height: none !important;
}

@media (max-width: 1100px) {
  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #socialRail {
    order: 2 !important;
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #resultsPanel {
    order: 3 !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="flujo"] #fichaPanel {
    order: 4 !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="node"] #fichaPanel {
    order: 2 !important;
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="node"] #resultsPanel {
    order: 3 !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #legendCard {
    order: 2 !important;
    position: static !important;
    top: auto !important;
    max-height: none !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] .map-filters-panel {
    order: 3 !important;
    position: static !important;
    top: auto !important;
  }

  html[data-page="mapa"][data-shell-stage="p2"][data-shell-view="growth"] #resultsPanel {
    order: 4 !important;
  }
}

html[data-shell-phase="p3"] {
  /* Reserved for cinematic polish + motion. */
}