/* ============================================================
   ATHENEAS — Custom styles (complemento a Tailwind)
   ============================================================ */

:root {
  --gold:        #c9a84c;
  --gold-light:  #e8c76a;
  --gold-dark:   #a8893d;
  --dark:        #0d0d0d;
  --dark-card:   #1a1a1a;
  --dark-section:#111111;
}

/* Colores utilitarios para texto (Tailwind no los genera si no están en el config) */
.text-gold        { color: var(--gold); }
.bg-gold          { background-color: var(--gold); }
.border-gold      { border-color: var(--gold); }

/* Fuentes */
.font-serif  { font-family: 'Cinzel', serif; }
.font-script { font-family: 'Dancing Script', cursive; }

/* ---- Separador decorativo ---- */
.divider-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px auto;
}
.divider-gold::before,
.divider-gold::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}
.divider-gold span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  display: block;
}

/* ---- Hero ---- */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(13,13,13,0.92) 0%,
    rgba(13,13,13,0.7)  50%,
    rgba(13,13,13,0.2)  100%
  );
}

/* ---- Botones ---- */
.btn-gold {
  background: var(--gold);
  color: #0d0d0d;
  font-weight: 600;
  padding: 0.65rem 1.6rem;
  border-radius: 0.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background .2s, transform .15s;
  display: inline-block;
  border: 2px solid transparent;
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}
.btn-outline-gold {
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  padding: 0.6rem 1.6rem;
  border-radius: 0.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background .2s, color .2s, transform .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: #0d0d0d;
  transform: translateY(-1px);
}

/* ---- Cards cursos ---- */
.curso-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.curso-card:hover {
  box-shadow: 0 8px 32px rgba(201,168,76,.18);
  transform: translateY(-3px);
}
.curso-card .card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.curso-card .card-icon {
  width: 44px;
  height: 44px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -22px auto 0;
  position: relative;
  z-index: 1;
  color: #0d0d0d;
}

/* ---- Benefit icons ---- */
.benefit-icon {
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--gold);
}

/* ---- Testimonio card ---- */
.testimonio-card {
  background: #1a1a1a;
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 0.5rem;
  padding: 2rem;
}

/* ---- Admin layout ---- */
.admin-sidebar {
  background: #0d0d0d;
  min-height: 100vh;
  border-right: 1px solid rgba(201,168,76,.15);
}
.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,.7);
  font-size: 0.875rem;
  transition: color .15s, background .15s;
  border-radius: 4px;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
  color: var(--gold);
  background: rgba(201,168,76,.07);
}

/* ---- Badges estado pedido ---- */
.badge-pendiente  { background: #92400e; color: #fde68a; }
.badge-aprobado   { background: #064e3b; color: #6ee7b7; }
.badge-rechazado  { background: #7f1d1d; color: #fca5a5; }
.badge-estado {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ---- Formularios ---- */
.form-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  color: #111;
}
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
.form-input-dark {
  background: #1a1a1a;
  border-color: rgba(201,168,76,.3);
  color: #fff;
}
.form-input-dark:focus {
  border-color: var(--gold);
}
.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: #374151;
}
.form-label-dark { color: rgba(255,255,255,.7); }

/* ---- Alert flash ---- */
.alert { padding: 12px 16px; border-radius: 6px; font-size: 0.875rem; margin-bottom: 16px; }
.alert-ok    { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---- Galería ---- */
.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform .3s;
}
.gallery-grid img:hover { transform: scale(1.02); }

/* ---- Scroll suave ---- */
html { scroll-behavior: smooth; }

/* ---- Placeholder de imagen de curso ---- */
.img-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2210 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}