/* ================================================================
   TUCHAMBA DESIGN SYSTEM — v2.0
   HSL color tokens · Inter font · Light mode
================================================================ */

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

/* ── Color tokens ────────────────────────────────────────────── */
:root {
    --background:         hsl(210, 20%, 98%);
    --foreground:         hsl(224, 76%, 10%);

    --card:               hsl(0, 0%, 100%);
    --card-foreground:    hsl(224, 76%, 10%);

    --primary:            hsl(217, 91%, 60%);
    --primary-dark:       hsl(224, 76%, 48%);
    --primary-light:      hsl(217, 91%, 70%);
    --primary-fg:         hsl(0, 0%, 100%);

    --secondary:          hsl(210, 30%, 90%);
    --secondary-fg:       hsl(224, 76%, 20%);

    --muted:              hsl(210, 30%, 95%);
    --muted-fg:           hsl(215, 25%, 45%);

    --accent:             hsl(200, 95%, 55%);
    --accent-fg:          hsl(0, 0%, 100%);

    --success:            hsl(142, 71%, 45%);
    --success-light:      hsl(142, 70%, 95%);
    --warning:            hsl(38, 92%, 50%);
    --warning-light:      hsl(48, 100%, 94%);
    --destructive:        hsl(0, 72%, 51%);
    --destructive-light:  hsl(0, 86%, 97%);
    --destructive-fg:     hsl(0, 0%, 100%);

    --border:             hsl(210, 20%, 88%);
    --input:              hsl(210, 20%, 88%);
    --ring:               hsl(217, 91%, 60%);

    /* Legacy aliases — compatibilidad hacia atrás */
    --primary-blue:           hsl(217, 91%, 60%);
    --primary-blue-dark:      hsl(224, 76%, 48%);
    --primary-blue-hover:     hsl(224, 76%, 48%);
    --primary-blue-light:     hsl(217, 91%, 70%);
    --primary-gradient:       linear-gradient(135deg, hsl(217,91%,60%) 0%, hsl(224,76%,48%) 100%);

    /* Radii */
    --radius-sm:   0.25rem;
    --radius:      0.5rem;
    --radius-md:   0.375rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
    --shadow:     0 2px 8px rgba(0,0,0,.10);
    --shadow-md:  0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:  0 8px 30px rgba(0,0,0,.14);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.16);

    /* Typography */
    --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  2rem;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Transitions */
    --transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    background: var(--background);
    color: var(--foreground);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-family); font-weight: 700; color: var(--foreground); line-height: 1.2; }
p { color: var(--muted-fg); }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

.text-gradient {
    background-clip: text; -webkit-background-clip: text; color: transparent;
    background-image: linear-gradient(to right, hsl(217,91%,60%), hsl(200,95%,55%));
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; border-radius: var(--radius);
    font-size: 0.875rem; font-weight: 600; font-family: var(--font-family);
    text-decoration: none; border: none; cursor: pointer;
    transition: var(--transition-fast); white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 2px 8px rgba(59,130,246,.3); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,.4); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--primary-fg); }
.btn-ghost { background: transparent; color: var(--muted-fg); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }
.btn-danger { background: var(--destructive); color: var(--destructive-fg); }
.btn-danger:hover { background: hsl(0,72%,44%); }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
}
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin: 0; }
.card-body { padding: 1.5rem; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.875rem; color: var(--foreground); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea, select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--font-family);
    background: #fff;
    color: var(--foreground);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
input::placeholder, textarea::placeholder { color: var(--muted-fg); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid transparent; font-size: 0.9rem; margin-bottom: 1rem; }
.alert-success, .alert.success { background: var(--success-light); color: hsl(142,71%,25%); border-color: hsl(142,40%,80%); }
.alert-error,   .alert.error   { background: var(--destructive-light); color: hsl(0,72%,35%); border-color: hsl(0,60%,85%); }
.alert-warning  { background: var(--warning-light); color: hsl(38,70%,30%); border-color: hsl(38,70%,75%); }
.alert-info     { background: hsl(217,91%,97%); color: hsl(217,76%,30%); border-color: hsl(217,70%,82%); }
.alert-primary  { background: hsl(217,91%,95%); color: var(--primary-dark); border-color: hsl(217,70%,78%); }
.alert-secondary { background: var(--muted); color: var(--muted-fg); border-color: var(--border); }

/* ── Status badges ───────────────────────────────────────────── */
.status-badge { padding: 0.25rem 0.7rem; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; display: inline-block; }
.status-pending,  .status-pendiente  { background: var(--warning-light); color: hsl(38,70%,30%); }
.status-accepted, .status-aceptado   { background: var(--success-light); color: hsl(142,71%,25%); }
.status-rejected, .status-rechazado  { background: var(--destructive-light); color: hsl(0,72%,35%); }
.status-revisando  { background: hsl(217,91%,95%); color: var(--primary-dark); }
.status-entrevista { background: hsl(200,80%,92%); color: hsl(200,80%,25%); }
.status-seleccionado_final { background: var(--success-light); color: hsl(142,71%,25%); }
.status-no_seleccionado    { background: var(--destructive-light); color: hsl(0,72%,35%); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    width: 260px;
    background: var(--card);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 0;
}
.sidebar-menu { list-style: none; }
.sidebar-menu li { margin-bottom: 0.25rem; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--muted-fg); text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.sidebar-menu a:hover { background: var(--muted); color: var(--primary); border-left-color: var(--primary); }
.sidebar-menu a.active { background: hsl(217,91%,97%); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.sidebar-menu .icon { font-size: 1rem; width: 18px; text-align: center; }

/* ── Dashboard layout ────────────────────────────────────────── */
.dashboard-container { display: flex; min-height: calc(100vh - 72px); }
.main-content { flex: 1; padding: 2rem; }
.content-header { margin-bottom: 1.75rem; }
.content-title { font-size: 1.75rem; color: var(--foreground); margin-bottom: 0.35rem; }
.content-subtitle { color: var(--muted-fg); font-size: 0.95rem; }

/* ── Stats grid ──────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; margin-bottom: 1.75rem; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; transition: transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--primary); }
.stat-label { color: var(--muted-fg); font-size: 0.875rem; margin-top: 0.25rem; }

/* ── Jobs grid ───────────────────────────────────────────────── */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 1.25rem; }
.job-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); }
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.job-title { font-size: 1.1rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.4rem; }
.job-company { color: var(--primary); font-weight: 600; margin-bottom: 0.75rem; font-size: 0.9rem; }
.job-details { display: flex; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.job-detail { display: flex; align-items: center; gap: 0.3rem; color: var(--muted-fg); font-size: 0.85rem; }

/* ── CV Upload ───────────────────────────────────────────────── */
.cv-upload { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; transition: border-color 0.2s; }
.cv-upload:hover { border-color: var(--primary); }

/* ── Welcome section ─────────────────────────────────────────── */
.welcome-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-sm); }
.welcome-section h1, .welcome-section h2 { color: var(--foreground); }
.welcome-section p { color: var(--muted-fg); }

/* ── Animated background (login/register pages) ──────────────── */
.animated-bg {
    background: linear-gradient(-45deg,
        hsl(217,91%,60%,.12),
        hsl(210,30%,95%),
        hsl(200,95%,55%,.10),
        hsl(210,20%,98%)
    );
    background-size: 400% 400%;
    animation: gradientBG 16s ease infinite;
}
@keyframes gradientBG {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ── Login / Register card ───────────────────────────────────── */
.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem 2rem;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    animation: slideUp 0.4s ease-out;
}
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo img { height: 56px; width: auto; }
.auth-title { font-size: 1.75rem; font-weight: 800; text-align: center; color: var(--foreground); margin-bottom: 0.4rem; }
.auth-subtitle { text-align: center; color: var(--muted-fg); font-size: 0.9rem; margin-bottom: 1.75rem; }

/* ── Table ───────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { background: var(--muted); padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--foreground); border-bottom: 2px solid var(--border); }
.table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); color: var(--foreground); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--muted); }

/* ── Animated card helpers (legacy) ─────────────────────────── */
.animated-card { animation: slideUp 0.5s ease-out; }
.fade-in-up    { animation: slideUp 0.6s ease-out; }
.gradient-text { background-clip:text; -webkit-background-clip:text; color:transparent; background-image: linear-gradient(to right, var(--primary), var(--accent)); }
.floating-element { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-container { flex-direction: column; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 0.75rem 0; }
    .sidebar-menu { display: flex; overflow-x: auto; padding: 0 1rem; gap: 0.5rem; }
    .sidebar-menu li { margin-bottom: 0; flex-shrink: 0; }
    .sidebar-menu a { padding: 0.5rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--border); border-left: 1px solid var(--border); }
    .sidebar-menu a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .main-content { padding: 1rem; }
    .jobs-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 1.75rem 1.25rem; }
}