:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --primary:#0ea5e9;   /* azul */
  --secondary:#16a34a; /* verde */
  --text:#0f172a;
  --sub:#475569;
  --border:#e2e8f0;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#e9f7ff 0%, #f6fff8 100%);color:var(--text)}
.header{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;padding:18px 20px}
.container{max-width:1100px;margin:0 auto;padding:20px}
h1{margin:0;font-size:22px}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(2,132,199,.08)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1 1 260px}
label{display:block;font-weight:600;margin-bottom:6px;color:var(--sub)}
select,input[type=text]{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--primary);background:linear-gradient(90deg,#fff,#eefaff);color:var(--primary);font-weight:700;cursor:pointer}
.btn:hover{background:#fff}
.text-muted{color:var(--sub)}

.table-wrap{margin-top:16px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:#f0f9ff;color:#0b3c5d;font-weight:700}
tbody tr:hover{background:#f7fffb}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#e6ffed;color:#065f46;font-size:12px;font-weight:700}
.copy{font-family:ui-monospace,Menlo,Consolas,monospace;padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:#f8fafc;display:inline-block}