* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #fff; color: #222; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#20577a; color:#fff; }
.topbar .brand { font-weight:700; }
.searchform input { padding:6px 8px; border-radius:3px; border:1px solid #ccc; width:220px; }
.searchform button { padding:6px 10px; margin-left:6px; background:#ff9900; border:none; border-radius:4px; cursor:pointer; color:#fff; }

.app { display:flex; height: calc(100vh - 52px); }
.left-panel { width: 360px; border-right:1px solid #e6e6e6; background:#f7f7f7; overflow:auto; }
.right-panel { flex:1; position:relative; padding:16px; }
.panel-header { padding:12px 16px; font-weight:700; border-bottom:1px solid #e6e6e6; background:#fff; }
.server-list { padding:8px; }
.server-item { display:flex; align-items:center; padding:10px 8px; border-bottom:1px solid #eee; font-size:13px; color:#333; }
.server-item .left { display:flex; align-items:center; gap:8px; }
.server-item img.flag { width:22px; height:16px; object-fit:cover; border:1px solid #ddd; }
.server-item .meta { display:flex; flex-direction:column; }
.server-item .provider { font-size:11px; color:#666; margin-top:2px; }
.status { margin-left:auto; min-width:90px; text-align:center; padding:6px 8px; border-radius:4px; font-weight:700; color:#fff; font-size:12px; }
.status.loading { background:#f0ad4e; } /* amarillo */
.status.ok { background:#28a745; }      /* verde */
.status.fail { background:#dc3545; }    /* rojo */

.map { width:100%; height:100%; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.08); background:#f3f6f9; }
.leaflet-container { background: #dfeef8; border-radius:4px; }

/* Popup small */
.leaflet-popup-content-wrapper { font-size:13px; }