/* Tema «Arctic Adventures»: la identidad de arcticadventureslapland.com.
   Azul petróleo y naranja de la web, Poppins para los títulos y la letra caligráfica
   de los subtítulos de la web, usada solo en la fecha del panel. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Dancing+Script:wght@500;600&display=swap");

:root {
  --fuente: "Poppins", system-ui, "Segoe UI", Arial, sans-serif;
  --fuente-script: "Dancing Script", "Segoe Script", cursive;
  --petroleo: #004c67;
  --petroleo-medio: #40798c;
  --naranja: #ff9052;
  --fondo: #f4f8f9;
  --superficie: #ffffff;
  --superficie-2: #f2f7f8;
  --texto: #10303d;
  --suave: #557280;
  --linea: #d9e6ea;
  --acento: #004c67;
  --acento-texto: #ffffff;
  --acento-suave: #e1eef2;
  --rojo: #b8333b;
  --rojo-fondo: #fbebec;
  --azul: #2756a8;
  --azul-fondo: #e8eefb;
  --ambar: #9a5200;
  --ambar-fondo: #fff0e3;
  --lateral-fondo: #004c67;
  --lateral-texto: #f2f8fa;
  --lateral-suave: #a9c8d3;
  --lateral-activo: rgba(255, 255, 255, .12);
  --radio: 14px;
  --radio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(0, 50, 70, .05), 0 4px 14px rgba(0, 50, 70, .05);
}

body { font-size: 14.5px; }
h1, h2 { color: var(--petroleo); font-weight: 600; }
h1 { letter-spacing: -.015em; }

/* Barra lateral con el logo */
.lateral { background: linear-gradient(180deg, #00597a 0%, var(--petroleo) 38%, #003d53 100%); }
.marca { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .3rem .4rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.marca-logo { width: 116px; height: auto; display: block; }
.marca-nombre { font-size: .95rem; font-weight: 600; text-align: center; }
.marca-sub { text-align: center; color: var(--naranja); font-weight: 500; margin: 0; }
.menu a.activo { background: #ffffff; color: var(--petroleo); opacity: 1; }
.menu a.activo svg { stroke: var(--naranja); }
.avatar { background: var(--naranja); color: #00384d; }

/* Botones: el naranja de la web para las acciones principales */
.boton, button { border-radius: 999px; font-weight: 600; }
.boton.principal { background: var(--naranja); border-color: var(--naranja); color: #00384d; }
.boton.principal:hover { background: #f97c37; border-color: #f97c37; }
.boton:hover, button:hover { border-color: var(--petroleo-medio); }
a { color: var(--petroleo); }

/* Panel */
.saludo-fecha { font-family: var(--fuente-script); color: #e8722f; font-size: 1.55rem; font-weight: 600; margin-bottom: 0; }
.saludo h1 { font-size: 2rem; }
.cifra b { color: var(--petroleo); font-weight: 600; }
.cifra-rojo b { color: var(--rojo); }
.cifra-ambar b { color: var(--ambar); }
.agenda-dia { grid-template-columns: 66px 1fr; }
.agenda-fecha { border-radius: 50%; width: 64px; height: 64px; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.agenda-fecha b { font-size: 1.2rem; line-height: 1.05; }
.agenda-fecha span { font-size: .66rem; line-height: 1.15; }
.agenda-fecha.hoy { background: var(--naranja); border-color: var(--naranja); color: #00384d; }
.etiqueta { background: var(--acento-suave); color: var(--petroleo); }

/* Pantallas de acceso: fondo petróleo con un brillo de aurora, como la portada de la web */
body.sin-sesion {
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(90, 230, 160, .28), transparent 65%),
    radial-gradient(50% 35% at 10% 5%, rgba(120, 110, 230, .25), transparent 65%),
    linear-gradient(180deg, #00597a, #003a50);
}
.logo-acceso { display: block; width: 170px; height: auto; margin: 0 auto 1.6rem; }