/* ═══════════════════════════════════════════════════════
   NAER ZONE — Global Stylesheet
   Stack: Tailwind CSS CDN + Custom CSS
   Fecha: 2026
══════════════════════════════════════════════════════════ */

/* ─── FUENTES ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ─── VARIABLES CSS ───────────────────────────────────── */
:root {
  --primary:       #FBBF24;
  --accent:        #00E5FF;
  --bg-dark:       #101622;
  --bg-secondary:  #1A0F0E;
  --card-dark:     #182234;
  --border-dark:   #1e2d4a;
}

/* ─── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--bg-dark);
  color: #f1f5f9;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLL BAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1220; }
::-webkit-scrollbar-thumb { background: rgba(251,191,36,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(251,191,36,.6); }


/* ─── KEYFRAMES ───────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80%      { transform: translateX(6px); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,.3); }
  50%       { box-shadow: 0 0 24px rgba(251,191,36,.7); }
}

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(251,191,36,.4)); }
  50%       { filter: drop-shadow(0 0 18px rgba(251,191,36,.9)); }
}

@keyframes pulse-glow-accent {
  0%, 100% { box-shadow: 0 0 8px rgba(0,229,255,.2); }
  50%       { box-shadow: 0 0 24px rgba(0,229,255,.6); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-20px) scale(1.05); }
  66%  { transform: translate(-20px,15px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes typing-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes counter-up {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes progress-fill {
  from { width: 0%; }
}

@keyframes border-dance {
  0%,100% { border-color: rgba(251,191,36,.3); }
  50%      { border-color: rgba(251,191,36,.8); }
}

@keyframes notification-drop {
  0%   { transform: translateY(-10px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ─── CLASES DE ANIMACIÓN ─────────────────────────────── */
.animate-fade-in-up   { animation: fadeInUp 0.55s ease both; }
.animate-fade-in-down { animation: fadeInDown 0.45s ease both; }
.animate-fade-in      { animation: fadeIn 0.4s ease both; }
.animate-float        { animation: float 5s ease-in-out infinite; }
.animate-float-slow   { animation: floatSlow 7s ease-in-out infinite; }
.animate-scale-in     { animation: scaleIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-slide-in-right { animation: slideInRight 0.35s ease both; }
.animate-slide-in-left  { animation: slideInLeft 0.35s ease both; }
.animate-slide-in-up    { animation: slideInUp 0.35s ease both; }
.animate-shake          { animation: shake 0.5s ease both; }
.animate-spin-slow      { animation: spin-slow 8s linear infinite; }
.animate-orb            { animation: orb-drift 12s ease-in-out infinite; }
.animate-pulse-glow     { animation: pulse-glow 2s ease-in-out infinite; }
.animate-logo-glow      { animation: logo-glow 2s ease-in-out infinite; }
.animate-pulse-glow-accent { animation: pulse-glow-accent 2.5s ease-in-out infinite; }
.animate-notification   { animation: notification-drop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ─── DELAYS ──────────────────────────────────────────── */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ─── SKELETON LOADER ─────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #1a2236 25%, #243050 50%, #1a2236 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 6px;
}

/* ─── COMPONENTES CUSTOM ──────────────────────────────── */

/* Card con borde dorado sutil */
.guardian-shield-border {
  border: 1px solid rgba(251, 191, 36, 0.2);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.04), inset 0 1px 0 rgba(255,255,255,0.04);
  background: linear-gradient(145deg, rgba(26,15,14,0.92) 0%, rgba(16,22,34,1) 100%);
}
.guardian-shield-border:hover {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.08);
  transition: all 0.3s ease;
}

/* Card azul */
.card-blue-border {
  border: 1px solid rgba(13, 89, 242, 0.25);
  background: linear-gradient(145deg, rgba(13,89,242,0.07) 0%, rgba(16,22,34,1) 100%);
}

/* Glassmorphism */
.glass {
  background: rgba(16, 22, 34, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Glow filters */
.magical-glow  { filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.5)); }
.golden-glow   { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5)); }
.red-glow      { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4)); }
.green-glow    { filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4)); }

/* Orbs decorativos */
.orb-primary { background: radial-gradient(circle, rgba(251,191,36,0.12) 0%, transparent 70%); }
.orb-accent  { background: radial-gradient(circle, rgba(0,229,255,0.10) 0%, transparent 70%); }
.orb-blue    { background: radial-gradient(circle, rgba(13,89,242,0.12) 0%, transparent 70%); }

/* Barra de scroll de progreso */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px;
  background: linear-gradient(90deg, #FBBF24, #00E5FF);
  width: 0%;
  transition: width 0.1s linear;
}

/* ─── INPUTS CUSTOM ───────────────────────────────────── */
.input-dark {
  background: rgba(16,22,34,0.8);
  border: 1px solid rgba(49,67,104,0.6);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  color: #94a3b8;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.input-dark:focus {
  border-color: #FBBF24;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.12);
  color: #cbd5e1;
}
.input-dark::placeholder { color: #374151; }

/* Este fichero no tiene capa y gana a las utilidades de Tailwind v4 (que sí
   van en una capa), así que los rellenos que se combinan con .input-dark se
   repiten aquí para que el icono interior no tape el texto. */
.input-dark.pl-4  { padding-left: 1rem; }
.input-dark.pl-9  { padding-left: 2.25rem; }
.input-dark.pl-10 { padding-left: 2.5rem; }
.input-dark.pl-12 { padding-left: 3rem; }
.input-dark.pr-4  { padding-right: 1rem; }
.input-dark.pr-8  { padding-right: 2rem; }
.input-dark.pr-10 { padding-right: 2.5rem; }
.input-dark.pr-12 { padding-right: 3rem; }
.input-dark.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.input-dark.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.input-dark.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.input-dark.py-4   { padding-top: 1rem; padding-bottom: 1rem; }

/* ─── BOTONES ─────────────────────────────────────────── */
.btn-primary {
  background: #FBBF24;
  color: #1A0F0E;
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  filter: drop-shadow(0 0 10px rgba(251,191,36,0.35));
}
.btn-primary:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 16px rgba(251,191,36,0.55));
}

.btn-secondary {
  background: rgba(30,45,74,0.6);
  color: #f1f5f9;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(49,67,104,0.7);
  transition: all 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-secondary:hover {
  background: rgba(49,67,104,0.5);
  border-color: rgba(251,191,36,0.3);
}

.btn-danger {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-danger:hover {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.5);
}

/* ─── BADGES ──────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-primary  { background: rgba(251,191,36,.15); color: #FBBF24; border: 1px solid rgba(251,191,36,.3); }
.badge-accent   { background: rgba(0,229,255,.12);  color: #00E5FF; border: 1px solid rgba(0,229,255,.25); }
.badge-green    { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.badge-red      { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.badge-yellow   { background: rgba(234,179,8,.15);  color: #facc15; border: 1px solid rgba(234,179,8,.3); }
.badge-blue     { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.badge-gray     { background: rgba(100,116,139,.15);color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }

/* ─── TABS ────────────────────────────────────────────── */
.tab-btn { padding: 0.625rem 1.25rem; font-weight: 600; font-size: 0.875rem; color: #64748b; border-bottom: 2px solid transparent; transition: all 0.2s; cursor: pointer; white-space: nowrap; }
.tab-btn.active, .tab-btn:hover { color: #FBBF24; border-bottom-color: #FBBF24; }

/* ─── BARRA DE PROGRESO ───────────────────────────────── */
.progress-bar {
  height: 8px;
  background: rgba(30,45,74,0.7);
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(49,67,104,0.4);
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #FBBF24, #FDE68A);
  animation: progress-fill 1.5s ease-out both;
}
.progress-fill-accent {
  background: linear-gradient(90deg, #00E5FF, #67E8F9);
}
.progress-fill-green {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

/* ─── TOGGLE ──────────────────────────────────────────── */
.toggle {
  position: relative; display: inline-flex; align-items: center;
  width: 48px; height: 26px; cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: rgba(49,67,104,0.6);
  border-radius: 9999px;
  transition: background 0.3s;
  border: 1px solid rgba(49,67,104,0.8);
}
.toggle-slider::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #94a3b8;
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
}
.toggle input:checked + .toggle-slider { background: rgba(251,191,36,0.25); border-color: rgba(251,191,36,0.5); }
.toggle input:checked + .toggle-slider::after { transform: translateX(22px); background: #FBBF24; }

/* ─── AVATAR RING ─────────────────────────────────────── */
.avatar-ring {
  border: 2px solid rgba(251,191,36,.4);
  box-shadow: 0 0 0 4px rgba(251,191,36,.08), 0 0 20px rgba(251,191,36,.15);
  transition: all 0.3s;
}
.avatar-ring:hover {
  border-color: rgba(251,191,36,.8);
  box-shadow: 0 0 0 4px rgba(251,191,36,.15), 0 0 30px rgba(251,191,36,.25);
}

/* ─── TIMELINE ────────────────────────────────────────── */
.timeline-line { position: relative; width: 100%; background: transparent; }
.timeline-dot  { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-dot.active  { background: rgba(251,191,36,.2); border: 2px solid #FBBF24; }
.timeline-dot.done    { background: rgba(34,197,94,.2);  border: 2px solid #22c55e; }
.timeline-dot.pending { background: rgba(30,45,74,.8);   border: 2px solid rgba(49,67,104,.5); }

/* ─── CARDS ───────────────────────────────────────────── */
.card {
  background: rgba(24,34,52,0.7);
  border: 1px solid rgba(49,67,104,0.4);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.25s ease;
}
.card:hover {
  border-color: rgba(251,191,36,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 20px rgba(251,191,36,.04);
  transform: translateY(-2px);
}

/* ─── SIDEBAR ─────────────────────────────────────────── */
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.75rem;
  color: #64748b; font-weight: 500; font-size: 0.875rem;
  transition: all 0.2s; cursor: pointer;
}
.sidebar-link:hover { color: #FBBF24; background: rgba(251,191,36,.06); }
.sidebar-link.active { color: #FBBF24; background: rgba(251,191,36,.1); border-left: 3px solid #FBBF24; padding-left: calc(1rem - 3px); }

/* ─── MOBILE MENU ─────────────────────────────────────── */
#mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 9998;
}
#mobile-menu.open { display: flex; }
#mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}
#mobile-menu-panel {
  position: relative; z-index: 1;
  width: 280px; height: 100%;
  background: #0d1220;
  border-right: 1px solid rgba(251,191,36,.15);
  padding: 1.5rem;
  animation: slideInLeft 0.3s ease both;
  display: flex; flex-direction: column; gap: 0.5rem;
}

/* ─── TOAST ───────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 0.75rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 500;
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: slideInRight 0.35s ease both;
  max-width: 320px;
}
.toast-success { background: rgba(22,101,52,.9); border: 1px solid rgba(34,197,94,.4); color: #86efac; }
.toast-error   { background: rgba(127,29,29,.9); border: 1px solid rgba(239,68,68,.4);  color: #fca5a5; }
.toast-info    { background: rgba(13,49,100,.9);  border: 1px solid rgba(251,191,36,.4); color: #fde68a; }

/* ─── MODAL ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 0.2s ease;
}
.modal-panel {
  background: #182234;
  border: 1px solid rgba(49,67,104,.6);
  border-radius: 1.25rem;
  padding: 2rem;
  width: 100%; max-width: 520px;
  animation: scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  position: relative;
}

/* ─── TABLA ───────────────────────────────────────────── */
.table-dark { width: 100%; border-collapse: collapse; }
.table-dark th {
  padding: 0.875rem 1rem; text-align: left;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: #475569; border-bottom: 1px solid rgba(49,67,104,.5);
}
/* Esta hoja no va en capas y gana a las utilidades de Tailwind: respeta la alineación pedida en la cabecera */
.table-dark th.text-right { text-align: right; }
.table-dark td {
  padding: 1rem; font-size: 0.875rem;
  border-bottom: 1px solid rgba(49,67,104,.25);
  color: #cbd5e1;
  transition: background 0.15s;
}
.table-dark tr:hover td { background: rgba(251,191,36,.02); }

/* ─── ACORDEÓN ────────────────────────────────────────── */
.accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  opacity: 0;
}
.accordion-content.open {
  max-height: 600px;
  opacity: 1;
}

/* ─── CODE BLOCK ──────────────────────────────────────── */
.code-block {
  background: #0a0f1a;
  border: 1px solid rgba(49,67,104,.5);
  border-radius: 0.75rem;
  padding: 1.25rem;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
  color: #00E5FF;
  overflow-x: auto;
  line-height: 1.7;
}

/* ─── STRENGTH METER ──────────────────────────────────── */
.strength-bar { height: 4px; border-radius: 9999px; transition: all 0.4s ease; }
.strength-weak    { background: #ef4444; width: 25%; }
.strength-fair    { background: #f97316; width: 50%; }
.strength-good    { background: #eab308; width: 75%; }
.strength-strong  { background: #22c55e; width: 100%; }

/* ─── STAR RATING ─────────────────────────────────────── */
.stars { display: inline-flex; gap: 2px; }
.star-filled { color: #FBBF24; }
.star-empty  { color: rgba(251,191,36,.2); }

/* ─── PRINT ───────────────────────────────────────────── */
@media print {
  body { background: white !important; color: black !important; }
  header, footer, nav, #scroll-progress, #toast-container, #mobile-menu { display: none !important; }
  .card, .guardian-shield-border { background: white !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; color: black !important; }
  a { color: black !important; }
}

/* ─── RESPONSIVE HELPERS ──────────────────────────────── */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
  .show-mobile-only { display: none !important; }
}

/* ─── MATERIAL SYMBOLS FIX ────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  vertical-align: middle;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }