/* Navbar / topbar — estructura compartida por landing, login, register y
   dashboard (cada página añade su propio contenido interno). */
.navbar,
.topbar {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.navbar__inner,
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.navbar__brand {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Elevación ligera al pasar el cursor: un detalle sutil, no un rebote. */
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn--solid {
  background-color: var(--color-accent);
  color: #fff;
}
.btn--solid:hover:not(:disabled) {
  background-color: var(--color-accent-strong);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-surface-alt);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
}
.btn--outline:hover:not(:disabled) {
  background-color: var(--color-accent-soft);
}

.btn--lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--font-size-lg);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tarjetas: mismo radio, sombra y padding en toda la aplicación. Dentro
   de un `.card-grid` (ver landing.css), el grid ya iguala la altura de
   las tarjetas de una misma fila por defecto (align-items: stretch). */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-fast);
}

/* Elevación ligera solo en tarjetas pensadas para ser "examinadas"
   (landing); las tarjetas funcionales del dashboard no la necesitan y
   activan esta clase explícitamente si les aporta valor. */
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

/* Iconos de línea (estilo Lucide) embebidos como SVG inline: mismo
   tamaño y grosor de trazo en toda la aplicación. */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Formularios */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.form-field input {
  font: inherit;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.form-field input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-field input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* Error de validación en tiempo real de un campo concreto (ver
   utils/validation.js). Reserva su propia línea aunque esté vacío para
   que el formulario no salte de altura al aparecer/desaparecer. */
.form-field__error {
  margin: 0;
  min-height: 1.1em;
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* Etiqueta pequeña para marcar funciones no implementadas todavía
   ("Próximamente"). Reutilizable en navegación, botones o tarjetas. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
  white-space: nowrap;
}

/* Mensajes de estado (éxito/error) — accesibles vía role="alert"/"status"
   en el HTML; aquí solo se define el estilo. */
.status-message {
  margin: 0;
  font-size: var(--font-size-sm);
  min-height: 1.25em;
}

.status-message--success {
  color: var(--color-success);
}

.status-message--error {
  color: var(--color-error);
}