/* ============================================================================
   PULSAR — Estilos compartidos (minimalistas, "de trabajo")
   La estetica seria llega en la Fase 7 (skins) y la Fase 10 (pulido).
   Aqui solo buscamos que se vea limpio y se entienda.
   ============================================================================ */

* { box-sizing: border-box; }

/* Tokens de color NEUTROS (fondos/bordes/textos). El modo claro del instructor
   solo redefine estas variables; los acentos (verde, naranja...) no cambian. */
:root {
  /* Paleta "azul noche / marino" corporativa (la misma de las pantallas de
     acceso). El modo claro del instructor redefine estos tokens. */
  --c-bg: #081226;
  --c-surface: #0f2447;
  --c-canvas: #07142b;
  --c-btn: #13294f;
  --c-btn-hover: #1a3565;
  --c-border: #1e3a66;
  --c-border2: #294a7d;
  --c-border3: #24406f;
  --c-text: #eaf1fb;
  --c-muted: #9db2d4;
  --c-muted2: #6f86ab;
  --c-acento: #5a9be6;          /* azul corporativo (acento de la app) */
  --c-titulo: #9bd0ff;          /* azul claro de titulos/labels (modo oscuro) */
  --c-titulo2: #cfe8ff;         /* azul claro de cabeceras (modo oscuro) */
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--c-bg);      /* fondo azul noche corporativo */
  color: var(--c-text);
  min-height: 100vh;
}

h1, h2 { margin: 0 0 0.5rem 0; }

.marca {
  color: var(--c-acento);       /* azul corporativo de PULSAR */
  letter-spacing: 0.2rem;
}

.cabecera {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.estado-conexion {
  font-size: 0.85rem;
  color: #8b98a5;
}

/* Boton "Salir" (vuelve a la pantalla de entrada para cambiar de perfil) */
.salir {
  text-decoration: none;
  font-size: 0.9rem;
  color: #ff9b9b;
  border: 1px solid #4a2c2c;
  border-radius: 8px;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}
.salir:hover { background: #2a1818; }
.estado-conexion.conectado { color: #2ee6a6; }
.estado-conexion.desconectado { color: #ff6b6b; }

/* --- Portada --- */
.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  gap: 1rem;
}
.portada h1 { font-size: 4rem; }
.enlaces { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.enlaces a {
  text-decoration: none;
  color: #e6edf3;
  border: 1px solid #2ee6a6;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}
.enlaces a:hover { background: #122; }

/* --- Boton generico --- */
button {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--c-border2);
  background: var(--c-btn);
  color: var(--c-text);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
}
button:hover { background: var(--c-btn-hover); }

/* Feedback al PULSAR: todo lo clicable "se hunde" un poco y se atenua al hacer
   click, para notar el toque. Las clases interactivas que no son <button> se
   suman aqui. (Las reglas :active especificas de cada componente ganan a esta.) */
button:active,
summary:active,
[role="button"]:active,
.pestana:active,
.rol-btn:active,
.acc-btn:active,
.acc-btn-sec:active,
.acc-link:active,
a.informe-link:active {
  transform: scale(0.97);
  filter: brightness(1.06);
}
/* Que tengan transicion suave (no brusco). */
button, .pestana, .rol-btn, .acc-btn, .acc-btn-sec {
  transition: transform 0.06s ease, filter 0.06s ease, background 0.12s ease;
}