* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --bg: #0f0f13;
    --card: #1a1a23;
    --border: #2a2a38;
    --text: #e2e2e8;
    --text-muted: #6b7280;
    --primary: #4ade80;
    --primary-hover: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --success: #4ade80;
}
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; }
.login-container { width:100%; max-width:400px; padding:24px; }
.login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px;
}
.login-card h1 { font-size: 22px; font-weight: 800; text-align:center; margin-bottom:4px; }
.brand { color: var(--primary); }
.login-sub { text-align:center; color: var(--text-muted); margin-bottom:24px; font-size:14px; }
.login-hint { text-align:center; color: var(--text-muted); font-size:12px; margin-top:16px; }
.login-form label { display:block; font-size:13px; font-weight:600; color: var(--text-muted); margin-bottom:4px; }
.login-form input {
    width:100%;
    padding:10px 14px;
    background: #2d2d3a;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    color:#fff;
    margin-bottom:16px;
    outline:none;
    transition:border-color .2s;
}
.login-form input:focus { border-color: var(--primary); }

/* Nav */
.navbar {
    background: rgba(15,15,19,.85);
    border-bottom:1px solid var(--border);
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(10px);
}
.nav-container {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    height:56px;
    gap:24px;
}
.logo { font-weight:800; font-size:16px; color:#fff !important; display:flex; align-items:center; gap:8px; }
.nav-links { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-link { color: var(--text-muted); font-size:14px; transition:color .2s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-user { color: var(--text-muted); font-size:13px; padding:0 8px; }
.btn-logout { color: var(--danger); }

/* Container */
.container { max-width:1200px; margin:0 auto; padding:24px; }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    text-align:center;
}
.stat-value { font-size:32px; font-weight:800; }
.stat-label { color: var(--text-muted); font-size:13px; margin-top:4px; }
.stat-pending .stat-value { color: var(--warning); }
.stat-monitoring .stat-value { color: var(--info); }
.stat-success .stat-value { color: var(--success); }
.stat-error .stat-value { color: var(--danger); }

/* Section */
.section { margin-bottom:32px; }
.section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}
.section-header h2 { font-size:18px; display:flex; align-items:center; gap:8px; }

/* Table */
.table-responsive { overflow-x:auto; }
table {
    width:100%;
    border-collapse:collapse;
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
}
th, td { padding:12px 16px; text-align:left; font-size:14px; }
th { background:rgba(255,255,255,.03); color: var(--text-muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.5px; }
tr:not(:last-child) td { border-bottom:1px solid var(--border); }
td code { background:rgba(255,255,255,.05); padding:2px 6px; border-radius:4px; font-size:13px; }
.empty { color: var(--text-muted); text-align:center; padding:24px !important; }

/* Badges */
.badge {
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.badge-pendiente { background:rgba(245,158,11,.15); color:var(--warning); }
.badge-monitoreando { background:rgba(59,130,246,.15); color:var(--info); }
.badge-stock_ok { background:rgba(74,222,128,.15); color:var(--success); }
.badge-checkout_ok { background:rgba(74,222,128,.2); color:var(--success); }
.badge-checkout_fail { background:rgba(239,68,68,.15); color:var(--danger); }
.badge-error { background:rgba(239,68,68,.15); color:var(--danger); }
.badge-pausado { background:rgba(107,114,128,.15); color:var(--text-muted); }
.badge-activa { background:rgba(74,222,128,.15); color:var(--success); }
.badge-inactiva { background:rgba(107,114,128,.15); color:var(--text-muted); }

/* Buttons */
.btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    border:none;
    transition:all .2s;
    background:rgba(255,255,255,.05);
    color: var(--text);
}
.btn:hover { background:rgba(255,255,255,.1); }
.btn-primary { background:var(--primary); color:#0f0f13; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 4px 20px rgba(74,222,128,.3); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-ghost { background:transparent; border:1px solid var(--border); }
.btn-full { width:100%; justify-content:center; padding:12px; }
.btn-sm { padding:4px 10px; font-size:12px; }

/* Forms */
.form-card {
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:24px;
    margin-bottom:24px;
}
.form-card h1, .form-card h3 { margin-bottom:20px; font-size:18px; display:flex; align-items:center; gap:8px; }
.form-card h4 {
    font-size:14px;
    color: var(--text-muted);
    margin:20px 0 12px;
    padding-top:16px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:6px;
}
.form-card label { display:block; font-size:13px; font-weight:600; color: var(--text-muted); margin-bottom:4px; }
.form-card input, .form-card select, .form-card textarea {
    width:100%;
    padding:10px 14px;
    background:#2d2d3a;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    color:#fff;
    margin-bottom:16px;
    outline:none;
    transition:border-color .2s;
}
.form-card input:focus, .form-card select:focus { border-color: var(--primary); }
.form-card select { cursor:pointer; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.form-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:16px; }

/* Logs */
.log-list { background: var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.log-entry {
    display:flex;
    gap:12px;
    padding:10px 16px;
    font-size:13px;
    align-items:center;
    border-bottom:1px solid var(--border);
}
.log-entry:last-child { border-bottom:none; }
.log-time { color: var(--text-muted); font-size:12px; min-width:70px; font-family:monospace; }
.log-sku { color: var(--primary); font-weight:600; min-width:80px; font-family:monospace; }
.log-action { font-weight:600; min-width:120px; }
.log-detail { color:var(--text-muted); }
.log-success { border-left:3px solid var(--success); }
.log-error { border-left:3px solid var(--danger); }
.log-warning { border-left:3px solid var(--warning); }
.log-info { border-left:3px solid var(--info); }

/* Alert */
.alert {
    padding:12px 16px;
    border-radius:10px;
    margin-bottom:16px;
    font-size:14px;
}
.alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--danger); }
.alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:var(--warning); }
.alert-success { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--success); }

.text-muted { color: var(--text-muted); font-size:13px; }
.filter-group { display:flex; gap:8px; }

/* Product Grid */
.product-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:16px;
    margin-bottom:16px;
}
.product-card {
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    transition:border-color .2s, box-shadow .2s;
    position:relative;
}
.product-card:hover { border-color: var(--primary); box-shadow:0 0 20px rgba(74,222,128,.08); }
.product-sku { margin-bottom:6px; }
.product-sku code { font-size:13px; color: var(--primary); background:rgba(74,222,128,.1); padding:2px 8px; border-radius:6px; }
.product-name { font-size:15px; font-weight:600; margin-bottom:8px; color:#fff; }
.product-meta { display:flex; gap:16px; font-size:13px; color:var(--text-muted); margin-bottom:12px; }
.product-status { margin-top:auto; }

/* Responsive */
@media (max-width:768px) {
    .nav-links .nav-link span, .nav-user { display:none; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .form-row { grid-template-columns:1fr; }
}