:root {
    --primary: #0ea5e9;
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --card-bg: rgba(255,255,255,0.03);
    --card-border: rgba(255,255,255,0.1);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --win: #10b981;
    --lose: #f43f5e;
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
    min-height: 100vh;
    padding: 3rem 2rem;
}

.bg-shape { position:fixed; z-index:-1; filter:blur(80px); border-radius:50%; opacity:0.25; pointer-events:none; }
.shape-1 { width:400px; height:400px; background:var(--primary); top:-100px; left:-100px; }
.shape-2 { width:300px; height:300px; background:#8b5cf6; bottom:-50px; right:-50px; }

header { text-align:center; margin-bottom:3rem; }
.logo-container { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:0.75rem; }
.logo-icon { width:40px; height:40px; color:var(--primary); }
h1 { font-size:2.2rem; font-weight:700; background:linear-gradient(to right,#fff,var(--text-muted)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.subtitle { color:var(--text-muted); font-size:1rem; }
.back-link { color:var(--text-muted); display:flex; align-items:center; text-decoration:none; transition:var(--transition); }
.back-link:hover { color:var(--primary); }

.container { max-width:1200px; margin:0 auto; }

.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.section-header h2 { font-size:1.1rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-radius:10px; border:none; cursor:pointer; font-family:inherit; font-size:0.9rem; font-weight:500; transition:var(--transition); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#0284c7; }
.btn-ghost { background:rgba(255,255,255,0.06); color:var(--text-muted); border:1px solid var(--card-border); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); color:#fff; }
.btn-sm { padding:0.3rem 0.7rem; font-size:0.8rem; }
.btn-icon { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:0.3rem; border-radius:6px; transition:var(--transition); }
.btn-danger:hover { color:var(--lose); background:rgba(244,63,94,0.1); }

/* Company cards */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.company-card { display:flex; align-items:center; gap:1rem; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1.2rem; text-decoration:none; color:inherit; transition:var(--transition); }
.company-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.3); }
.card-icon { width:44px; height:44px; background:rgba(14,165,233,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0; }
.card-body { flex:1; }
.card-body h3 { font-size:1rem; font-weight:600; }
.card-body p { font-size:0.85rem; color:var(--text-muted); }
.card-arrow { color:var(--text-muted); width:18px; height:18px; }
.badge { display:inline-block; padding:0.2rem 0.5rem; border-radius:6px; font-size:0.75rem; font-weight:600; text-transform:uppercase; margin-top:0.3rem; }
.badge-free { background:rgba(148,163,184,0.15); color:var(--text-muted); }
.badge-pro { background:rgba(14,165,233,0.15); color:var(--primary); }
.badge-business { background:rgba(124,77,255,0.15); color:#a78bfa; }

/* Product blocks */
.product-block { background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; }
.product-own { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.product-own-info .label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.product-own-info h3 { font-size:1.1rem; font-weight:600; margin:0.2rem 0; }
.own-price { font-size:1.4rem; font-weight:700; color:var(--primary); }

/* Table */
.competitors-table-wrap { overflow-x:auto; }
.competitors-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.competitors-table th { text-align:left; color:var(--text-muted); font-weight:500; font-size:0.8rem; padding:0.6rem 0.8rem; border-bottom:1px solid var(--card-border); }
.competitors-table td { padding:0.75rem 0.8rem; border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.competitors-table tr:last-child td { border-bottom:none; }
.row-win { background:rgba(16,185,129,0.04); }
.row-lose { background:rgba(244,63,94,0.04); }

.comp-link { color:var(--text-main); text-decoration:none; display:inline-flex; align-items:center; gap:0.3rem; }
.comp-link:hover { color:var(--primary); }
.price-cell { font-weight:600; }
.diff { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.85rem; font-weight:600; }
.diff svg { width:14px; height:14px; }
.diff-win { color:var(--win); }
.diff-lose { color:var(--lose); }
.muted { color:var(--text-muted); }
.empty-inline { color:var(--text-muted); font-size:0.9rem; margin-top:0.5rem; }

/* Empty state */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:4rem; color:var(--text-muted); }
.empty-state svg { width:48px; height:48px; opacity:0.4; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:#1e293b; border:1px solid var(--card-border); border-radius:20px; padding:2rem; width:100%; max-width:440px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-header h3 { font-size:1.1rem; font-weight:600; }
.modal-header button { background:none; border:none; cursor:pointer; color:var(--text-muted); }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:0.85rem; color:var(--text-muted); margin-bottom:0.4rem; }
.form-group input, .form-group select { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--card-border); border-radius:10px; padding:0.6rem 0.9rem; color:var(--text-main); font-family:inherit; font-size:0.95rem; outline:none; transition:var(--transition); }
.form-group input:focus, .form-group select:focus { border-color:var(--primary); }
.form-group select option { background:#1e293b; }
.form-actions { display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.5rem; }

/* Comparativa */
.comparativa-options { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; padding:1rem 1.2rem; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; margin-bottom:1rem; }
.comparativa-options label { display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:var(--text-muted); }
.comparativa-options input[type=number], .comparativa-options select { background:rgba(255,255,255,0.05); border:1px solid var(--card-border); border-radius:8px; padding:0.35rem 0.6rem; color:var(--text-main); font-family:inherit; font-size:0.9rem; }
.comparativa-options select option { background:#1e293b; color:var(--text-main); }
.comparativa-options select option:disabled { color: var(--text-muted); }
.comparativa-supers { display:flex; flex-wrap:wrap; gap:0.75rem; padding:0.75rem 1.2rem; border-top:1px solid var(--card-border); }
.super-check { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; color:var(--text-main); cursor:pointer; padding:0.3rem 0.8rem; border:1px solid var(--card-border); border-radius:8px; transition:var(--transition); }
.super-check:hover:not(.super-check-disabled) { border-color:var(--primary); color:var(--primary); }
.super-check input { accent-color:var(--primary); width:15px; height:15px; cursor:pointer; }
.super-check-disabled { opacity:0.4; cursor:not-allowed; }
.super-check-disabled input { cursor:not-allowed; }
.soon { font-size:0.7rem; color:var(--text-muted); background:rgba(255,255,255,0.06); padding:0.1rem 0.4rem; border-radius:4px; }
.comparativa-log { background:#0f172a; border:1px solid var(--card-border); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; max-height:260px; overflow-y:auto; }
.comparativa-log pre { font-family:monospace; font-size:0.82rem; color:#94a3b8; white-space:pre-wrap; word-break:break-word; }

/* Tabla comparativa */
.cmp-tabla td { vertical-align:top; padding:0.5rem 0.75rem; }
.cmp-precio { display:block; font-weight:600; font-size:0.95rem; }
.cmp-pu { display:inline; font-size:0.8rem; color:var(--text-muted); font-weight:400; margin-left:0.2rem; }
.cmp-name { display:block; font-size:0.75rem; margin-top:0.15rem; }
.badge-mb { background:rgba(244,63,94,0.15); color:#f43f5e; border:1px solid rgba(244,63,94,0.3); font-size:0.7rem; padding:0.1rem 0.4rem; border-radius:4px; }

/* Ganador */
.cmp-ganador { font-weight:700; color:var(--win); }
.cmp-ganador-mb { color:#f43f5e; }
.cmp-empate { color:var(--text-muted); font-weight:500; }
.cmp-sin-datos { color:var(--text-muted); }

/* Resumen final */
.cmp-resumen { margin-top:1.5rem; background:rgba(14,165,233,0.08); border:1px solid rgba(14,165,233,0.2); border-radius:14px; padding:1.2rem 1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.cmp-resumen-texto { font-size:1rem; line-height:1.5; }
.cmp-resumen-stats { display:flex; gap:1.5rem; flex-wrap:wrap; font-size:0.85rem; color:var(--text-muted); }
.cmp-resumen-totales { display:flex; gap:1.5rem; flex-wrap:wrap; font-size:0.85rem; color:var(--text-muted); border-top:1px solid var(--card-border); padding-top:0.6rem; }