/* Prototipo de interfaz · ERP de obra sobre modelo FIEBDC-3/2024 */

:root{
  --desk:#E3E7EB; --sheet:#fff;
  --ink:#14171C; --ink2:#5C6470; --ink3:#8B94A0;
  --rule:#DCE1E7; --rule2:#B4BDC7;
  --calc:#AE0077;          /* derivado */
  --cert:#0D6B50;          /* ejecutado */
  --alert:#A96400;         /* previsión divergente */
  --sel:#0F3A6B; --seltint:#E9F0F9;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --cond:"IBM Plex Sans Condensed",var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--desk); color:var(--ink);
  font:400 13px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sel);outline-offset:1px}

/* ─────────── cabecera ─────────── */
.top{background:var(--ink);color:#EDF0F3;flex:none}
.top-r1{display:flex;align-items:center;gap:14px;padding:8px 16px}

/* Componente Selector de Obra Desplegable Hacia Abajo */
.obra-dropdown-container {
  display: flex; align-items: center; gap: 8px; position: relative;
}
.obra-label-tag {
  font: 600 10px var(--cond); letter-spacing: 0.08em; color: #7E8794;
}

.obra-btn {
  font: 600 13px var(--sans) !important;
  color: #EDF0F3 !important;
  border-color: #333941 !important;
  padding: 5px 12px !important;
}
.obra-btn:hover {
  background: #1D2127 !important; border-color: #4C545E !important;
}

.obra-menu-popup {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  z-index: 50 !important;
  min-width: 380px !important;
}

.vrow-new-obra {
  background: #EAF7F2; border-radius: 3px; margin-bottom: 4px;
}
.vrow-new-obra .d { color: #0D6B50; font-size: 12px; }
.vrow-new-obra:hover { background: #DFF3EA; }

.vrow-demo-obra {
  background: #F5EEF8; border-radius: 3px; margin-bottom: 4px;
}
.vrow-demo-obra .d { color: #6B238E; font-size: 12px; }
.vrow-demo-obra:hover { background: #EBD9F3; }

.menu-divider {
  height: 1px; background: var(--rule); margin: 6px 0;
}

.menu-header-label {
  font: 600 9px var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink3); padding: 4px 9px 6px;
}

.ver{position:relative}
.ver-btn{display:flex;align-items:center;gap:8px;padding:4px 9px;border:1px solid #333941;
  border-radius:3px;font:500 12px var(--cond);letter-spacing:.02em}
.ver-btn:hover{border-color:#4C545E;background:#1D2127}
.ver-btn .caret{color:#6C7683;font-size:9px}
.badge{font:600 10px var(--cond);letter-spacing:.09em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px}
.b-apr{background:#0D6B50;color:#DFF3EA}
.b-bor{background:#A96400;color:#FFF1DC}

.ver-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:40;min-width:340px;
  background:var(--sheet);color:var(--ink);border:1px solid var(--rule2);
  border-radius:3px;box-shadow:0 10px 30px rgba(10,14,20,.28);padding:4px;display:none}
.ver-menu.open{display:block}
.ver-menu h4{font:600 10px var(--cond);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);padding:8px 9px 4px}
.vrow{display:flex;align-items:center;gap:10px;width:100%;padding:6px 9px;border-radius:2px;text-align:left}
.vrow:hover{background:var(--seltint)}
.vrow.on{background:var(--seltint);box-shadow:inset 2px 0 0 var(--sel)}
.vrow .n{font:500 12px var(--mono);color:var(--ink3);width:26px}
.vrow .d{flex:1;font-size:12px}
.vrow .f{font:400 11px var(--mono);color:var(--ink3)}

.vps-status-pill {
  display: flex; align-items: center; gap: 6px;
  background: #1d2127; border: 1px solid #333941;
  padding: 3px 8px; border-radius: 3px;
  font: 500 11px var(--mono); color: #79828F;
}
.vps-dot {
  width: 6px; height: 6px; background: #5FD5AC;
  border-radius: 50%; box-shadow: 0 0 6px #5FD5AC;
}

.spacer{flex:1}
.who{font:400 11px var(--mono);color:#7E8794}
.tb-portal{padding:3px 8px;border:1px solid #333941;border-radius:3px;font:500 11px var(--mono);color:#5FD5AC}
.tb-portal:hover{background:#1D2127;border-color:#5FD5AC}

/* KPIs */
.kpis{display:flex;gap:0;border-top:1px solid #262B32;background:#1A1E24}
.kpi{padding:8px 16px;border-right:1px solid #262B32;min-width:150px}
.kpi dt{font:600 9px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#79828F}
.kpi dd{font:500 15px var(--mono);letter-spacing:-.02em;margin-top:1px}
.kpi.c dd{color:#5FD5AC} .kpi.a dd{color:#F0B45A}
.kpi small{font:400 10px var(--mono);color:#79828F;margin-left:5px}

/* ─────────── hoja ─────────── */
.sheet{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--sheet);
  margin:10px 10px 0;border:1px solid var(--rule2);border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden}
.toolbar{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--rule)}
.tb{padding:4px 9px;border:1px solid var(--rule2);border-radius:3px;font:500 12px var(--sans);color:var(--ink2);transition:all 0.15s ease}
.tb:hover:not(:disabled){background:#F2F5F8;color:var(--ink)}
.tb.primary{background:var(--sel);border-color:var(--sel);color:#fff;font-weight:600}
.tb.primary:hover:not(:disabled){background:#164683}
.tb.disabled, .tb:disabled {
  background: #EAF0F6 !important;
  border-color: #D6DEE7 !important;
  color: #9BA5B4 !important;
  cursor: not-allowed !important;
  opacity: 0.75;
}

.tb.db-btn{background:#F4EBEE;border-color:#D8A8B8;color:#8C3552;font-weight:600}
.tb.db-btn:hover{background:#EAD7DD}

.legend{margin-left:auto;display:flex;gap:14px;font:400 11px var(--sans);color:var(--ink3);align-items:center}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:-1px}

.scroll{flex:1;overflow:auto}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;z-index:5;background:#F4F6F9;text-align:left;
  font:600 10px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
  padding:7px 8px;border-bottom:1px solid var(--rule2);white-space:nowrap}
th.r,td.r{text-align:right}
tbody td{padding:0 8px;height:29px;border-bottom:1px solid var(--rule);vertical-align:middle;white-space:nowrap}
tbody tr.sel td{background:var(--seltint)}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:#F5F8FB}
tbody tr.sel.click:hover td{background:#DFE9F6}

.num{font:400 12px var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cod{font:500 12px var(--mono)}
.calc{color:var(--calc)}
.dim{color:var(--ink3)}

/* jerarquía */
.tw{display:flex;align-items:center;gap:5px}
.ico{width:15px;height:15px;flex:none;display:block}
.ico-obra{color:#1C5FA8}.ico-cap{color:#3F4854}.ico-part{color:#5C6470}
.ico-mo{color:#B0446B}.ico-mt{color:#8A6A2F}.ico-mq{color:#3F5FA0}.ico-pc{color:var(--calc)}

.niv{display:inline-block;font:600 9px var(--cond);letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;line-height:1.35}
.nv-obra{background:#E1ECF9;color:#12518F}
.nv-cap{background:#E0F0E6;color:#116340}
.nv-part{background:#EAF1F8;color:#2C4C74}
.nv-elem{background:#F4EBEE;color:#8C3552}
.nat{font:500 12px var(--mono);color:var(--ink2)}

.flag{display:inline-block;font:600 9px var(--cond);letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;line-height:1.35;margin-right:4px}
.fl-bor{background:#FBE9E7;color:#A33B26}
.fl-ppto{background:#E9F0F9;color:#2C5C96}
.caret-btn{width:14px;height:14px;flex:none;display:grid;place-items:center;color:var(--ink3);font-size:9px;
  transition:transform .12s ease}
.caret-btn.open{transform:rotate(90deg)}
.caret-sp{width:14px;flex:none}

tr.obra td{background:#E9F0F9;border-bottom:1px solid var(--rule2)}
tr.obra .cod,tr.obra .res{font-weight:600;color:#12518F}
tr.cap td{background:#EEF1F5;border-bottom:1px solid var(--rule2)}
tr.cap .cod,tr.cap .res{font-weight:600}
tr.cap.n2 td{background:#F4F6F9}
tr.cap .num{font-weight:500}
.res{overflow:hidden;text-overflow:ellipsis}
td.resc{width:100%;max-width:0}

tr.comp td{background:#FCFCFD;height:26px;color:var(--ink2)}
tr.comp .cod{font-size:11px}
tr.comp .res{font-size:12px}
.natdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}
.n-mo{background:#2F6FBF}.n-mt{background:#8A6A2F}.n-mq{background:#5D5A8A}.n-pc{background:var(--calc)}

tr.anul .cod,tr.anul .res{text-decoration:line-through;text-decoration-color:var(--ink3)}
tr.anul td{color:var(--ink3)}

.chip{font:600 9px var(--cond);letter-spacing:.07em;text-transform:uppercase;
  padding:1px 5px;border-radius:2px;margin-left:7px;vertical-align:1px}
.fl-alta{background:#DFF3EA;color:var(--cert)}
.fl-anul{background:#ECEFF2;color:var(--ink3)}
.fl-sub{background:#E9E7F5;color:#4A4680}
.fl-pa{background:#F5EDE0;color:var(--alert)}

/* ─────────── panel inferior ─────────── */
.panel{flex:none;height:280px;background:var(--sheet);margin:0 10px 10px;
  border:1px solid var(--rule2);border-radius:0 0 3px 3px;display:flex;flex-direction:column;overflow:hidden}
.grip{height:5px;background:var(--desk);border-bottom:1px solid var(--rule);cursor:ns-resize;flex:none;
  display:grid;place-items:center}
.grip::after{content:"";width:34px;height:2px;background:var(--rule2);border-radius:1px}
.ptop{flex:none;display:flex;align-items:center;gap:10px;padding:7px 12px 0;border-bottom:1px solid var(--rule)}
.ptitle{font:600 12px var(--mono);padding-bottom:8px}
.ptitle em{font:400 12px var(--sans);color:var(--ink2);font-style:normal;margin-left:8px}
.tabs{display:flex;gap:2px;margin-left:auto}
.tab{padding:6px 11px 7px;font:500 12px var(--sans);color:var(--ink2);border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--sel);border-bottom-color:var(--sel);font-weight:600}
.pbody{flex:1;overflow:auto}
.pbody table thead th{background:#F8FAFC}

.empty{height:100%;display:grid;place-items:center;color:var(--ink3);font-size:12px;text-align:center;padding:20px}

.note{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;background:#FDF7EC;
  border-bottom:1px solid #EEDFC4;font-size:12px;color:#6E4A0C}
.note b{font-weight:600}
.note .ic{font:600 10px var(--cond);letter-spacing:.06em;background:var(--alert);color:#fff;
  padding:1px 5px;border-radius:2px;flex:none;margin-top:1px}

.foot{flex:none;display:flex;gap:20px;align-items:center;padding:6px 12px;border-top:1px solid var(--rule);
  background:#F8FAFC;font:400 11px var(--sans);color:var(--ink2)}
.foot b{font:500 12px var(--mono);color:var(--ink)}
.foot .calc{color:var(--calc)}

/* ─────────── Modal Pop-up Crear Nueva Obra ─────────── */
.obra-modal-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(20, 23, 28, 0.75);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.obra-modal-overlay.open { display: flex; }

.obra-modal-card {
  width: 100%; max-width: 480px;
  background: var(--sheet);
  border: 1px solid var(--rule2);
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; overflow: hidden;
}

.obra-modal-header {
  background: var(--ink); color: #EDF0F3;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #333941;
}
.obra-modal-header h3 { font: 600 15px var(--sans); }
.obra-modal-close {
  background: transparent; border: none; color: #8B94A0;
  font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 3px;
}
.obra-modal-close:hover { color: #fff; background: #333941; }

#new-obra-form, #new-concepto-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.obra-form-group { display: flex; flex-direction: column; gap: 5px; }
.obra-form-group label { font: 600 12px var(--sans); color: var(--ink2); }
.obra-form-group label .req { color: #A33B26; font-weight: bold; }
.obra-form-group label .opt { font: 400 11px var(--sans); color: var(--ink3); }

.obra-form-group input, .obra-form-group select {
  padding: 8px 10px; border: 1px solid var(--rule2); border-radius: 3px;
  font: 400 13px var(--sans); color: var(--ink); outline: none; background: #fff;
}
.obra-form-group input:focus, .obra-form-group select:focus {
  border-color: var(--sel); box-shadow: 0 0 0 2px var(--seltint);
}

.obra-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;
  padding-top: 12px; border-top: 1px solid var(--rule);
}

/* ─────────── Modal Visor de Base de Datos PostgreSQL ─────────── */
.db-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 23, 28, 0.7);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.db-modal-overlay.open { display: flex; }

.db-modal-content {
  width: 100%; max-width: 1100px; height: 85vh;
  background: var(--sheet);
  border: 1px solid var(--rule2);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; overflow: hidden;
}

.db-modal-header {
  background: var(--ink); color: #EDF0F3;
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #333941;
}

.db-modal-title { display: flex; align-items: center; gap: 10px; }
.db-icon { font-size: 20px; }
.db-modal-title h3 { font: 600 14px var(--sans); }
.db-subtitle { font: 400 11px var(--mono); color: #8B94A0; }

.db-close-btn {
  background: transparent; border: none; color: #8B94A0;
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 3px;
}
.db-close-btn:hover { color: #fff; background: #333941; }

.db-modal-body {
  flex: 1; display: flex; overflow: hidden;
}

.db-tables-sidebar {
  width: 240px; background: #F4F6F9;
  border-right: 1px solid var(--rule2);
  display: flex; flex-direction: column; padding: 12px;
}

.db-tables-sidebar h4 {
  font: 600 10px var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink2); margin-bottom: 8px;
}

.db-tables-list {
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1;
}

.db-table-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 3px;
  font: 500 12px var(--mono); color: var(--ink2);
  text-align: left; transition: all 0.15s ease;
}
.db-table-item:hover { background: #E9F0F9; color: var(--sel); }
.db-table-item.active { background: var(--sel); color: #fff; font-weight: 600; }

.db-data-viewer {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff;
}

.db-viewer-toolbar {
  padding: 8px 14px; background: #F8FAFC;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px;
}

.db-active-table-name {
  font: 600 13px var(--mono); color: var(--sel);
}

.db-records-count {
  font: 400 11px var(--mono); color: var(--ink3); margin-left: auto;
}

.db-table-scroll {
  flex: 1; overflow: auto; background: #fff;
}

.db-inspect-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}

.db-inspect-table th {
  position: sticky; top: 0; background: #EEF1F5;
  font: 600 10px var(--cond); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); padding: 6px 10px; border: 1px solid var(--rule2);
  white-space: nowrap; z-index: 2;
}

.db-inspect-table td {
  padding: 5px 10px; border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;
}

.db-null { color: var(--ink3); font-style: italic; opacity: 0.6; }

@media (max-width:900px){
  .kpi{min-width:120px;padding:7px 12px}
  .hide-s{display:none}
  .panel{height:230px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}