/* ============================================================
   AroundME — Diseño moderno responsive
   Fuentes: Rajdhani (display) + Source Sans 3 (body)
   Paleta: noche profunda con acentos neón-ámbar y cyan
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&family=Share+Tech+Mono&display=swap');

/* ── Variables globales ─────────────────────────────────── */
:root {
  --bg-dark:       #0b0f1a;
  --bg-card:       #111827;
  --bg-card2:      #1a2233;
  --border:        rgba(255,255,255,0.07);
  --border-accent: rgba(251,191,36,0.35);
  --accent:        #fbbf24;       /* ámbar */
  --accent2:       #22d3ee;       /* cyan */
  --accent3:       #a78bfa;       /* violeta suave */
  --text-primary:  #f0f4f8;
  --text-secondary:#94a3b8;
  --text-dim:      #4b5563;
  --green-ok:      #34d399;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 18px rgba(251,191,36,0.18);
  --radius:        12px;
  --radius-sm:     7px;
  --font-display:  'Rajdhani', sans-serif;
  --font-body:     'Source Sans 3', sans-serif;
  --font-mono:     'Share Tech Mono', monospace;
  --header-h:      80px;
}

/* ── Reset y base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(34,211,238,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 90% 110%, rgba(167,139,250,0.06) 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  text-align: left;
}

p   { text-align: justify; line-height: 1.6; }
h1  { font-family: var(--font-display); font-size: 1.6em; text-align: center; letter-spacing: .04em; }
h3,h4 { font-family: var(--font-display); text-align: center; }
img { border: none; max-width: 100%; }
img.izquierda { float: left; }
img.derecha   { float: right; }

/* ── Wrapper global ─────────────────────────────────────── */
#global {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100dvh;          /* ocupa exactamente la ventana */
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* sin scroll en el wrapper */
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
#head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;            /* alinea reloj y logo por su base */
  padding: 10px 20px;
  border-bottom: 1px solid white;
  position: relative;
  width: 100%;
  overflow: visible;           /* permite que el avatar solape el mapa si crece */
}

#title {
  display: contents;           /* reloj, logo y sesion pasan a ser hijos directos del grid */
}

#title img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 420px;
  filter: drop-shadow(0 0 12px rgba(251,191,36,0.3));
  justify-self: center;
}

#reloj {
  font-family: var(--font-mono);
  font-size: 15px;             /* más pequeño */
  color: var(--accent);
  background: var(--bg-card2);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(251,191,36,0.4);
  white-space: nowrap;
  width: fit-content;
  justify-self: start;
  align-self: end;             /* base alineada con la base del logo */
  margin-bottom: 2px;          /* ajuste fino para que la línea base visual coincida */
}

#sesion {
  /*justify-self: end;
  align-self: center;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1000;*/
}

@media (min-width: 1025px) {
  #title img { height: 70px; max-width: 500px; }
  #reloj     { font-size: 16px; }
}
@media (max-width: 600px) {
  #head      { padding: 8px 12px; }
  #title img { height: 42px; max-width: 220px; }
  #reloj     { font-size: 12px; padding: 3px 7px; }
}

/* ════════════════════════════════════════════════════════════
   BODY2 — contenedor principal
   ════════════════════════════════════════════════════════════ */
#body2 {
  flex: 1;                 /* crece para llenar el espacio restante bajo #head */
  min-height: 0;           /* permite que flex hijo sea más pequeño que su contenido */
  margin-top: 16px;
  overflow: hidden;
}

#content { display: none; }
#principal { display: none; }

/* ════════════════════════════════════════════════════════════
   #entorno — grid de dos columnas (sidebar + mapa)
   El mapa (#mapa) vive dentro de #entorno en el HTML
   ════════════════════════════════════════════════════════════ */
#entorno {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "cal     map"
    "moon    map"
    "meteo   map"
    "cond    map"
    "coords  map"
    ".       loc";   /* ubicacion debajo del mapa, columna derecha */
  column-gap: 20px;
  row-gap: 10px;
  align-items: start;
  background: none;
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 12px;
  opacity: 1;
  overflow: hidden;
  z-index: auto;
}

/* Sidebar en tablet landscape — dos columnas con loc bajo el mapa */
@media (max-width: 1024px) and (orientation: landscape) {
  #global {
    overflow-y: auto;
    height: auto;
    min-height: 100dvh;
  }
  #entorno {
    overflow: visible;
    height: auto;
    grid-template-columns: 320px 1fr;
    grid-template-areas:
      "cal     map"
      "moon    map"
      "meteo   map"
      "cond    map"
      "coords  map"
      ".       loc";
  }
  #mapa {
    grid-row: 1 / -2;      /* deja última fila para loc */
    height: auto;
    min-height: 70dvh;
  }
  #ubicacion {
    display: block;        /* asegurar que es visible */
  }
}

/* Asignar grid-area a cada hijo de #entorno */
#moon        { grid-area: moon; }
#calendario  { grid-area: cal; }
#dia24h      { grid-area: meteo; }
#ubicacion   { grid-area: loc; }
#condiciones { grid-area: cond; }
#coordenadas { grid-area: coords; }
#mapa        { grid-area: map; } /* grid-row definido en la regla principal */

/* ── Tarjeta genérica ──────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Fase lunar ────────────────────────────────────────── */
#moon {
  font-family: var(--font-display);
  font-size: 0.82em;
  letter-spacing: .06em;
  color: #ffffff;
  text-transform: uppercase;
  text-align: right;
  background: transparent;
  border: none;
  padding: 2px 4px;
  width: 100%;
  height: auto;
  position: static;
  float: none;
  margin: 0;
}

/* ============================================================
   RECONSTRUCCIÓN COMPLETA DEL CALENDARIO (Fusión Optimizada)
   ============================================================ */

/* Contenedor principal de la tarjeta */
#calendario-contenedor {
    position: relative;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

/* ── CABECERA: Flecha e información alineados a la izquierda ── */
#calendario-cabecera {
    display: flex !important;
    justify-content: flex-start !important; /* Todo a la izquierda */
    align-items: center !important;         /* Centrado vertical */
    width: 100% !important;
    text-align: left !important;
    cursor: pointer;
    margin-bottom: 6px; /* Ajustado para reducir espacio vertical */
}

/* La Flecha: Se muestra la primera visualmente a la izquierda */
#flecha-cal {
    position: static !important;
    float: none !important;
    transform: none !important;
    color: #22d3ee !important; 
    font-size: 14px !important;
    display: inline-block !important;
    margin-right: 10px !important; /* Espacio de separación hacia el texto */
}

/* El título "CALENDARIO" (Dinámico: pasará a mostrar el "MES AÑO" en mayúsculas) */
#calendario-titulo {
    color: #aaa !important; 
    font-size: 12px !important; 
    font-weight: bold !important;
    display: inline-block !important;
}

/* La fecha larga (Cuando el JS oculta el título y la muestra) */
#fecha-larga {
    color: #fff !important; 
    font-weight: 600 !important; 
    font-size: 13px !important; /* Ligeramente más compacto */
    display: inline-block !important;
}

/* ── RESTAURACIÓN DE LA TABLA DEL CALENDARIO ── */
#calendario-contenedor table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    margin-top: 2px !important; /* Pegamos más la tabla arriba */
}

#calendario-contenedor td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px 0 !important; /* COMPRESIÓN VERTICAL: Reducido de 6px a 2px */
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
}

/* Días de la semana (L M X J V S D) */
#calendario-contenedor td.sinborde {
    font-size: 11px !important;
    color: #22d3ee !important; 
    font-weight: 600 !important;
    text-transform: uppercase;
    border: none !important;
    padding-bottom: 4px !important; /* Reducido de 8px a 4px */
}

/* Botones de los días */
#calendario-contenedor button {
    width: 26px !important;  /* Reducido de 28px */
    height: 24px !important; /* Compactado verticalmente de 28px a 24px */
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    color: #f0f4f8 !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#calendario-contenedor button:hover {
    background: rgba(251,191,36,0.15) !important;
    color: #fbbf24 !important;
}

/* ── REGLAS DE COLOR ESPECÍFICAS PARA FINES DE SEMANA ── */

/* SÁBADOS: Texto de los botones en color ROSA */
#calendario-contenedor td:nth-child(6) button {
    color: #f472b6 !important; /* Rosa suave neón */
}

/* DOMINGOS: Texto de los botones en color GRIS CLARO */
#calendario-contenedor td:nth-child(7) button {
    color: #cbd5e1 !important; /* Gris claro nítido */
}

/* ── CLASES DE ESTILO PRIORITARIAS (Tu lógica original) ── */

/* Día actual (Círculo Amarillo) */
#calendario-contenedor .hoy button {
    background: #fbbf24 !important; 
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
}

/* Días fuera del mes actual */
#calendario-contenedor .gris button,
#calendario-contenedor .little button {
    color: #4b5563 !important; 
    background: transparent !important;
}

/* Días con eventos o destacar (Borde Cyan) */
#calendario-contenedor .azul button {
    color: #22d3ee !important;
    font-weight: 600 !important;
    border: 1px solid rgba(34,211,238,0.25) !important;
    border-radius: 4px !important;
}

/* Días normales */
#calendario-contenedor .normal button {
    color: #f0f4f8 !important;
}

.gris button {
  color: var(--text-dim) !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.8em;
}
.azul button {
  color: var(--accent2) !important;
  font-weight: 600;
  background: transparent !important;
  border: 1px solid rgba(34,211,238,0.25) !important;
  border-radius: 4px !important;
}
.normal button {
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
}
.negro {
  color: var(--text-dim);
  background: transparent;
  font-size: 0.75em;
}

/* ── Widget día 24h / Meteo ────────────────────────────── */
#dia24h {
  float: none;
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 220; /* proporción exacta de dia-24h.png (360x220px) */
  height: auto;
  margin: 0;
  border-radius: var(--radius);
  overflow: visible;    /* necesario para que #flechas sobresalga por arriba y abajo */
  background-image: url(graphics/weather/dia-24h.png);
  background-size: 100% 100%;
  box-shadow: var(--shadow-card);
  font-size: 2.2vw;         /* fuente base — escala con el ancho */
}

@media (min-width: 1025px) {
  #dia24h { font-size: 0.75em; }
}

#flechas {
  position: absolute;
  background-image: url(graphics/Flechas.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 15px;
  height: calc(100% + 40px); /* alto de dia24h + 40px para sobresalir */
  top: -20px;                /* sube 20px para sobresalir por arriba y por abajo */
  left: 0;
  margin: 0;
  z-index: 1300;
  pointer-events: none;      /* no interfiere con clicks en el mapa */
}

#Meteo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 62%;             /* 137/220 ≈ 62% */
  z-index: 999;
}
#Meteo img { z-index: 1004; }
#Meteo table { width: 100%; border-collapse: separate; }
#Meteo td {
  border: 1px solid rgba(34,211,238,0.2);
  text-align: left;
  vertical-align: top;
  color: #e2e8f0;
  font-size: inherit;      /* hereda de #dia24h */
  font-weight: bold;
}
#Meteo td.img { max-width: 100%; max-height: 100%; }

#stars {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 1001;
}
#twinkling {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: transparent url("graphics/weather/stars/twinkling.png") repeat top center;
  z-index: 1002;
  animation: move-twink-back 400s linear infinite;
}
#clouds {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1005;
  opacity: 0.9;
  animation: move-clouds-back 1000s linear infinite;
}
#weather {
  position: absolute;
  inset: 0;
  width: 100%; height: 95%;
  z-index: 1005;
}

#Dia {
  position: absolute;
  width: 0;
  height: 66%;             /* 145/220 ≈ 66% */
  top: 0; left: 120px;
  opacity: 0.8;
  background-image: url("graphics/weather/sunday.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1500;
}
#Dia2 {
  position: absolute;
  width: 0;
  height: 24%;             /* 53/220 ≈ 24% */
  top: 75%;                /* 166/220 ≈ 75% */
  left: 120px;
  opacity: 0.8;
  background-image: url("graphics/weather/Dia2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1501;
}
#salida {
  position: absolute;
  width: 12%;              /* proporcional al contenedor */
  height: auto;
  font-size: 2.2vw;        /* escala con el ancho de pantalla */
  line-height: 1.4;
  color: #334155;
  background: rgba(255,255,255,0.88);
  top: 8%;
  left: 0;                 /* el JS posiciona left dinámicamente */
  opacity: 0.9;
  border-radius: 3px;
  text-align: center;
  padding: 1% 0;
  white-space: nowrap;
}

#puesta {
  position: absolute;
  width: 12%;
  height: auto;
  font-size: 2.2vw;
  line-height: 1.4;
  color: #334155;
  background: rgba(255,255,255,0.88);
  top: 27%;
  /* left se calcula en JS — right:0 dentro de #Dia alinea al borde derecho */
  right: 0;                /* alineado al margen derecho de #Dia */
  left: auto !important;   /* anula el left que asigna el JS */
  opacity: 0.9;
  border-radius: 3px;
  text-align: center;
  padding: 1% 0;
  white-space: nowrap;
}

@media (min-width: 1025px) {
  #salida, #puesta { font-size: 0.7em; }
}
#Luna_hoy {
  position: absolute;
  width: 21%;              /* 55/360 ≈ 15% */
  height: 25%;             /* 40/220 ≈ 18% */
  left: calc(100% - 14%);
  top: 2%;
  opacity: 0.85;
  z-index: 1603;
}
#Luna_hoy img { max-width: 100%; max-height: 100%; }

#meteo_td, #meteo_tm {
  position: absolute;
  width: 100%;
  height: 22%;             /* 50/220 ≈ 22% */
  left: 2px;
  background: transparent;
  color: white;
  opacity: 0.85;
  z-index: 1600;
}
#meteo_td { top: 40%; font-size: inherit; }
#meteo_tm { top: 79.5%; font-size: inherit; z-index: 1650; }

#dia1, #dia2 {
  position: absolute;
  top: -1.8em; left: 0;
  width: 4em;
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--text-secondary);
}
#temp_min {
  position: relative; float: left;
  width: 40px; height: 20px;
  color: var(--accent2);
  background: rgba(0,0,0,0.6);
  border-radius: 3px;
}
#temp_max {
  position: relative; float: left;
  width: 40px; height: 20px;
  color: var(--accent);
  background: rgba(0,0,0,0.6);
  border-radius: 3px;
}

/* ── Ubicación ─────────────────────────────────────────── */
#ubicacion {
  grid-area: loc;
  background: linear-gradient(90deg, rgba(34,211,238,0.12), rgba(251,191,36,0.08));
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 8px 14px;
  text-align: center;
  width: 100%;
  height: auto;
  margin: 0;
  position: static;
  align-self: end;           /* se ancla al fondo de su celda */
}

/* ── Condiciones meteorológicas ────────────────────────── */
#condiciones {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  width: 100%;
  height: auto;
  margin: 0;
  position: static;
}

#temperatura {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 700;
  padding: 4px 8px;
  min-width: 60px;
  height: auto;
  width: auto;
  margin: 0;
  position: static;
  text-align: center;
}

#tiempo {
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: static;
}

/* ── Coordenadas ────────────────────────────────────────── */
#coordenadas {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--text-dim);
  text-align: center;
  background: transparent;
  width: 100%;
  height: auto;
  position: static;
}

/* ════════════════════════════════════════════════════════════
   MAPA
   ════════════════════════════════════════════════════════════ */
#mapa {
  grid-area: map;
  /* grid-row controlado por grid-template-areas — no sobreescribir */
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card), 0 0 40px rgba(34,211,238,0.05);
  overflow: hidden;
  float: none;
  position: relative;
  align-self: stretch;
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES
   ════════════════════════════════════════════════════════════ */
@keyframes move-twink-back {
  from { background-position: 0 0; }
  to   { background-position: -10000px 5000px; }
}
@keyframes move-clouds-back {
  from { background-position: 0 0; }
  to   { background-position: 10000px 0; }
}
@keyframes fade {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
.blinking { animation: fade 1s infinite alternate; }

/* ════════════════════════════════════════════════════════════
   MODAL / OVERLAYS
   ════════════════════════════════════════════════════════════ */
.overlay, .log, .reg, .modalDialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  transition: opacity 400ms ease-in;
  font-family: var(--font-body);
}
.log > div, .reg > div, .modalDialog > div {
  width: min(400px, 90vw);
  position: relative;
  margin: 15vh auto;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow-glow);
  color: var(--text-primary);
}
.close {
  background: #606061;
  color: #fff;
  line-height: 25px;
  position: absolute;
  right: -12px; top: -10px;
  width: 24px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50%;
  box-shadow: 1px 1px 3px #000;
}
.close:hover { background: var(--accent2); }

/* ════════════════════════════════════════════════════════════
   CLASES DE UTILIDAD
   ════════════════════════════════════════════════════════════ */
.min  { font-weight: bold; color: var(--accent2); }
.max  { font-weight: bold; color: var(--accent); }
.stroke {
  -webkit-text-fill-color: #fef9c3;
  -webkit-text-stroke: 1px rgba(0,0,0,.7);
  font-family: var(--font-display);
  background: rgba(0,0,0,.5);
  color: #fff;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
.sinborde { font-size: 0.8em; border: none; }
.header-read {
  border-top: 1px solid var(--border);
  border-left: 4px solid #f87171;
  background: var(--bg-card2);
  opacity: 0.9;
}
.header-unread {
  border-top: 1px solid var(--border);
  border-left: 4px solid var(--accent2);
  opacity: 0.95;
}
.subject { font-family: var(--font-body); font-weight: 600; font-size: 0.9em; }
.from    { color: var(--green-ok); font-size: 0.9em; }
.date    { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-dim); }
.blanco  { color: var(--text-secondary); }
.rojo    { background-color: #dc2626; }
.verde   { color: #f0f4f8; background-color: #1d4ed8; }
.amarillo { background-color: #d97706; }

.profile {
  border: 1px solid var(--border);
  padding: 10px;
  margin-top: 10px;
  width: 260px;
  background: var(--bg-card2);
  border-radius: var(--radius-sm);
  height: 160px;
  font-size: 0.8em;
}
.profile p   { margin: 0 0 10px; }
.head        { margin-bottom: 10px; }
.head a      { float: right; }
.profile img { float: left; margin: 0 10px 10px 0; }

/* ── Botón Google ─────────────────────────────────────── */
#customBtn {
  display: inline-block;
  background: var(--accent);
  color: #111;
  width: 200px;
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  cursor: pointer;
}
#customBtn:hover { filter: brightness(1.1); }
span.label      { font-family: var(--font-body); font-weight: 400; }
span.icon       {
  background: url('/graphics/google_icon.png') transparent 1px 50% no-repeat;
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  width: 25px; height: 25px;
}
span.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding: 0 4px;
  font-size: 0.8em;
  font-weight: 700;
  font-family: var(--font-body);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤900px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #global {
    height: 100dvh;
    overflow-y: auto;
  }

  #body2 {
    overflow: visible;
    margin-top: 10px;
  }

  #entorno {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "map"
      "loc"
      "cal"
      "moon"
      "meteo"
      "cond"
      "coords";
    height: auto;
    overflow: visible;
    row-gap: 10px;
  }

  /* Mapa: 80dvh menos la altura del head (~60px) */
  #mapa {
    grid-row: auto;
    width: 100%;
    height: calc(80dvh - 60px);
    min-height: 240px;
  }

  #head {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — móvil (≤560px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  #global { padding: 0 6px; }

  /* Logo y reloj se escalan solos con clamp/vw — no hace falta override */

  #mapa { height: calc(80dvh - 56px); min-height: 220px; }

  #ubicacion { font-size: 0.95em; padding: 5px 10px; }

  #condiciones { flex-direction: column; align-items: flex-start; gap: 5px; }

  /* dia24h: aspect-ratio 360/220 gestiona el alto automáticamente */
}


/* ════════════════════════════════════════════════════════════
   MODAL DE PERFIL — auth.js
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
}

.modal-box {
  background: var(--bg-card, #111827);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px 24px;
  width: min(520px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  color: var(--text-primary, #f0f4f8);
  scrollbar-width: thin;
  scrollbar-color: rgba(34,211,238,0.3) transparent;
}

.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.3); border-radius: 2px; }

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary, #f0f4f8);
}

.modal-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 6px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-primary, #f0f4f8);
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(34,211,238,0.5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}

.chip:hover { border-color: rgba(34,211,238,0.4); color: #22d3ee; }
.chip-activo { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.5); color: #22d3ee; }

.form-error {
  color: #f87171;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(248,113,113,0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.modal-actions {
  margin-top: 20px;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}

.btn-primary:hover { opacity: .9; }

/* ── Avatares — cuadrícula ── */
.avatar-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  margin-bottom: 12px;
}

.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1a2233;
  border: 2px solid rgba(34,211,238,0.3);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CRÍTICO: contrarrestar el max-width:none de Leaflet solo para avatares */
.avatar-preview img,
.av-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50%;
}

.avatar-placeholder { font-size: 28px; opacity: .5; }

.avatar-acciones { flex: 1; }

.btn-avatar-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 8px;
  color: #22d3ee;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.av-seccion { margin-top: 4px; }
.av-label { font-size: 11px; color: #64748b; margin-bottom: 8px; display: block; }

.av-filtros { display: flex; gap: 6px; margin-bottom: 10px; }
.av-filtro {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}
.av-filtro-activo { background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.4); color: #22d3ee; }

.av-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(34,211,238,0.3) transparent;
}

.av-item {
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .12s;
  aspect-ratio: 1;
  width: 100%;
}

.av-item:hover { border-color: rgba(34,211,238,0.5); transform: scale(1.08); }
.av-item-sel { border-color: #22d3ee !important; transform: scale(1.08); box-shadow: 0 0 0 2px rgba(34,211,238,0.3); }

/* Privacidad */
.privacidad-grupo { margin-top: 4px; }
.privacidad-info { font-size: 12px; color: #94a3b8; margin: 4px 0 12px; display: block; line-height: 1.5; }
.privacidad-info strong { color: #22d3ee; }

.privacidad-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.privacidad-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}
.privacidad-opcion:hover { background: rgba(34,211,238,0.07); border-color: rgba(34,211,238,0.25); }
.privacidad-opcion.activa { background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.5); }
.privacidad-opcion input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.priv-icono { font-size: 18px; flex-shrink: 0; }
.priv-texto { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.priv-texto strong { font-size: 13px; color: #f0f4f8; }
.priv-texto em { font-size: 11px; font-style: normal; color: #64748b; }
.privacidad-opcion.activa .priv-texto strong { color: #22d3ee; }
.priv-badge { position: absolute; top: -1px; right: -1px; background: #fbbf24; color: #000; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 0 10px 0 6px; text-transform: uppercase; }
.privacidad-exacta { border-color: rgba(251,191,36,0.2); }
.privacidad-exacta.activa { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.5); }
.priv-aviso { font-size: 10px; color: #fbbf24; flex-shrink: 0; }

/* Nacionalidad */
.nacionalidad-wrap { display: flex; flex-direction: column; gap: 8px; }
.pais-wrap { display: flex; align-items: center; gap: 10px; }
.bandera-pais { font-size: 24px; flex-shrink: 0; width: 32px; text-align: center; transition: transform .15s; }
.bandera-pais.cambiando { transform: scale(0.7); opacity: 0.4; }
.select-pais { flex: 1; font-size: 14px; }

@media (max-width: 480px) {
  .privacidad-opciones { grid-template-columns: 1fr; }
  .av-grid { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   LEAFLET — estilos del mapa (no tocar)
   ════════════════════════════════════════════════════════════ */

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-map-pane svg,
.leaflet-map-pane canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	    touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	    touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }
.leaflet-vml-shape { width: 1px; height: 1px; }
.lvml { behavior: url(#default#VML); display: inline-block; position: absolute; }


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top    { top: 0;    }
.leaflet-right  { right: 0;  }
.leaflet-bottom { bottom: 0; }
.leaflet-left   { left: 0;   }
.leaflet-control { float: left; clear: both; }
.leaflet-right .leaflet-control { float: right; }
.leaflet-top    .leaflet-control { margin-top: 10px; }
.leaflet-bottom .leaflet-control { margin-bottom: 10px; }
.leaflet-left   .leaflet-control { margin-left: 10px;  }
.leaflet-right  .leaflet-control { margin-right: 10px; }


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile          { will-change: opacity; }
.leaflet-fade-anim .leaflet-popup         { opacity: 0; transition: opacity 0.2s linear; }
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; }
.leaflet-zoom-animated                    { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }
.leaflet-zoom-anim .leaflet-zoom-animated { will-change: transform; }
.leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); }
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim  .leaflet-tile          { -webkit-transition: none; -moz-transition: none; transition: none; }
.leaflet-zoom-anim .leaflet-zoom-animated.leaflet-retrieved-marker-icon { -webkit-transition: none; transition: none; }
.leaflet-touch .leaflet-zoom-animated     { -webkit-transition-duration: 0.25s; transition-duration: 0.25s; }


/* cursors */

.leaflet-grabbing  { cursor: -webkit-grabbing; cursor:    -moz-grabbing; cursor: grabbing; }
.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive { cursor: crosshair; }
.leaflet-popup-pane,
.leaflet-control   { cursor: auto; }
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; }
.leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; }
.leaflet-interactive { cursor: pointer; }
.leaflet-crosshair .leaflet-interactive { cursor: crosshair; }


/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover { background-color: #f4f4f4; }
.leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.leaflet-bar a:last-child  { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; }
.leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; }
.leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; }


/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-control-zoom-out { font-size: 20px; }
.leaflet-touch .leaflet-control-zoom-in  { font-size: 22px; }
.leaflet-touch .leaflet-control-zoom-out { font-size: 24px; }


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; }
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; }
.leaflet-control-layers-expanded .leaflet-control-layers-list   { display: block; position: relative; }
.leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; }
.leaflet-control-layers-scrollbar { overflow-y: scroll; padding-right: 5px; }
.leaflet-control-layers-selector  { margin-top: 2px; position: relative; top: 1px; }
.leaflet-control-layers label      { display: block; }
.leaflet-control-layers-separator  { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; }

/* Default icon URLs */
.leaflet-default-icon-path { background-image: url(images/marker-icon.png); }


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255,255,255,0.7);
	margin: 0;
	}

.leaflet-control-locate-location { display: none !important; }

.leaflet-control-attribution,
.leaflet-control-scale-line { padding: 0 5px; color: #333; }
.leaflet-control-attribution a             { text-decoration: none; }
.leaflet-control-attribution a:hover       { text-decoration: underline; }
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale  { font-size: 11px; }
.leaflet-left   .leaflet-control-scale     { margin-left: 5px; }
.leaflet-bottom .leaflet-control-scale     { margin-bottom: 5px; }
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff;
	background: rgba(255,255,255,0.5);
	}
.leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; }
.leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; }
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar { box-shadow: none; }
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; }


/* popup */

.leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; }
.leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; }
.leaflet-popup-content { margin: 13px 19px; line-height: 1.4; }
.leaflet-popup-content p { margin: 18px 0; }
.leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-left: -20px; overflow: hidden; pointer-events: none; }
.leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; transform: rotate(45deg); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: white; color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); }
.leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; padding: 4px 4px 0 0; border: none; text-align: center; width: 18px; height: 14px; font: 16px/14px Tahoma, Verdana, sans-serif; color: #c3c3c3; text-decoration: none; font-weight: bold; background: transparent; }
.leaflet-container a.leaflet-popup-close-button:hover { color: #999; }
.leaflet-popup-scrolled { overflow: auto; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; }
.leaflet-oldie .leaflet-popup-content-wrapper { zoom: 1; }
.leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); }
.leaflet-oldie .leaflet-popup-tip-container { margin-top: -1px; }
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; }

/* div icon */
.leaflet-div-icon { background: #fff; border: 1px solid #666; }

/* Tooltip */
.leaflet-tooltip { position: absolute; padding: 6px; background-color: #fff; border: 1px solid #fff; border-radius: 3px; color: #222; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.leaflet-tooltip.leaflet-clickable { cursor: pointer; pointer-events: auto; }
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before { position: absolute; pointer-events: none; border: 6px solid transparent; background: transparent; content: ""; }
.leaflet-tooltip-bottom  { margin-top: 6px; }
.leaflet-tooltip-top     { margin-top: -6px; }
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before    { left: 50%; margin-left: -6px; }
.leaflet-tooltip-top:before    { bottom: 0; margin-bottom: -12px; border-top-color: #fff; }
.leaflet-tooltip-bottom:before { top: 0; margin-top: -12px; margin-left: -6px; border-bottom-color: #fff; }
.leaflet-tooltip-left    { margin-left: -6px; }
.leaflet-tooltip-right   { margin-left: 6px; }
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before  { top: 50%; margin-top: -6px; }
.leaflet-tooltip-left:before   { right: 0; margin-right: -12px; border-left-color: #fff; }
.leaflet-tooltip-right:before  { left: 0; margin-left: -12px; border-right-color: #fff; }

/* ============================================================
   DISEÑO DE AVATAR GRANDE FLOTANTE SOBRE EL MAPA
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   HEADER (Fuerza bruta para eliminar CUALQUIER línea inferior)
   ════════════════════════════════════════════════════════════ */
#head {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: end !important;            
  padding: 10px 20px !important;
  border-bottom: none !important; /* <-- Eliminada por completo con prioridad máxima */
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;           
}

/* ════════════════════════════════════════════════════════════
   CAPA SESIÓN (Posición fija sobresaliendo a la derecha)
   ════════════════════════════════════════════════════════════ */
#sesion {
  position: absolute !important;
  top: 10px !important;    
  right: -10px !important;  /* Sobresale por el borde derecho */
  width: 128px !important;
  height: 128px !important;
  background: transparent !important; 
  border: none !important;            
  box-shadow: none !important;        
  z-index: 2000 !important; 
}

/* ════════════════════════════════════════════════════════════
   EL CONTENEDOR DEL CHIP (Sin overflow para que NO corte las medallas)
   ════════════════════════════════════════════════════════════ */
.user-chip {
  position: relative !important; 
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  cursor: pointer;
  background: transparent !important; 
  border: none !important;
  box-shadow: none !important;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   AVATAR DEL USUARIO (Con borde de 4px y separación de 3px)
   ════════════════════════════════════════════════════════════ */
.user-chip .user-avatar,
.user-chip .user-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: none !important; 
  
  /* Anillo exterior: 4px espesor + 3px separación */
  outline: 4px solid white !important; 
  outline-offset: 3px !important;                     
  
  position: absolute !important;
  inset: 0 !important;
  z-index: 1; 
}

/* ── EL NOMBRE INTEGRADO (Más abajo y con 60% de opacidad) ── */
.user-chip .user-name {
  position: absolute !important;
  bottom: -32px !important; 
  left: 6px !important;   
  right: 6px !important;
  z-index: 2; 
  
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  padding: 8px 4px 4px; 
  
  /* ── TIPOGRAFÍA CON 60% DE OPACIDAD ── */
  color: rgba(240, 244, 248, 0.9) !important; /* var(--text-primary) escalado al 60% */
  
  /* Mantenemos la base del degradado sólida para legibilidad */
  background: linear-gradient(to top, rgba(11, 15, 26, 0.30) 30%, rgba(11, 15, 26, 0.35) 30%, transparent 90%) !important;
  white-space: nowrap;
  
  border-bottom-left-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
}

/* ── LA BANDERA (Esquina Superior Izquierda + Tamaño Ajustado) ── */
.user-chip .user-flag {
  position: absolute !important;
  top: 2px !important;   
  left: 2px !important; 
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: block !important;
  line-height: 1 !important;
}

/* Control estricto del SVG inyectado por Twemoji */
.user-chip .user-flag img.emoji,
.user-chip .user-flag img {
  width: 28px !important;       /* Reducimos el ancho a un tamaño discreto */
  height: 28px !important;      /* Mantiene la proporción del emoji */
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important; /* Sombreado elegante */
}

/* ── LA EDAD (Superior Derecha) ── */
.user-chip .user-age {
  position: absolute !important;
  top: 2px !important;   
  right: 2px !important; 
  left: auto !important;
  bottom: auto !important;
  z-index: 3; 
  
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px !important;
  color: #000 !important;
  background: #f59e0b !important; 
  
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════════════════
   ADAPTACIÓN PARA MÓVIL (≤ 600px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #sesion {
    width: 88px !important;
    height: 88px !important;
    top: 8px !important;
    right: -6px !important;
  }
  .user-chip .user-avatar,
  .user-chip .user-icon {
    outline-width: 3px !important; 
    outline-offset: 2px !important;
  }
  .user-chip .user-name {
    font-size: 11px;
    bottom: 1px !important;
    padding: 6px 2px 3px;
    left: 4px !important;
    right: 4px !important;
  }
  .user-chip .user-flag {
    font-size: 14px !important;
    top: 0px !important;
    left: 0px !important;
  }
  .user-chip .user-age {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    top: 0px !important;
    right: 0px !important;
  }
}