:root {
  --navy-950: #071C4D;
  --navy-900: #0B3C91;
  --navy-800: #164FA6;
  --teal-700: #D62839;
  --teal-600: #D62839;
  --teal-100: #FDEBED;
  --orange-600: #D62839;
  --orange-100: #FDEBED;
  --red-700: #b9383e;
  --red-100: #fdebed;
  --amber-700: #9b6412;
  --amber-100: #fff3d7;
  --green-700: #207352;
  --green-100: #e4f4ec;
  --ink-900: #17262f;
  --ink-700: #455761;
  --ink-500: #71818a;
  --line: #e2e8eb;
  --canvas: #F4F7FB;
  --surface: #ffffff;
  --shadow-sm: 0 1px 2px rgba(7, 28, 42, 0.05), 0 8px 24px rgba(7, 28, 42, 0.04);
  --shadow-lg: 0 28px 75px rgba(7, 28, 42, 0.22);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--ink-900);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(7, 148, 139, 0.23);
  outline-offset: 2px;
}
.is-hidden { display: none !important; }

.login-shell { display: grid; grid-template-columns: minmax(430px, 0.85fr) minmax(480px, 1.15fr); min-height: 100vh; }
.login-card { align-self: center; margin: 0 auto; max-width: 480px; padding: 48px 54px; width: 100%; }
.login-brand, .brand { align-items: center; display: flex; gap: 13px; }
.brand-mark {
  align-items: center; background: var(--orange-600); border-radius: 11px 11px 11px 3px; box-shadow: 0 10px 22px rgba(230, 117, 47, 0.26); color: #fff; display: flex; font-size: 23px; font-weight: 850; height: 46px; justify-content: center; width: 46px;
}
.login-brand strong, .login-brand small, .brand strong, .brand small { display: block; }
.login-brand strong, .brand strong { letter-spacing: 0.16em; }
.login-brand small { color: var(--ink-500); font-size: 11px; margin-top: 5px; }
.login-copy { margin: 58px 0 30px; }
.eyebrow { color: #D62839; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; margin: 0 0 8px; text-transform: uppercase; }
.login-copy h1 { font-size: 34px; letter-spacing: -0.045em; line-height: 1.08; margin: 0; }
.login-copy > p:last-child { color: var(--ink-500); font-size: 13px; line-height: 1.6; margin: 14px 0 0; }
.login-form { display: grid; gap: 18px; }
.login-form label, .field { color: var(--ink-700); display: grid; font-size: 11px; font-weight: 650; gap: 7px; }
.login-form input, .field input, .field select, .field textarea {
  background: #fff; border: 1px solid #d8e0e4; border-radius: 9px; color: var(--ink-900); height: 44px; padding: 0 13px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.login-form input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(7, 148, 139, 0.72); box-shadow: 0 0 0 3px rgba(7, 148, 139, 0.08); outline: none; }
.field textarea { min-height: 86px; padding: 11px 13px; resize: vertical; }
.form-error { color: var(--red-700); font-size: 11px; margin: 0; min-height: 16px; }
.form-note { background: #f2f6f7; border-radius: 8px; color: var(--ink-500); font-size: 10px; line-height: 1.5; margin: 0; padding: 10px 12px; }
.login-foot { color: #91a0a8; font-size: 9px; margin: 23px 0 0; text-align: center; }
.login-side {
  background: radial-gradient(circle at 78% 21%, rgba(11, 156, 146, 0.34), transparent 25%), radial-gradient(circle at 20% 82%, rgba(230, 117, 47, 0.14), transparent 24%), linear-gradient(145deg, #071C4D 0%, #0B3C91 54%, #164FA6 100%); color: #fff; display: flex; min-height: 100vh; overflow: hidden; padding: 80px; position: relative;
}
.login-side::before, .login-side::after { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; content: ""; height: 540px; position: absolute; right: -180px; top: -110px; width: 540px; }
.login-side::after { height: 380px; left: -170px; right: auto; top: auto; bottom: -150px; width: 380px; }
.login-side__content { align-self: center; margin: auto; max-width: 620px; position: relative; width: 100%; z-index: 1; }
.login-side__content > span { color: #D62839; font-size: 11px; font-weight: 800; letter-spacing: 0.15em; }
.login-side h2 { font-size: clamp(45px, 5.6vw, 74px); letter-spacing: -0.055em; line-height: 0.98; margin: 24px 0 50px; }
.login-side ul { border-top: 1px solid rgba(255, 255, 255, 0.13); list-style: none; margin: 0; padding: 0; }
.login-side li { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.11); color: #bed0d9; display: flex; font-size: 12px; gap: 18px; padding: 17px 0; }
.login-side li b { color: var(--orange-600); font-size: 10px; letter-spacing: 0.08em; }

.primary-button, .secondary-button, .text-button {
  align-items: center; border-radius: 9px; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; height: 40px; justify-content: center; padding: 0 15px; text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.primary-button { background: var(--teal-700); border: 1px solid var(--teal-700); box-shadow: 0 8px 20px rgba(8, 123, 120, 0.17); color: #fff; }
.primary-button:hover { background: #B71F2E; box-shadow: 0 10px 24px rgba(214, 40, 57, 0.25); transform: translateY(-1px); }
.primary-button--wide { width: 100%; }
.secondary-button { background: #fff; border: 1px solid #d9e1e4; color: var(--ink-700); }
.secondary-button:hover { background: #f9fbfb; transform: translateY(-1px); }
.text-button { background: transparent; border: 0; color: #D62839; height: auto; padding: 5px 0; }
.button-link { white-space: nowrap; }

.app-shell { min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, #071C4D, #0B3C91 68%, #164FA6); color: #fff; display: flex; flex-direction: column; height: 100vh; left: 0; padding: 27px 18px 20px; position: fixed; top: 0; width: 252px; z-index: 40;
}
.brand { padding: 0 8px 28px; }
.brand strong { font-size: 15px; }
.brand small { color: #93a8b4; font-size: 10px; margin-top: 5px; }
.sidebar-close { background: transparent; border: 0; color: #b8cad3; cursor: pointer; display: none; font-size: 28px; margin-left: auto; }
.nav-label { color: #6f8997; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; margin: 0 12px 9px; text-transform: uppercase; }
.nav-item {
  align-items: center; background: transparent; border: 0; border-radius: 9px; color: #b7c8d0; cursor: pointer; display: flex; font-size: 12px; gap: 12px; margin: 2px 0; min-height: 43px; padding: 0 12px; position: relative; text-align: left; transition: background 140ms ease, color 140ms ease, transform 140ms ease; width: 100%;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; transform: translateX(2px); }
.nav-item.is-active { background: rgba(7, 148, 139, 0.22); color: #fff; }
.nav-item.is-active::before { background: #D62839; border-radius: 0 4px 4px 0; content: ""; height: 23px; left: -18px; position: absolute; width: 3px; }
.nav-item > span { color: #91a8b4; font-size: 17px; width: 18px; }
.nav-item b { align-items: center; background: var(--orange-600); border-radius: 18px; color: #fff; display: flex; font-size: 9px; height: 19px; justify-content: center; margin-left: auto; min-width: 19px; padding: 0 5px; }
#mainNav { flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px; }
.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: auto; padding: 18px 8px 0; }
.health { align-items: center; display: flex; gap: 10px; }
.health > span { background: #D62839; border: 4px solid rgba(67, 203, 150, 0.13); border-radius: 50%; box-sizing: content-box; height: 7px; width: 7px; }
.health strong, .health small { display: block; }
.health strong { font-size: 10px; }
.health small, .sidebar-foot p { color: #7f98a5; font-size: 9px; }
.health small { margin-top: 3px; }
.sidebar-foot p { margin: 16px 0 0; }

.main-content { margin-left: 252px; min-height: 100vh; }
.topbar {
  align-items: center; backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.93); border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: minmax(190px, 1fr) minmax(280px, 420px) auto auto; height: 78px; padding: 0 32px; position: sticky; top: 0; z-index: 25;
}
.menu-button { background: transparent; border: 0; cursor: pointer; display: none; font-size: 21px; }
.page-title small { color: var(--ink-500); display: block; font-size: 9px; font-weight: 750; letter-spacing: 0.11em; margin-bottom: 4px; }
.page-title h1 { font-size: 20px; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.global-search { align-items: center; background: #f5f8f9; border: 1px solid #e5eaed; border-radius: 10px; color: var(--ink-500); display: flex; gap: 9px; height: 42px; padding: 0 13px; }
.global-search:focus-within { background: #fff; border-color: rgba(7, 148, 139, 0.55); box-shadow: 0 0 0 3px rgba(7, 148, 139, 0.08); }
.global-search input { background: transparent; border: 0; color: var(--ink-900); font-size: 11px; min-width: 0; outline: 0; width: 100%; }
.global-search input:disabled { opacity: 0.48; }
.notification-button { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; display: flex; font-size: 18px; height: 40px; justify-content: center; position: relative; width: 40px; }
.notification-button span { align-items: center; background: var(--orange-600); border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: 8px; font-weight: 800; height: 18px; justify-content: center; position: absolute; right: -6px; top: -6px; width: 18px; }
.user-button { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; gap: 9px; padding: 0; text-align: left; }
.user-button > span { align-items: center; background: var(--navy-900); border-radius: 9px; color: #fff; display: flex; font-size: 10px; font-weight: 800; height: 39px; justify-content: center; width: 39px; }
.user-button strong, .user-button small { display: block; white-space: nowrap; }
.user-button strong { font-size: 10px; }
.user-button small { color: var(--ink-500); font-size: 8px; margin-top: 2px; }

.content { margin: 0 auto; max-width: 1500px; padding: 34px 32px 48px; }
.content-intro { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 23px; }
.content-intro h2 { font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -0.045em; line-height: 1.12; margin: 0; }
.content-intro > div:first-child > p:last-child { color: var(--ink-500); font-size: 11px; margin: 8px 0 0; }
.module-actions { align-items: center; display: flex; flex-shrink: 0; gap: 8px; }
.loading, .error-state { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-500); display: flex; justify-content: center; min-height: 300px; padding: 40px; text-align: center; }
.error-state { flex-direction: column; }
.error-state h3 { color: var(--ink-900); margin: 0; }

.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); min-height: 132px; overflow: hidden; padding: 19px 20px; position: relative; }
.metric-card::after { background: var(--teal-600); bottom: 0; content: ""; height: 3px; left: 20px; position: absolute; width: 32px; }
.metric-card--alert::after { background: var(--orange-600); }
.metric-card > div { align-items: center; color: var(--ink-500); display: flex; font-size: 10px; justify-content: space-between; }
.metric-card > div b { align-items: center; background: var(--teal-100); border-radius: 8px; color: #D62839; display: flex; font-size: 14px; height: 30px; justify-content: center; width: 30px; }
.metric-card--alert > div b { background: var(--orange-100); color: var(--orange-600); }
.metric-card > strong { display: block; font-size: clamp(24px, 2.25vw, 31px); letter-spacing: -0.055em; line-height: 1; margin-top: 14px; }
.metric-card > p { color: var(--ink-500); font-size: 9px; margin: 8px 0 0; }
.dashboard-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.panel--wide { grid-column: 1; }
.panel-header { align-items: center; display: flex; gap: 15px; justify-content: space-between; padding: 20px 21px 16px; }
.panel-header h3 { font-size: 14px; letter-spacing: -0.025em; margin: 0; }
.panel-header .eyebrow { margin-bottom: 6px; }
.budget-card { grid-column: 2; grid-row: 1; }
.budget-ring { align-items: center; background: conic-gradient(#D62839 0deg var(--used), #e9eff1 var(--used) 360deg); border-radius: 50%; display: flex; height: 122px; justify-content: center; margin: 7px auto 20px; position: relative; width: 122px; }
.budget-ring::before { background: #fff; border-radius: 50%; content: ""; height: 88px; position: absolute; width: 88px; }
.budget-ring > div { position: relative; text-align: center; }
.budget-ring strong, .budget-ring span { display: block; }
.budget-ring strong { font-size: 24px; letter-spacing: -0.05em; }
.budget-ring span { color: var(--ink-500); font-size: 8px; margin-top: 3px; }
.budget-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 18px 20px; }
.budget-card dl div { border-right: 1px solid var(--line); text-align: center; }
.budget-card dl div:last-child { border-right: 0; }
.budget-card dt { color: var(--ink-500); font-size: 8px; }
.budget-card dd { font-size: 9px; font-weight: 750; margin: 5px 0 0; }
.source-card { grid-column: 2; padding: 21px; }
.source-card h3 { font-size: 15px; margin: 0; }
.source-card > p:not(.eyebrow) { color: var(--ink-500); font-size: 10px; line-height: 1.55; margin: 9px 0 17px; }
.source-card > div { display: flex; flex-wrap: wrap; gap: 6px; }
.source-card > div span { background: #eff5f5; border-radius: 16px; color: #D62839; font-size: 8px; font-weight: 700; padding: 6px 9px; }
.priority-list { list-style: none; margin: 0; padding: 0 21px 13px; }
.priority-list li { align-items: flex-start; border-top: 1px solid #edf1f2; display: flex; gap: 11px; padding: 13px 0; }
.priority-list li > span { align-items: center; background: var(--navy-900); border-radius: 7px; color: #fff; display: flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 25px; justify-content: center; width: 25px; }
.priority-list strong { font-size: 10px; }
.priority-list p { color: var(--ink-500); font-size: 9px; margin: 4px 0 0; }

.module-panel { min-height: 430px; overflow: hidden; }
.module-strip { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-strip > div { border-right: 1px solid var(--line); padding: 15px 20px; }
.module-strip > div:last-child { border-right: 0; }
.module-strip span, .module-strip strong { display: block; }
.module-strip span { color: var(--ink-500); font-size: 8px; text-transform: uppercase; }
.module-strip strong { font-size: 14px; margin-top: 4px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { background: #f8fafb; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: 8px; font-weight: 750; letter-spacing: 0.065em; padding: 11px 14px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { border-bottom: 1px solid #edf1f2; color: var(--ink-700); font-size: 10px; max-width: 260px; padding: 12px 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfc; }
td strong, td small { display: block; }
td strong { color: var(--ink-900); font-size: 10px; }
td small { color: var(--ink-500); font-size: 8px; margin-top: 4px; }
td code { background: #edf2f4; border-radius: 5px; color: var(--navy-800); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; padding: 4px 6px; white-space: nowrap; }
.cell-main { display: -webkit-box; line-height: 1.4; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.status { align-items: center; border-radius: 20px; display: inline-flex; font-size: 8px; font-weight: 750; gap: 5px; padding: 5px 8px; white-space: nowrap; }
.status i { background: currentColor; border-radius: 50%; height: 5px; width: 5px; }
.status--success { background: var(--green-100); color: var(--green-700); }
.status--warning { background: var(--amber-100); color: var(--amber-700); }
.status--danger { background: var(--red-100); color: var(--red-700); }
.status--neutral { background: #edf1f3; color: var(--ink-700); }
.row-action { text-align: right; width: 42px; }
.row-action button { background: transparent; border: 0; border-radius: 6px; color: var(--ink-500); cursor: pointer; font-weight: 800; padding: 7px; }
.row-action button:hover { background: #edf2f3; color: var(--ink-900); }
.empty-state { align-items: center; color: var(--ink-500); display: flex; flex-direction: column; justify-content: center; min-height: 340px; padding: 40px; text-align: center; }
.empty-state > span { align-items: center; background: var(--teal-100); border-radius: 14px; color: #D62839; display: flex; font-size: 27px; height: 58px; justify-content: center; width: 58px; }
.empty-state h3 { color: var(--ink-900); font-size: 16px; margin: 18px 0 0; }
.empty-state p { font-size: 10px; margin: 7px 0 0; }

.modal { background: transparent; border: 0; max-height: 92vh; max-width: 900px; padding: 0; width: calc(100% - 30px); }
.modal::backdrop { background: rgba(3, 17, 25, 0.65); backdrop-filter: blur(3px); }
.modal form { background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); max-height: 92vh; overflow-y: auto; }
.modal header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 21px 23px 17px; }
.modal header h2 { font-size: 20px; letter-spacing: -0.04em; margin: 0; }
.modal header button { background: #f1f5f6; border: 0; border-radius: 8px; color: var(--ink-500); cursor: pointer; font-size: 23px; height: 34px; width: 34px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 23px 8px; }
.field--wide { grid-column: 1 / -1; }
.permission-editor { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.permission-editor > div:first-child { background: #f6f9fa; border-bottom: 1px solid var(--line); padding: 13px 15px; }
.permission-editor > div:first-child strong, .permission-editor > div:first-child span { display: block; }
.permission-editor > div:first-child strong { color: var(--ink-900); font-size: 11px; }
.permission-editor > div:first-child span { color: var(--ink-500); font-size: 9px; margin-top: 4px; }
.permission-table-wrap { overflow-x: auto; }
.permission-table { min-width: 580px; }
.permission-table th, .permission-table td { padding: 9px 12px; text-align: center; }
.permission-table thead th:first-child, .permission-table tbody th { text-align: left; }
.permission-table tbody th { background: #fff; color: var(--ink-700); font-size: 9px; letter-spacing: 0; text-transform: none; }
.permission-table tbody th small { color: var(--ink-500); display: block; font-size: 7px; margin-top: 2px; }
.permission-table input { accent-color: #D62839; cursor: pointer; height: 16px; width: 16px; }
.permission-table input:disabled { cursor: not-allowed; opacity: 0.55; }
.permission-na { color: #b5c0c5; }
.modal .form-error { margin: 5px 23px 0; }
.modal footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; margin-top: 19px; padding: 17px 23px; }

.toast { align-items: flex-start; animation: toast-in 220ms ease-out; background: var(--navy-950); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; bottom: 24px; box-shadow: var(--shadow-lg); color: #fff; display: flex; gap: 11px; max-width: calc(100vw - 30px); padding: 14px 16px; position: fixed; right: 24px; width: 340px; z-index: 90; }
.toast > span { align-items: center; background: var(--teal-600); border-radius: 50%; display: flex; flex: 0 0 auto; font-size: 10px; height: 23px; justify-content: center; width: 23px; }
.toast strong { display: block; font-size: 10px; }
.toast p { color: #a9bcc6; font-size: 9px; line-height: 1.4; margin: 4px 0 0; }
.overlay { background: rgba(3, 17, 25, 0.6); border: 0; inset: 0; position: fixed; z-index: 35; }
@keyframes toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .topbar { gap: 14px; grid-template-columns: minmax(160px, 1fr) minmax(200px, 330px) auto auto; padding: 0 23px; }
  .content { padding-left: 23px; padding-right: 23px; }
  .user-button > div { display: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 930px) {
  .sidebar { box-shadow: var(--shadow-lg); transform: translateX(-105%); transition: transform 220ms ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close, .menu-button { display: inline-flex; }
  .main-content { margin-left: 0; }
  .topbar { grid-template-columns: auto minmax(150px, 1fr) minmax(180px, 320px) auto auto; }
  .content-intro { align-items: flex-start; flex-direction: column; }
  .module-actions { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel--wide, .budget-card, .source-card { grid-column: 1; grid-row: auto; }
  .login-shell { grid-template-columns: 1fr; }
  .login-side { display: none; }
}
@media (max-width: 680px) {
  .topbar { gap: 9px; grid-template-columns: auto 1fr auto auto; height: 68px; padding: 0 14px; }
  .global-search { display: none; }
  .page-title small { display: none; }
  .page-title h1 { font-size: 17px; }
  .content { padding: 23px 14px 40px; }
  .content-intro h2 { font-size: 23px; }
  .module-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-actions > :only-child { grid-column: 1 / -1; }
  .module-actions .primary-button { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 118px; }
  .module-strip { grid-template-columns: 1fr 1fr; }
  .module-strip > div:nth-child(2) { border-right: 0; }
  .module-strip > div:last-child { border-top: 1px solid var(--line); grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: 1; }
  .modal footer .primary-button, .modal footer .secondary-button { flex: 1; }
  .login-card { padding: 32px 23px; }
  .login-copy { margin-top: 45px; }
  .login-copy h1 { font-size: 30px; }
  .toast { bottom: 14px; left: 14px; right: 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.login-brand .brand-mark{width:170px;height:auto;background:none;border-radius:0;box-shadow:none;object-fit:contain;}
.brand .brand-mark{width:105px;height:auto;background:none;border-radius:0;box-shadow:none;object-fit:contain;}


/* Tareas y notificaciones */
.task-modal {
  width: min(940px, calc(100vw - 34px));
}

.task-dialog {
  min-width: 0;
}

.task-toolbar {
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) auto;
}

.task-toolbar > div {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 16px 22px;
}

.task-toolbar span {
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.task-toolbar strong {
  font-size: 20px;
}

.task-toolbar > button {
  align-self: center;
  margin: 12px 18px;
}

.task-content {
  max-height: 58vh;
  min-height: 260px;
  overflow-y: auto;
  padding: 18px 22px;
}

.task-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 15px 17px;
}

.task-card__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.task-card h3 {
  font-size: 15px;
  margin: 0;
}

.task-card p {
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.task-chip {
  background: var(--surface-soft, #eef3f4);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  padding: 5px 8px;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-empty {
  color: var(--ink-500);
  padding: 65px 20px;
  text-align: center;
}

@media (max-width: 720px) {
  .task-toolbar {
    grid-template-columns: repeat(3, 1fr);
  }

  .task-toolbar > button {
    grid-column: 1 / -1;
  }
}

/* Corrección visual del centro de tareas */
#notificationModal {
  background: transparent;
  border: 0;
  padding: 0;
}

#notificationModal .task-dialog {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  color: var(--ink);
  overflow: hidden;
  width: 100%;
}

#notificationModal .task-dialog > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 20px 26px;
}

#notificationModal .task-dialog > footer {
  align-items: center;
  background: #ffffff;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 22px;
}

#notificationModal .task-toolbar,
#notificationModal .task-content {
  background: #ffffff;
}

#notificationModal::backdrop {
  background: rgba(9, 27, 38, .58);
  backdrop-filter: blur(2px);
}

/* Ajuste visual del botón CHL */
.nav-item[data-module="chl"] {
  font-size: 14px;
}

.nav-item[data-module="chl"] span:last-child {
  font-size: 14px;
  white-space: nowrap;
  line-height: 1.2;
}


/* CHL DIGITAL - INICIO PARA TABLET */

.chl-tablet-modal {
  background: transparent;
  border: 0;
  height: 100vh;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  width: 100vw;
}

.chl-tablet-modal::backdrop {
  background: rgba(7, 25, 36, .68);
}

.chl-start-card {
  background: #f6f9fa;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.chl-tablet-header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 24px 32px;
}

.chl-tablet-header h2 {
  font-size: 30px;
  margin: 4px 0;
}

.chl-tablet-header p {
  color: var(--ink-500);
  margin: 0;
}

.chl-tablet-header > button {
  background: #eef3f4;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 28px;
  height: 52px;
  width: 52px;
}

.chl-start-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: auto;
  max-width: 1050px;
  padding: 45px 32px 25px;
  width: 100%;
}

.chl-touch-field {
  display: grid;
  gap: 9px;
}

.chl-touch-field span {
  font-size: 15px;
  font-weight: 800;
}

.chl-touch-field input,
.chl-touch-field select {
  background: #ffffff;
  border: 2px solid #d8e1e5;
  border-radius: 14px;
  box-sizing: border-box;
  font-size: 20px;
  min-height: 64px;
  padding: 12px 16px;
  width: 100%;
}

.chl-touch-field input:focus,
.chl-touch-field select:focus {
  border-color: #078982;
  outline: none;
}

.chl-unit-info {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 auto 20px;
  max-width: 986px;
  padding: 14px 18px;
  width: calc(100% - 64px);
}

.chl-start-footer {
  background: #ffffff;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 32px;
}

.chl-big-button {
  font-size: 17px;
  min-height: 54px;
  min-width: 210px;
}

@media (max-width: 760px) {
  .chl-start-grid {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }

  .chl-tablet-header {
    padding: 18px 20px;
  }

  .chl-tablet-header h2 {
    font-size: 24px;
  }

  .chl-start-footer {
    padding: 16px 20px;
  }

  .chl-start-footer button {
    flex: 1;
  }
}


/* =========================================================
   CHL DIGITAL - CHECKLIST TABLET
   ========================================================= */

.chl-digital-shell {
  background: #f3f7f8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.chl-digital-topbar {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 18px 28px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.chl-digital-topbar h2 {
  font-size: 26px;
  margin: 2px 0 3px;
}

.chl-digital-topbar p {
  margin: 0;
}

.chl-save-zone {
  align-items: center;
  display: flex;
  gap: 14px;
}

.chl-save-status {
  background: #e8f7f3;
  border-radius: 999px;
  color: #08766e;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
}

.chl-save-status.is-saving {
  background: #fff3d7;
  color: #a86a00;
}

.chl-save-status.is-error {
  background: #ffe8e8;
  color: #b31d1d;
}

#closeChlDigital {
  background: #eef3f4;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 27px;
  height: 50px;
  width: 50px;
}

.chl-progress-wrap {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 15px 28px 18px;
  position: sticky;
  top: 87px;
  z-index: 25;
}

.chl-progress-info {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.chl-progress-track {
  background: #dfe8ea;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.chl-progress-bar {
  background: #078982;
  height: 100%;
  transition: width .25s ease;
  width: 0%;
}

.chl-checklist {
  display: grid;
  gap: 24px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 28px;
  width: 100%;
}

.chl-section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(16, 44, 58, .05);
  overflow: hidden;
}

.chl-section-header {
  align-items: center;
  background: #102f3a;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.chl-section-header h3 {
  font-size: 16px;
  letter-spacing: .04em;
  margin: 0;
}

.chl-section-header span {
  font-size: 12px;
  opacity: .8;
}

.chl-item {
  border-bottom: 1px solid #e7edef;
  display: grid;
  gap: 14px;
  padding: 16px 20px;
}

.chl-item:last-child {
  border-bottom: 0;
}

.chl-item-main {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, 1fr) auto;
}

.chl-item-title {
  font-size: 16px;
  font-weight: 800;
}

.chl-result-buttons {
  display: flex;
  gap: 8px;
}

.chl-result-button {
  background: #ffffff;
  border: 2px solid #d7e0e3;
  border-radius: 11px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  min-height: 48px;
  min-width: 92px;
  padding: 9px 13px;
}

.chl-result-button[data-result="BIEN"].is-selected {
  background: #e5f7ed;
  border-color: #1a9a58;
  color: #137441;
}

.chl-result-button[data-result="FALLA"].is-selected {
  background: #ffe8e8;
  border-color: #d84242;
  color: #ad2424;
}

.chl-result-button[data-result="NO APLICA"].is-selected {
  background: #eef2f4;
  border-color: #7c8b92;
  color: #4f6068;
}

.chl-item-extra {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chl-item-extra input,
.chl-item-extra textarea {
  border: 1px solid #cfdadd;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 15px;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.chl-item-extra textarea {
  grid-column: 1 / -1;
  resize: vertical;
}

.chl-general-section {
  background: #ffffff;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: 2fr 1fr;
  padding: 26px 30px;
}

.chl-general-section textarea,
.chl-general-section input {
  background: #ffffff;
  border: 2px solid #d8e1e5;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
}

.chl-digital-footer {
  align-items: center;
  background: #ffffff;
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 18px 28px;
  position: sticky;
  z-index: 30;
}

.chl-digital-footer small {
  color: var(--ink-500);
  display: block;
  margin-top: 3px;
}

.chl-footer-actions {
  display: flex;
  gap: 10px;
}

.chl-tablet-action {
  font-size: 15px;
  min-height: 52px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 820px) {
  .chl-item-main {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .chl-result-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .chl-result-button {
    min-width: 0;
    width: 100%;
  }

  .chl-general-section {
    grid-template-columns: 1fr;
  }

  .chl-digital-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .chl-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .chl-checklist {
    padding: 18px;
  }
}

@media (max-width: 560px) {
  .chl-result-buttons {
    grid-template-columns: 1fr;
  }

  .chl-footer-actions {
    grid-template-columns: 1fr;
  }

  .chl-item-extra {
    grid-template-columns: 1fr;
  }

  .chl-digital-topbar {
    padding: 15px 17px;
  }

  .chl-progress-wrap {
    padding-left: 17px;
    padding-right: 17px;
  }
}


/* CHL DIGITAL FOTOS */
.chl-photo-area {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dce5e8;
  border-radius: 12px;
  background: #f8fbfb;
}

.chl-photo-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chl-photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #0f8b83;
  color: white;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.chl-photo-button:hover {
  filter: brightness(.95);
}

.chl-photo-count {
  font-size: .86rem;
  color: #61737b;
}

.chl-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.chl-photo-thumb {
  position: relative;
  min-height: 105px;
  overflow: hidden;
  border-radius: 10px;
  background: #e8eeee;
}

.chl-photo-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.chl-photo-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 28, 32, .84);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.chl-photo-empty {
  padding: 14px;
  border: 1px dashed #ccd8dc;
  border-radius: 9px;
  color: #74868d;
  text-align: center;
  grid-column: 1 / -1;
}

@media (max-width: 800px) {
  .chl-photo-button {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }

  .chl-photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chl-photo-thumb img {
    height: 145px;
  }
}


/* ACCIONES EDITAR ELIMINAR */
.row-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.row-action-group .row-action-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

.row-action-delete {
  color: #b42318;
}

.row-action-delete:hover {
  background: #fee4e2;
  color: #912018;
}


/* ===== EXPEDIENTE DIGITAL UNIDADES ===== */

.unit-expediente-button {
  display: block;
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid #d4e1e4;
  border-radius: 8px;
  background: #eef7f7;
  color: #08736f;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.unit-files-modal {
  width: min(1400px, 96vw);
  height: min(920px, 94vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.unit-files-modal::backdrop {
  background: rgba(3, 17, 24, .72);
}

.unit-files-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f4f7f8;
}

.unit-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  background: white;
  border-bottom: 1px solid #dae4e6;
}

.unit-files-header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #087f79;
}

.unit-files-header h2 {
  margin: 4px 0;
  font-size: 28px;
}

.unit-files-header p {
  margin: 0;
  color: #64767d;
}

.unit-files-close {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  font-size: 28px;
  cursor: pointer;
}

.unit-files-body {
  flex: 1;
  overflow: auto;
  padding: 26px 28px 45px;
}

.unit-files-body section + section {
  margin-top: 35px;
}

.unit-document-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.unit-document-card,
.unit-photo-card {
  border: 1px solid #dce6e8;
  border-radius: 15px;
  background: white;
  overflow: hidden;
}

.unit-document-card {
  padding: 17px;
}

.unit-document-card h4,
.unit-photo-card h4 {
  margin: 0;
}

.unit-file-ok {
  margin-top: 7px;
  color: #087b58;
  font-size: 12px;
}

.unit-file-pending {
  margin-top: 7px;
  color: #8b6a27;
  font-size: 12px;
}

.unit-expiry-label {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
}

.unit-expiry-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  min-height: 40px;
  border: 1px solid #cedbde;
  border-radius: 8px;
  padding: 7px 8px;
}

.unit-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.unit-photo-preview {
  height: 220px;
  background: #e8edef;
}

.unit-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unit-photo-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #74868c;
}

.unit-photo-placeholder span {
  margin-top: 5px;
  font-size: 13px;
}

.unit-photo-info {
  padding: 15px;
}

.unit-photo-info p {
  font-size: 12px;
  color: #65777e;
}

.unit-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.unit-file-view,
.unit-file-upload,
.unit-file-delete {
  min-height: 38px;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.unit-file-view {
  border: 1px solid #d1dee1;
  background: white;
  color: #173a44;
  text-decoration: none;
}

.unit-file-upload {
  border: 1px solid #098a83;
  background: #098a83;
  color: white;
}

.unit-file-delete {
  border: 1px solid #ffd4d0;
  background: #fff1f0;
  color: #b42318;
}

@media (max-width: 1000px) {
  .unit-document-grid,
  .unit-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .unit-files-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .unit-document-grid,
  .unit-photo-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== COMPRAS / O.C. UI V2 ===== */

#purchaseModal.modal,
#purchaseDetailModal.modal {
  width: min(1180px, 96vw);
  max-width: 1180px;
}

.purchase-modal > form,
.purchase-detail-dialog {
  width: 100%;
}

.purchase-form-body,
.purchase-detail-content {
  max-height: 72vh;
  overflow-y: auto;
  padding: 22px;
}

.purchase-dashboard {
  display: grid;
  gap: 18px;
}

.purchase-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.purchase-kpis article {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 16px;
  padding: 18px;
  background: var(--panel, #fff);
  display: grid;
  gap: 5px;
}

.purchase-kpis span,
.purchase-kpis small {
  opacity: .68;
}

.purchase-kpis strong {
  font-size: 1.35rem;
}

.purchase-list-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 16px;
}

.purchase-list-heading span {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .6;
  text-transform: uppercase;
}

.purchase-list-heading h3 {
  margin: 3px 0 0;
}

.purchase-list-heading p {
  margin: 0;
  opacity: .65;
  font-size: .84rem;
}

.purchase-folio {
  white-space: nowrap;
}

.purchase-view-button {
  padding: 7px 12px;
}

.purchase-empty {
  padding: 30px;
  text-align: center;
  display: grid;
  gap: 6px;
}

.purchase-empty span {
  opacity: .65;
}

.purchase-form-section {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}

.purchase-section-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.purchase-section-title > div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.purchase-section-title > div:first-child > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border, #dde2e7);
  font-size: .76rem;
  font-weight: 900;
}

.purchase-section-title strong,
.purchase-section-title small {
  display: block;
}

.purchase-section-title small {
  opacity: .62;
  margin-top: 2px;
}

.purchase-folio-preview {
  text-align: right;
}

.purchase-folio-preview span,
.purchase-folio-preview strong {
  display: block;
}

.purchase-folio-preview span {
  font-size: .72rem;
  opacity: .6;
}

.purchase-header-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.purchase-span-2 {
  grid-column: span 2;
}

.purchase-credit-field {
  display: contents;
}

.purchase-credit-field.is-hidden {
  display: none;
}

#purchaseItems {
  display: grid;
  gap: 10px;
}

.purchase-item-row {
  display: grid;
  grid-template-columns:
    62px
    110px
    minmax(220px, 2fr)
    90px
    95px
    130px
    85px
    130px
    36px;
  gap: 9px;
  align-items: end;
  border: 1px solid var(--border, #dde2e7);
  padding: 12px;
  border-radius: 13px;
}

.purchase-item-row label {
  min-width: 0;
}

.purchase-item-row label > span,
.purchase-item-number span,
.purchase-item-total span {
  display: block;
  margin-bottom: 6px;
  font-size: .69rem;
  font-weight: 700;
  opacity: .65;
}

.purchase-item-row input,
.purchase-item-row select {
  width: 100%;
}

.purchase-item-number {
  padding-bottom: 9px;
}

.purchase-item-number strong {
  font-size: 1rem;
}

.purchase-item-total {
  padding-bottom: 9px;
}

.purchase-item-total strong {
  white-space: nowrap;
}

.purchase-remove-item {
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 9px;
  border: 1px solid var(--border, #dde2e7);
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
}

.purchase-final-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}

.purchase-notes-field {
  width: 100%;
}

.purchase-notes-field textarea {
  min-height: 130px;
}

.purchase-totals {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 14px;
  padding: 16px;
}

.purchase-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 7px 0;
}

.purchase-grand-total {
  border-top: 1px solid var(--border, #dde2e7);
  margin-top: 7px;
  padding-top: 13px !important;
}

.purchase-grand-total strong {
  font-size: 1.3rem;
}

.purchase-totals small {
  display: block;
  margin-top: 10px;
  opacity: .58;
  line-height: 1.35;
}

.purchase-form-error {
  padding: 0 22px;
}

.purchase-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #dde2e7);
}

.purchase-detail-head span {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .6;
}

.purchase-detail-head h2 {
  margin: 4px 0;
}

.purchase-detail-head p {
  margin: 0;
  opacity: .7;
}

.purchase-detail-total {
  text-align: right;
  display: grid;
  gap: 4px;
}

.purchase-detail-total strong {
  font-size: 1.45rem;
}

.purchase-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 0;
}

.purchase-detail-grid > div {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 12px;
  padding: 13px;
}

.purchase-detail-grid span,
.purchase-detail-grid strong {
  display: block;
}

.purchase-detail-grid span {
  font-size: .72rem;
  opacity: .62;
  margin-bottom: 5px;
}

.purchase-detail-section {
  border-top: 1px solid var(--border, #dde2e7);
  padding-top: 20px;
  margin-top: 6px;
}

.purchase-detail-totals {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.purchase-detail-totals > div {
  min-width: 130px;
  border: 1px solid var(--border, #dde2e7);
  padding: 10px 12px;
  border-radius: 10px;
}

.purchase-detail-totals span,
.purchase-detail-totals strong {
  display: block;
}

.purchase-detail-totals span {
  font-size: .7rem;
  opacity: .6;
}

.purchase-payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.purchase-payment-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--border, #dde2e7);
  border-radius: 11px;
  padding: 12px;
}

.purchase-payment-list strong,
.purchase-payment-list span,
.purchase-payment-list small {
  display: block;
}

.purchase-payment-list span,
.purchase-payment-list small {
  opacity: .65;
  margin-top: 3px;
}


@media (max-width: 1100px) {
  .purchase-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-item-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchase-description {
    grid-column: span 2;
  }

  .purchase-remove-item {
    align-self: end;
  }
}


@media (max-width: 700px) {
  #purchaseModal.modal,
  #purchaseDetailModal.modal {
    width: 98vw;
  }

  .purchase-form-body,
  .purchase-detail-content {
    padding: 13px;
  }

  .purchase-kpis,
  .purchase-header-grid,
  .purchase-detail-grid,
  .purchase-final-section {
    grid-template-columns: 1fr;
  }

  .purchase-span-2,
  .purchase-description {
    grid-column: auto;
  }

  .purchase-item-row {
    grid-template-columns: 1fr 1fr;
  }

  .purchase-item-number,
  .purchase-description,
  .purchase-item-total {
    grid-column: span 2;
  }

  .purchase-section-title,
  .purchase-list-heading,
  .purchase-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-detail-total {
    text-align: left;
  }
}

/* ===== WORKFLOW O.C. UI ===== */

.purchase-workflow-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--border, #dde2e7);
  border-radius: 14px;
}

.purchase-workflow-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.purchase-workflow-heading > div:first-child span,
.purchase-workflow-heading > div:first-child strong {
  display: block;
}

.purchase-workflow-heading > div:first-child span {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .6;
  margin-bottom: 4px;
}

.purchase-workflow-heading > div:first-child strong {
  font-size: 1.05rem;
}

.purchase-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.purchase-workflow-message {
  padding: 9px 12px;
  border: 1px solid var(--border, #dde2e7);
  border-radius: 9px;
  font-size: .85rem;
}

.purchase-cancel-button {
  border-color: #b94040;
}

.purchase-cancelled-message {
  font-weight: 700;
}

@media (max-width: 700px) {
  .purchase-workflow-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .purchase-workflow-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ===== PAGOS O.C. UI V2 ===== */

.purchase-payment-modal {
  width: min(680px, 95vw);
}

.purchase-payment-body {
  padding: 22px;
}

.purchase-payment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.purchase-payment-summary > div {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 12px;
  padding: 14px;
}

.purchase-payment-summary span,
.purchase-payment-summary strong {
  display: block;
}

.purchase-payment-summary span {
  font-size: .72rem;
  opacity: .62;
  margin-bottom: 5px;
}

.purchase-payment-summary strong {
  font-size: 1.15rem;
}

@media (max-width: 600px) {
  .purchase-payment-summary {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGOS O.C. UI V2 ===== */

.purchase-payment-modal {
  width: min(680px, 95vw);
}

.purchase-payment-body {
  padding: 22px;
}

.purchase-payment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.purchase-payment-summary > div {
  border: 1px solid var(--border, #dde2e7);
  border-radius: 12px;
  padding: 14px;
}

.purchase-payment-summary span,
.purchase-payment-summary strong {
  display: block;
}

.purchase-payment-summary span {
  font-size: .72rem;
  opacity: .62;
  margin-bottom: 5px;
}

.purchase-payment-summary strong {
  font-size: 1.15rem;
}

@media (max-width: 600px) {
  .purchase-payment-summary {
    grid-template-columns: 1fr;
  }
}

/* ===== ADJUNTOS O.C. UI V2 ===== */

.purchase-file-list {
  display: grid;
  gap: 10px;
}

.purchase-file-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border, #dde2e7);
  border-radius: 12px;
}

.purchase-file-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border, #dde2e7);
  border-radius: 10px;
  font-size: 1.2rem;
}

.purchase-file-info {
  min-width: 0;
}

.purchase-file-info strong,
.purchase-file-info span,
.purchase-file-info small {
  display: block;
}

.purchase-file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-file-info span,
.purchase-file-info small {
  margin-top: 3px;
  opacity: .62;
  font-size: .78rem;
}

.purchase-file-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

@media (max-width: 650px) {

  .purchase-file-card {
    grid-template-columns: 40px 1fr;
  }

  .purchase-file-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ===== DETALLE O.C. DANFER V2 ===== */

#purchaseDetailModal {
  width: min(1100px, 96vw);
  max-width: 1100px;
  max-height: 92vh;
  padding: 0;
  border: 1px solid #cbd4d1;
  border-radius: 18px;
  background: #edf1f0;
  color: #172125;
  overflow: hidden;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.32);
}

#purchaseDetailModal::backdrop {
  background: rgba(17, 27, 30, 0.60);
  backdrop-filter: blur(3px);
}

/* ENCABEZADO */

#purchaseDetailModal header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 18px 22px;
  background: #263238;
  color: #ffffff;
  border-bottom: 1px solid #3a484d;
}

#purchaseDetailModal header h2,
#purchaseDetailModal header strong {
  color: #ffffff;
}

#purchaseDetailModal header .eyebrow {
  color: #b8c5c2;
}

/* CUERPO */

#purchaseDetailModal .purchase-detail-body {
  background: #edf1f0;
  padding: 20px 22px 26px;
  max-height: calc(92vh - 145px);
  overflow-y: auto;
}

/* TARJETAS */

#purchaseDetailModal .purchase-detail-section {
  background: #f8faf9;
  border: 1px solid #d5ddda;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow:
    0 3px 10px rgba(20, 35, 38, 0.05);
}

#purchaseDetailModal .purchase-detail-section h3 {
  margin: 3px 0 14px;
  color: #172125;
  font-size: 1rem;
}

#purchaseDetailModal .purchase-detail-section > span,
#purchaseDetailModal .purchase-list-heading span {
  color: #72807c;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* DATOS GENERALES */

#purchaseDetailModal .purchase-info-card,
#purchaseDetailModal .purchase-detail-grid > div {
  background: #f3f6f5;
  border-color: #d3dcda;
}

/* FLUJO */

#purchaseDetailModal .purchase-workflow {
  background: #e9efed;
  border: 1px solid #ccd8d4;
  border-radius: 12px;
  padding: 14px;
}

/* TABLA */

#purchaseDetailModal table {
  width: 100%;
  background: #f8faf9;
  border-collapse: collapse;
}

#purchaseDetailModal thead th {
  padding: 10px 8px;
  background: #dfe7e4;
  color: #475652;
  border-bottom: 1px solid #cbd5d2;
  font-size: .67rem;
  font-weight: 800;
}

#purchaseDetailModal tbody td {
  padding: 11px 8px;
  color: #25302d;
  border-bottom: 1px solid #e1e7e5;
  font-size: .82rem;
}

#purchaseDetailModal tbody tr:hover {
  background: #f0f4f2;
}

/* TOTALES */

#purchaseDetailModal .purchase-total-box,
#purchaseDetailModal .purchase-totals > div {
  background: #e9efed;
  border-color: #ccd7d3;
}

/* ARCHIVOS */

#purchaseDetailModal .purchase-file-card {
  background: #f3f6f5;
  border-color: #d4dcda;
}

/* PIE */

#purchaseDetailModal footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 12px 22px;
  background: #263238;
  border-top: 1px solid #3a484d;
}

/* BOTONES */

#purchaseDetailModal .primary-button,
#purchaseDetailModal .secondary-button {
  min-height: 36px;
  border-radius: 8px;
  font-weight: 700;
}

#purchaseDetailModal footer .secondary-button {
  background: #f3f6f5;
  color: #263238;
  border-color: #d2dad7;
}

/* SCROLL */

#purchaseDetailModal .purchase-detail-body::-webkit-scrollbar {
  width: 9px;
}

#purchaseDetailModal .purchase-detail-body::-webkit-scrollbar-thumb {
  background: #aab7b3;
  border-radius: 20px;
  border: 2px solid #edf1f0;
}

/* MOVIL */

@media (max-width: 760px) {

  #purchaseDetailModal {
    width: 98vw;
    max-height: 96vh;
    border-radius: 12px;
  }

  #purchaseDetailModal .purchase-detail-body {
    padding: 12px;
    max-height: calc(96vh - 130px);
  }

  #purchaseDetailModal .purchase-detail-section {
    padding: 13px;
  }
}

/* ===== ACABADO FINAL DETALLE O.C. ===== */

#purchaseDetailModal .purchase-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

#purchaseDetailModal .purchase-list-heading h3 {
  margin: 3px 0 0;
  font-size: 1.02rem;
  font-weight: 750;
}

#purchaseDetailModal .purchase-detail-section {
  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

#purchaseDetailModal .purchase-detail-section:hover {
  border-color: #c5d0cc;
  box-shadow:
    0 4px 14px rgba(24, 40, 42, .065);
}

#purchaseDetailModal .purchase-totals {
  margin-top: 14px;
}

#purchaseDetailModal .purchase-totals strong {
  font-size: .92rem;
}

#purchaseDetailModal .purchase-empty {
  padding: 28px 16px;
  text-align: center;
  color: #66736f;
}

#purchaseDetailModal .purchase-empty strong {
  display: block;
  margin-bottom: 5px;
  color: #27332f;
}

/* ===== INVENTARIO DANFER V2 ===== */

.inventory-dashboard {
  display: grid;
  gap: 18px;
}

.inventory-kpi-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.inventory-kpi {
  padding: 17px;
  border: 1px solid #d5ddda;
  border-radius: 14px;
  background: #f8faf9;
  box-shadow:
    0 3px 10px rgba(20, 35, 38, .05);
}

.inventory-kpi span,
.inventory-kpi strong,
.inventory-kpi small {
  display: block;
}

.inventory-kpi span {
  color: #71807b;
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.inventory-kpi strong {
  margin-top: 6px;
  color: #172125;
  font-size: 1.45rem;
}

.inventory-kpi small {
  margin-top: 4px;
  color: #7a8783;
  font-size: .72rem;
}

.inventory-kpi--warning {
  border-left: 4px solid #b78324;
}

.inventory-kpi--danger {
  border-left: 4px solid #9c3b3b;
}


.inventory-filters {
  display: grid;
  grid-template-columns:
    minmax(260px, 2fr)
    minmax(150px, .7fr)
    minmax(170px, .8fr)
    auto
    auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d5ddda;
  border-radius: 14px;
  background: #edf1f0;
}

.inventory-filters label {
  display: grid;
  gap: 5px;
}

.inventory-filters label > span {
  color: #65736f;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}


.inventory-table-card {
  overflow: hidden;
  border: 1px solid #d5ddda;
  border-radius: 14px;
  background: #f8faf9;
}

.inventory-table-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #dce3e0;
  background: #edf1f0;
}

.inventory-table-heading span {
  color: #74817d;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.inventory-table-heading h3 {
  margin: 3px 0 0;
  color: #172125;
}

.inventory-table-heading > strong {
  color: #61706b;
  font-size: .78rem;
}


.inventory-code {
  font-family: ui-monospace, monospace;
}

.inventory-subtext {
  display: block;
  margin-top: 4px;
  color: #7a8783;
  font-size: .7rem;
}

.inventory-table .number-cell,
.inventory-table .money-cell,
.inventory-kardex-table .number-cell {
  text-align: right;
}

.inventory-table .number-cell small {
  display: block;
  color: #7a8783;
  font-size: .65rem;
}


.inventory-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.inventory-status--normal {
  color: #285e4b;
  background: #dcece5;
}

.inventory-status--bajo {
  color: #765416;
  background: #f3e7c9;
}

.inventory-status--agotado {
  color: #852f2f;
  background: #f2dada;
}


.inventory-detail-modal {
  width: min(1180px, 96vw);
  max-width: 1180px;
  max-height: 93vh;
  padding: 0;
  border: 1px solid #cbd4d1;
  border-radius: 18px;
  background: #edf1f0;
  overflow: hidden;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .32);
}

.inventory-detail-modal::backdrop {
  background: rgba(17, 27, 30, .60);
  backdrop-filter: blur(3px);
}

.inventory-detail-dialog > header,
.inventory-detail-dialog > footer {
  background: #263238;
  color: #fff;
}

.inventory-detail-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}

.inventory-detail-dialog > header h2 {
  margin: 3px 0 0;
  color: #fff;
}

.inventory-detail-dialog > header .eyebrow {
  color: #b8c5c2;
}

.inventory-detail-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 22px;
}

.inventory-detail-content {
  display: grid;
  gap: 14px;
  max-height: calc(93vh - 145px);
  padding: 20px;
  overflow-y: auto;
}


.inventory-detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #d4dcda;
  border-radius: 14px;
  background: #f8faf9;
}

.inventory-detail-hero > div:first-child > span {
  color: #71807b;
  font-family: ui-monospace, monospace;
  font-size: .76rem;
  font-weight: 800;
}

.inventory-detail-hero h3 {
  margin: 5px 0;
  font-size: 1.3rem;
  color: #172125;
}

.inventory-detail-hero p {
  margin: 0;
  color: #687570;
}


.inventory-stock-main {
  min-width: 150px;
  text-align: right;
}

.inventory-stock-main > span,
.inventory-stock-main > strong,
.inventory-stock-main > small {
  display: block;
}

.inventory-stock-main > span {
  color: #71807b;
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-stock-main > strong {
  margin-top: 3px;
  font-size: 2rem;
  color: #172125;
}

.inventory-stock-main > small {
  margin-bottom: 7px;
  color: #71807b;
}


.inventory-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.inventory-detail-grid article {
  padding: 13px;
  border: 1px solid #d5ddda;
  border-radius: 12px;
  background: #f8faf9;
}

.inventory-detail-grid span,
.inventory-detail-grid strong {
  display: block;
}

.inventory-detail-grid span {
  color: #71807b;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-detail-grid strong {
  margin-top: 5px;
  color: #25302d;
}


.inventory-detail-section {
  padding: 17px;
  border: 1px solid #d5ddda;
  border-radius: 14px;
  background: #f8faf9;
}

.inventory-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.inventory-detail-heading span {
  color: #71807b;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.inventory-detail-heading h3 {
  margin: 3px 0 0;
  color: #172125;
}


.inventory-info-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inventory-info-grid > div {
  padding: 12px;
  border-radius: 10px;
  background: #edf1f0;
}

.inventory-info-grid span,
.inventory-info-grid strong {
  display: block;
}

.inventory-info-grid span {
  color: #73807c;
  font-size: .65rem;
}

.inventory-info-grid strong {
  margin-top: 4px;
}


.inventory-notes {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #edf1f0;
}

.inventory-notes span {
  color: #73807c;
  font-size: .66rem;
  font-weight: 800;
}

.inventory-notes p {
  margin: 5px 0 0;
}


.inventory-movement-type {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
}

.inventory-movement-type--entrada {
  color: #285e4b;
  background: #dcece5;
}

.inventory-movement-type--salida {
  color: #852f2f;
  background: #f2dada;
}

.inventory-movement-type--ajuste {
  color: #624d82;
  background: #e8e0ef;
}


@media (max-width: 1050px) {

  .inventory-kpi-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .inventory-detail-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .inventory-filters {
    grid-template-columns:
      1fr 1fr;
  }

  .inventory-search {
    grid-column: 1 / -1;
  }
}


@media (max-width: 650px) {

  .inventory-kpi-grid,
  .inventory-detail-grid,
  .inventory-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .inventory-filters {
    grid-template-columns: 1fr;
  }

  .inventory-detail-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-stock-main {
    text-align: left;
  }

  .inventory-detail-modal {
    width: 98vw;
    max-height: 96vh;
    border-radius: 12px;
  }
}

/* ===== O.C. A INVENTARIO UI ===== */

.oc-inventory-modal {
  width: min(1200px, 96vw);
  max-width: 1200px;
}

.oc-inventory-help {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #ccd8d4;
  border-radius: 12px;
  background: #e9efed;
}

.oc-inventory-help strong {
  color: #25322e;
}

.oc-inventory-help span {
  color: #66736f;
  font-size: .8rem;
}

.oc-inventory-table select {
  min-width: 260px;
}

.oc-inventory-qty {
  width: 120px;
  text-align: right;
}

.oc-inventory-table td {
  vertical-align: middle;
}

@media (max-width: 760px) {

  .oc-inventory-table select {
    min-width: 210px;
  }

  .oc-inventory-qty {
    width: 100px;
  }
}


/* ===== INVENTARIO BAJAS UI V2 ===== */


.danger-button {
  border: 1px solid #c44848;
  background: #fff;
  color: #a92f2f;
  border-radius: 9px;
  padding: 9px 13px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}


.danger-button:hover {
  background: #fff1f1;
}


.danger-button:disabled {
  opacity: .55;
  cursor: wait;
}


.inventory-deactivate-button {
  border-color: #bf8b43;
  color: #79551f;
}


.inventory-inactive-modal {
  width: min(1050px, 95vw);
  max-width: 1050px;
}


.inventory-inactive-dialog {
  display: grid;
  max-height: 86vh;
}


.inventory-inactive-dialog > header,
.inventory-inactive-dialog > footer {
  padding: 18px 22px;
}


.inventory-inactive-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #263238;
  color: #fff;
}


.inventory-inactive-dialog > header h2 {
  margin: 2px 0 0;
  color: #fff;
}


.inventory-inactive-content {
  padding: 20px 22px;
  overflow: auto;
  background: #f8faf9;
}


.inventory-admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


.inventory-inactive-dialog > footer {
  display: flex;
  justify-content: flex-end;
  background: #edf1f0;
}


@media (max-width: 760px) {

  .inventory-admin-row-actions {
    min-width: 160px;
  }

}




/* ===== BITACORA V2 UI ===== */

.unitlog-v2-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.unitlog-v2-stats article {
  padding: 20px;
  border: 1px solid #d5dfdc;
  border-radius: 16px;
  background: #f8faf9;
}

.unitlog-v2-stats span {
  display: block;
  color: #6d7b77;
  font-size: .82rem;
  margin-bottom: 8px;
}

.unitlog-v2-stats strong {
  font-size: 1.55rem;
  color: #1f2c31;
}

.unitlog-v2-panel {
  overflow: hidden;
}

.unitlog-v2-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid #dce4e2;
  background: #edf1f0;
}

.unitlog-v2-filters select,
.unitlog-v2-filters input {
  min-height: 40px;
  border: 1px solid #cbd6d2;
  border-radius: 9px;
  padding: 0 10px;
  background: #fff;
}

.unitlog-v2-filters label {
  display: grid;
  gap: 4px;
  font-size: .74rem;
  color: #687772;
}

.unitlog-v2-table {
  min-width: 1450px;
}

.unitlog-v2-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border-top: 1px solid #dce4e2;
  background: #f8faf9;
}

.unitlog-v2-pagination > div {
  display: flex;
  gap: 8px;
}

.unitlog-v2-detail-modal {
  width: min(1050px, 95vw);
  max-width: 1050px;
}

.unitlog-v2-dialog {
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.unitlog-v2-dialog > header {
  background: #263238;
  color: #fff;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unitlog-v2-dialog > header h2 {
  margin: 3px 0 0;
  color: #fff;
}

.unitlog-v2-detail-content {
  overflow: auto;
  padding: 22px;
  background: #edf1f0;
}

.unitlog-v2-hero,
.unitlog-v2-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.unitlog-v2-hero > div,
.unitlog-v2-grid article,
.unitlog-v2-section {
  padding: 16px;
  border: 1px solid #d3ddda;
  border-radius: 12px;
  background: #f8faf9;
}

.unitlog-v2-hero span,
.unitlog-v2-grid span {
  display: block;
  color: #6d7b77;
  font-size: .76rem;
  margin-bottom: 5px;
}

.unitlog-v2-section {
  margin-bottom: 16px;
}

.unitlog-v2-section h3,
.unitlog-v2-section p {
  margin-bottom: 0;
}

.unitlog-v2-dialog > footer {
  padding: 16px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  background: #263238;
}


@media (max-width: 850px) {

  .unitlog-v2-stats,
  .unitlog-v2-hero,
  .unitlog-v2-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .unitlog-v2-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}


@media (max-width: 520px) {

  .unitlog-v2-stats,
  .unitlog-v2-hero,
  .unitlog-v2-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== DANFER V3 GLOBAL THEME START ===== */

/* =========================================================
   TRANSPORTES DANFER · VISUAL SYSTEM V3
   ========================================================= */

:root {
  --danfer-bg: #e7eeeb;
  --danfer-bg-soft: #edf3f1;
  --danfer-surface: #f8faf9;
  --danfer-surface-2: #f1f5f3;
  --danfer-line: #d2ddda;

  --danfer-ink: #162b35;
  --danfer-muted: #667a80;

  --danfer-primary: #087f78;
  --danfer-primary-dark: #066861;
  --danfer-primary-soft: #dcefed;

  --danfer-shadow:
    0 12px 34px rgba(22, 43, 53, .075);

  --danfer-shadow-soft:
    0 5px 18px rgba(22, 43, 53, .055);

  --danfer-radius: 18px;
}


/* =========================================================
   FONDO GENERAL
   ========================================================= */

html,
body {
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(8,127,120,.045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #edf3f1 0%,
      var(--danfer-bg) 100%
    ) !important;

  color: var(--danfer-ink);
}


/* =========================================================
   HEADER / BARRA SUPERIOR
   ========================================================= */

header,
.topbar,
.app-header,
.main-header {
  background: rgba(248,250,249,.93) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-color: var(--danfer-line) !important;
}


/* =========================================================
   PANELES Y TARJETAS
   ========================================================= */

.panel,
.metric-card,
.card,
.module-card,
.dashboard-card {
  background:
    linear-gradient(
      145deg,
      #fbfcfc 0%,
      #f5f8f7 100%
    ) !important;

  border: 1px solid var(--danfer-line) !important;
  border-radius: var(--danfer-radius) !important;

  box-shadow: var(--danfer-shadow-soft);
}


.panel:hover,
.metric-card:hover,
.module-card:hover {
  border-color: #c1d2ce !important;
}


/* =========================================================
   TABLAS DANFER V3
   ========================================================= */

.table-wrap {
  border-radius: 16px !important;
  overflow: auto;

  border:
    1px solid
    var(--danfer-line);

  background:
    var(--danfer-surface);

  box-shadow:
    0 7px 24px
    rgba(22,43,53,.045);
}


table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  background:
    var(--danfer-surface) !important;
}


thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      #edf4f2 0%,
      #e8f0ee 100%
    ) !important;

  color:
    #50686d !important;

  font-size:
    .72rem !important;

  font-weight:
    750 !important;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;

  border-bottom:
    1px solid
    #ccd9d6 !important;

  padding-top:
    15px !important;

  padding-bottom:
    15px !important;
}


tbody td {
  background:
    rgba(255,255,255,.67);

  border-bottom:
    1px solid
    #e2e9e7 !important;

  padding-top:
    15px !important;

  padding-bottom:
    15px !important;

  transition:
    background .16s ease,
    transform .16s ease;
}


tbody tr:last-child td {
  border-bottom: 0 !important;
}


tbody tr:hover td {
  background:
    #eef6f4 !important;
}


tbody tr {
  transition:
    box-shadow .18s ease;
}


tbody tr:hover {
  box-shadow:
    inset 4px 0
    var(--danfer-primary);
}


/* primera y última esquina */

thead th:first-child {
  border-top-left-radius:
    14px;
}

thead th:last-child {
  border-top-right-radius:
    14px;
}


/* =========================================================
   CÓDIGOS, UNIDADES Y DATOS IMPORTANTES
   ========================================================= */

.code,
td strong,
.purchase-folio {
  color:
    var(--danfer-ink);
}


.code {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    26px;

  padding:
    4px 9px;

  border-radius:
    8px;

  background:
    #e6efed;

  border:
    1px solid
    #d1dfdc;

  font-weight:
    800;
}


/* =========================================================
   FORMULARIOS / FILTROS
   ========================================================= */

input,
select,
textarea {
  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid
    #cbd9d6 !important;

  border-radius:
    12px !important;

  color:
    var(--danfer-ink) !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--danfer-primary) !important;

  box-shadow:
    0 0 0 4px
    rgba(8,127,120,.10) !important;

  background:
    #ffffff !important;

  outline:
    none !important;
}


/* barras de filtros */

.filters,
.filter-bar,
.unitlog-v2-filters,
.inventory-v2-filters {
  background:
    linear-gradient(
      180deg,
      #eaf1ef,
      #e5edeb
    ) !important;

  border:
    1px solid
    #d3dfdc !important;

  border-radius:
    16px !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

button,
.button,
.primary-button,
.secondary-button {
  border-radius:
    11px !important;

  transition:
    transform .13s ease,
    box-shadow .13s ease,
    background .13s ease;
}


button:hover,
.button:hover,
.primary-button:hover,
.secondary-button:hover {
  transform:
    translateY(-1px);
}


.primary-button,
button.primary,
.button.primary {
  background:
    linear-gradient(
      135deg,
      var(--danfer-primary),
      #079188
    ) !important;

  border-color:
    transparent !important;

  box-shadow:
    0 7px 18px
    rgba(8,127,120,.20);
}


.primary-button:hover,
button.primary:hover {
  background:
    linear-gradient(
      135deg,
      #07726c,
      #06837b
    ) !important;
}


/* =========================================================
   MODALES
   ========================================================= */

dialog,
.modal,
.modal-card {
  border:
    1px solid
    #cfdad7 !important;

  border-radius:
    20px !important;

  background:
    #f8faf9 !important;

  box-shadow:
    0 28px 80px
    rgba(17,35,43,.24) !important;
}


dialog::backdrop {
  background:
    rgba(18,31,37,.50);

  backdrop-filter:
    blur(3px);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
  scrollbar-width:
    thin;

  scrollbar-color:
    #a8bab6 transparent;
}


::-webkit-scrollbar {
  width:
    10px;

  height:
    10px;
}


::-webkit-scrollbar-thumb {
  background:
    #afbfbc;

  border:
    3px solid transparent;

  background-clip:
    padding-box;

  border-radius:
    999px;
}


/* =========================================================
   ADMIN FRONTIER
   Inspirado en estética western, exclusivo para ADMIN.
   ========================================================= */

body.danfer-admin-frontier {
  --frontier-charcoal: #171817;
  --frontier-coal: #232321;
  --frontier-leather: #5c3524;
  --frontier-rust: #8c382b;
  --frontier-gold: #b9985e;
  --frontier-paper: #e8dfca;
  --frontier-paper-dark: #d8ccb0;
}


body.danfer-admin-frontier #moduleContent {
  position:
    relative;

  overflow:
    hidden;

  border-radius:
    22px;

  padding:
    24px;

  background:
    linear-gradient(
      135deg,
      rgba(33,33,30,.985),
      rgba(22,23,22,.985)
    ) !important;

  border:
    1px solid
    rgba(185,152,94,.45);

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.22);
}


body.danfer-admin-frontier #moduleContent::before {
  content:
    "✦  DANFER · FRONTIER ADMIN  ✦";

  display:
    block;

  margin:
    0 0 20px;

  padding:
    13px 18px;

  border-top:
    1px solid
    rgba(185,152,94,.55);

  border-bottom:
    1px solid
    rgba(185,152,94,.55);

  color:
    var(--frontier-gold);

  font-family:
    Georgia, "Times New Roman", serif;

  font-size:
    .78rem;

  font-weight:
    800;

  letter-spacing:
    .18em;

  text-align:
    center;

  text-transform:
    uppercase;
}


body.danfer-admin-frontier #moduleContent::after {
  content:
    "CONTROL · PERSONAL · SEGURIDAD";

  position:
    absolute;

  top:
    16px;

  right:
    22px;

  color:
    rgba(232,223,202,.12);

  font-family:
    Georgia, serif;

  font-size:
    1.15rem;

  font-weight:
    900;

  letter-spacing:
    .09em;

  pointer-events:
    none;
}


/* tarjetas admin */

body.danfer-admin-frontier #moduleContent .panel,
body.danfer-admin-frontier #moduleContent .card,
body.danfer-admin-frontier #moduleContent .metric-card {
  background:
    linear-gradient(
      145deg,
      #eee5d2,
      #ddd1b8
    ) !important;

  border:
    1px solid
    rgba(185,152,94,.72) !important;

  box-shadow:
    0 13px 30px
    rgba(0,0,0,.20);
}


/* tablas admin */

body.danfer-admin-frontier #moduleContent .table-wrap {
  border:
    1px solid
    rgba(185,152,94,.55) !important;

  background:
    #e4dac4 !important;
}


body.danfer-admin-frontier #moduleContent table {
  background:
    #e6dcc7 !important;
}


body.danfer-admin-frontier #moduleContent thead th {
  position:
    sticky;

  background:
    linear-gradient(
      180deg,
      #3b3028,
      #282622
    ) !important;

  color:
    #d6bb84 !important;

  border-bottom:
    1px solid
    #6a503a !important;

  font-family:
    Georgia, serif;
}


body.danfer-admin-frontier #moduleContent tbody td {
  background:
    rgba(232,223,202,.96) !important;

  color:
    #29251f !important;

  border-bottom:
    1px solid
    #d0c3a7 !important;
}


body.danfer-admin-frontier #moduleContent tbody tr:hover td {
  background:
    #f1e8d5 !important;
}


body.danfer-admin-frontier #moduleContent tbody tr:hover {
  box-shadow:
    inset 4px 0
    var(--frontier-rust);
}


/* botones especiales admin */

body.danfer-admin-frontier #moduleContent .primary-button,
body.danfer-admin-frontier #moduleContent button.primary {
  background:
    linear-gradient(
      135deg,
      #852f25,
      #a54434
    ) !important;

  color:
    #fff7e6 !important;

  border:
    1px solid
    #b9604c !important;

  box-shadow:
    0 7px 18px
    rgba(80,22,17,.35);
}


body.danfer-admin-frontier #moduleContent .secondary-button {
  background:
    #302923 !important;

  color:
    #dac28f !important;

  border:
    1px solid
    #6c5540 !important;
}


/* inputs administración */

body.danfer-admin-frontier #moduleContent input,
body.danfer-admin-frontier #moduleContent select,
body.danfer-admin-frontier #moduleContent textarea {
  background:
    #f0e7d5 !important;

  color:
    #2a251f !important;

  border:
    1px solid
    #b9a47e !important;
}


/* títulos administración */

body.danfer-admin-frontier #moduleContent h2,
body.danfer-admin-frontier #moduleContent h3 {
  color:
    #35291f;

  font-family:
    Georgia, "Times New Roman", serif;
}


/* etiqueta secreta de administrador */

body.danfer-admin-frontier #moduleContent .code {
  background:
    #332a23 !important;

  color:
    #dcc18a !important;

  border-color:
    #68523e !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .panel,
  .metric-card,
  .card {
    border-radius:
      14px !important;
  }

  thead th,
  tbody td {
    padding-left:
      12px !important;

    padding-right:
      12px !important;
  }

  body.danfer-admin-frontier #moduleContent {
    padding:
      16px;
  }

  body.danfer-admin-frontier #moduleContent::after {
    display:
      none;
  }
}

/* ===== DANFER V3 GLOBAL THEME END ===== */

/* ===== DANFER V3.1 CRIMSON START ===== */

:root {
  --danfer-red: #8b332f;
  --danfer-red-dark: #692420;
  --danfer-red-soft: #f1dedb;

  --danfer-teal: #087f78;
  --danfer-teal-dark: #056962;

  --danfer-cream: #f7f6f1;
  --danfer-graphite: #182a32;
}


/* =====================================================
   ACENTO GENERAL ROJO + PETRÓLEO
   ===================================================== */

body {
  border-top: 4px solid var(--danfer-red);
}


/* títulos */

#moduleContent h2,
#moduleContent h3,
.panel-header h3 {
  position: relative;
}

.panel-header h3 {
  padding-left: 12px;
}

.panel-header h3::before {
  content: "";
  position: absolute;

  left: 0;
  top: 15%;
  bottom: 15%;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      var(--danfer-red),
      var(--danfer-teal)
    );

  border-radius: 99px;
}


/* =====================================================
   TARJETAS
   ===================================================== */

.panel,
.metric-card,
.card {
  box-shadow:
    0 10px 30px rgba(26,42,50,.06),
    0 1px 0 rgba(139,51,47,.04);
}


/* pequeña línea de personalidad */

.metric-card {
  position: relative;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;

  left: 22px;
  right: 22px;
  bottom: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--danfer-teal),
      var(--danfer-red)
    );

  border-radius:
    4px 4px 0 0;

  opacity: .55;
}


/* =====================================================
   TABLAS V3.1
   ===================================================== */

.table-wrap {
  border:
    1px solid
    #ccd8d4 !important;

  box-shadow:
    0 10px 28px
    rgba(17,38,45,.055) !important;
}


table {
  font-variant-numeric:
    tabular-nums;
}


thead th {
  background:
    linear-gradient(
      180deg,
      #e8f0ee 0%,
      #e2ebe8 100%
    ) !important;

  border-bottom:
    2px solid
    rgba(139,51,47,.42) !important;

  color:
    #3e575d !important;
}


tbody tr:nth-child(even) td {
  background:
    rgba(245,248,247,.72);
}


tbody tr:hover td {
  background:
    #eef4f2 !important;
}


tbody tr:hover {
  box-shadow:
    inset 4px 0
    var(--danfer-red) !important;
}


/* fila activa/seleccionada */

tbody tr.selected td,
tbody tr.active td,
tbody tr[aria-selected="true"] td {
  background:
    var(--danfer-red-soft) !important;
}


/* =====================================================
   BOTONES
   ===================================================== */

.primary-button,
button.primary,
.button.primary {
  background:
    linear-gradient(
      135deg,
      var(--danfer-teal),
      #0a9389
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(8,127,120,.19),
    inset 0 -2px 0
    rgba(105,36,32,.18) !important;
}


.primary-button:hover,
button.primary:hover,
.button.primary:hover {
  background:
    linear-gradient(
      135deg,
      var(--danfer-teal-dark),
      var(--danfer-teal)
    ) !important;
}


/* botones secundarios con toque rojo */

.secondary-button {
  border-color:
    #cab9b5 !important;
}


.secondary-button:hover {
  color:
    var(--danfer-red-dark) !important;

  border-color:
    var(--danfer-red) !important;

  background:
    #fbf2f0 !important;
}


/* acciones destructivas */

.danger,
.danger-button,
button[data-action="delete"],
button[data-action="deactivate"] {
  background:
    linear-gradient(
      135deg,
      var(--danfer-red),
      #a13b35
    ) !important;

  color:
    white !important;

  border-color:
    transparent !important;
}


/* =====================================================
   INPUTS / FILTROS
   ===================================================== */

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--danfer-teal) !important;

  box-shadow:
    0 0 0 3px rgba(8,127,120,.10),
    0 0 0 5px rgba(139,51,47,.035) !important;
}


/* =====================================================
   BADGES MODERNOS
   ===================================================== */

.danfer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 27px;

  padding:
    4px 10px;

  border-radius:
    999px;

  font-size:
    .74rem;

  font-weight:
    800;

  letter-spacing:
    .025em;

  white-space:
    nowrap;

  border:
    1px solid transparent;
}


.danfer-pill::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius:
    50%;

  background:
    currentColor;
}


/* viaje / activo */

.danfer-pill--teal {
  color:
    #056b65;

  background:
    #def0ed;

  border-color:
    #c5e4df;
}


/* falla / vencida / cancelada */

.danfer-pill--red {
  color:
    #812c28;

  background:
    #f5dfdc;

  border-color:
    #ebc5c0;
}


/* mantenimiento / pendiente */

.danfer-pill--amber {
  color:
    #76571c;

  background:
    #f7edd2;

  border-color:
    #ead9a9;
}


/* inspección / supervisor */

.danfer-pill--blue {
  color:
    #355e70;

  background:
    #e1edf2;

  border-color:
    #c8dde6;
}


/* neutro */

.danfer-pill--gray {
  color:
    #54666b;

  background:
    #e9eeee;

  border-color:
    #d5dfdd;
}


/* autorizado/pagada */

.danfer-pill--green {
  color:
    #376540;

  background:
    #e1eee2;

  border-color:
    #c9dfca;
}


/* =====================================================
   ADMIN FRONTIER V3.1
   rojo más elegante
   ===================================================== */

body.danfer-admin-frontier {
  --frontier-rust:
    #963a30;

  --frontier-rust-dark:
    #68251f;

  --frontier-gold:
    #c3a166;
}


body.danfer-admin-frontier #moduleContent {
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(150,58,48,.13),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #22221f,
      #171816
    ) !important;

  border:
    1px solid
    rgba(195,161,102,.48) !important;

  box-shadow:
    0 24px 65px
    rgba(0,0,0,.24),
    inset 4px 0 0
    rgba(150,58,48,.62) !important;
}


/* quitar el texto enorme viejo */

body.danfer-admin-frontier #moduleContent::after {
  content:
    "ADMINISTRACIÓN DANFER";

  top:
    20px;

  right:
    30px;

  font-size:
    .76rem;

  color:
    rgba(195,161,102,.22);

  letter-spacing:
    .18em;
}


/* encabezado frontier */

body.danfer-admin-frontier #moduleContent::before {
  color:
    var(--frontier-gold);

  border-top-color:
    rgba(150,58,48,.72);

  border-bottom-color:
    rgba(195,161,102,.55);

  text-shadow:
    0 1px 0
    #000;
}


/* tabla frontier */

body.danfer-admin-frontier #moduleContent thead th {
  background:
    linear-gradient(
      180deg,
      #412d28,
      #292421
    ) !important;

  color:
    #e2c78f !important;

  border-bottom:
    2px solid
    var(--frontier-rust) !important;
}


body.danfer-admin-frontier #moduleContent tbody tr:hover td {
  background:
    #f3e8d3 !important;
}


body.danfer-admin-frontier #moduleContent tbody tr:hover {
  box-shadow:
    inset 5px 0
    var(--frontier-rust) !important;
}


/* botón principal admin */

body.danfer-admin-frontier #moduleContent .primary-button,
body.danfer-admin-frontier #moduleContent button.primary {
  background:
    linear-gradient(
      135deg,
      #762b25,
      #a34539
    ) !important;

  border:
    1px solid
    #b75b4e !important;

  box-shadow:
    0 8px 22px
    rgba(81,24,19,.34) !important;
}


/* =====================================================
   MENÚS DE ACCIONES
   ===================================================== */

.dropdown-menu,
.context-menu,
.actions-menu,
.popover {
  border-radius:
    13px !important;

  border:
    1px solid
    #d1dcda !important;

  box-shadow:
    0 16px 38px
    rgba(19,37,44,.15) !important;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

  .danfer-pill {
    padding:
      3px 7px;

    font-size:
      .69rem;
  }

}

/* ===== DANFER V3.1 CRIMSON END ===== */

/* ===== USUARIOS · FRONTIER RDR2 ===== */

/* Fondo SOLO para Administración/Usuarios */
body.danfer-admin-frontier #moduleContent {
  background:
    linear-gradient(
      rgba(15, 13, 12, .80),
      rgba(25, 18, 16, .86)
    ),
    url("/rdr2-admin.jpg") center center / cover fixed
    !important;

  border: 1px solid rgba(174, 61, 48, .75) !important;

  box-shadow:
    inset 5px 0 0 #8b332f,
    0 24px 65px rgba(0,0,0,.30)
    !important;
}


/* Encabezado western */
body.danfer-admin-frontier #moduleContent::before {
  content: "🔫  DANFER · FRONTIER ADMIN  🔫" !important;

  color: #d6b675 !important;

  border-top:
    1px solid #8b332f !important;

  border-bottom:
    1px solid #b99454 !important;

  text-shadow:
    0 2px 4px #000;

  font-size:
    .85rem !important;

  letter-spacing:
    .16em !important;
}


/* pequeño detalle inferior */
body.danfer-admin-frontier #moduleContent::after {
  content: "✦  ADMINISTRACIÓN DANFER  ✦" !important;

  color:
    rgba(221,190,127,.55) !important;

  font-family:
    Georgia, "Times New Roman", serif;

  font-size:
    .72rem !important;
}


/* Tabla tipo pergamino encima del fondo */
body.danfer-admin-frontier #moduleContent .table-wrap {
  background:
    rgba(226,213,188,.94) !important;

  backdrop-filter:
    blur(5px);

  border:
    1px solid rgba(185,145,81,.75) !important;
}


body.danfer-admin-frontier #moduleContent tbody td {
  background:
    rgba(235,223,199,.92) !important;
}


/* encabezado rojo/carbón */
body.danfer-admin-frontier #moduleContent thead th {
  background:
    linear-gradient(
      180deg,
      #492824,
      #241e1c
    ) !important;

  color:
    #e1c386 !important;

  border-bottom:
    2px solid #9a3b30 !important;
}


/* botones */
body.danfer-admin-frontier #moduleContent .primary-button {
  background:
    linear-gradient(
      135deg,
      #762820,
      #a84435
    ) !important;

  color:
    #fff3da !important;
}

/* ===== USUARIOS RDR2 START ===== */

/* RDR2 SOLO EN USUARIOS / ADMIN */
body.danfer-admin-frontier #moduleContent {
  background:
    linear-gradient(
      rgba(16, 12, 11, .68),
      rgba(24, 16, 14, .80)
    ),
    url("/rdr2-admin.webp") center 42% / cover no-repeat
    !important;

  border: 1px solid rgba(143, 47, 39, .90) !important;

  box-shadow:
    inset 5px 0 0 #8b332f,
    0 25px 65px rgba(0,0,0,.32)
    !important;
}

/* PISTOLITAS DEL ENCABEZADO */
body.danfer-admin-frontier #moduleContent::before {
  content: "🔫  DANFER · FRONTIER ADMIN  🔫" !important;

  color: #e5c682 !important;

  background: rgba(20,16,14,.38);

  padding: 14px 18px !important;

  border-top: 1px solid #91372f !important;
  border-bottom: 1px solid #c09a59 !important;

  text-shadow:
    0 2px 4px #000;

  font-family:
    Georgia, "Times New Roman", serif;

  font-size: .88rem !important;
  letter-spacing: .17em !important;
}

/* TEXTO DISCRETO */
body.danfer-admin-frontier #moduleContent::after {
  content: "ADMINISTRACIÓN DANFER" !important;

  color: rgba(231,199,132,.38) !important;
  font-size: .72rem !important;
}

/* TARJETA/ÁREA CENTRAL PARA QUE SE SIGA LEYENDO */
body.danfer-admin-frontier #moduleContent .panel,
body.danfer-admin-frontier #moduleContent .card,
body.danfer-admin-frontier #moduleContent .metric-card {
  background:
    rgba(233,220,193,.91) !important;

  backdrop-filter: blur(4px);

  border:
    1px solid rgba(191,154,88,.76) !important;
}

/* TABLA PERGAMINO */
body.danfer-admin-frontier #moduleContent .table-wrap {
  background:
    rgba(224,210,181,.91) !important;

  backdrop-filter: blur(5px);

  border:
    1px solid rgba(195,161,102,.82) !important;
}

body.danfer-admin-frontier #moduleContent tbody td {
  background:
    rgba(235,222,195,.89) !important;
}

body.danfer-admin-frontier #moduleContent tbody tr:nth-child(even) td {
  background:
    rgba(228,214,186,.91) !important;
}

body.danfer-admin-frontier #moduleContent tbody tr:hover td {
  background:
    rgba(246,232,203,.97) !important;
}

/* ENCABEZADO ROJO OSCURO */
body.danfer-admin-frontier #moduleContent thead th {
  background:
    linear-gradient(
      180deg,
      #542b26,
      #251d1b
    ) !important;

  color: #e6c787 !important;

  border-bottom:
    2px solid #a23f34 !important;
}

/* BOTÓN NUEVO USUARIO */
body.danfer-admin-frontier #moduleContent .primary-button,
body.danfer-admin-frontier #moduleContent button.primary {
  background:
    linear-gradient(
      135deg,
      #742820,
      #a54135
    ) !important;

  color: #fff1d4 !important;

  border:
    1px solid #bd5b4d !important;

  box-shadow:
    0 8px 22px rgba(80,20,16,.38) !important;
}

/* ===== USUARIOS RDR2 END ===== */

/* ===== CHL V2 DETAIL START ===== */

.chl-v2-clickable {
  cursor: pointer;
}

.chl-v2-clickable:hover td {
  background: #f6ecea !important;
}

.chl-v2-clickable:focus {
  outline:
    3px solid
    rgba(139,51,47,.20);

  outline-offset:
    -3px;
}


.chl-v2-modal {
  width:
    min(1180px, 96vw);

  max-width:
    1180px;

  max-height:
    94vh;

  padding:
    0 !important;

  overflow:
    hidden;

  border:
    1px solid #c9d6d2 !important;

  border-radius:
    22px !important;
}


.chl-v2-modal-shell {
  display:
    flex;

  flex-direction:
    column;

  max-height:
    94vh;

  background:
    #edf2f0;
}


.chl-v2-modal-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    22px 26px;

  background:
    linear-gradient(
      135deg,
      #19343a,
      #244a4b
    );

  border-bottom:
    4px solid
    #8b332f;

  color:
    white;
}


.chl-v2-modal-header h2 {
  margin:
    3px 0 0;

  color:
    white !important;
}


.chl-v2-modal-header .eyebrow {
  color:
    #bdcfcb;
}


.chl-v2-detail-content {
  overflow-y:
    auto;

  padding:
    24px;
}


.chl-v2-notice {
  margin-bottom:
    18px;

  padding:
    14px 16px;

  border-radius:
    13px;

  font-weight:
    650;
}


.chl-v2-notice--warning {
  background:
    #f7ead0;

  border:
    1px solid #e4cb96;

  color:
    #70521a;
}


.chl-v2-notice--success {
  background:
    #e1efea;

  border:
    1px solid #bddbd2;

  color:
    #226458;
}


.chl-v2-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    12px;

  margin-bottom:
    18px;
}


.chl-v2-summary article,
.chl-v2-meta-grid article {
  padding:
    15px;

  border:
    1px solid #d3dfdc;

  border-radius:
    14px;

  background:
    #f9fbfa;

  box-shadow:
    0 5px 16px
    rgba(20,42,47,.045);
}


.chl-v2-summary span,
.chl-v2-meta-grid span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #687c80;

  font-size:
    .72rem;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;
}


.chl-v2-summary strong,
.chl-v2-meta-grid strong {
  color:
    #1e353d;
}


.chl-v2-progress-card {
  margin-bottom:
    18px;

  padding:
    18px;

  border:
    1px solid #d2deda;

  border-left:
    5px solid #087f78;

  border-radius:
    15px;

  background:
    #f8faf9;
}


.chl-v2-progress-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.chl-v2-progress-head span {
  display:
    block;

  color:
    #718186;

  font-size:
    .78rem;
}


.chl-v2-progress-head strong {
  display:
    block;

  margin-top:
    3px;

  font-size:
    1.15rem;
}


.chl-v2-progress-head b {
  color:
    #087f78;

  font-size:
    1.35rem;
}


.chl-v2-progress {
  height:
    9px;

  margin:
    13px 0;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #dce5e2;
}


.chl-v2-progress span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #087f78,
      #8b332f
    );
}


.chl-v2-counts {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.chl-v2-counts span {
  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    .75rem;

  font-weight:
    750;
}


.chl-v2-pill {
  display:
    inline-flex !important;

  align-items:
    center;

  width:
    fit-content;

  margin:
    0 !important;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    .72rem !important;

  font-weight:
    800;

  letter-spacing:
    .025em;

  text-transform:
    uppercase;
}


.chl-v2-good {
  color:
    #1f695c;

  background:
    #dff0ea;

  border:
    1px solid #c1e1d7;
}


.chl-v2-bad {
  color:
    #862e29;

  background:
    #f5dfdc;

  border:
    1px solid #e9c4bf;
}


.chl-v2-warn {
  color:
    #73561d;

  background:
    #f6ead0;

  border:
    1px solid #e9d4a7;
}


.chl-v2-neutral {
  color:
    #5a6b70;

  background:
    #e9eeee;

  border:
    1px solid #d4dfdc;
}


.chl-v2-meta-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    12px;

  margin-bottom:
    18px;
}


.chl-v2-block {
  margin-top:
    18px;

  padding:
    20px;

  border:
    1px solid #d1ddda;

  border-radius:
    17px;

  background:
    #f9fbfa;
}


.chl-v2-block > header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    16px;
}


.chl-v2-block h3 {
  margin:
    2px 0 0;
}


.chl-v2-findings {
  padding:
    15px;

  border-radius:
    12px;

  background:
    #eef3f1;

  border-left:
    4px solid #8b332f;

  line-height:
    1.55;
}


.chl-v2-section {
  margin-top:
    14px;

  overflow:
    hidden;

  border:
    1px solid #d7e0de;

  border-radius:
    14px;
}


.chl-v2-section > header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px 15px;

  background:
    linear-gradient(
      180deg,
      #e8efed,
      #e3ebe8
    );

  border-bottom:
    2px solid
    rgba(139,51,47,.28);
}


.chl-v2-section > header h3 {
  margin:
    0;

  font-size:
    .95rem;
}


.chl-v2-section > header span {
  color:
    #6d7d81;

  font-size:
    .75rem;
}


.chl-v2-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  min-height:
    54px;

  padding:
    11px 14px;

  border-bottom:
    1px solid #e2e9e7;

  background:
    white;
}


.chl-v2-item:last-child {
  border-bottom:
    0;
}


.chl-v2-item:nth-child(even) {
  background:
    #f7f9f8;
}


.chl-v2-item-main {
  min-width:
    0;
}


.chl-v2-item-main strong {
  display:
    block;

  color:
    #233a42;
}


.chl-v2-item-main small {
  display:
    block;

  margin-top:
    4px;

  color:
    #78878a;
}


.chl-v2-item-main p {
  margin:
    5px 0 0;

  color:
    #5f6f73;

  line-height:
    1.4;
}


.chl-v2-photo-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    12px;
}


.chl-v2-photo {
  position:
    relative;

  min-height:
    150px;

  overflow:
    hidden;

  border:
    1px solid #d2dcda;

  border-radius:
    13px;

  background:
    #e5ecea;
}


.chl-v2-photo img {
  width:
    100%;

  height:
    175px;

  object-fit:
    cover;

  transition:
    transform .18s ease;
}


.chl-v2-photo:hover img {
  transform:
    scale(1.035);
}


.chl-v2-photo span {
  position:
    absolute;

  left:
    8px;

  right:
    8px;

  bottom:
    8px;

  padding:
    6px 8px;

  border-radius:
    8px;

  background:
    rgba(20,31,35,.78);

  color:
    white;

  font-size:
    .7rem;

  text-transform:
    capitalize;
}


.chl-v2-empty {
  padding:
    18px;

  border-radius:
    12px;

  background:
    #edf2f0;

  color:
    #6a797d;

  text-align:
    center;
}


@media (max-width: 900px) {

  .chl-v2-summary,
  .chl-v2-meta-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .chl-v2-photo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media (max-width: 560px) {

  .chl-v2-summary,
  .chl-v2-meta-grid,
  .chl-v2-photo-grid {
    grid-template-columns:
      1fr;
  }

  .chl-v2-detail-content {
    padding:
      14px;
  }

  .chl-v2-modal-header {
    padding:
      17px;
  }

  .chl-v2-item {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}

/* ===== CHL V2 DETAIL END ===== */

/* CHL - mejora visual de subtitulos */
.chl-section-header h3 {
  color: #ffffff !important;
  font-weight: 700;
}

.chl-general-photos .chl-section-header {
  background: #0f3f4a;
}

.chl-general-photos .chl-section-header h3 {
  color: #ffffff !important;
}

.chl-general-photos .chl-item-label {
  color: #102f3a;
  font-weight: 700;
  font-size: 14px;
}

/* CHL - subtitulos en negro */
.chl-section-header {
  background: #f3f6f7 !important;
  color: #000000 !important;
  border-bottom: 1px solid #d7e0e3;
}

.chl-section-header h3 {
  color: #000000 !important;
  font-weight: 800 !important;
}

.chl-section-header span {
  color: #000000 !important;
  opacity: 1 !important;
}

.chl-general-photos .chl-section-header {
  background: #f3f6f7 !important;
}

.chl-general-photos .chl-section-header h3 {
  color: #000000 !important;
}

.chl-item-label {
  color: #000000 !important;
  font-weight: 700 !important;
}


/* ===== DASHBOARD PROFESIONAL DANFER V2 ===== */

.weekly-dashboard-shell {
  display: block;
  margin-bottom: 20px;
  width: 100%;
}

body.danfer-admin-frontier #moduleContent .weekly-executive-panel {
  background: #f7f9fc !important;
  border: 1px solid #d8e2ec !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(22, 44, 68, .09) !important;
  grid-column: 1 / -1 !important;
  overflow: hidden;
  padding: 0 !important;
  width: 100%;
}

.weekly-executive-header {
  align-items: center;
  background: linear-gradient(120deg, #102b46, #174e78);
  display: flex;
  justify-content: space-between;
  padding: 22px 26px;
}

.weekly-executive-header p {
  color: #9cc8e9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0 0 6px;
}

.weekly-executive-header h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

.weekly-period {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  white-space: nowrap;
}

.weekly-kpi-grid {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 20px !important;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card {
  --weekly-accent: #286ea6;

  background: #ffffff !important;
  border: 1px solid #dfe7ef !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(29, 53, 76, .06) !important;
  min-height: 145px;
  padding: 18px 18px 16px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card:hover {
  box-shadow: 0 12px 28px rgba(29, 53, 76, .11) !important;
  transform: translateY(-2px);
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card::after {
  background: var(--weekly-accent) !important;
  bottom: 0 !important;
  height: 3px !important;
  left: 18px !important;
  opacity: 1 !important;
  right: auto !important;
  width: 38px !important;
}

.weekly-kpi-card--blue {
  --weekly-accent: #286ea6 !important;
}

.weekly-kpi-card--green {
  --weekly-accent: #268760 !important;
}

.weekly-kpi-card--amber {
  --weekly-accent: #b87a19 !important;
}

.weekly-kpi-card--alert {
  --weekly-accent: #c4543f !important;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card > div {
  color: #526579 !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .015em;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card > strong {
  color: #10233a !important;
  font-size: 29px !important;
  font-weight: 800;
  letter-spacing: -.045em;
  margin-top: 18px;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card > p {
  color: #738397 !important;
  font-size: 10px !important;
  line-height: 1.45;
  margin-top: 9px;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card .weekly-kpi-icon {
  align-items: center;
  background: #edf4fa !important;
  border-radius: 10px !important;
  color: var(--weekly-accent) !important;
  display: flex;
  height: 36px !important;
  justify-content: center;
  width: 36px !important;
}

.weekly-kpi-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.weekly-kpi-card--green .weekly-kpi-icon {
  background: #edf8f3 !important;
}

.weekly-kpi-card--amber .weekly-kpi-icon {
  background: #fff7e8 !important;
}

.weekly-kpi-card--alert .weekly-kpi-icon {
  background: #fff0ed !important;
}

@media (max-width: 1180px) {
  .weekly-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 850px) {
  .weekly-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .weekly-executive-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .weekly-kpi-grid {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }
}


/* ===== DASHBOARD EJECUTIVO V3 COLORES ORIGINALES ===== */

.weekly-dashboard-shell {
  background: transparent;
  border-radius: 20px;
  padding: 0;
}

body.danfer-admin-frontier #moduleContent .weekly-executive-panel {
  background: #f7f9fc !important;
  border-color: #d8e2ec !important;
  box-shadow:
    0 18px 44px rgba(22, 44, 68, .09) !important;
}

/* Encabezado ejecutivo */
.weekly-executive-header {
  background:
    linear-gradient(
      120deg,
      #102b46 0%,
      #174e78 100%
    ) !important;
}

/* Tarjetas blanco ostion */
body.danfer-admin-frontier #moduleContent .weekly-kpi-card {
  background: #ffffff !important;
  border-color: #dfe7ef !important;
  box-shadow:
    0 7px 20px rgba(45, 48, 52, .055) !important;
}

body.danfer-admin-frontier #moduleContent .weekly-kpi-card:hover {
  box-shadow:
    0 13px 30px rgba(45, 48, 52, .10) !important;
}

/* ==========================================================
   GRAFICA EJECUTIVA
   ========================================================== */

.weekly-cost-panel {
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 16px;
  margin: 0 20px 20px;
  overflow: hidden;
  padding: 22px 24px 20px;
}

.weekly-cost-header {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.weekly-cost-header p {
  color: #356b91;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  margin: 0 0 7px;
}

.weekly-cost-header h4 {
  color: #14283d;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.025em;
  margin: 0;
}

.weekly-cost-header span {
  color: #78818a;
  display: block;
  font-size: 11px;
  margin-top: 6px;
}

.weekly-cost-total {
  background: #edf4fa;
  border: 1px solid #d8e2ec;
  border-radius: 12px;
  min-width: 190px;
  padding: 11px 14px;
  text-align: right;
}

.weekly-cost-total small {
  color: #7d817f;
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.weekly-cost-total strong {
  color: #14283d;
  display: block;
  font-size: 19px;
  letter-spacing: -.035em;
  margin-top: 3px;
}

.weekly-cost-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}

.weekly-cost-legend span {
  align-items: center;
  color: #596776;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  gap: 7px;
}

.weekly-cost-dot {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.weekly-cost-dot--fuel {
  background: #286ea6;
}

.weekly-cost-dot--maintenance {
  background: #b87a19;
}

.weekly-cost-dot--purchase {
  background: #268760;
}

.weekly-cost-chart {
  align-items: flex-end;
  border-bottom: 1px solid #d8e2ec;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(8, minmax(38px, 1fr));
  height: 285px;
  margin-top: 18px;
  padding: 34px 10px 0;
  position: relative;
}

.weekly-cost-chart::before,
.weekly-cost-chart::after {
  border-top: 1px dashed #dfe7ef;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.weekly-cost-chart::before {
  top: 33%;
}

.weekly-cost-chart::after {
  top: 66%;
}

.weekly-cost-column {
  align-items: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.weekly-cost-value {
  color: #596776;
  font-size: 9px;
  font-weight: 750;
  height: 18px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-cost-bar-track {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: 210px;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 58px;
  overflow: hidden;
  width: 76%;
}

.weekly-cost-segment {
  display: block;
  min-height: 0;
  transition:
    filter .15s ease,
    opacity .15s ease;
  width: 100%;
}

.weekly-cost-column:hover .weekly-cost-segment {
  filter: brightness(.94);
}

.weekly-cost-segment--fuel {
  background: #286ea6;
  border-radius: 0 0 5px 5px;
}

.weekly-cost-segment--maintenance {
  background: #b87a19;
}

.weekly-cost-segment--purchase {
  background: #268760;
  border-radius: 5px 5px 0 0;
}

.weekly-cost-label {
  color: #667482;
  font-size: 9px;
  font-weight: 750;
  margin-top: 8px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .weekly-cost-header {
    flex-direction: column;
  }

  .weekly-cost-total {
    min-width: 0;
    text-align: left;
    width: 100%;
  }

  .weekly-cost-chart {
    gap: 8px;
    overflow-x: auto;
    grid-template-columns: repeat(8, minmax(64px, 1fr));
  }
}

@media (max-width: 560px) {
  .weekly-cost-panel {
    margin: 0 14px 14px;
    padding: 18px 15px;
  }
}


/* ===== DASHBOARD EJECUTIVO V4 ANALYTICS ===== */

.weekly-analytics-panel {
  background: #ffffff;
  border: 1px solid #d8e2ec;
  border-radius: 16px;
  margin: 0 20px 20px;
  overflow: hidden;
}

.weekly-analytics-header {
  align-items: center;
  background: #f7f9fc;
  border-bottom: 1px solid #dfe7ef;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 20px 22px;
}

.weekly-analytics-header p {
  color: #286ea6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  margin: 0 0 6px;
}

.weekly-analytics-header h4 {
  color: #10233a;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.025em;
  margin: 0;
}

.weekly-analytics-header span {
  color: #738397;
  display: block;
  font-size: 10px;
  margin-top: 5px;
}

.weekly-analytics-total {
  min-width: 180px;
  text-align: right;
}

.weekly-analytics-total small {
  color: #738397;
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.weekly-analytics-total strong {
  color: #10233a;
  display: block;
  font-size: 21px;
  letter-spacing: -.04em;
  margin-top: 3px;
}


/* TABS */

.weekly-analytics-tabs {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #dfe7ef;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 14px;
}

.weekly-analytics-tabs button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #65778a;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  padding: 9px 13px;
  transition:
    background .15s ease,
    color .15s ease;
  white-space: nowrap;
}

.weekly-analytics-tabs button:hover {
  background: #edf4fa;
  color: #174e78;
}

.weekly-analytics-tabs button.is-active {
  background: #174e78;
  color: #ffffff;
}


/* CALIDAD DE DATOS */

.weekly-analytics-quality {
  align-items: center;
  background: #f7f9fc;
  border-bottom: 1px solid #e6edf3;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 8px 18px;
}

.weekly-analytics-quality span {
  background: #ffffff;
  border: 1px solid #dfe7ef;
  border-radius: 999px;
  color: #647689;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 9px;
}

.weekly-analytics-quality span b {
  color: #174e78;
}

.weekly-analytics-quality .has-warning {
  background: #fff7e8;
  border-color: #f0d7aa;
  color: #946316;
}

.weekly-analytics-quality .has-warning b {
  color: #b87a19;
}


/* VISTAS */

.weekly-analytics-view {
  display: none;
  padding: 22px;
}

.weekly-analytics-view.is-active {
  display: block;
}

.weekly-analytics-view-head {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.weekly-analytics-view-head small {
  color: #286ea6;
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 5px;
}

.weekly-analytics-view-head h5 {
  color: #10233a;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -.02em;
  margin: 0;
}

.weekly-analytics-view-head > strong {
  color: #10233a;
  font-size: 18px;
}


/* REUTILIZA GRAFICA V3 */

.weekly-analytics-view .weekly-cost-panel {
  border: 0;
  margin: 0;
  padding: 0;
}


/* RANKING */

.weekly-rank-list {
  display: grid;
  gap: 13px;
}

.weekly-rank-row {
  background: #ffffff;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
  padding: 13px 15px;
}

.weekly-rank-head {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: space-between;
}

.weekly-rank-head > div {
  align-items: center;
  display: flex;
  gap: 9px;
}

.weekly-rank-head small {
  color: #9aa8b6;
  font-size: 9px;
  font-weight: 800;
}

.weekly-rank-head strong {
  color: #10233a;
  font-size: 12px;
  font-weight: 850;
}

.weekly-rank-head b {
  color: #174e78;
  font-size: 13px;
  font-weight: 850;
}

.weekly-rank-track {
  background: #edf2f6;
  border-radius: 999px;
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
}

.weekly-rank-track span {
  background:
    linear-gradient(
      90deg,
      #174e78,
      #286ea6
    );
  border-radius: 999px;
  display: block;
  height: 100%;
}

.weekly-rank-row p {
  color: #738397;
  font-size: 9px;
  line-height: 1.5;
  margin: 8px 0 0;
}


/* ESTADO VACIO */

.weekly-analytics-empty {
  align-items: center;
  background: #f7f9fc;
  border: 1px dashed #cfdbe5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.weekly-analytics-empty strong {
  color: #10233a;
  font-size: 12px;
}

.weekly-analytics-empty span {
  color: #738397;
  font-size: 10px;
  margin-top: 5px;
}


@media (max-width: 850px) {

  .weekly-analytics-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .weekly-analytics-total {
    text-align: left;
  }

  .weekly-analytics-tabs {
    padding-bottom: 11px;
  }
}


@media (max-width: 560px) {

  .weekly-analytics-panel {
    margin: 0 14px 14px;
  }

  .weekly-analytics-header,
  .weekly-analytics-view {
    padding: 16px;
  }

  .weekly-rank-head {
    align-items: flex-start;
  }

  .weekly-rank-head b {
    font-size: 11px;
  }
}


/* ===== DASHBOARD EJECUTIVO V4 GRAFICAS ===== */

.weekly-v4-chart {
  background: #ffffff;
  border: 1px solid #dfe7ef;
  border-radius: 14px;
  padding: 18px 18px 14px;
}

.weekly-v4-chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.weekly-v4-chart-legend span {
  align-items: center;
  color: #68798b;
  display: flex;
  font-size: 9px;
  font-weight: 800;
  gap: 6px;
}

.weekly-v4-chart-legend i {
  border-radius: 3px;
  display: block;
  height: 8px;
  width: 8px;
}

.weekly-v4-legend-first {
  background: #286ea6;
}

.weekly-v4-legend-second {
  background: #b87a19;
}

.weekly-v4-bars {
  align-items: flex-end;
  border-bottom: 1px solid #ccd8e2;
  display: flex;
  gap: 13px;
  height: 290px;
  min-width: 100%;
  overflow-x: auto;
  padding: 24px 8px 0;
}

.weekly-v4-bar-item {
  align-items: center;
  display: flex;
  flex: 1 0 66px;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  max-width: 115px;
  min-width: 66px;
}

.weekly-v4-bar-item > strong {
  color: #53687b;
  font-size: 8px;
  font-weight: 800;
  margin-bottom: 7px;
  white-space: nowrap;
}

.weekly-v4-bar-stage {
  align-items: flex-end;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.weekly-v4-bar {
  border-radius: 8px 8px 2px 2px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  max-width: 48px;
  min-height: 5px;
  overflow: hidden;
  transition:
    transform .18s ease,
    opacity .18s ease;
  width: 66%;
}

.weekly-v4-bar-item:hover .weekly-v4-bar {
  opacity: .88;
  transform: translateY(-3px);
}

.weekly-v4-bar-single {
  background:
    linear-gradient(
      180deg,
      #286ea6,
      #174e78
    );
  display: block;
  width: 100%;
}

.weekly-v4-bar-first {
  background: #286ea6;
  display: block;
  width: 100%;
}

.weekly-v4-bar-second {
  background: #b87a19;
  display: block;
  width: 100%;
}

.weekly-v4-bar-item > b {
  color: #10233a;
  font-size: 9px;
  font-weight: 850;
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Egresos: 3 columnas mas anchas */

[data-weekly-analytics-view="expenses"]
.weekly-v4-bar-item {
  flex-basis: 120px;
  max-width: 180px;
}


/* Grafica de flotilla */

[data-weekly-analytics-view="units"]
.weekly-v4-bars {
  height: 320px;
}


/* En pantallas pequenas */

@media (max-width: 850px) {

  .weekly-v4-bars {
    gap: 9px;
    height: 250px;
  }

  .weekly-v4-bar-item {
    flex-basis: 58px;
    min-width: 58px;
  }

  .weekly-v4-bar {
    max-width: 42px;
  }
}


@media (max-width: 560px) {

  .weekly-v4-chart {
    padding:
      14px 10px 10px;
  }

  .weekly-v4-bars {
    height: 220px;
  }

  .weekly-v4-bar-item > strong {
    font-size: 7px;
  }
}


/* ===== SERVICE KM DASHBOARD V1 START ===== */

.weekly-service-panel {
  margin-top: 26px;
  padding: 22px 24px 18px;
  border-top: 1px solid #d8e4ec;
}

.weekly-service-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.weekly-service-header p {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.weekly-service-header h4 {
  margin: 0;
  font-size: 20px;
}

.weekly-service-header > span {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #eef5f8;
}

.weekly-service-table {
  width: 100%;
}

.weekly-service-table th {
  white-space: nowrap;
}

.weekly-service-table td {
  vertical-align: middle;
}

.weekly-service-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.weekly-service-status--ok {
  background: #e5f5ee;
  color: #176454;
}

.weekly-service-status--soon {
  background: #fff3d8;
  color: #7d5912;
}

.weekly-service-status--due {
  background: #ffe5d8;
  color: #9a3e16;
}

.weekly-service-status--overdue {
  background: #ffe0e0;
  color: #9c2020;
}

.weekly-service-help {
  margin: 14px 0 0;
  font-size: 12px;
  color: #657a84;
}

@media (max-width: 760px) {
  .weekly-service-panel {
    padding: 18px 14px 14px;
  }

  .weekly-service-header {
    display: grid;
  }
}

/* ===== SERVICE KM DASHBOARD V1 END ===== */


.weekly-service-status--none {
  background: #eef2f5;
  color: #65737b;
}


/* ===== BUDGET EXPENSES V2 ===== */

#budgetV2Panel {
  margin-bottom: 24px;
}

.budget-v2-shell {
  display: grid;
  gap: 18px;
}

.budget-v2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px;
  border: 1px solid #dbe5ea;
  border-radius: 18px;
  background: #fff;
}

.budget-v2-header h3 {
  margin: 3px 0 6px;
}

.budget-v2-header p {
  margin: 0;
  max-width: 720px;
}

.budget-v2-kpis {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(170px, 1fr)
    );
  gap: 12px;
}

.budget-v2-kpis article {
  padding: 18px;
  border: 1px solid #dbe5ea;
  border-radius: 16px;
  background: #fff;
}

.budget-v2-kpis span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #667985;
}

.budget-v2-kpis strong {
  display: block;
  font-size: 21px;
}

.budget-v2-kpis small {
  display: block;
  margin-top: 5px;
  color: #6d7d86;
}

.budget-v2-over {
  border-color: #efb4b4 !important;
  background: #fff5f5 !important;
}

.budget-v2-over strong {
  color: #a32222;
}

.budget-v2-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, .7fr);
  gap: 16px;
}

.budget-v2-category,
.budget-v2-note,
.budget-v2-ledger,
.budget-v2-warning {
  padding: 20px;
  border: 1px solid #dbe5ea;
  border-radius: 18px;
  background: #fff;
}

.budget-v2-category h4,
.budget-v2-note h4 {
  margin: 0 0 14px;
}

.budget-v2-category-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f5;
}

.budget-v2-category-row:last-child {
  border-bottom: 0;
}

.budget-v2-note p {
  margin: 8px 0;
  line-height: 1.5;
}

.budget-v2-ledger > header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.budget-v2-ledger h4 {
  margin: 3px 0 0;
}

.budget-v2-ledger td small {
  display: block;
  margin-top: 4px;
}

.budget-v2-source {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.budget-v2-source--oc {
  background: #e5eff8;
  color: #174f77;
}

.budget-v2-source--manual {
  background: #e8f5ee;
  color: #176247;
}

.budget-v2-automatic {
  font-size: 10px;
  font-weight: 900;
  color: #56707e;
}

.budget-expense-modal-card {
  width: min(900px, 96vw);
}

.budget-expense-form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 15px;
}

.budget-expense-form label {
  display: grid;
  gap: 7px;
}

.budget-expense-form label > span {
  font-size: 12px;
  font-weight: 800;
}

.budget-expense-wide {
  grid-column: 1 / -1;
}

.budget-expense-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 720px) {

  .budget-v2-header {
    display: grid;
  }

  .budget-v2-grid {
    grid-template-columns: 1fr;
  }

  .budget-expense-form {
    grid-template-columns: 1fr;
  }

  .budget-expense-wide,
  .budget-expense-form-actions {
    grid-column: 1;
  }
}


/* ===== BUDGET V2 CLEAN CORPORATE ===== */

.budget-v2-grid {
  grid-template-columns: 1fr !important;
}

.budget-v2-category {
  width: 100%;
}



/* ===== BUDGET MONTH CLOSE PDF V1 CSS ===== */

.budget-v2-report-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.budget-v2-report-actions .secondary-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .budget-v2-report-actions {
    justify-content: stretch;
  }

  .budget-v2-report-actions .secondary-button {
    width: 100%;
  }
}

/* =========================================================
   TABLAS CORPORATIVAS DANFER V1
   ========================================================= */

#moduleContent .table-wrap {
  border: 1px solid #dce5ec !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  background: #ffffff !important;
}

#moduleContent table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
}

/* ENCABEZADOS */
#moduleContent table thead,
#moduleContent table thead tr,
#moduleContent table thead th {
  background: #123f60 !important;
}

#moduleContent table thead th {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  padding: 13px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  text-align: left;
  white-space: nowrap;
}

#moduleContent table thead th:last-child {
  border-right: 0 !important;
}

/* FILAS */
#moduleContent table tbody tr {
  background: #ffffff !important;
  transition: background .15s ease;
}

#moduleContent table tbody tr:nth-child(even) {
  background: #f7f9fb !important;
}

#moduleContent table tbody tr:hover {
  background: #edf4f8 !important;
}

/* CELDAS */
#moduleContent table tbody td {
  color: #263746 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #e3e9ee !important;
  vertical-align: middle !important;
}

#moduleContent table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* TEXTOS IMPORTANTES */
#moduleContent table tbody td strong,
#moduleContent table tbody td .cell-main {
  color: #102f46 !important;
  font-weight: 750 !important;
}

/* TABLA DE PROXIMOS SERVICIOS */
#moduleContent .weekly-service-table thead,
#moduleContent .weekly-service-table thead tr,
#moduleContent .weekly-service-table thead th {
  background: #123f60 !important;
  color: #ffffff !important;
}

/* CONSERVAR ESTADOS / ALERTAS */
#moduleContent table .status,
#moduleContent table [class*="status--"],
#moduleContent table [class*="-status"] {
  font-weight: 800;
}

/* MOVIL */
@media (max-width: 760px) {
  #moduleContent table thead th,
  #moduleContent table tbody td {
    padding: 10px 11px !important;
  }
}

/* ===== FIN TABLAS CORPORATIVAS DANFER V1 ===== */

/* ===== PURCHASE DELETE V1 CSS START ===== */

#purchaseDetailModal .purchase-delete-button {
  appearance: none;
  background: #ffffff !important;
  border: 1px solid #b94a4a !important;
  border-radius: 9px !important;
  color: #9d3030 !important;
  cursor: pointer;
  font: inherit;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 40px;
  padding: 9px 16px !important;
  transition: .16s ease;
}

#purchaseDetailModal .purchase-delete-button:hover {
  background: #fff6f6 !important;
  border-color: #962f2f !important;
  color: #7f2424 !important;
  box-shadow: 0 5px 15px rgba(127,36,36,.10);
  transform: translateY(-1px);
}

#purchaseDeleteModal {
  background: transparent;
  border: 0;
  max-width: none;
  padding: 0;
  width: min(520px, calc(100vw - 28px));
}

#purchaseDeleteModal::backdrop {
  background: rgba(16,31,43,.58);
  backdrop-filter: blur(3px);
}

.purchase-delete-shell {
  background: #ffffff;
  border: 1px solid #dce5ec;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(15,31,45,.24);
  overflow: hidden;
}

.purchase-delete-header {
  align-items: flex-start;
  border-bottom: 1px solid #e3e9ee;
  display: flex;
  justify-content: space-between;
  padding: 22px 24px 18px;
}

.purchase-delete-eyebrow {
  color: #6f8190;
  display: block;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  margin-bottom: 6px;
}

.purchase-delete-header h2 {
  color: #17354a !important;
  font-size: 20px;
  margin: 0;
}

.purchase-delete-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #667b8a;
  cursor: pointer;
  display: flex;
  font-size: 23px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.purchase-delete-close:hover {
  background: #f1f5f7;
}

.purchase-delete-body {
  padding: 22px 24px;
}

.purchase-delete-meta {
  display: grid;
  gap: 10px;
  grid-template-columns: .8fr 1.4fr 1fr;
  margin-bottom: 18px;
}

.purchase-delete-meta > div {
  background: #f7f9fb;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  min-width: 0;
  padding: 11px 12px;
}

.purchase-delete-meta span {
  color: #718291;
  display: block;
  font-size: 9px;
  font-weight: 750;
  margin-bottom: 4px;
}

.purchase-delete-meta strong {
  color: #17354a;
  display: block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-delete-warning {
  background: #fff8f8;
  border: 1px solid #efd3d3;
  border-left: 3px solid #9d3030;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 13px 14px;
}

.purchase-delete-warning strong {
  color: #8a2929;
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.purchase-delete-warning p {
  color: #667785 !important;
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}

.purchase-delete-field {
  display: block;
}

.purchase-delete-field > span {
  color: #455d6d;
  display: block;
  font-size: 11px;
  margin-bottom: 8px;
}

.purchase-delete-field input {
  background: #fff;
  border: 1px solid #bdcbd5;
  border-radius: 9px;
  box-sizing: border-box;
  color: #243d4f;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 43px;
  outline: none;
  padding: 0 12px;
  text-transform: uppercase;
  width: 100%;
}

.purchase-delete-field input:focus {
  border-color: #9d3030;
  box-shadow: 0 0 0 3px rgba(157,48,48,.10);
}

.purchase-delete-error {
  color: #9d3030 !important;
  font-size: 11px;
  font-weight: 700;
  margin: 9px 0 0;
  min-height: 16px;
}

.purchase-delete-footer {
  align-items: center;
  background: #f8fafb;
  border-top: 1px solid #e3e9ee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
}

#purchaseDeleteModal .purchase-delete-confirm {
  background: #9d3030 !important;
  border: 1px solid #9d3030 !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  min-height: 40px;
  padding: 9px 17px;
}

#purchaseDeleteModal .purchase-delete-confirm:hover:not(:disabled) {
  background: #7e2525 !important;
  border-color: #7e2525 !important;
}

#purchaseDeleteModal .purchase-delete-confirm:disabled {
  cursor: not-allowed;
  opacity: .42;
}

@media (max-width: 560px) {
  .purchase-delete-meta {
    grid-template-columns: 1fr;
  }

  .purchase-delete-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .purchase-delete-footer button {
    width: 100%;
  }
}

/* ===== PURCHASE DELETE V1 CSS END ===== */



/* ===== INVENTORY MONTHLY ORDER V1 UI START ===== */

.inventory-monthly-modal {
  width: min(1440px, 97vw);
  max-width: 1440px;
  max-height: 95vh;
  padding: 0;
  border: 1px solid #cbd4d1;
  border-radius: 20px;
  background: #edf1f0;
  overflow: hidden;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .34);
}

.inventory-monthly-modal::backdrop,
.inventory-monthly-history-modal::backdrop {
  background: rgba(17, 27, 30, .68);
  backdrop-filter: blur(4px);
}

.inventory-monthly-dialog,
.inventory-monthly-history-dialog {
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}

.inventory-monthly-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: #263238;
  color: #fff;
}

.inventory-monthly-header h2 {
  margin: 3px 0 5px;
  color: #fff;
  font-size: 1.45rem;
}

.inventory-monthly-header p:not(.eyebrow) {
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: .8rem;
}

.inventory-monthly-header .eyebrow {
  margin: 0;
  color: #aebdb7;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.inventory-monthly-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.inventory-monthly-body {
  overflow: auto;
  padding: 20px 22px 22px;
}

.inventory-monthly-controls {
  display: grid;
  grid-template-columns:
    minmax(190px, .65fr)
    minmax(280px, 1.35fr);
  gap: 14px;
  margin-bottom: 16px;
}

.inventory-monthly-controls label,
.inventory-monthly-notes {
  display: grid;
  gap: 6px;
}

.inventory-monthly-controls label > span,
.inventory-monthly-notes > span {
  color: #65736f;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.inventory-monthly-controls input,
.inventory-monthly-notes textarea {
  width: 100%;
  border: 1px solid #c9d2cf;
  border-radius: 10px;
  background: #fff;
}

.inventory-monthly-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.inventory-monthly-summary article {
  padding: 14px 16px;
  border: 1px solid #d5ddda;
  border-radius: 13px;
  background: #f8faf9;
}

.inventory-monthly-summary article span,
.inventory-monthly-summary article strong {
  display: block;
}

.inventory-monthly-summary article span {
  color: #75827e;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.inventory-monthly-summary article strong {
  margin-top: 5px;
  color: #172125;
  font-size: 1rem;
}

.inventory-monthly-summary-warning {
  border-left: 4px solid #b78324 !important;
}

.inventory-monthly-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid #d4dcda;
  border-radius: 12px;
  background: #f8faf9;
}

.inventory-monthly-help strong,
.inventory-monthly-help span {
  display: block;
}

.inventory-monthly-help strong {
  color: #27332f;
  font-size: .8rem;
}

.inventory-monthly-help span {
  margin-top: 2px;
  color: #71807b;
  font-size: .7rem;
}

.inventory-monthly-help-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcece5;
  color: #285e4b !important;
  font-weight: 800;
}

.inventory-monthly-table-wrap {
  max-height: 48vh;
  border: 1px solid #d5ddda;
  border-radius: 13px;
  background: #fff;
}

.inventory-monthly-table {
  min-width: 1050px;
}

.inventory-monthly-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.inventory-monthly-table thead th {
  background: #263238;
  color: #fff;
  border-bottom-color: #263238;
}

.inventory-monthly-row-suggested {
  background: rgba(183, 131, 36, .055);
}

.inventory-monthly-description {
  min-width: 260px;
}

.inventory-monthly-description strong,
.inventory-monthly-description small {
  display: block;
}

.inventory-monthly-description small {
  margin-top: 4px;
  color: #788681;
  font-size: .68rem;
}

.inventory-monthly-qty {
  width: 90px;
  min-width: 90px;
  padding: 8px 9px;
  border: 1px solid #b9c6c2;
  border-radius: 8px;
  background: #fff;
  text-align: right;
  font-weight: 800;
}

.inventory-monthly-qty:focus {
  outline: 2px solid rgba(55, 94, 79, .18);
  border-color: #557565;
}

.inventory-monthly-notes {
  margin-top: 16px;
}

.inventory-monthly-notes textarea {
  resize: vertical;
  min-height: 78px;
  padding: 11px 12px;
}

.inventory-monthly-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 22px;
  border-top: 1px solid #cbd4d1;
  background: #f7f9f8;
}

.inventory-monthly-footer-total span,
.inventory-monthly-footer-total strong {
  display: block;
}

.inventory-monthly-footer-total span {
  color: #72807b;
  font-size: .68rem;
  font-weight: 800;
}

.inventory-monthly-footer-total strong {
  margin-top: 2px;
  color: #172125;
  font-size: 1.22rem;
}

.inventory-monthly-footer-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.inventory-monthly-existing {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid #cbd7d2;
  border-radius: 15px;
  background: #f8faf9;
}

.inventory-monthly-existing > span {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #dcece5;
  color: #285e4b;
  font-size: 1.25rem;
  font-weight: 900;
}

.inventory-monthly-existing strong {
  color: #172125;
}

.inventory-monthly-existing p {
  margin: 3px 0 12px;
  color: #72807b;
  font-size: .78rem;
}

.inventory-monthly-history-modal {
  width: min(1180px, 96vw);
  max-width: 1180px;
  max-height: 92vh;
  padding: 0;
  border: 1px solid #cbd4d1;
  border-radius: 18px;
  background: #edf1f0;
  overflow: hidden;
}

.inventory-monthly-history-content {
  overflow: auto;
  min-height: 220px;
  max-height: 68vh;
  padding: 18px;
}

.inventory-monthly-history-table {
  min-width: 900px;
}

.inventory-monthly-history-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid #cbd4d1;
  background: #f7f9f8;
}

@media (max-width: 900px) {
  .inventory-monthly-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .inventory-monthly-controls {
    grid-template-columns: 1fr;
  }

  .inventory-monthly-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-monthly-footer-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ===== INVENTORY MONTHLY ORDER V1 UI END ===== */



/* ===== INVENTORY MONTHLY ORDER PDF ACTIONS ===== */

.inventory-monthly-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

#inventoryMonthlyPdfButton {
  text-decoration: none;
}

.inventory-monthly-footer-actions .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== INVENTORY MONTHLY ORDER PDF ACTIONS END ===== */



/* ===== DANFER INTERNAL CHAT V1 START ===== */

.chat-shell {
  min-height: calc(100vh - 220px);
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 42, 61, .08);
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 620px;
  max-height: calc(100vh - 220px);
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
}

.chat-sidebar-section {
  padding: 16px 12px 8px;
}

.chat-sidebar-section--people {
  flex: 1;
  overflow: auto;
  border-top: 1px solid #e2e8f0;
}

.chat-section-title {
  padding: 0 8px 10px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.chat-thread-list,
.chat-people-list {
  display: grid;
  gap: 5px;
}

.chat-thread,
.chat-person {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #26343d;
  text-align: left;
  cursor: pointer;
}

.chat-thread:hover,
.chat-person:hover {
  background: #eef4f8;
}

.chat-thread.is-active {
  background: #e4eef5;
  box-shadow: inset 3px 0 #123f60;
}

.chat-thread-copy,
.chat-person > span:last-child {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.chat-thread-copy strong,
.chat-person strong {
  overflow: hidden;
  color: #0f2a3d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-copy small,
.chat-person small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.chat-avatar-wrap i {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #f8fafc;
  border-radius: 999px;
  background: #94a3b8;
}

.chat-avatar-wrap i.is-online {
  background: #22c55e;
}

.chat-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: #123f60;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-avatar--small {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  margin-top: auto;
}

.chat-avatar--general {
  background: linear-gradient(
    135deg,
    #123f60,
    #2563eb
  );
}

.chat-unread {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
}

#chatNavBadge {
  min-width: 19px;
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 9px;
  text-align: center;
}

.chat-conversation {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 620px;
  max-height: calc(100vh - 220px);
}

.chat-conversation-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.chat-conversation-header > div {
  display: grid;
  gap: 3px;
}

.chat-conversation-header strong {
  color: #0f2a3d;
  font-size: 15px;
}

.chat-conversation-header small {
  color: #64748b;
  font-size: 11px;
}

.chat-messages {
  overflow-y: auto;
  padding: 22px 20px;
  background:
    linear-gradient(
      rgba(248, 250, 252, .94),
      rgba(248, 250, 252, .94)
    ),
    radial-gradient(
      circle at top left,
      rgba(18, 63, 96, .08),
      transparent 40%
    );
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin: 8px 0;
}

.chat-message--mine {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: min(72%, 680px);
  padding: 9px 12px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 15px 15px 15px 4px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 42, 61, .05);
}

.chat-message--mine .chat-bubble {
  border-color: #c7d8e6;
  border-radius: 15px 15px 4px 15px;
  background: #e5f0f7;
}

.chat-message--deleted .chat-bubble {
  opacity: .62;
  font-style: italic;
}

.chat-sender {
  display: block;
  margin-bottom: 3px;
  color: #123f60;
  font-size: 10px;
}

.chat-bubble p {
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-bubble footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.chat-bubble time {
  color: #94a3b8;
  font-size: 8px;
}

.chat-bubble footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b91c1c;
  font-size: 8px;
  cursor: pointer;
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 13px 15px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.chat-composer textarea {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  padding: 11px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
  font: inherit;
}

.chat-composer textarea:focus {
  outline: 2px solid rgba(37, 99, 235, .15);
  border-color: #2563eb;
}

.chat-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #64748b;
}

.chat-empty strong {
  color: #0f2a3d;
}

.chat-empty p {
  margin: 5px 0 0;
}

.chat-photo-button {
  cursor: pointer;
}

@media (max-width: 900px) {
  .chat-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .chat-sidebar {
    min-height: 560px;
  }

  .chat-conversation {
    min-height: 560px;
  }

  .chat-bubble {
    max-width: 82%;
  }
}

@media (max-width: 680px) {
  .chat-shell {
    display: block;
    min-height: 0;
  }

  .chat-sidebar {
    max-height: 260px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .chat-sidebar-section--people {
    max-height: 150px;
  }

  .chat-conversation {
    min-height: 520px;
    max-height: 70vh;
  }

  .chat-bubble {
    max-width: 88%;
  }
}


/* ===== DANFER CHAT ATTACHMENTS V1 CSS START ===== */

.chat-composer {
  display: grid;
  align-items: stretch;
  gap: 9px;
}

.chat-attachment-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.chat-attachment-action {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d7e0e8;
  border-radius: 9px;
  background: #f8fafc;
  color: #123f60;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.chat-attachment-action:hover {
  border-color: #9bb4c7;
  background: #eef5f9;
}

.chat-composer-main {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.chat-composer-main textarea {
  flex: 1;
  width: 100%;
}

.chat-attachment-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 7px;
}

.chat-pending-file {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #dbe5ec;
  border-radius: 10px;
  background: #f8fafc;
}

.chat-pending-file > img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  border-radius: 7px;
  background: #e2e8f0;
}

.chat-pending-file-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #eaf1f6;
  font-size: 21px;
}

.chat-pending-file-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.chat-pending-file-copy strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pending-file-copy small {
  color: #64748b;
  font-size: 9px;
}

.chat-pending-file > button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 17px;
  cursor: pointer;
}

.chat-attachments {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.chat-attachment-image {
  display: block;
  overflow: hidden;
  border: 1px solid #d7e0e8;
  border-radius: 11px;
  background: #f8fafc;
  color: inherit;
  text-decoration: none;
}

.chat-attachment-image img {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 260px;
  object-fit: cover;
  background: #e2e8f0;
}

.chat-attachment-image span {
  display: block;
  max-width: 300px;
  overflow: hidden;
  padding: 6px 8px;
  color: #475569;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-file {
  min-width: 250px;
  max-width: 410px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #d7e0e8;
  border-radius: 11px;
  background: rgba(248, 250, 252, .92);
  color: inherit;
  text-decoration: none;
}

.chat-attachment-file:hover {
  border-color: #9bb4c7;
  background: #f1f5f9;
}

.chat-attachment-file-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf1f6;
  font-size: 19px;
}

.chat-attachment-file-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.chat-attachment-file-copy strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-file-copy small {
  color: #64748b;
  font-size: 9px;
}

.chat-attachment-open {
  flex: 0 0 auto;
  color: #2563eb;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 680px) {
  .chat-attachment-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chat-attachment-action {
    width: 100%;
    padding: 7px 4px;
    font-size: 10px;
  }

  .chat-attachment-preview {
    grid-template-columns: 1fr;
  }

  .chat-attachment-file {
    min-width: 0;
    max-width: 100%;
  }

  .chat-attachment-image img {
    max-width: 100%;
  }
}

/* ===== DANFER CHAT ATTACHMENTS V1 CSS END ===== */


/* ===== DANFER CHAT PORTAL LINKS V1 CSS START ===== */

.chat-portal-button {
  border-color: #a9c4d7;
  background: #eef6fa;
}

.chat-portal-pending {
  display: grid;
  gap: 7px;
}

.chat-pending-portal {
  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #cfe0ea;
  border-radius: 10px;
  background: #f4f9fc;
}

.chat-pending-portal > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.chat-pending-portal small {
  color: #64748b;
  font-size: 8px;
}

.chat-pending-portal strong {
  overflow: hidden;
  color: #123f60;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pending-portal button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.chat-portal-dialog {
  width: min(
    680px,
    calc(100vw - 24px)
  );
  max-height:
    calc(100vh - 40px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 25px 70px
    rgba(15, 42, 61, .25);
}

.chat-portal-dialog::backdrop {
  background:
    rgba(15, 23, 42, .48);
}

.chat-portal-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px;
  border-bottom:
    1px solid #e2e8f0;
}

.chat-portal-dialog-head > div {
  display: grid;
  gap: 3px;
}

.chat-portal-dialog-head strong {
  color: #0f2a3d;
}

.chat-portal-dialog-head small {
  color: #64748b;
  font-size: 10px;
}

.chat-portal-dialog-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.chat-portal-search {
  padding: 14px 17px 8px;
}

.chat-portal-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border:
    1px solid #cbd5e1;
  border-radius: 11px;
  font: inherit;
}

.chat-portal-results {
  max-height: 520px;
  overflow-y: auto;
  padding: 7px 17px 17px;
}

.chat-portal-empty {
  padding: 30px 12px;
  color: #64748b;
  text-align: center;
  font-size: 11px;
}

.chat-portal-result {
  width: 100%;
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  padding: 10px;
  border:
    1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.chat-portal-result:hover {
  border-color: #a9c4d7;
  background: #f7fbfd;
}

.chat-portal-result-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef5f9;
  font-size: 20px;
}

.chat-portal-result-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-portal-result-copy small {
  color: #64748b;
  font-size: 8px;
}

.chat-portal-result-copy strong {
  overflow: hidden;
  color: #123f60;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-portal-result-copy span {
  overflow: hidden;
  color: #64748b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-portal-links {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.chat-portal-card {
  min-width: 260px;
  max-width: 430px;
  padding: 10px;
  border:
    1px solid #cfe0ea;
  border-radius: 11px;
  background: #f7fbfd;
}

.chat-portal-card-head {
  display: grid;
  grid-template-columns:
    34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.chat-portal-card-head > span {
  font-size: 21px;
  text-align: center;
}

.chat-portal-card-head > div {
  min-width: 0;
  display: grid;
}

.chat-portal-card-head small {
  color: #64748b;
  font-size: 8px;
}

.chat-portal-card-head strong {
  overflow: hidden;
  color: #123f60;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-portal-card > p {
  margin: 7px 0 0;
  color: #475569;
  font-size: 9px;
}

.chat-portal-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.chat-portal-card-actions a {
  padding: 6px 8px;
  border:
    1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #2563eb;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.chat-portal-no-access {
  display: block;
  margin-top: 7px;
  color: #b45309;
  font-size: 8px;
}

@media (max-width: 680px) {

  .chat-attachment-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .chat-portal-card {
    min-width: 0;
    max-width: 100%;
  }

}

/* ===== DANFER CHAT PORTAL LINKS V1 CSS END ===== */



/* ===== DANFER INTERNAL CHAT V1 END ===== */



/* ===== DANFER HEADER PROFILE AVATAR V1 ===== */

#userInitials {
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0;
}

#userInitials.has-profile-photo {
  color: transparent !important;
  text-indent: -9999px;
}



/* DANFER USERS ADMIN V2 */

.user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.user-action-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.user-action-button:hover {
  background: #f5f7f8;
}

.user-delete-button {
  color: #b42318;
  border-color: #f1b8b3;
}

.user-delete-button:hover {
  background: #fff1f0;
  border-color: #d92d20;
}


/* DANFER USERS PROFESSIONAL TABLE V1 */

.users-admin {
  display: grid;
  gap: 18px;
}

.users-kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.users-kpi {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e4e9ed;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 42, 61, .04),
    0 8px 24px rgba(15, 42, 61, .04);
}

.users-kpi-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eef3f6;
  color: #0f2a3d;
  font-size: 18px;
  font-weight: 800;
}

.users-kpi > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.users-kpi span {
  color: #687982;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.users-kpi strong {
  color: #102f42;
  font-size: 27px;
  line-height: 1;
}

.users-kpi small {
  color: #82919a;
  font-size: 11px;
}

.users-table-card {
  overflow: hidden;
  padding: 0;
  border-radius: 15px;
}

.users-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #e7ecef;
}

.users-table-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #d76825;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.users-table-header h3 {
  margin: 0;
  color: #0f2a3d;
  font-size: 18px;
}

.users-table-header p {
  margin: 4px 0 0;
  color: #73828b;
  font-size: 12px;
}

.users-table-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.users-search {
  min-width: 270px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #f8fafb;
  border: 1px solid #dce3e7;
  border-radius: 9px;
}

.users-search span {
  color: #73828b;
  font-size: 18px;
}

.users-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17394b;
  font: inherit;
  font-size: 12px;
}

.users-filter {
  height: 40px;
  min-width: 145px;
  padding: 0 34px 0 11px;
  border: 1px solid #dce3e7;
  border-radius: 9px;
  background: #ffffff;
  color: #17394b;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.users-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.users-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

.users-table thead th {
  padding: 11px 16px;
  background: #f6f8f9;
  color: #667780;
  border-bottom: 1px solid #e4e9ec;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.users-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f2;
  vertical-align: middle;
}

.users-table tbody tr {
  transition:
    background .16s ease,
    box-shadow .16s ease;
}

.users-table tbody tr:hover {
  background: #fbfcfd;
}

.users-table tbody tr:last-child td {
  border-bottom: 0;
}

.users-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
}

.users-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #12364a,
      #24566d
    );
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 1px #dce4e8;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
}

.users-person-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.users-person-copy strong {
  max-width: 240px;
  overflow: hidden;
  color: #17384a;
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-person-copy span {
  max-width: 245px;
  overflow: hidden;
  color: #7b8991;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-person-copy small {
  width: fit-content;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef5f8;
  color: #31586b;
  font-size: 8px;
  font-weight: 750;
}

.users-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.users-role-admin {
  background: #eaf2f6;
  color: #163f55;
}

.users-role-supervisor {
  background: #fff0e6;
  color: #a84c16;
}

.users-role-capturista {
  background: #f1eefc;
  color: #57439c;
}

.users-role-consulta {
  background: #f0f2f4;
  color: #5e6d75;
}

.users-access {
  min-width: 145px;
  display: grid;
  gap: 2px;
}

.users-access strong {
  color: #234758;
  font-size: 11px;
}

.users-access span {
  color: #8a979d;
  font-size: 9px;
}

.users-status-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.users-status-badge i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
}

.users-status-badge.is-active {
  background: #edf8f1;
  color: #257548;
}

.users-status-badge.is-active i {
  background: #28a461;
}

.users-status-badge.is-inactive {
  background: #f3f4f5;
  color: #727e84;
}

.users-status-badge.is-inactive i {
  background: #929ca1;
}

.users-date {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.users-date strong {
  color: #425a66;
  font-size: 10px;
  font-weight: 700;
}

.users-date span {
  color: #98a2a7;
  font-size: 8px;
}

.users-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.users-action {
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 8px;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.users-action:hover {
  transform: translateY(-1px);
}

.users-action-edit {
  background: #ffffff;
  border: 1px solid #d8e0e4;
  color: #23485a;
}

.users-action-edit:hover {
  background: #f2f6f8;
  border-color: #bfcdd4;
}

.users-action-delete {
  background: #fffafa;
  border: 1px solid #efd3d1;
  color: #b13a32;
}

.users-action-delete:hover {
  background: #fff0ef;
  border-color: #dfaaa6;
}

.users-current-label {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 8px;
  border-radius: 7px;
  background: #f4f6f7;
  color: #7b878d;
  font-size: 8px;
  font-weight: 700;
}

.users-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 20px;
  background: #fafbfc;
  border-top: 1px solid #edf0f2;
  color: #88969d;
  font-size: 9px;
}

.users-empty {
  padding: 42px 20px !important;
  color: #85949b;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1050px) {

  .users-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .users-table-header {
    align-items: stretch;
    flex-direction: column;
  }

  .users-table-tools {
    width: 100%;
  }

  .users-search {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 640px) {

  .users-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .users-kpi {
    min-height: 95px;
    padding: 13px;
  }

  .users-kpi-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .users-kpi strong {
    font-size: 22px;
  }

  .users-table-header {
    padding: 16px;
  }

  .users-table-tools {
    flex-direction: column;
  }

  .users-search,
  .users-filter {
    width: 100%;
  }

  .users-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== DANFER ACTIVITY LIVE V1 CSS START ===== */

.activity-live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #f0fdf4;
  color: #166534;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.activity-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 0 4px
    rgba(34, 197, 94, .14);
  animation:
    danferActivityPulse
    1.8s
    infinite;
}

@keyframes danferActivityPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px
      rgba(34, 197, 94, .12);
  }

  50% {
    box-shadow:
      0 0 0 7px
      rgba(34, 197, 94, .02);
  }
}

.activity-live-online {
  color: #15803d;
}

.activity-live-panel {
  overflow: hidden;
}

.activity-live-feed {
  display: grid;
  gap: 0;
  max-height:
    calc(100vh - 330px);
  min-height: 420px;
  overflow-y: auto;
  border-top:
    1px solid #e2e8f0;
}

.activity-live-item {
  display: grid;
  grid-template-columns:
    46px minmax(0, 1fr);
  gap: 11px;
  padding: 14px 18px;
  border-bottom:
    1px solid #edf2f7;
  background: #fff;
  transition:
    background .6s ease,
    transform .3s ease;
}

.activity-live-item:hover {
  background: #f8fafc;
}

.activity-live-item--new {
  background: #ecfdf5;
  animation:
    danferActivityEnter
    .45s ease;
}

@keyframes danferActivityEnter {
  from {
    opacity: 0;
    transform:
      translateY(-6px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}

.activity-live-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eef5f9;
  font-size: 20px;
}

.activity-live-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.activity-live-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  color: #475569;
  font-size: 11px;
}

.activity-live-main strong {
  color: #0f2a3d;
  font-size: 12px;
}

.activity-live-main b {
  color: #2563eb;
  font-size: 10px;
}

.activity-live-detail {
  color: #334155;
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.activity-live-meta {
  display: flex;
  gap: 10px;
  color: #94a3b8;
  font-size: 8px;
}

.activity-live-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 680px) {

  .activity-live-feed {
    max-height:
      calc(100vh - 300px);
    min-height: 360px;
  }

  .activity-live-item {
    grid-template-columns:
      38px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .activity-live-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

}

/* ===== DANFER ACTIVITY LIVE V1 CSS END ===== */


/* ===== DANFER AUDIT CENTER V2 CSS START ===== */

.activity-filter-bar {
  display: grid;
  grid-template-columns:
    minmax(220px, 2fr)
    repeat(3, minmax(140px, 1fr))
    minmax(130px, .8fr)
    minmax(130px, .8fr)
    auto;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.activity-filter-bar input,
.activity-filter-bar select {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.activity-filter-bar input:focus,
.activity-filter-bar select:focus {
  outline: none;
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(100,116,139,.10);
}

.activity-event-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.activity-event-extra {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}

.activity-event-extra[hidden] {
  display: none;
}

.activity-event-extra > div {
  display: grid;
  gap: 2px;
}

.activity-event-extra span {
  color: #64748b;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.activity-event-extra strong {
  color: #0f172a;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.activity-live-dot--paused {
  background: #f59e0b;
  box-shadow:
    0 0 0 4px
    rgba(245,158,11,.14);
  animation: none;
}

@media (max-width: 1200px) {
  .activity-filter-bar {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  #activitySearch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .activity-filter-bar {
    grid-template-columns:
      1fr 1fr;
  }

  #activitySearch {
    grid-column: 1 / -1;
  }

  .activity-filter-bar button {
    width: 100%;
  }
}

/* ===== DANFER AUDIT CENTER V2 CSS END ===== */

/* ===== INCIDENT PROFESSIONAL ACTIONS V1 START ===== */

#moduleContent .incident-action-button {
  min-width: 76px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

#moduleContent .incident-action-edit {
  color: #123f60;
  background: #ffffff;
  border: 1px solid #cbd5df;
}

#moduleContent .incident-action-edit:hover {
  background: #f5f8fa;
  border-color: #9caeba;
}

#moduleContent .incident-action-delete {
  color: #9f2424;
  background: #ffffff;
  border: 1px solid #dfbaba;
}

#moduleContent .incident-action-delete:hover {
  color: #821c1c;
  background: #fff7f7;
  border-color: #c98d8d;
}

.incident-delete-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #17212b;
  box-shadow:
    0 24px 70px rgba(15, 23, 42, .25);
}

.incident-delete-dialog::backdrop {
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(2px);
}

.incident-delete-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid #dbe3e8;
  border-radius: 12px;
  background: #ffffff;
}

.incident-delete-header {
  padding: 22px 24px 18px;
  border-top: 4px solid #123f60;
  border-bottom: 1px solid #e5eaee;
}

.incident-delete-eyebrow {
  margin-bottom: 5px;
  color: #6b7b88;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.incident-delete-header h2 {
  margin: 0;
  color: #17212b;
  font-size: 20px;
  font-weight: 700;
}

.incident-delete-body {
  padding: 24px;
}

.incident-delete-body p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

.incident-delete-body strong {
  color: #17212b;
}

.incident-delete-warning {
  margin-top: 14px !important;
  padding: 12px 14px;
  border-left: 3px solid #b42318;
  border-radius: 5px;
  background: #fff7f6;
  color: #7a271a !important;
}

.incident-delete-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e5eaee;
  background: #f8fafb;
}

.incident-delete-footer button {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.incident-delete-cancel {
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5df;
}

.incident-delete-cancel:hover {
  background: #f4f6f8;
}

.incident-delete-confirm {
  color: #ffffff;
  background: #b42318;
  border: 1px solid #b42318;
}

.incident-delete-confirm:hover {
  background: #941e16;
  border-color: #941e16;
}

/* ===== INCIDENT PROFESSIONAL ACTIONS V1 END ===== */


/* ===== DANFER GLOBAL TEXT ACTIONS V1 START ===== */

#moduleContent
.row-action-group
.row-action-button[data-edit-id],

#moduleContent
.row-action-group
.row-action-button[data-delete-id],

#tripExpenseList
.row-action-group
.row-action-button[data-trip-expense-edit],

#tripExpenseList
.row-action-group
.row-action-button[data-trip-expense-delete] {
  width: auto !important;
  min-width: 76px;
  min-height: 34px;
  padding: 7px 12px !important;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

#moduleContent
.row-action-button[data-edit-id],

#tripExpenseList
.row-action-button[data-trip-expense-edit] {
  color: #123f60;
  background: #ffffff;
  border: 1px solid #cbd5df;
}

#moduleContent
.row-action-button[data-edit-id]:hover,

#tripExpenseList
.row-action-button[data-trip-expense-edit]:hover {
  color: #123f60;
  background: #f5f8fa;
  border-color: #9caeba;
}

.danfer-global-action-warning {
  white-space: pre-line;
}

/* ===== DANFER GLOBAL TEXT ACTIONS V1 END ===== */


/* ===== DANFER USERS PRESENCE STYLE V1 ===== */

.users-module-strip-v2 {
  grid-template-columns:
    repeat(4, minmax(120px, 1fr)) !important;
}

.users-session-v2 {
  min-width: 165px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.users-session-dot-v2 {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #94A3B8;
}

.users-session-dot-v2.is-online {
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

.users-session-dot-v2.is-inactive {
  background: #CBD5E1;
}

.users-session-copy-v2 {
  display: grid;
  gap: 3px;
}

.users-session-copy-v2 strong {
  color: var(--erp-text, #1F2937);
  font-size: 11px;
}

.users-session-copy-v2 span {
  color: var(--erp-muted, #64748B);
  font-size: 9px;
}

.users-action {
  min-width: 72px !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  .users-module-strip-v2 {
    grid-template-columns:
      repeat(2, minmax(120px, 1fr)) !important;
  }
}