/* Light theme, moderno y limpio */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#5b6880;
  --text:#0f172a;
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --green:#16a34a;
  --yellow:#eab308;
  --sky:#38bdf8;
  --darkblue:#1d4ed8;
  --red:#ef4444;
  --purple:#8b5cf6;
  --orange:#f97316;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.07);
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;}
.container{ max-width:1350px; margin: 28px auto; padding:0 16px; }
.header h1{ margin:0 0 6px; font-size:28px; }
.muted{ color: var(--muted); }
.header .search{ margin-top: 10px; display: flex; gap: 8px; }
.header .search input[type="text"]{
  flex:1;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.table-wrap{ overflow:auto; }
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); }
th{ position: sticky; top:0; background: #f8fafc; }
td.actions{ white-space: nowrap; }
.empty{ text-align:center; color:var(--muted); padding:18px; }

.btn{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s ease;
  text-decoration: none;
  display: inline-block;
}
.btn:hover{ transform: translateY(-1px); border-color: var(--brand); box-shadow: 0 6px 18px rgba(37,99,235,.25); }
.btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; color: #fff; font-weight: 700; }
.btn.outline{ border-color: var(--brand); color: var(--brand); background: #eef2ff; }

.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius: 999px; font-size: 12px;
  border:1px solid var(--border);
  background:#fff;
}
.status .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }

.s4{ background: #e8f5ee; border-color: #bfe7ce; }
.s4 .dot{ background: #16a34a; }

.s3{ background: #fff8e1; border-color: #fde58a; }
.s3 .dot{ background: #eab308; }

.s6{ background: #e0f7ff; border-color: #bae6fd; }
.s6 .dot{ background: #38bdf8; }

.s1{ background: #e0e7ff; border-color: #c7d2fe; }
.s1 .dot{ background: #1d4ed8; }

.s5,.s7{ background: #fee2e2; border-color: #fecaca; }
.s5 .dot,.s7 .dot{ background: #ef4444; }

.s8{ background: #ede9fe; border-color: #ddd6fe; }
.s8 .dot{ background: #8b5cf6; }

.s2{ background: #ffedd5; border-color: #fed7aa; }
.s2 .dot{ background: #f97316; }

.grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field{ margin-bottom: 10px; }
.field label{ display:block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
input[type="text"], select, textarea{
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
textarea{ resize: vertical; }

.row{ display: flex; align-items: center; gap: 10px; }
.row.gap{ gap: 12px; }

.detail{ font-size:14px; line-height:1.4; }
.detail .kv{ display:grid; grid-template-columns: 120px 1fr; gap:6px; margin: 6px 0; }
.detail .kv span{ color: var(--muted); }

.legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.legend .status{ cursor:default; }

.footer{ margin: 24px 0 10px; color: var(--muted); text-align:center; font-size: 12px; }

tbody tr.selected{ outline: 2px solid var(--brand); background:#f1f5ff; }

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}