/* ═══════════════════════════════════════════════════════════════════════════
   main.css — Estilos globales Sygnet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────────*/
:root {
  --mc-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --mc-dur-fast:  120ms;
  --mc-dur-base:  200ms;
  --mc-dur-slow:  340ms;
}

/* ── Base ──────────────────────────────────────────────────────────────────*/
html { scroll-behavior: smooth; }

/* ── Accesibilidad: focus solo para teclado ────────────────────────────────*/
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid #4b5563;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────*/
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Keyframes ─────────────────────────────────────────────────────────────*/
@keyframes sy-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}
@keyframes mc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mc-pulse-ring {
  0%,100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.35); }
  50%     { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);    }
}
@keyframes mc-float {
  0%,100% { transform: translate3d(0,  0px, 0); }
  50%     { transform: translate3d(0, -7px, 0); }
}

/* ── App: entrada escalonada de componentes ────────────────────────────────*/
#appPrincipal header                 { animation: mc-fade-in  var(--mc-dur-slow) var(--mc-ease) both; }
#hero-section                        { animation: mc-fade-in  0.4s var(--mc-ease) 0.04s both; }
.flex-1.max-w-2xl > div:nth-child(1) { animation: sy-fade-up  0.45s var(--mc-ease) 0.10s both; }
.flex-1.max-w-2xl > div:nth-child(2) { animation: sy-fade-up  0.45s var(--mc-ease) 0.20s both; }
.flex-1.max-w-2xl > div:nth-child(3) { animation: sy-fade-up  0.45s var(--mc-ease) 0.30s both; }

/* Hero: texto con entrada propia */
#hero-section h1         { animation: sy-fade-up 0.55s var(--mc-ease) 0.12s both; }
#hero-section p          { animation: sy-fade-up 0.55s var(--mc-ease) 0.22s both; }
#hero-section .flex-wrap { animation: sy-fade-up 0.55s var(--mc-ease) 0.32s both; }

/* Hero: destellos decorativos con flotación suave */
#hero-section .absolute.inset-0 > div:first-child  { animation: mc-float  8s ease-in-out infinite; }
#hero-section .absolute.inset-0 > div:nth-child(2) { animation: mc-float 10s ease-in-out 2s infinite; }

/* ── Rellax: aceleración por hardware ──────────────────────────────────────*/
.rellax { will-change: transform; }

/* ── Hero: altura responsiva (reemplaza el inline style="height:230px") ────*/
#hero-section { height: clamp(190px, 26vw, 260px); }

/* ── API status dot: pulso cuando está verde ───────────────────────────────*/
#dotApiStatus.bg-green-500,
#dotApiStatusMobile.bg-green-500 {
  animation: mc-pulse-ring 2.5s ease-in-out infinite;
}

/* ── SIA radios: resaltar fila seleccionada ────────────────────────────────*/
label:has(input[type="radio"][name="semaforoIA"]:checked) {
  background-color: #f9fafb;
  border-color: #6b7280 !important;
}

/* ── Botón certificar: hover lift + active press ───────────────────────────*/
#btnCertificar {
  will-change: transform, box-shadow;
  transition:
    transform         var(--mc-dur-base) var(--mc-ease),
    box-shadow        var(--mc-dur-base) var(--mc-ease),
    background-color  var(--mc-dur-base) ease,
    opacity           var(--mc-dur-base) ease;
}
#btnCertificar:not(:disabled):hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
#btnCertificar:not(:disabled):active {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition-duration: 60ms;
}

/* ── Nav links: micro-lift en hover ────────────────────────────────────────*/
header a {
  will-change: transform;
  transition:
    transform         var(--mc-dur-fast) var(--mc-ease),
    background-color  var(--mc-dur-base) ease,
    color             var(--mc-dur-base) ease;
}
header a:hover { transform: translate3d(0, -1px, 0); }

/* ── FAB tour button ───────────────────────────────────────────────────────*/
#btn-tour-help {
  will-change: transform;
  transition:
    transform        var(--mc-dur-base) var(--mc-ease),
    background-color var(--mc-dur-base) ease;
}

/* ── Dropzone: estado drag-over ────────────────────────────────────────────*/
.sy-dropzone-active {
  border-color:     #6b7280 !important;
  background-color: #f3f4f6 !important;
}
.sy-dropzone-active .mc-upload-icon {
  transform: translate3d(0, -3px, 0) scale(1.08);
  color: #374151;
}
.mc-upload-icon {
  will-change: transform;
  transition:
    transform var(--mc-dur-base) var(--mc-ease),
    color     var(--mc-dur-base) ease;
}

/* ── Ledger items: fade-up al añadirse ─────────────────────────────────────*/
#ledgerList > * { animation: sy-fade-up 0.25s var(--mc-ease) both; }

/* ── Auth page: entrada del panel de login ─────────────────────────────────*/
#panelLogin { animation: sy-fade-up 0.4s var(--mc-ease) 0.1s both; }

/* ── Dashboard / Rankings: estadísticas escalonadas ───────────────────────*/
.grid.grid-cols-3 > div:nth-child(1) { animation: sy-fade-up 0.4s var(--mc-ease) 0.05s both; }
.grid.grid-cols-3 > div:nth-child(2) { animation: sy-fade-up 0.4s var(--mc-ease) 0.12s both; }
.grid.grid-cols-3 > div:nth-child(3) { animation: sy-fade-up 0.4s var(--mc-ease) 0.19s both; }

/* ── Touch targets para dispositivos móviles ───────────────────────────────*/
@media (pointer: coarse) {
  .md\:hidden.flex a,
  .md\:hidden.flex button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Plan toggle: transición suave ─────────────────────────────────────────*/
#btnPlanIndividual,
#btnPlanEnterprise {
  transition:
    background-color var(--mc-dur-base) var(--mc-ease),
    color            var(--mc-dur-base) var(--mc-ease),
    border-color     var(--mc-dur-base) var(--mc-ease);
}

/* ── Respeto a prefers-reduced-motion ──────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
  }
}