/* Jornada de Impacto — app styles (lightweight design system)
   Goal: keep Tailwind for layout, but centralize tokens and reusable components.
*/

:root {
  --jdi-bg: #f3f4f6;        /* gray-100 */
  --jdi-surface: #ffffff;
  --jdi-border: #e5e7eb;    /* gray-200 */
  --jdi-text: #111827;      /* gray-900 */
  --jdi-muted: #6b7280;     /* gray-500 */

  --jdi-primary: #4f46e5;   /* indigo-600 */
  --jdi-primary-hover: #4338ca; /* indigo-700 */
  --jdi-success: #059669;   /* emerald-600 */
  --jdi-success-hover: #047857;

  --jdi-radius: 12px;
  --jdi-radius-sm: 10px;
  --jdi-shadow: 0 10px 20px rgba(17, 24, 39, 0.08);
  --jdi-shadow-sm: 0 6px 14px rgba(17, 24, 39, 0.08);

  --jdi-focus: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

html, body { height: 100%; }
body { background: var(--jdi-bg); color: var(--jdi-text); }

/* Page transitions
   IMPORTANT: default must be visible even on public pages (no ui-shell).
*/
body{ opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
body.jdi-enter{ opacity: 0; transform: translateY(4px); }
/* When ready, remove transforms to avoid breaking position:fixed in some browsers */
body.jdi-ready{ opacity: 1; transform: none; }
body.jdi-leave{ opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce){
  body{ transition:none; transform:none; }
  body.jdi-enter{ opacity:1; }
  body.jdi-leave{ opacity:1; }
}

/* Reusable components */
.jdi-card {
  background: var(--jdi-surface);
  border: 1px solid var(--jdi-border);
  border-radius: var(--jdi-radius);
  box-shadow: var(--jdi-shadow-sm);
}

.jdi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--jdi-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  user-select: none;
}

.jdi-btn:focus { outline: none; box-shadow: var(--jdi-focus); }

.jdi-btn-primary {
  background: var(--jdi-primary);
  color: white;
}
.jdi-btn-primary:hover { background: var(--jdi-primary-hover); }

.jdi-btn-success {
  background: var(--jdi-success);
  color: white;
}
.jdi-btn-success:hover { background: var(--jdi-success-hover); }

.jdi-btn-ghost {
  background: #f3f4f6;
  color: var(--jdi-text);
  border-color: var(--jdi-border);
}
.jdi-btn-ghost:hover { background: #e5e7eb; }

.jdi-fab {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  box-shadow: var(--jdi-shadow);
}

.jdi-input {
  width: 100%;
  border: 1px solid var(--jdi-border);
  border-radius: var(--jdi-radius-sm);
  padding: 10px 12px;
}
.jdi-input:focus { outline: none; box-shadow: var(--jdi-focus); border-color: rgba(79,70,229,.55); }

/* Responsive helpers */
.jdi-mobile-only{display:none;}
.jdi-desktop-only{display:block;}
@media (max-width: 768px){
  .jdi-mobile-only{display:block;}
  .jdi-desktop-only{display:none;}
}