/* ============================================================
   BASE — variables, reset y tipografía global
   ============================================================ */

:root {
  /* Paleta oceánica */
  --azul-profundo: #062c43;
  --azul-marino:   #0a3d62;
  --azul-medio:    #1b6ca8;
  --azul-claro:    #2f9bd6;
  --cyan:          #44c0e6;
  --verde-agua:    #16a085;

  /* Neutros */
  --blanco:        #ffffff;
  --gris-claro:    #f4f7fa;
  --gris-borde:    #e2e8f0;
  --gris-texto:    #5b6b7b;
  --gris-titulo:   #1e2a36;

  /* Acentos por categoría */
  --acento-temp:   #e8743b;  /* temperatura */
  --acento-sal:    #2f9bd6;  /* salinidad */
  --acento-nino:   #e8743b;  /* eventos el niño */
  --acento-amar:   #f0a500;  /* descarga */

  /* Sombras */
  --sombra-suave:  0 1px 3px rgba(10, 61, 98, .08);
  --sombra-media:  0 6px 20px rgba(10, 61, 98, .12);
  --sombra-fuerte: 0 14px 40px rgba(6, 44, 67, .22);

  /* Métricas */
  --radio:        14px;
  --radio-sm:     10px;
  --ancho-max:   100%; /*1600px;*/
  --sidebar-w:    240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--gris-claro);
  color: var(--gris-titulo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.app {
  max-width: var(--ancho-max);
  margin: 0 auto;
  background: var(--blanco);
}

/* Layout principal: sidebar + contenido */
.cuerpo {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items: start;
}

@media (max-width: 980px) {
  .cuerpo { grid-template-columns: 1fr; }
}