:root {
  font-family: Helvetica, Arial, sans-serif;
  color: #172e40;
  background: #f3f6f8;
}

:focus-visible { outline: 2px solid #1b6a9e; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: #4383ac !important; box-shadow: 0 0 0 3px #d8eaf5; }

.sidebar { background: #0a2031; color: #f5f8fa; }
.nav-label { color: #8fb4cd; }
.nav-item { color: #c4d6e1; }
.nav-item:hover { background: #173c58; color: #fff; }
.nav-item.active { background: #e4f1f8; color: #0c3552; }
.sidebar-bottom { border-color: #2a4a61; }
.avatar { background: #1b6494; }
.logout { color: #b4cedd; }

.topbar { background: #fff; border-color: #e2eaf0; }
.crumb, .top-date { color: #6e8290; }
.crumb strong { color: #16364e; }
.content { padding-top: 38px; }
.eyebrow { color: #28658e; }
.page-head h1, .welcome h1 { color: #0f2c41; }
.page-head h1, .welcome h1, .empty h3, .template-card h3, .login-form h1, .modal-head h2 { font-weight: 600; letter-spacing: -.035em; }
.stat strong { font-weight: 500; }
.subtitle { color: #607687; }

.btn { border-color: #cbdce6; color: #17425e; }
.btn:hover { background: #eef6fb; border-color: #9ec4dd; }
.btn.primary { background: #155b8d; border-color: #155b8d; color: #fff; }
.btn.primary:hover { background: #0c496f; border-color: #0c496f; }
.panel { border-color: #dfe8ee; box-shadow: 0 9px 28px #13334c0a; }
.panel-header { border-color: #e8eef2; }
.panel-header h2, .data-table td strong { color: #15354c; }
.panel-header span { color: #718796; }

.welcome {
  background: linear-gradient(110deg, #e2eff7, #f4f9fc);
  border: 1px solid #d3e5f0;
  border-radius: 20px;
  padding: 38px;
}
.welcome::after { content: none; }
.welcome h1 { max-width: 520px; font-size: clamp(30px, 3vw, 39px); }
.welcome p:last-child { color: #536f82; max-width: 540px; }
.welcome .actions { flex: none; align-items: center; }
.welcome .actions .btn:not(.primary) { background: #fff; }

.stat { color: #18384f; }
.stat span { color: #627e90; }
.stat small { color: #7894a5; }
.stat-link { text-align: left; width: 100%; transition: border-color .15s, transform .15s; }
.stat-link:hover { border-color: #8dbad5; transform: translateY(-2px); }
.stat-link small { color: #17618f; font-weight: 700; }

.quick-link { border-color: #e0ebf1; color: #204964; }
.quick-link:hover { background: #eef6fa; }
.search { border-color: #d5e3ec; }
.search-wrap::before { color: #6f93a8; }
.toolbar-right { color: #6b8291; }
.data-table th { background: #f8fbfd; border-color: #e7eef2; color: #698091; }
.data-table td { border-color: #edf1f4; color: #526b7b; }
.data-table tbody tr:hover { background: #f9fcfe; }
.data-table td .subline { color: #8398a6; }
.split-page .data-table { min-width: 0; table-layout: fixed; }
.split-page .data-table th, .split-page .data-table td { padding-left: 12px; padding-right: 12px; overflow-wrap: anywhere; }
.split-page .data-table th { font-size: 9px; letter-spacing: .07em; }
.split-page .data-table th:nth-child(1) { width: 35%; }
.split-page .data-table th:nth-child(2) { width: 16%; }
.split-page .data-table th:nth-child(3) { width: 17%; }
.split-page .data-table th:nth-child(4) { width: 15%; }
.split-page .data-table th:nth-child(5) { width: 17%; }
.split-page .row-actions { flex-wrap: wrap; }
.badge { background: #e4f2fb; color: #19638e; }
.badge.muted { background: #eef2f4; color: #667d8b; }
.empty-symbol, .template-card .template-symbol { background: #e9f3f9; color: #2672a0; }
.empty h3 { color: #25465d; }
.category-row { border-color: #e8eff3; }
.category-row small { color: #7891a1; }

.field label, .field > span { color: #395e78; }
.field input, .field select, .field textarea, .field .fake-input,
.template-row input, .template-row select { border-color: #d3e1e9; color: #19394e; }
.field input[type=checkbox] { accent-color: #155b8d; }
.hint { color: #6c8797; }
.section-caption, .modal-head p { color: #2c6c94; }
.doc-summary strong, .doc-summary .grand { color: #153d59; }
.doc-summary .grand { border-color: #cbdde9; }
.modal-head, .modal-footer, .item-row { border-color: #e5edf2; }
.close { background: #eaf3f8; color: #225676; }
dialog { color: #17384e; box-shadow: 0 24px 90px #09284047; }
dialog::backdrop { background: #0a203180; }
#toast { background: #0d3551; }

/* El formulario largo tiene un solo espacio de desplazamiento y partidas flexibles. */
#modal.wide[open] { display: flex; flex-direction: column; height: min(92dvh, 960px); overflow: hidden; }
#modal.wide .modal-head { flex: none; }
#modal.wide .modal-content { flex: 1; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; }
#document-form, #document-form .field-row > .field { min-width: 0; }
#document-form input, #document-form select, #document-form textarea { min-width: 0; max-width: 100%; }
#document-form .items-header { gap: 10px; flex-wrap: wrap; }
#document-form .item-row {
  display: block;
  min-width: 0;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #dce8ef;
  border-radius: 12px;
  background: #fbfdfe;
}
#document-form .item-service-line { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 10px; align-items: end; }
#document-form .item-service-line .service-picker { min-width: 0; margin: 0; }
#document-form .item-service-line .remove-row {
  grid-column: auto;
  grid-row: auto;
  width: 34px;
  height: 36px;
  border-radius: 8px;
  background: #f9ecea;
  color: #a14f47;
}
#document-form .item-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, 85px) minmax(94px, 110px) minmax(90px, 110px);
  gap: 10px;
  align-items: end;
  min-width: 0;
  margin-top: 10px;
}
#document-form .item-values > * { min-width: 0; }
#document-form .item-total {
  grid-column: auto;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
  padding: 0 0 8px;
  text-align: right;
  white-space: normal;
}
#document-form .item-total span { color: #648092; font-size: 10px; font-weight: 700; }
#document-form .item-total strong { max-width: 100%; overflow-wrap: anywhere; color: #133d59; font-size: 12px; line-height: 1.2; }

.login-screen { background: #f7fafc; }
.login-art, .login-mobile-brand { background: #0a2031; }
.login-art::after { color: #143c59; }
.login-art footer { color: #9dc2d8; }
.login-form h1 { color: #0f2c41; }
.login-form p, .login-hint { color: #667f8e; }

@media (max-width: 1100px) {
  .welcome { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 800px) {
  .content { padding-top: 24px; }
  .sidebar { background: #0a2031; }
  #document-form .item-values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(85px, auto); }
  #document-form .item-description { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  #document-form .item-row { padding: 12px; }
  #document-form .item-values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #document-form .item-total { grid-column: 1 / -1; align-items: flex-start; text-align: left; padding: 2px 0 0; }
}
@media (max-width: 590px) {
  .split-page .data-table { min-width: 650px; table-layout: auto; }
  .sidebar { padding: 9px 12px 12px; }
  .sidebar .brand { padding-bottom: 7px; }
  .sidebar nav { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
  .nav-item { flex: none; width: auto; min-height: 40px; padding: 9px 12px; flex-direction: row; font-size: 11px; white-space: nowrap; }
  .nav-icon { display: none; }
  .welcome { padding: 25px; }
  .welcome .actions { width: 100%; }
  .welcome .actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-link { transition: none; }
}
.sidebar-bottom a.logout{display:block;text-decoration:none;width:max-content}
.sidebar-bottom a.logout:hover,.sidebar-bottom button.logout:hover{color:#fff}