@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/*
 * PsicoAgenda - Custom styles
 * Most styling handled by Tailwind CSS
 */

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Smooth transitions */
* { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; }

/* Radio button card selection */
input[type="radio"]:checked + span {
  border-color: #6366f1;
  background-color: #eef2ff;
  box-shadow: 0 0 0 2px #6366f1;
  border-radius: 0.5rem;
}

/* Form inputs focus */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Pagy navigation */
.pagy-nav { display: flex; gap: 4px; justify-content: center; }
.pagy-nav .page a, .pagy-nav .page.active { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.pagy-nav .page a { color: #6b7280; background: white; border: 1px solid #e5e7eb; }
.pagy-nav .page a:hover { background: #f9fafb; color: #111827; }
.pagy-nav .page.active { background: #6366f1; color: white; border: 1px solid #6366f1; }
.pagy-nav .page.prev.disabled, .pagy-nav .page.next.disabled { opacity: 0.4; }