/*
  Sitio web desarrollado para Bio-Bio TV por Nikolay Stagnaro, con el apoyo de Jorge Ramírez.
  Última actualización: 2026-06-22
*/
@font-face {
  font-family: 'Prometo';
  src: url('fonts/fonnts.com-Prometo.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: 'Prometo';
  src: url('fonts/fonnts.com-Prometo_Medium.otf') format('opentype');
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: 'Prometo';
  src: url('fonts/fonnts.com-Prometo_Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: 'Prometo';
  src: url('fonts/fonnts.com-Prometo_XBold.otf') format('opentype');
  font-style: normal;
  font-weight: 800 900;
  font-display: block;
}

:root {
  --alert: #d9272e;
  --panel: rgba(10, 22, 34, 0.95);
  --text: #ffffff;
  --muted: #b9c6d2;
  --yellow: #ffcc2f;
  --overlay-right: 36px;
  --overlay-bottom: 140px;
  --overlay-width: 510px;
  --overlay-height: 220px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent !important;
  font-family: 'Prometo';
}

body {
  position: relative;
}

.earthquake-overlay {
  position: absolute;
  right: var(--overlay-right);
  bottom: var(--overlay-bottom);
  width: var(--overlay-width);
  height: var(--overlay-height);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  padding: 10px;
  border-left: 8px solid var(--alert);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
}

.earthquake-overlay.hidden {
  opacity: 0;
  transform: translateY(12px);
}

.info-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.tag {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 12px;
  border-left: 6px solid var(--yellow);
  background: var(--alert);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mag-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.magnitude {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 10px 8px;
  background: var(--alert);
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  transition: opacity 220ms ease, transform 220ms ease;
}

.headline {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
  transition: opacity 220ms ease, transform 220ms ease;
}

.detail {
  color: #d7e0e8;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
}

.status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #42d681;
  box-shadow: 0 0 8px rgba(66, 214, 129, 0.7);
}

.status-dot.error {
  background: var(--yellow);
  box-shadow: none;
}

.changing {
  opacity: 0;
  transform: translateY(7px);
}

.map-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #08131e;
}

#map {
  width: 100%;
  height: 100%;
  background: #08131e;
}

.leaflet-container {
  background: #08131e;
  font-family: 'Prometo';
}

.custom-quake-marker {
  position: relative;
  width: 22px;
  height: 22px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 18px rgba(217, 39, 46, 0.95);
}

.custom-quake-marker::before,
.custom-quake-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
}

.custom-quake-marker::before {
  width: 34px;
  height: 2px;
}

.custom-quake-marker::after {
  width: 2px;
  height: 34px;
}

.map-coordinates {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 700;
  padding: 4px 7px;
  background: rgba(10, 22, 34, 0.86);
  color: #ffffff;
  font-family: 'Prometo';
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  border-left: 3px solid var(--alert);
}

@media (max-width: 700px) {
  :root {
    --overlay-right: 12px;
    --overlay-bottom: 24px;
    --overlay-width: calc(100vw - 24px);
    --overlay-height: 220px;
  }

  .earthquake-overlay {
    grid-template-columns: 1fr 0.8fr;
  }

  .headline { font-size: 19px; }
  .magnitude { min-width: 66px; font-size: 26px; }
  .detail { font-size: 14px; }
  .meta { font-size: 11px; }
}


/* Fuerza el uso de Prometo en todo el overlay, incluido Leaflet.
   Los archivos de fuente deben cargarse en /fonts con los nombres indicados arriba. */
*,
*::before,
*::after,
.leaflet-container,
.leaflet-container *,
.leaflet-popup-content {
  font-family: 'Prometo' !important;
}