/* ============================================================
   REMAQ — Base / reset / layout de la aplicación
   Mobile-first: el layout por defecto es de una sola columna
   (nav colapsado detrás de un botón de menú); a partir de 960px
   se abre la navegación lateral fija, pedido explícito del CEO
   ("que se pueda abrir desde el navegador del celular con
   tranquilidad", sección 3.3 del diseño).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--rq-fuente);
  color: var(--rq-color-texto);
  background: var(--rq-color-fondo);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0 0 var(--rq-space-3); font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--rq-space-3); }

a { color: var(--rq-color-marca); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --- Layout raíz de la app (todo lo que no es la pantalla de login) --- */

.rq-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rq-topbar {
  height: var(--rq-topbar-alto);
  background: var(--rq-color-marca);
  color: var(--rq-blanco);
  display: flex;
  align-items: center;
  gap: var(--rq-space-3);
  padding: 0 var(--rq-space-4);
  position: sticky;
  top: 0;
  z-index: 20;
}

.rq-topbar__marca {
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 1;
}

.rq-topbar__btn-menu {
  background: none;
  border: none;
  color: var(--rq-blanco);
  font-size: 1.3rem;
  cursor: pointer;
  padding: var(--rq-space-2);
}

.rq-cuerpo {
  flex: 1;
  display: flex;
  min-height: 0;
}

.rq-nav {
  position: fixed;
  top: var(--rq-topbar-alto);
  left: 0;
  bottom: 0;
  width: var(--rq-nav-ancho);
  background: var(--rq-azul-900);
  color: var(--rq-blanco);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  z-index: 15;
}

.rq-nav.rq-nav--abierta { transform: translateX(0); }

.rq-nav__item {
  display: flex;
  align-items: center;
  gap: var(--rq-space-2);
  padding: var(--rq-space-3) var(--rq-space-4);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.rq-nav__item:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }

.rq-nav__item.rq-nav__item--activo {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--rq-blanco);
  color: var(--rq-blanco);
  font-weight: 600;
}

.rq-overlay-nav {
  position: fixed;
  inset: var(--rq-topbar-alto) 0 0 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 14;
  display: none;
}

.rq-overlay-nav--visible { display: block; }

.rq-contenido {
  flex: 1;
  padding: var(--rq-space-4);
  max-width: var(--rq-contenido-max);
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 960px) {
  .rq-topbar__btn-menu { display: none; }
  .rq-nav { transform: translateX(0); position: sticky; top: var(--rq-topbar-alto); height: calc(100vh - var(--rq-topbar-alto)); }
  .rq-cuerpo { padding-left: 0; }
  .rq-overlay-nav { display: none !important; }
  .rq-contenido { padding: var(--rq-space-6); }
}

/* --- Utilidades de layout reutilizadas por los módulos --- */

.rq-flex { display: flex; gap: var(--rq-space-3); align-items: center; }
.rq-flex--entre { justify-content: space-between; }
.rq-flex--envolver { flex-wrap: wrap; }
.rq-grid-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--rq-space-3);
}
.rq-oculto { display: none !important; }
.rq-texto-secundario { color: var(--rq-color-texto-secundario); font-size: 0.9em; }
.rq-mt-4 { margin-top: var(--rq-space-4); }
.rq-mb-4 { margin-bottom: var(--rq-space-4); }

/* La columna del menú se pinta en todo el alto aunque la página sea más larga
   que la pantalla (en capturas de página completa quedaba gris — QA 04 H17). */
@media (min-width: 960px) {
  .rq-cuerpo { background: linear-gradient(to right, var(--rq-azul-900) var(--rq-nav-ancho), transparent var(--rq-nav-ancho)); }
  .rq-contenido { background: var(--rq-color-fondo, transparent); }
}