/*
Hoja de estilos principal de la web de administración KiwIT.

Este archivo controla exclusivamente la presentación visual de la interfaz:
- paleta de colores y variables globales;
- página de acceso;
- formularios, botones y alertas;
- barra lateral y navegación;
- páginas de empresa, miembros, novedades y feedback;
- adaptación responsive para tablet y móvil.

No contiene lógica de autenticación, permisos, licencias ni acceso a datos.
*/

/*
Define las variables globales de diseño: colores, sombras, radios y estilo de foco reutilizados en toda la interfaz.
*/
:root {
  --bg: #d9d2f5;
  --bg-soft: #efedf9;
  --surface: #d9cfff;
  --surface-strong: #ffffff;
  --text: #181715;
  --muted: #6f6a62;
  --muted-strong: #4d4943;
  --line: #d8d2c8;
  --line-strong: #c8c0b4;
  --purple: #9d00ff;
  --purple-dark: #271b52; /* 271b52 */
  --purple-light: #968ac6;
  --orange: var(--purple);
  --orange-dark: var(--purple-dark);
  --green: #11865d;
  --blue: #2c6fd6;
  --danger: #cf1b1b;
  --warning-bg: #fff5d6;
  --warning-text: #735417;
  --shadow-soft: 0 18px 44px rgba(43, 36, 27, 0.08);
  --shadow-card: 0 10px 26px rgba(43, 36, 27, 0.06);
  --radius: 8px;
  --focus: 0 0 0 4px rgba(239, 91, 54, 0.18);
}

/*
Aplica el modelo de caja border-box a todos los elementos para que bordes y rellenos formen parte del tamaño declarado.
*/
* {
  box-sizing: border-box;
}

/*
Garantiza que el documento raíz pueda ocupar como mínimo toda la altura disponible.
*/
html {
  min-height: 100%;
}

/*
Establece la apariencia general: fondo, color de texto, tipografía, tamaño y altura de línea.
*/
body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/*
Evita desbordamientos y elimina el comportamiento en línea de las imágenes.
*/
img {
  display: block;
  max-width: 100%;
}

/*
Hace que los enlaces hereden el color y elimina su subrayado predeterminado.
*/
a {
  color: inherit;
  text-decoration: none;
}

/*
Hace que todos los controles de formulario hereden la tipografía general.
*/
button,
input,
select,
textarea {
  font: inherit;
}

/*
Muestra el cursor de acción al pasar sobre botones.
*/
button {
  cursor: pointer;
}

/*
Añade un indicador de foco accesible para navegación mediante teclado.
*/
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/*
Oculta visualmente contenido que debe seguir disponible para lectores de pantalla.
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
Estiliza pequeñas etiquetas superiores usadas como encabezados de sección.
*/
.eyebrow {
  margin: 0 0 8px;
  color: var(--purple-dark);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/*
Aplica el color secundario a textos de menor relevancia.
*/
.muted {
  color: var(--muted);
  margin: 0;
}

/* Login */

/*
Configura la página de acceso como una columna de altura completa con fondo degradado.
*/
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px 34px 22px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.74), rgba(244, 241, 235, 0.95)),
    var(--bg);
}

/*
Distribuye la marca y el enlace superior dentro de la cabecera del login.
*/
.login-nav {
  width: min(1220px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/*
Alinea el logotipo y el texto identificativo de la marca.
*/
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

/*
Controla el tamaño del logotipo mostrado en la cabecera del login.
*/
.login-brand img {
  width: 92px;
  height: auto;
}

/*
Estiliza el texto secundario situado junto al logotipo.
*/
.login-brand span {
  color: var(--muted-strong);
  font-size: 0.95rem;
}

/*
Da aspecto de enlace textual destacado a acciones auxiliares.
*/
.text-link {
  color: var(--text);
  font-weight: 700;
  border-bottom: 1px solid transparent;
}

/*
Muestra un subrayado al pasar el puntero sobre el enlace.
*/
.text-link:hover {
  border-color: currentColor;
}

/*
Divide el contenido principal del login entre presentación y formulario de autenticación.
*/
.login-hero {
  width: min(1220px, 100%);
  flex: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 430px);
  gap: 44px;
  align-items: center;
  padding: 8px 0 20px;
}

/* Integra el logo en el lateral del contenido para evitar una cabecera vacía. */
.login-intro-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.login-side-brand {
  display: block;
  width: 86px;
  padding-top: 3px;
}

.login-side-brand img {
  width: 100%;
  height: auto;
}

/*
Define el tamaño y ancho del título principal de la pantalla de acceso.
*/
.login-copy h1 {
  max-width: 740px;
  margin: 0;
  font-size: 2.85rem;
  line-height: 1.06;
  font-weight: 850;
}

/*
Estiliza el texto descriptivo situado bajo el título principal.
*/
.hero-copy {
  max-width: 650px;
  margin: 26px 0 34px;
  color: var(--muted);
  font-size: 1.08rem;
}

/*
Crea una ventana de previsualización decorativa con borde, fondo y sombra.
*/
.preview-window {
  width: min(100%, 660px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

/*
Simula la barra superior de una ventana de aplicación.
*/
.window-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #faf8f3;
}

/*
Dibuja los indicadores circulares de la barra de ventana.
*/
.window-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4cec3;
}

/*
Colorea el primer indicador de la ventana.
*/
.window-bar span:first-child {
  background: var(--purple-light);
}

/*
Colorea  el segundo indicador de la ventana.
*/
.window-bar span:nth-child(2) {
  background: #d54fe7;
}

/*
Colorea de el tercer indicador de la ventana.
*/
.window-bar span:nth-child(3) {
  background: var(--purple-dark);
}

/*
Organiza el contenido ficticio de la previsualización en tres columnas.
*/
.preview-board {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  padding: 22px;
  background: #f8f6f1;
}

/*
Apila verticalmente las tarjetas de cada columna de la previsualización.
*/
.preview-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/*
Ajusta el tamaño de los títulos de columna de la previsualización.
*/
.preview-column strong {
  font-size: 0.94rem;
}

/*
Comparte el aspecto base de tarjetas y miembros en la maqueta decorativa.
*/
.preview-card,
.preview-member {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 14px;
  box-shadow: 0 8px 20px rgba(43, 36, 27, 0.04);
}

/*
Estiliza los textos secundarios de la previsualización.
*/
.preview-card span,
.preview-member small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

/*
Destaca el valor principal de cada tarjeta de ejemplo.
*/
.preview-card b {
  display: block;
  margin-top: 8px;
  font-size: 1.2rem;
}

/*
Añade un acento a una tarjeta de ejemplo.
*/
.preview-card.accent-orange {
  border-top: 3px solid var(--purple-light);
}

/*
Añade un acento a una tarjeta de ejemplo.
*/
.preview-card.accent-green {
  border-top: 3px solid var(--purple-dark);
}

/*
Alinea avatar y datos dentro de una fila de miembro simulada.
*/
.preview-member {
  display: flex;
  align-items: center;
  gap: 12px;
}

/*
Dibuja el avatar circular decorativo de un miembro simulado.
*/
.preview-member > span {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4c0a9, #7658d7);
}

/*
Crea la tarjeta que contiene el formulario de autenticación.
*/
.auth-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--shadow-soft);
  padding: 34px;
}

/*
Define el icono circular mostrado sobre el formulario de acceso.
*/
.login-user-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: #f7f4ee;
}

/*
Estiliza el título de la tarjeta de autenticación.
*/
.auth-panel h2 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
}

/*
Estiliza la explicación situada bajo el título de autenticación.
*/
.auth-panel p {
  margin: 8px 0 24px;
  color: var(--muted);
}

/*
Organiza verticalmente los campos del formulario de acceso.
*/
.login-form {
  display: grid;
  gap: 12px;
}

/*
Unifica el estilo de las etiquetas de los formularios.
*/
.login-form label,
.settings-form label,
.feedback-form label {
  color: var(--muted-strong);
  font-size: 0.92rem;
  font-weight: 750;
}

/*
Centra el logotipo secundario en el pie de la pantalla de acceso.
*/
.login-footer {
  width: min(1220px, 100%);
  margin: 8px auto 0;
  display: flex;
  justify-content: center;
}

/*
Unifica el tamaño de los logotipos usados en distintos pies de página.
*/
.login-footer img,
.splash-footer img,
.sidebar-footer img {
  width: 168px;
  height: auto;
}

/* Shared controls */

/*
Define el aspecto común de campos, selectores y áreas de texto.
*/
input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/*
Establece una altura mínima y permite redimensionar verticalmente el área de texto.
*/
textarea {
  min-height: 150px;
  resize: vertical;
}

/*
Resalta con el color corporativo el control de formulario que tiene el foco.
*/
input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow: var(--focus);
}

/*
Diferencia visualmente los campos de solo lectura.
*/
input[readonly] {
  color: var(--muted-strong);
  background: #f7f4ef;
}

/*
Define la estructura común de todos los botones principales de la interfaz.
*/
.btn-primary,
.btn-secondary,
.btn-danger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 10px 16px;
  border: 1px solid transparent;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

/*
Aplica el estilo naranja al botón de acción principal.
*/
.btn-primary {
  background: var(--purple-dark);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(239, 91, 54, 0.18);
}

/*
Cambia el botón principal a morado y lo eleva ligeramente al pasar el puntero.
*/
.btn-primary:hover {
  background: var(--purple-dark);
  transform: translateY(-1px);
}

/*
Aplica el estilo neutro a botones secundarios.
*/
.btn-secondary {
  background: var(--surface-strong);
  color: var(--text);
  border-color: var(--line-strong);
}

/*
Resalta el borde del botón secundario al pasar el puntero.
*/
.btn-secondary:hover {
  border-color: var(--purple);
}

.disabled-action {
  cursor: not-allowed;
  opacity: 0.68;
  pointer-events: none;
}

/*
Aplica el estilo visual de acciones destructivas.
*/
.btn-danger {
  background: #fff7f6;
  color: var(--danger);
  border-color: rgba(181, 54, 44, 0.28);
}

/*
Refuerza el borde rojo de una acción destructiva al pasar el puntero.
*/
.btn-danger:hover {
  border-color: var(--danger);
}

/*
Reduce el tamaño de los botones usados en acciones compactas.
*/
.btn-small {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/*
Crea un botón cuadrado destinado a contener únicamente un icono.
*/
.icon-button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--muted-strong);
}

/*
Define la estructura común de los mensajes informativos del formulario.
*/
.form-alert {
  border-radius: var(--radius);
  margin: 0 0 20px;
  padding: 12px 14px;
  font-weight: 750;
}

/*
Muestra una alerta de error en tonos rojos.
*/
.form-alert.error {
  border: 1px solid rgba(181, 54, 44, 0.24);
  background: #fff2f0;
  color: var(--danger);
}

/*
Muestra una alerta de éxito en tonos verdes.
*/
.form-alert.success {
  border: 1px solid rgba(17, 134, 93, 0.24);
  background: #eefaf4;
  color: var(--green);
}

/*
Muestra una advertencia en tonos amarillos.
*/
.form-alert.warning {
  border: 1px solid rgba(115, 84, 23, 0.22);
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* App shell */

/*
Divide la aplicación autenticada entre barra lateral y contenido principal.
*/
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  background: var(--bg);
}

/*
Configura la barra lateral fija con navegación y pie de marca.
*/
.sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 24px 18px;
}

/*
Alinea el logotipo y el nombre dentro de la cabecera lateral.
*/
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 850;
}

/*
Controla el tamaño del logotipo de la barra lateral.
*/
.sidebar-brand img {
  width: 104px;
}

/*
Estiliza el texto situado junto al logotipo lateral.
*/
.sidebar-brand span {
  color: var(--muted-strong);
}

/*
Organiza las opciones de navegación con separación uniforme.
*/
.side-menu {
  display: grid;
  gap: 7px;
}

/*
Define el aspecto base de cada opción del menú lateral.
*/
.menu-item {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  border-radius: var(--radius);
  color: var(--muted-strong);
  font-weight: 760;
}

/*
Resalta una opción cuando el usuario pasa el puntero.
*/
.menu-item:hover {
  background: rgba(255, 253, 248, 0.66);
  color: var(--text);
}

/*
Marca la sección actual mediante fondo, sombra y borde naranja izquierdo.
*/
.menu-item.active {
  border-color: var(--line);
  border-left-color: var(--purple);
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

/*
Desactiva expresamente los antiguos elementos decorativos que dibujaban la línea y la flecha del menú activo.
*/
.menu-item.active::before,
.menu-item.active::after {
  content: none;
  display: none;
}

/*
Define la caja base de los iconos del menú dibujados únicamente con CSS.
*/
.nav-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid currentColor;
  opacity: 0.9;
  position: relative;
}

/*
Dibuja el icono de empresa mediante varias líneas de fondo.
*/
.company-icon {
  background:
    linear-gradient(currentColor, currentColor) 4px 5px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 9px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 13px / 8px 1px no-repeat;
}

/*
Dibuja las dos cabezas circulares del icono de miembros.
*/
.members-icon::before,
.members-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/*
Posiciona la cabeza izquierda del icono de miembros.
*/
.members-icon::before {
  left: 4px;
}

/*
Posiciona la cabeza derecha del icono de miembros.
*/
.members-icon::after {
  right: 4px;
}

/*
Convierte el contenedor del icono de novedades en un círculo.
*/
.updates-icon {
  border-radius: 50%;
}

/*
Dibuja el círculo interior del icono de novedades.
*/
.updates-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: currentColor;
}

/*
Dibuja las líneas interiores del icono de feedback.
*/
.feedback-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

/*
Coloca el logotipo final en la parte inferior de la barra lateral.
*/
.sidebar-footer {
  margin-top: auto;
  padding: 18px 6px 2px;
  border-top: 1px solid var(--line);
}

/*
Define el espacio interior del área principal de la aplicación.
*/
.app-main {
  min-width: 0;
  padding: 28px 36px 46px;
}

/*
Distribuye el título de página y la tarjeta del usuario.
*/
.topbar {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

/*
Estiliza el título principal de cada página interior.
*/
.page-heading h1 {
  margin: 0;
  font-size: 2.05rem;
  line-height: 1.16;
}

/*
Limita y colorea el texto descriptivo del encabezado.
*/
.page-heading p:not(.eyebrow) {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--muted);
}

/*
Crea la tarjeta compacta con los datos del usuario conectado.
*/
.user-card {
  flex: 0 0 auto;
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.84);
  padding: 10px;
}

/*
Comparte el estilo circular de avatares de usuario y miembros.
*/
.user-icon,
.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0ece5;
}

/*
Permite que los datos del usuario ocupen el espacio restante sin desbordarse.
*/
.user-meta {
  min-width: 0;
  flex: 1;
}

/*
Evita que el nombre y el correo desborden la tarjeta del usuario.
*/
.user-meta strong,
.user-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
Aplica estilo secundario al correo o rol del usuario.
*/
.user-meta small {
  color: var(--muted);
  font-size: 0.84rem;
}

/*
Sirve como contenedor relativo para el icono de cierre de sesión.
*/
.logout-button {
  position: relative;
}

/*
Dibuja la base rectangular del icono de salida.
*/
.logout-button span {
  width: 16px;
  height: 12px;
  display: block;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 2px;
  position: relative;
}

/*
Dibuja el eje horizontal de la flecha de salida.
*/
.logout-button span::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 8px;
  width: 11px;
  height: 2px;
  background: currentColor;
}

/*
Dibuja la punta de la flecha del icono de salida.
*/
.logout-button span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/*
Limita el ancho máximo del contenido principal.
*/
.content-inner {
  max-width: 1180px;
}

/*
Define la apariencia común de los paneles de contenido.
*/
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

/*
Distribuye título, descripción y posibles acciones de un panel.
*/
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

/*
Estiliza el título de segundo nivel de los paneles.
*/
.panel-header h2 {
  margin: 0;
  font-size: 1.48rem;
  line-height: 1.2;
}

/*
Estiliza la descripción secundaria de los paneles.
*/
.panel-header p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
}

/*
Reduce el margen inferior en cabeceras compactas.
*/
.compact-header {
  margin-bottom: 18px;
}

/* Company */

/*
Divide la página de empresa entre formulario y resumen lateral.
*/
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 22px;
  align-items: start;
}

/*
Organiza verticalmente los campos de configuración de empresa.
*/
.settings-form {
  display: grid;
  gap: 18px;
}

/*
Agrupa cada etiqueta y su control asociado.
*/
.form-row {
  display: grid;
  gap: 8px;
}

/*
Limita la anchura de una fila de formulario compacta.
*/
.form-row.compact {
  max-width: 360px;
}

/*
Alinea los botones de acción del formulario.
*/
.form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 4px;
}

/*
Organiza verticalmente las tarjetas resumen de empresa.
*/
.summary-column {
  display: grid;
  gap: 14px;
}

/*
Crea una tarjeta de indicador o estadística.
*/
.stat-card {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

/*
Estiliza la etiqueta descriptiva de una estadística.
*/
.stat-card span {
  color: var(--muted);
  font-weight: 750;
}

/*
Destaca el valor principal de una estadística.
*/
.stat-card strong {
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

/*
Añade un borde superior naranja a una tarjeta estadística.
*/
.stat-card.accent-orange {
  border-top: 4px solid var(--purple);
}

/*
Añade un borde superior verde a una tarjeta estadística.
*/
.stat-card.accent-green {
  border-top: 4px solid var(--green);
}

/*
Añade un borde superior morado a una tarjeta estadística.
*/
.stat-card.accent-purple {
  border-top: 4px solid var(--purple-light);
}

/* Members */

/*
Organiza con separación uniforme las secciones de miembros y novedades.
*/
.members-panel,
.release-section {
  display: grid;
  gap: 18px;
}

/*
Organiza las listas de miembros y novedades como una cuadrícula vertical.
*/
.members-list,
.release-list {
  display: grid;
  gap: 14px;
}

/*
Distribuye el perfil y las acciones de cada miembro.
*/
.member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/*
Alinea avatar y datos personales de un miembro.
*/
.member-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
Aumenta ligeramente el avatar dentro de las tarjetas de miembros.
*/
.member-avatar {
  width: 50px;
  height: 50px;
}

/*
Estiliza el nombre del miembro.
*/
.member-profile h3 {
  margin: 0;
  font-size: 1.02rem;
}

/*
Estiliza el correo u otro dato principal del miembro.
*/
.member-profile p {
  margin: 2px 0 0;
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}

/*
Estiliza información secundaria y avisos de bloqueo.
*/
.member-profile small,
.member-lock {
  color: var(--muted);
  font-size: 0.86rem;
}

/*
Alinea las acciones disponibles para cada miembro.
*/
.member-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/*
Elimina márgenes externos de formularios de acciones e invitaciones.
*/
.member-actions form,
.invite-form {
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.invitation-panel,
.license-purchase-grid,
.member-edit-panel {
  max-width: 980px;
}

.copy-field {
  display: grid;
  gap: 8px;
}

.copy-field label {
  color: var(--muted-strong);
  font-size: 0.92rem;
  font-weight: 750;
}

.invitation-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: var(--muted);
  font-weight: 700;
}

.license-purchase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 22px;
  align-items: start;
}

.public-register-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 34px 24px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.74), rgba(244, 241, 235, 0.95)),
    var(--bg);
}

.public-register-shell {
  width: min(1080px, 100%);
  flex: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 48px;
  align-items: center;
  padding: 56px 0 34px;
}

.public-register-shell.single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.public-register-card h2 {
  margin-bottom: 18px;
}

.success-panel h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
}

.success-panel p:not(.eyebrow) {
  color: var(--muted);
  margin: 14px 0 24px;
}

/* Releases and feedback */

/*
Comparte la apariencia base de tarjetas de novedades y feedback.
*/
.release-card,
.feedback-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

/*
Estiliza la versión y fecha de una novedad.
*/
.release-meta {
  color: var(--purple-dark);
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 8px;
}

/*
Estiliza el título de una novedad.
*/
.release-card h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
}

/*
Estiliza la descripción de una novedad.
*/
.release-card p {
  margin: 0;
  color: var(--muted-strong);
}

/*
Divide la página de feedback entre formulario y listado.
*/
.feedback-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

/*
Organiza verticalmente los campos de envío de feedback.
*/
.feedback-form {
  display: grid;
  gap: 12px;
}

/*
Alinea el botón principal del formulario a la izquierda.
*/
.feedback-form .btn-primary {
  justify-self: start;
  margin-top: 4px;
}

/*
Organiza las tarjetas de feedback con separación uniforme.
*/
.feedback-list {
  display: grid;
  gap: 12px;
}

/*
Ajusta la distribución interna y elimina la sombra de las tarjetas de feedback.
*/
.feedback-card {
  display: grid;
  gap: 5px;
  box-shadow: none;
}

/*
Destaca el tipo de feedback mediante texto morado en mayúsculas.
*/
.feedback-card span {
  color: var(--purple-dark);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

/*
Aplica estilo secundario al estado u otra información del feedback.
*/
.feedback-card small {
  color: var(--muted);
}

/* Account, signup, help and community views */
[hidden] {
  display: none !important;
}

.auth-helper-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}

.auth-helper-row a,
.auth-switch a,
.text-button {
  color: var(--purple-dark);
  font-weight: 800;
}

.auth-switch {
  margin: 4px 0 0 !important;
  text-align: center;
  font-size: 0.92rem;
}

.auth-register {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
}

.auth-register .btn-secondary {
  width: 100%;
}

.signup-shell {
  width: min(1180px, 100%);
  flex: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(560px, 1.3fr);
  gap: 44px;
  align-items: center;
  padding: 24px 0 30px;
}

.signup-intro h1 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.05;
}

.signup-card {
  padding: 30px;
}

.signup-form,
.company-fields {
  display: grid;
  gap: 18px;
}

.signup-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.account-choice legend {
  margin-bottom: 10px;
  color: var(--muted-strong);
  font-weight: 800;
}

.account-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.account-choice label {
  position: relative;
  cursor: pointer;
}

.account-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.account-choice span {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.account-choice small {
  color: var(--muted);
  line-height: 1.35;
}

.account-choice input:checked + span {
  border-color: var(--purple-dark);
  background: rgba(101, 71, 183, .07);
  box-shadow: var(--focus);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label,
.settings-form label {
  display: grid;
  gap: 7px;
}

.company-fields {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.company-fields h3 {
  margin: 0;
}

.license-note,
.company-code-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 17px;
  border: 1px solid rgba(101, 71, 183, .25);
  border-radius: var(--radius);
  background: rgba(101, 71, 183, .07);
}

.license-note span,
.company-code-callout small {
  color: var(--muted-strong);
}

.company-code-callout {
  margin: 20px 0;
}

.company-code-callout.compact {
  max-width: 520px;
}

.company-code-callout strong {
  color: var(--purple-dark);
  font-size: 1.35rem;
  letter-spacing: .08em;
}

.reset-card {
  width: 100%;
}

.reset-card h1 {
  margin: 0;
  font-size: 2rem;
}

.verification-code {
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: .35em;
  text-align: center;
}

.resend-form {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.text-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}

.text-button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr);
  gap: 22px;
  align-items: start;
}

.password-panel {
  grid-column: 1 / -1;
}

.password-panel .settings-form {
  max-width: 640px;
}

.account-summary p {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.account-summary span,
.account-summary code {
  color: var(--muted-strong);
}

.faq-panel {
  max-width: 920px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 850;
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--muted-strong);
}

.faq-answer p {
  margin: 0;
}

.faq-answer p + p {
  margin-top: 10px;
}

.faq-answer ol {
  margin: 12px 0 0;
  padding-left: 24px;
}

.faq-answer li + li {
  margin-top: 7px;
}

.feedback-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(400px, 1.25fr);
  gap: 22px;
  align-items: start;
}

.incidents-board {
  grid-column: 1 / -1;
}

.feedback-card h3,
.feedback-card p {
  margin: 0;
}

.feedback-card p {
  color: var(--muted-strong);
  white-space: pre-line;
}

.vote-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.vote-button {
  min-width: 68px;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-strong);
  cursor: pointer;
}

.vote-button.selected {
  border-color: var(--purple-dark);
  background: rgba(101, 71, 183, .1);
  box-shadow: var(--focus);
}

.empty-state {
  color: var(--muted);
  margin: 8px 0;
}

/* Splash */

/*
Centra el logotipo en una pantalla de presentación de altura completa.
*/
.splash-page {
  min-height: 100vh;
  display: grid;
  place-content: center;
  position: relative;
  background: var(--bg);
}

/*
Hace que el logotipo de presentación se adapte al ancho disponible.
*/
.splash-logo {
  width: min(420px, 72vw);
}

/*
Fija y centra el pie de la pantalla de presentación.
*/
.splash-footer {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}

/*
Adaptación para pantallas medianas: convierte diseños principales en una sola columna y reorganiza los resúmenes.
*/
@media (max-width: 1060px) {
  .login-hero,
  .dashboard-grid,
  .feedback-grid,
  .license-purchase-grid,
  .public-register-shell,
  .signup-shell,
  .feedback-dashboard,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .incidents-board,
  .password-panel {
    grid-column: auto;
  }

  .login-hero {
    gap: 34px;
  }

  .summary-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .user-card {
    min-width: 220px;
  }
}

/*
Adaptación para tablet: mueve la barra lateral arriba y apila determinados contenidos.
*/
@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .side-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {
    flex-direction: column;
  }

  .user-card {
    width: 100%;
  }

  .member-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .member-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/*
Adaptación para móvil: reduce tamaños, espaciados y convierte todas las estructuras complejas en una sola columna.
*/
@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  .login-page {
    padding: 18px;
  }

  .public-register-page {
    padding: 18px;
  }

  .login-hero {
    padding: 8px 0 24px;
  }

  .login-intro-row {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
  }

  .login-side-brand {
    width: 68px;
  }

  .login-copy h1 {
    font-size: 2.25rem;
  }

  .preview-board {
    grid-template-columns: 1fr;
  }

  .auth-panel,
  .panel {
    padding: 20px;
  }

  .app-main {
    padding: 22px 18px 34px;
  }

  .panel-header {
    flex-direction: column;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .summary-column {
    grid-template-columns: 1fr;
  }

  .side-menu {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .account-choice {
    grid-template-columns: 1fr;
  }
}