:root{
  --bg:#0f1720; --panel:#16202b; --panel-2:#1c2836; --accent:#e0851a; --accent2:#2e8b57;
  --text:#e8edf2; --muted:#8a9bb0; --line:#233140; --danger:#c62828;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text);}
a{color:inherit;}
.hidden{display:none !important;}

header{background:var(--panel); padding:14px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}
header h1{font-size:18px; margin:0; white-space:nowrap;}
header h1 span{color:var(--accent);}
.badge{display:inline-block; background:var(--accent2); color:#fff; font-size:10px; padding:2px 8px; border-radius:10px; margin-left:8px;}

nav.tabs{display:flex; gap:4px; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
nav.tabs button{background:transparent; border:none; color:var(--muted); padding:9px 14px; cursor:pointer; font-size:13px; border-radius:6px; white-space:nowrap; flex:none;}
nav.tabs button.active{background:var(--panel-2); color:var(--text);}

.auth-box{display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap;}
.auth-box input{padding:7px 9px; background:#0f1720; border:1px solid var(--line); color:var(--text); border-radius:5px; font-size:13px; width:120px;}
.auth-box button{padding:7px 10px; background:var(--accent); border:none; border-radius:5px; color:#12141a; font-weight:bold; cursor:pointer; font-size:12px; white-space:nowrap;}
.auth-box button.secondary{background:transparent; border:1px solid var(--line); color:var(--text);}

@media (max-width:900px){
  header{padding:12px 16px;}
  header, .auth-box{justify-content:center;}
  nav.tabs{width:100%; justify-content:flex-start; border-top:1px solid var(--line); padding-top:8px;}
  .auth-box{width:100%; justify-content:center;}
  .auth-box input{width:100px;}
}
@media (max-width:480px){
  header h1{font-size:16px;}
  .auth-box input{width:90px; font-size:12px;}
}

.view{display:none;}
.view.active{display:block;}

.layout{display:grid; grid-template-columns:320px 1fr 380px; height:calc(100vh - 57px);}
.panel{padding:20px; overflow-y:auto;}
.controls{background:var(--panel); border-right:1px solid var(--line);}
.viewer{position:relative; background:#0a1016; padding:0 !important;}
.results{background:var(--panel); border-left:1px solid var(--line);}

label{display:block; font-size:12px; color:var(--muted); margin:14px 0 5px; text-transform:uppercase; letter-spacing:0.5px;}
select, input[type=number], input[type=text]{width:100%; padding:9px 10px; background:#0f1720; border:1px solid var(--line); color:var(--text); border-radius:5px; font-size:14px;}

.btn{width:100%; margin-top:16px; padding:12px; background:var(--accent); color:#12141a; border:none; border-radius:6px; font-weight:bold; cursor:pointer; font-size:14px;}
.btn:hover{opacity:0.9;}
.btn-outline{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.btn-green{background:var(--accent2); color:#fff;}

h2{font-size:13.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:8px; margin-top:0;}
.stat{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13.5px;}
.stat b{color:var(--accent);}

table{width:100%; border-collapse:collapse; font-size:12px; margin-top:8px;}
th,td{padding:6px 8px; text-align:left; border-bottom:1px solid var(--line);}
th{color:var(--muted); font-weight:normal; text-transform:uppercase; font-size:10px;}
.fam-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;}

.warn{background:#3a2a10; border-left:3px solid var(--accent); padding:10px 12px; font-size:11.5px; border-radius:4px; margin-top:14px; color:#e8c98a;}

#canvas-wrap{width:100%; height:100%;}
.toolbar{position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index:5;}
.toolbar button{background:var(--panel); border:1px solid var(--line); color:var(--text); padding:7px 12px; border-radius:5px; font-size:12px; cursor:pointer;}
.toolbar button.active{background:var(--accent); color:#12141a; border-color:var(--accent);}

.costos-row{display:grid; grid-template-columns:1fr 70px 90px; gap:6px; margin-bottom:6px; align-items:center;}
.costos-row input{padding:6px 8px; font-size:12.5px;}
.total-box{background:var(--panel-2); border-radius:6px; padding:12px; margin-top:12px; font-size:15px; font-weight:bold; color:var(--accent); text-align:right;}

.muted-text{color:var(--muted); font-size:12.5px;}
.proyecto-item{display:flex; justify-content:space-between; align-items:center; padding:10px; background:var(--panel-2); border-radius:6px; margin-bottom:8px; font-size:13px;}
.proyecto-actions button{background:transparent; border:1px solid var(--line); color:var(--text); padding:5px 10px; border-radius:4px; font-size:11.5px; margin-left:6px; cursor:pointer;}
.proyecto-actions button.danger{border-color:var(--danger); color:#ff8a80;}

.page-section{max-width:900px; margin:0 auto; padding:50px 30px;}
.page-section h2{font-size:22px; color:var(--text); border:none; text-transform:none; letter-spacing:0;}

@media (max-width:900px){
  .layout{grid-template-columns:1fr; height:auto;}
  .viewer{height:400px;}
}