/* =========================================================
   CantabricoSurf — UI.CSS (single stylesheet)
   - Modern look + responsive layout
   - Works with:
     * <nav> (legacy) and .site-nav (modern)
     * .menu_bar/.bt-menu toggler (mobile off-canvas)
     * .submenu + .children dropdowns
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg-0:#0b1220;
  --bg-1:#0f1b2d;
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --accent:#31d0aa;
  --accent-2:#23b58f;
  --danger:#ff6b6b;

  --radius: 18px;
  --radius-sm: 14px;

  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,.25);

  --ring: 0 0 0 4px rgba(49,208,170,.18);
  --maxw: 1100px;

  --header-h: 60px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(49,208,170,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(73,139,255,.16), transparent 55%),
    radial-gradient(900px 600px at 60% 90%, rgba(255,107,107,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

/* Avoid oversized images breaking layout */
img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; }
a:hover{ opacity: .95; }

/* ---------- Header / Topbar ---------- */
.site-header, header.site-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(10,16,28,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 0 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}
.brand-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(49,208,170,.18);
}
.brand-title{ font-weight: 900; }

/* Mobile menu button */
.menu_bar{ display:flex; }
.menu_bar .bt-menu{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.menu_bar .bt-menu:focus{ outline:none; box-shadow: var(--ring); }

/* ---------- Navigation (mobile off-canvas) ---------- */
/* Supports both <nav> and <nav class="site-nav"> */
nav, .site-nav{
  position: fixed;
  top: var(--header-h);
  left: -100%;
  width: min(340px, 92vw);
  height: calc(100vh - var(--header-h));
  overflow: auto;
  background: rgba(10,16,28,.92);
  border-right: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  z-index: 1500; /* critical for visibility */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

nav ul, .site-nav ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

nav a, .site-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
}
nav a:hover, .site-nav a:hover{ background: rgba(255,255,255,.06); }

.children{
  display:none; /* JS toggles on mobile; desktop uses hover */
  margin: 4px 0 6px;
  padding-left: 8px;
}
.children a{
  font-size: .95rem;
  color: rgba(255,255,255,.84);
  padding: 10px 12px;
}

/* ---------- Desktop navigation (horizontal + dropdown) ---------- */
@media (min-width: 960px){
  nav, .site-nav{
    position: static;
    left: auto !important;
    top: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    padding: 0 16px 14px;
    max-width: var(--maxw);
    margin: 0 auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  nav > ul, .site-nav > ul{
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .submenu{ position: relative; }

  /* dropdown panel */
  .submenu > .children{
    position:absolute;
    top: 44px;
    left: 0;
    min-width: 230px;
    display:none;
    background: rgba(10,16,28,.94);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-sm);
    padding: 8px;
    box-shadow: var(--shadow-lg);
  }

  .submenu:hover > .children{ display:block; }
  .menu_bar{ display:none; }
}

/* ---------- Page layout ---------- */
.page{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* Hero */
.hero{
  padding: 10px 0 12px;
}
.hero-inner{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px 18px;
}
.hero-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(49,208,170,.25);
  background: rgba(49,208,170,.10);
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.hero-title{
  margin: 10px 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: .2px;
}
.hero-subtitle{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Content */
.content{
  display:grid;
  gap: 14px;
  margin-top: 14px;
}

/* Cards */
.card,
.cam-container,
.prevision-container{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px;
}

/* Titles */
.card-title, .cam-titulo{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.05rem;
}

/* Legacy description blocks: keep but modernize */
.descripcion-container{
  background: rgba(49,208,170,.10);
  border: 1px solid rgba(49,208,170,.22);
  border-radius: 999px;
  display:inline-block;
  padding: 6px 12px;
  font-weight: 900;
  letter-spacing: .25px;
}
.descripcion{
  color: rgba(255,255,255,.86);
  line-height: 1.6;
  margin-top: 10px;
}

/* Grids */
.grid-2,
.camaras-container{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .grid-2,
  .camaras-container{ grid-template-columns: 1fr 1fr; }
}

/* Media / embeds */
.camara{
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
}

.embed{
  border-radius: var(--radius-sm);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.embed iframe{
  display:block;
  width:100%;
  border:0;
}

/* YouTube / fixed ratio embed */
.video-embed{
  aspect-ratio: 16/9;
}
.video-embed iframe{
  width:100%;
  height:100%;
}

.youtube{
  width:100%;
  height: 320px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
}
@media (min-width: 860px){
  .youtube{ height: 340px; }
}

.map, #map-canvas{
  width:100%;
  height: 320px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(0,0,0,.18);
}

.scroll-wrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
}

/* Links */
.link{
  display:inline-block;
  margin: 0 0 10px;
  color: rgba(49,208,170,.95);
  text-decoration: none;
  font-weight: 900;
}
.link:hover{ text-decoration: underline; }

/* Footer */
.site-footer, footer.site-footer, footer{
  padding: 18px 16px;
  text-align:center;
  color: rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

/* Small tweaks */
iframe{ max-width:100%; }