/* Nexus Lab — estilos complementarios para pago, órdenes y resultados.
   Se cargan después de styles.css; usan tonos neutros para integrarse con
   cualquier tema. Ajusta los colores a tu marca si lo deseas. */

.message-list {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 24px;
  display: grid;
  gap: 8px;
}

.message {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
}

.message.success { border-color: #2e7d54; background: rgba(46, 125, 84, 0.12); }
.message.error,
.message.danger  { border-color: #b3261e; background: rgba(179, 38, 30, 0.12); }
.message.info     { border-color: #1f6feb; background: rgba(31, 111, 235, 0.10); }
.message.warning  { border-color: #b06f00; background: rgba(176, 111, 0, 0.12); }

/* Checkout */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

.checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.checkout-summary small { display: block; opacity: 0.7; }

.checkout-price {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.bank-details {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  line-height: 1.7;
}

.bank-details p { margin: 0; }

.checkout-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.checkout-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="password"],
.checkout-form input[type="number"],
.checkout-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font: inherit;
}

/* Resultados de examen / estado de orden */
.result-summary {
  text-align: center;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  margin: 12px 0;
}

.result-summary.passed { border-color: #2e7d54; background: rgba(46, 125, 84, 0.10); }
.result-summary.failed { border-color: #b3261e; background: rgba(179, 38, 30, 0.08); }

.result-score {
  font-size: 3rem;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.result-status {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 8px 0;
}

/* ============================================================
   Catálogo — presentación mejorada
   ============================================================ */

.kx-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(13, 50, 40, 0.18);
}

/* Arte de la tarjeta */
.kx-art {
  position: relative;
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kx-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Iniciales sobre degradado cuando no hay imagen.
   Variamos el degradado por posición para que no se vean iguales. */
.kx-art span:not(.kx-price-tag):not(.kx-ribbon) {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.course-grid .kx-card:nth-child(4n+1) .kx-art { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.course-grid .kx-card:nth-child(4n+2) .kx-art { background: linear-gradient(135deg, #155e75, #0891b2); }
.course-grid .kx-card:nth-child(4n+3) .kx-art { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.course-grid .kx-card:nth-child(4n+4) .kx-art { background: linear-gradient(135deg, #9a3412, #ea580c); }

/* Píldora de precio sobre el arte */
.kx-price-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f3d33;
  font-weight: 700;
  font-size: .9rem;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Cinta de destacado */
.kx-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e11d48;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Niveles con color */
.kx-level {
  font-weight: 700;
  border: 1px solid transparent;
}
.kx-level-basic        { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.kx-level-intermediate { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.kx-level-advanced     { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }

/* Pie de tarjeta con metadatos */
.kx-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  font-size: .85rem;
  opacity: .85;
}
.kx-foot-item { white-space: nowrap; }

.kx-cta {
  display: inline-block;
  text-align: center;
  transition: transform .15s ease;
}
.kx-card:hover .kx-cta { transform: translateX(2px); }

/* ============================================================
   Autenticación (login / registro)
   ============================================================ */

.kx-auth-card {
  max-width: 440px;
  margin: 0 auto;
}

.kx-auth-form input {
  width: 100%;
}

.kx-help {
  font-weight: 400;
  opacity: .7;
  font-size: .8rem;
}

.kx-field-error {
  color: #b3261e;
  font-size: .82rem;
  font-weight: 600;
}

.kx-auth-alt {
  text-align: center;
  margin-top: 16px;
  opacity: .9;
}

.kx-auth-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ============================================================
   TEMA MODERNO (Opción B) — aplica a todo el sitio
   ============================================================ */

:root {
  --kx-teal: #0f766e;
  --kx-teal-dark: #0c5d56;
  --kx-tint: #eef7f4;
}

body {
  background: #f3f6f5;
}

/* Tipografía con más carácter en títulos, marca y botones */
h1, h2, h3,
.brand,
.eyebrow,
.primary-action,
.kx-cta,
.main-nav a {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Encabezado: blanco con acento teal arriba */
.topbar {
  background: #ffffff;
  border-top: 3px solid var(--kx-teal);
  border-bottom: 1px solid #e6e6e1;
  box-shadow: 0 1px 8px rgba(13, 50, 40, 0.05);
}

.brand {
  color: #143832;
  font-weight: 700;
}

.brand-mark {
  background: var(--kx-teal);
  color: #ffffff;
}

/* Navegación con subrayado teal (sin salto de layout) */
.main-nav a {
  color: #4b5a55;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover {
  color: var(--kx-teal);
  border-bottom-color: var(--kx-teal);
}

/* Botón principal: teal sólido, consistente en todo el sitio */
.primary-action {
  background: var(--kx-teal);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.primary-action:hover {
  background: var(--kx-teal-dark);
  color: #ffffff;
}

/* "Eyebrow" como etiqueta teal */
.eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0c5d56;
  background: #d8f0e8;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}

/* Título de sección más presente */
.page-heading h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #15211e;
}

/* Tarjetas del catálogo: franja teal superior + realce */
.kx-card {
  border-top: 3px solid var(--kx-teal);
  border-radius: 14px;
}
.kx-card:hover {
  box-shadow: 0 20px 44px rgba(13, 50, 40, 0.16);
}

/* Paneles (aula, login, registro, checkout) más suaves */
.content-panel {
  border-radius: 14px;
}