:root{
  --bg:#0b0f14;
  --panel:#121821;
  --soft:#1a2432;
  --text:#e6edf3;
  --muted:#a9b4c0;
  --brand:#5b93ff;
  --accent:#4ade80;
  --danger:#ef4444;
  --border:#223046;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #0b0f14 0%, #0e141c 100%);
}

.app{
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:100vh;
}

.sidebar{
  border-right:1px solid var(--border);
  padding:20px 16px;
  background:linear-gradient(180deg, #0e141c 0%, #0b1119 100%);
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:18px;
}
.logo{
  width:max-content;
  background:linear-gradient(90deg, var(--brand), #a78bfa);
  color:#051029;
  font-weight:800;
  letter-spacing:1px;
  padding:8px 12px;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(91,147,255,.25);
}
.subtitle{
  color:var(--muted);
  font-size:12px;
}

.stats-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:10px 0 18px;
}
.stats-label{
  font-size:12px;
  color:var(--muted);
}
.stats-value{
  font-size:28px;
  font-weight:800;
  margin-top:4px;
  line-height:1;
  background:linear-gradient(90deg, #fff, #9bd0ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.filter-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 8px;
}
.filter-title{
  font-weight:700;
  font-size:14px;
}
.link-button{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;
}
.link-button:hover{color:#d2dae3;text-decoration:underline}

.state-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:calc(100vh - 250px);overflow:auto;padding-right:4px;
}
.state-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border:1px solid var(--border);background:var(--panel);
  border-radius:10px;cursor:pointer;transition:transform .05s ease, border-color .2s ease, background .2s ease;
}
.state-item:hover{transform:translateY(-1px);border-color:#2d3d59}
.state-name{font-weight:600}
.state-count{
  background:rgba(90,146,255,.12);
  border:1px solid rgba(90,146,255,.35);
  padding:2px 8px;border-radius:999px;font-size:12px;color:#b7d3ff
}
.state-item.active{outline:2px solid var(--brand)}

.content{
  display:flex;flex-direction:column;gap:16px;
  padding:20px 24px;
}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.toolbar .left{flex:1}
.toolbar input[type="search"]{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);outline:none
}
.toolbar input::placeholder{color:#8ea0b5}
.toolbar .right{display:flex;align-items:center;gap:10px}
.btn{
  background:linear-gradient(90deg, var(--brand), #7aa7ff);
  color:#071023;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700
}
.btn:hover{filter:brightness(1.05)}

.badge{
  background:rgba(74,222,128,.12);
  border:1px solid rgba(74,222,128,.45);
  color:#b4f3c8;padding:6px 10px;border-radius:999px;font-size:12px
}
.hidden{display:none}

.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;
  min-height:300px
}
.loader{
  text-align:center;color:var(--muted);padding:24px
}
.alert{
  background:#1b1012;border:1px solid #52202a;color:#ffd8dd;padding:10px 12px;border-radius:12px;margin-bottom:12px
}

.table-wrapper{overflow:auto;border-radius:12px;border:1px solid var(--border)}
.table{width:100%;border-collapse:collapse;min-width:900px;background:var(--soft)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{position:sticky;top:0;background:#0f1722;z-index:1}
.table a{color:#9bd0ff;text-decoration:none}
.table a:hover{text-decoration:underline}

.footer{color:var(--muted);font-size:12px;margin-top:4px}

/* ===== Scrollbars personalizados ===== */

/* Firefox */
.state-list,
.table-wrapper {
  scrollbar-width: thin;                 /* fino */
  scrollbar-color: #2d3d59 transparent;  /* thumb / track */
}

/* WebKit (Chrome/Edge/Safari/Opera) */
.state-list::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar {
  width: 10px;           /* ancho vertical */
  height: 10px;          /* alto horizontal */
}

.state-list::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.state-list::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent; /* “padding” visual */
  background-clip: padding-box;
  background-image: linear-gradient(180deg, #2e3b52, #223046);
}

.state-list:hover::-webkit-scrollbar-thumb,
.table-wrapper:hover::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, #3a4b6a, #2b3a54);
}

/* Scrollbar más delgado en lista de estados */
.state-list::-webkit-scrollbar { width: 8px; }

/* Suavidad */
.state-list,
.table-wrapper {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Sombras en el scroll para insinuar más contenido */
.state-list {
  background:
    linear-gradient(var(--bg), rgba(11,15,20,0)) top/100% 14px no-repeat,
    linear-gradient(rgba(11,15,20,0), var(--bg)) bottom/100% 14px no-repeat,
    linear-gradient(180deg, #0e141c, #0b1119);
  background-attachment: local, local, scroll;
}

.table-wrapper {
  background:
    linear-gradient(var(--panel), rgba(18,24,33,0)) top/100% 14px no-repeat,
    linear-gradient(rgba(18,24,33,0), var(--panel)) bottom/100% 14px no-repeat,
    var(--soft);
  background-attachment: local, local, scroll;
}