/* ── RESET + VARIABLES + LAYOUT BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --azul-oscuro:  #042C53;
  --azul-medio:   #185FA5;
  --azul-claro:   #378ADD;
  --blanco:       #ffffff;
  --gris-fondo:   #F4F6FA;
  --gris-borde:   #E8ECF2;
  --gris-texto:   #6B7280;
  --texto-main:   #0D1A2E;
  --sw:           268px;
  --sc:           64px;
  --hh:           64px;
  --trans:        0.28s cubic-bezier(0.4,0,0.2,1);
  --fuente:       'DM Sans','Segoe UI',sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--fuente);
  background: var(--gris-fondo);
  overflow: hidden;
}

.shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  background: var(--gris-fondo);
}

@media (max-width: 768px) {
  .content { padding: 20px 16px; }
}