:root { 
  --bg-body: #F6F8FB; 
  --accent-blue: #209EB0; 
  --accent-orange: #E96C28; 
  --border-color: #E6EAF0; 
  --text-main: #1A202C; 
}

/* Base */
html, body { height: 100%; }
body { 
  background-color: var(--bg-body); 
  color: var(--text-main); 
  font-family: 'Inter', sans-serif; 
  height: 100vh; 
  overflow: hidden; /* layout fijo, sin scroll en body */
}

/* Sidebar */
.sidebar-item { 
  transition: all 0.2s; 
  border-radius: 10px; 
  color: #718096; 
  text-align: left; 
  cursor: pointer; 
}
.sidebar-item.active { 
  background-color: var(--accent-blue); 
  color: white !important; 
}

/* Cards / UI */
.card { 
  background: #FFFFFF; 
  border: 1px solid var(--border-color); 
  border-radius: 14px; 
  box-shadow: 0 2px 6px rgba(15,23,42,0.04); 
}
.btn-primary { 
  background-color: var(--accent-blue); 
  color: white; 
  font-weight: 800; 
  border-radius: 12px; 
}
.status-badge { 
  font-size: 10px; 
  font-weight: 800; 
  padding: 3px 10px; 
  border-radius: 999px; 
  text-transform: uppercase; 
}

/* ✅ FIX SCROLL: la vista activa scrollea dentro del viewport.
   Ajusta 120px si tu header/topbar es más alto o más bajo. */
.view-section { 
  display: none; 
  height: calc(100vh - 120px);
  overflow-y: auto; 
  padding: 2rem; 
  min-height: 0;
}
.view-section.active { 
  display: block; 
  animation: fadeIn 0.3s ease; 
}
@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(5px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* Segmented */
.segmented { 
  border: 1px solid var(--border-color); 
  background: #fff; 
  border-radius: 12px; 
  padding: 4px; 
  display: inline-flex; 
  gap: 4px; 
}
.segmented button { 
  font-size: 11px; 
  font-weight: 800; 
  padding: 6px 12px; 
  border-radius: 8px; 
  color: #64748B; 
}
.segmented button.active { 
  background: rgba(32,158,176,0.1); 
  color: var(--accent-blue); 
}

/* Placeholders */
.img-placeholder { 
  background: #f1f5f9; 
  border: 2px dashed #cbd5e1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 16px; 
  min-height: 250px; 
  width: 100%; 
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { 
  background: #F8FAFC; 
  color: #64748B; 
  font-size: 10px; 
  text-transform: uppercase; 
  padding: 12px 16px; 
  text-align: left; 
  border-bottom: 2px solid var(--border-color); 
}
td { 
  padding: 12px 16px; 
  border-bottom: 1px solid var(--border-color); 
  font-size: 13px; 
}

/* Chips */
.chip { 
  padding: 4px 12px; 
  border-radius: 999px; 
  border: 1px solid var(--border-color); 
  font-size: 11px; 
  font-weight: 700; 
  cursor: pointer; 
}
.chip.active { 
  background: var(--accent-blue); 
  color: white; 
  border-color: var(--accent-blue); 
}

/* “Excel gigante” (Analista) */
.grid-table-wrap { 
  overflow: auto; 
  max-height: calc(100vh - 290px); 
}
.sticky-th th { 
  position: sticky; 
  top: 0; 
  z-index: 5; 
}
.cell-input {
  width: 100%;
  background: transparent;
  outline: none;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.cell-input:focus { 
  background: #F8FAFC; 
  border-color: #E2E8F0; 
}
.small-btn {
  font-size: 11px; 
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: white;
}
.small-btn.primary { 
  background: var(--accent-blue); 
  color: white; 
  border-color: var(--accent-blue); 
}
.small-btn:disabled { 
  opacity: .6; 
  cursor: not-allowed; 
}

.text-accent { 
  color: var(--accent-blue) !important; 
}

/* ===== CIP (Ficha Técnica) ===== */
.cip-item { font-weight: 300; }
.cip-code { font-weight: 800; }
.cip-desc { font-weight: 300; }

#reunion-tech-card .cip-item,
#reunion-tech-card .cip-desc { font-weight: 300 !important; }

#reunion-tech-card .cip-code { font-weight: 800 !important; }


.estado-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.estado-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 10px 34px 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: white;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}

.estado-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(32,158,176,.18);
  border-color: rgba(32,158,176,.65);
}

.estado-caret{
  position: absolute;
  right: 12px;
  pointer-events: none;
  font-size: 12px;
  opacity: .6;
}