:root { --bg:#ffffff; --fg:#1a1f24; --muted:#556572; --card:#f6f8fa; --accent:#146c43; --accent-weak:#e7f3ee; --border:#dce3ea; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:#0c6a4a;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:20px}

/* Topbar */
.topbar{background:#ffffff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar .wrap.nav{display:flex;align-items:center;gap:16px}
.brand a{font-weight:800;font-size:18px;display:inline-block;padding:6px 0}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs a{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--fg);text-decoration:none}
.tabs a:hover{background:#f7fbf9}
.tabs a.active{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:700}
.logout{margin-left:auto}
.btn-outline{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--fg);cursor:pointer}
.btn-outline:hover{background:#f8f9fb}

/* Tarjetas y formularios */
main .card:first-child{margin-top:20px}
.card{background:var(--card);padding:18px;border-radius:14px;margin:18px 0;border:1px solid var(--border)}
h2,h3{margin:0 0 12px}
label{display:block;margin:10px 0}
label.inline{display:flex;gap:8px;align-items:center}

/* Inputs: 100% solo para campos de texto/select/textarea */
input,select,button{padding:12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--fg)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],select,textarea{width:100%}

/* Checkboxes / radios: no ocupar ancho completo ni padding extra */
input[type=checkbox],input[type=radio]{width:auto;padding:0;border:0;background:transparent}

/* Botones */
button{background:var(--accent);border:0;color:#fff;cursor:pointer;font-weight:700;width:100%}
button.lnk{background:#fff;border:1px solid var(--border);color:var(--fg)}

/* Tablas */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid var(--border)}
th{background:#eef2f6;text-align:left}
code{background:#eef2f6;padding:2px 6px;border-radius:6px}
.small{font-size:12px;color:var(--muted)}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#0c6a4a;color:#fff;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
ul.clean{list-style:none;padding:0;margin:0}

/* Listado de calles asignadas */
.searchbar{display:flex;gap:10px;align-items:center;margin:10px 0}
.searchbar input{flex:1}
.scroll{max-height:420px;overflow:auto;border:1px solid var(--border);background:#fff;border-radius:10px}
.list{list-style:none;margin:0;padding:0}
.list li{border-bottom:1px solid var(--border)}
.list li:last-child{border-bottom:0}
.chk-line{display:flex;align-items:center;gap:12px;padding:10px 12px}
.chk-line input[type=checkbox]{width:auto;margin:0}
.empty-row{padding:14px;color:var(--muted)}
.brand-link { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.brand-logo { height:28px; width:auto; display:block; }
.lang { display:flex; gap:6px; align-items:center; margin-left:auto; }
.lang a { display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--fg); }
.lang a.active { background:var(--accent-weak); border-color:var(--accent); color:var(--accent); font-weight:700; }