/* Orca Atlas — hoja de estilos
   Estética: marina, científica, oscura, limpia. */

:root {
  --color-bg: #061420;
  --color-bg-alt: #0a1e30;
  --color-surface: #0e2740;
  --color-surface-alt: #123152;
  --color-border: #1c3a5c;
  --color-text: #eaf3fb;
  --color-text-dim: #9db3c8;
  --color-accent: #35c9e1;
  --color-accent-strong: #6ee7f5;
  --color-accent-soft: rgba(53, 201, 225, 0.15);
  --color-warning-bg: #3a2a12;
  --color-warning-border: #8a6420;
  --color-warning-text: #ffd88a;
  --color-sighting: #7fb3d5;
  --color-identified: #f2c14e;
  --color-named: #ff6f61;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  min-height: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #04141f;
  padding: 0.5rem 1rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

a {
  color: var(--color-accent-strong);
}

/* ---------- Header ---------- */

.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 500;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-header__icon {
  font-size: 2rem;
}

.app-header h1 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.app-header__tagline {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}

.app-header__search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}

#search-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
}

#search-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 320px;
  overflow-y: auto;
  z-index: 600;
}

.search-results__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.9rem;
}
.search-results__item:hover,
.search-results__item:focus {
  background: var(--color-accent-soft);
}
.search-results__item small {
  display: block;
  color: var(--color-text-dim);
}
.search-results__empty {
  padding: 0.75rem 0.9rem;
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

/* ---------- Status banner ---------- */

.status-banner {
  margin: 0.75rem 1.5rem 0;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  font-size: 0.9rem;
}
.status-banner--error {
  background: #3a1414;
  border-color: #8a2020;
  color: #ffb3b3;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.5rem;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
}

.stat-card__label {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  padding: 0 1.5rem 1rem;
  align-items: start;
}

.layout__map-wrap {
  position: relative;
}

#map {
  height: 68vh;
  min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #08131e;
}

.map-disclaimer {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  border-radius: var(--radius);
  font-size: 0.82rem;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  max-height: 46vh;
  overflow-y: auto;
}

.sidebar__section h2 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.sidebar__hint {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

.region-list, .individual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.region-list__button, .individual-list__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--color-surface-alt);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
}
.region-list__button:hover, .individual-list__button:hover,
.region-list__button:focus, .individual-list__button:focus {
  border-color: var(--color-accent);
}
.region-list__button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.region-list__count {
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

.individual-list__button {
  align-items: center;
}

.individual-list__marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-identified);
}
.individual-list__item[data-has-name="true"] .individual-list__marker {
  background: var(--color-named);
}

.individual-list__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.individual-list__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.individual-list__id {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-button, .secondary-button {
  margin-top: 0.6rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-accent-strong);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
}
.link-button:hover, .secondary-button:hover {
  border-color: var(--color-accent);
}

.empty-note {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  padding: 0.4rem 0;
}

/* ---------- Detail panel (ficha) ---------- */

.detail-panel {
  margin: 0 1.5rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  position: relative;
  box-shadow: var(--shadow);
}

.detail-panel__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.1rem;
  cursor: pointer;
}
.detail-panel__close:hover {
  color: var(--color-text);
}

.detail-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.detail-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
}
.badge--named { border-color: var(--color-named); color: var(--color-named); }
.badge--identified { border-color: var(--color-identified); color: var(--color-identified); }
.badge--sighting { border-color: var(--color-sighting); color: var(--color-sighting); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0.8rem 0;
}

.detail-field dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  margin: 0;
}
.detail-field dd {
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
}

.detail-source {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-dim);
}

.detail-history-list {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  max-height: 220px;
  overflow-y: auto;
}

.no-data {
  color: var(--color-text-dim);
  font-style: italic;
}

/* ---------- Sources ---------- */

.sources {
  margin: 0 1.5rem 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--color-text-dim);
}
.sources h2 {
  color: var(--color-text);
  font-size: 1rem;
  margin-top: 0;
}
.sources code {
  background: var(--color-surface-alt);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.datasets-list {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.dataset-chip {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
}
.dataset-chip strong {
  display: block;
  color: var(--color-text);
  font-size: 0.82rem;
}

/* ---------- Footer ---------- */

.app-footer {
  padding: 1rem 1.5rem 2rem;
  color: var(--color-text-dim);
  font-size: 0.78rem;
  text-align: center;
}

/* ---------- Leaflet popup theming ---------- */

.leaflet-popup-content-wrapper {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-radius: 8px;
}
.leaflet-popup-tip {
  background: var(--color-surface-alt);
}
.orca-popup h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}
.orca-popup dl {
  margin: 0;
  font-size: 0.8rem;
}
.orca-popup dt {
  color: var(--color-text-dim);
  float: left;
  clear: left;
  margin-right: 0.4rem;
}
.orca-popup dd {
  margin: 0 0 0.15rem;
}
.orca-popup button {
  margin-top: 0.4rem;
  background: var(--color-accent);
  border: none;
  color: #04141f;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .layout {
    grid-template-columns: 1fr;
  }
  #map {
    height: 50vh;
  }
  .sidebar__section {
    max-height: none;
  }
}

@media (max-width: 520px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
  }
  .app-header__search {
    max-width: none;
  }
}