/* MASPRO executive system — presentation scoped to the six operational modules. */
.login-page:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) {
  display:block;
  padding:0;
  min-height:100vh;
  isolation:auto;
  overflow:visible;
  background:#f2f3f0;
}
.login-page:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.brand,.photo-layer,.photo-overlay,footer) {display:none}
.login-page:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > #app {
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  place-items:normal;
}

#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) {
  --gold:#b4945a;
  --module-ink:#252c35;
  --module-muted:#69747d;
  --module-line:#dfe2dd;
  display:block;
  width:100%;
  min-height:100vh;
  color:var(--module-ink);
  background:#f2f3f0;
  font-family:'Segoe UI',Arial,sans-serif;
}

/* The sidebar stays in place while long tables, galleries and calendars scroll. */
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-side,.calendar-side,.documents-side,.photos-side) {
  position:fixed;
  inset:0 auto 0 0;
  z-index:3;
  width:236px;
  height:100vh;
  padding:33px 21px 20px;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  color:#e9eaec;
  background:linear-gradient(145deg,#171b20,#0c1015);
  border:0;
  border-right:1px solid #ffffff0c;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-title,
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-brand {
  min-height:75px;
  margin:0 6px;
  padding:0 0 31px;
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #ffffff11;
  font:18px Georgia,serif;
  letter-spacing:.15em;
  color:#f3f0e8;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .side-title::before {
  content:'M';
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid #b99b61;
  border-radius:50%;
  color:#d7bd86;
  font:21px Georgia,serif;
}
#app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-mark {
  width:42px;
  height:42px;
  flex:none;
  border:1px solid #b99b61;
  border-radius:50%;
  background:transparent;
  color:#d7bd86;
  font:21px Georgia,serif;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-title small,
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-brand small {
  display:block;
  margin:7px 0 0;
  color:#a9adb3;
  font:8px 'Segoe UI',sans-serif;
  letter-spacing:.2em;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav {
  display:grid;
  gap:5px;
  margin:26px 0 0;
  padding-top:23px;
  position:relative;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav::before {
  content:'ESPACIO DE TRABAJO';
  position:absolute;
  top:0;
  left:10px;
  color:#8a929d;
  font:9px 'Segoe UI',sans-serif;
  letter-spacing:.16em;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav a {
  display:flex;
  align-items:center;
  min-height:45px;
  margin:0;
  padding:10px 13px;
  border:1px solid transparent;
  border-radius:6px;
  color:#a5acb6;
  background:transparent;
  text-decoration:none;
  font:13px 'Segoe UI',sans-serif;
  letter-spacing:0;
  opacity:1;
  cursor:pointer;
  transition:color .2s,background .2s;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav a:hover {color:#f6f0e2;background:#ffffff0a}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav a.active {
  color:#e3ca98;
  background:linear-gradient(90deg,#c9a9681d,#c9a96808);
  border:1px solid #bf9d5838;
  box-shadow:inset 2px 0 #c2a068;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a::before {
  content:'◈';
  width:24px;
  flex:none;
  color:#788291;
  font:17px Georgia,serif;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(2)::before {content:'◎'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(3)::before {content:'▤'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(4)::before {content:'▣'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(5)::before {content:'▦'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(6)::before {content:'▧'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a:nth-child(7)::before {content:'▧'}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a.active::before {color:#d7b77b}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) :is(.logout,.side-foot) {margin-top:auto}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side .logout {
  width:100%;
  padding:12px 13px;
  border:1px solid #ffffff16;
  border-radius:6px;
  background:transparent;
  color:#adb4be;
  text-align:left;
  font:12px 'Segoe UI',sans-serif;
  letter-spacing:0;
}
#app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-foot {
  padding:20px 4px 0;
  border-top:1px solid #ffffff11;
  color:#c9ad79;
  font:10px 'Segoe UI',sans-serif;
  letter-spacing:.16em;
}
#app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-foot small {display:block;margin-top:6px;color:#929ba6;font-size:10px;letter-spacing:0}

/* Shared photographic masthead and clean working surface. */
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-main,.calendar-main,.documents-main,.photos-main) {
  width:calc(100% - 236px);
  min-width:0;
  min-height:100vh;
  margin-left:236px;
  padding:27px 36px 52px;
  background:#f2f3f0;
  color:#29313a;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) {
  min-height:222px;
  margin:18px 0 25px;
  padding:30px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border-radius:10px;
  overflow:hidden;
  color:#fff;
  background-position:center;
  background-size:cover;
  box-shadow:0 8px 22px #17202b10;
}
#app > .crm-shell:not(.dashboard-executive) .crm-header {background-image:linear-gradient(90deg,#0a111bed 0%,#101820ba 55%,#131d2680),url('/images/executive-clients.jpg')}
#app > .estimate-shell .crm-header {background-image:linear-gradient(90deg,#0a111bef 0%,#101820bc 55%,#131d265e),url('/images/executive-estimates.jpg')}
#app > .project-shell .crm-header {background-image:linear-gradient(90deg,#0a111bed 0%,#101820a8 55%,#131d264f),url('/images/executive-projects.jpg')}
#app > .calendar-shell .calendar-head {background-image:linear-gradient(90deg,#0a111bed 0%,#101820aa 55%,#131d264d),url('/images/executive-calendar.jpg')}
#app > .documents-shell .documents-head {background-image:linear-gradient(90deg,#0a111bed 0%,#101820bc 55%,#131d2675),url('/images/executive-documents.jpg')}
#app > .photos-shell .photos-head {background-image:linear-gradient(90deg,#0a111bed 0%,#101820a8 55%,#131d2655),url('/images/executive-photos.jpg')}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) .kicker {
  color:#dec695;
  font:600 10px 'Segoe UI',sans-serif;
  letter-spacing:.18em;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) :is(h1,h2) {
  margin:13px 0 11px;
  color:#fff;
  font:400 46px/1.1 Georgia,serif;
  letter-spacing:-.025em;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) p {
  max-width:475px;
  margin:0;
  color:#e0e3e4;
  font:14px/1.7 'Segoe UI',sans-serif;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .gold-btn {
  width:auto;
  flex:none;
  margin:0;
  padding:12px 18px;
  border:1px solid #c9ac76;
  border-radius:6px;
  background:#c6a56b;
  color:#182029;
  font:600 12px 'Segoe UI',sans-serif;
  letter-spacing:0;
  box-shadow:0 5px 14px #0002;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .gold-btn:hover {background:#e0c18c}

/* Search, filters, list headers and table rows. */
#app > .crm-shell:not(.dashboard-executive) .client-toolbar,
#app > :is(.documents-shell,.photos-shell) :is(.documents-toolbar,.photos-toolbar) {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:17px 19px;
  margin:0;
  background:#fff;
  border:1px solid var(--module-line);
  border-radius:8px 8px 0 0;
  color:#79838a;
}
#app > .crm-shell:not(.dashboard-executive) .client-toolbar {margin-bottom:0}
#app > .crm-shell:not(.dashboard-executive) .client-toolbar :is(input,select),
#app > .documents-shell .documents-toolbar input {
  min-height:43px;
  padding:10px 13px;
  border:1px solid #dce0dd;
  border-radius:5px;
  background:#fafbf9;
  color:#29313a;
  font:12px 'Segoe UI',sans-serif;
  outline:none;
}
#app > .crm-shell:not(.dashboard-executive) .client-toolbar input {min-width:220px;flex:1}
#app > .crm-shell:not(.dashboard-executive) .client-toolbar select {min-width:153px}
#app > :is(.crm-shell:not(.dashboard-executive),.documents-shell) :is(input,select):focus {border-color:#b99c67;box-shadow:0 0 0 3px #b99c6724}
#app > .crm-shell:not(.dashboard-executive) .client-count {
  margin:0;
  padding:16px 20px 12px;
  background:#fff;
  border-left:1px solid var(--module-line);
  border-right:1px solid var(--module-line);
  color:#66727c;
  font:12px 'Segoe UI',sans-serif;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) :is(.client-table,.estimate-table,.project-table),
#app > :is(.documents-shell,.photos-shell) :is(.documents-panel,.photos-panel) {
  background:#fff;
  color:#28323b;
  border:1px solid var(--module-line);
  border-radius:8px;
  overflow-x:auto;
  box-shadow:0 4px 14px #1c2b3908;
}
#app > .crm-shell:not(.dashboard-executive) .client-table {border-radius:0 0 8px 8px;border-top:0}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-head {
  min-height:47px;
  padding:14px 19px;
  background:#f8f9f6;
  border-bottom:1px solid #e4e7e1;
  color:#788188;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row {
  min-height:74px;
  padding:13px 19px;
  border-bottom:1px solid #eceee9;
  color:#46515a;
  background:#fff;
  font-size:12px;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row:hover {background:#fafaf7}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row:last-child {border-bottom:0}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row strong {color:#303943;font-size:13px;font-weight:600;overflow-wrap:anywhere}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row small {margin-top:5px;color:#828c94;font-size:11px;overflow-wrap:anywhere}
#app > .crm-shell:not(.dashboard-executive) :is(.table-head,.table-row) {grid-template-columns:minmax(140px,1.4fr) minmax(135px,1.2fr) 90px 95px minmax(190px,1.3fr);min-width:780px}
#app > .estimate-shell :is(.table-head,.table-row) {grid-template-columns:minmax(120px,1fr) minmax(175px,1.5fr) 105px 115px minmax(220px,1.4fr);min-width:800px}
#app > .project-shell :is(.table-head,.table-row) {grid-template-columns:minmax(90px,.9fr) minmax(145px,1.45fr) minmax(100px,1fr) minmax(80px,.8fr) minmax(120px,1.1fr) minmax(205px,1.55fr);min-width:880px}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .row-actions {display:flex;flex-wrap:wrap;gap:6px}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .row-actions button,
#app > .crm-shell:not(.dashboard-executive) .pagination button {
  width:auto;
  margin:0;
  padding:7px 9px;
  border:1px solid #d8ddd8;
  border-radius:5px;
  background:#fff;
  color:#59636b;
  font:11px 'Segoe UI',sans-serif;
  letter-spacing:0;
}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .row-actions button:hover,
#app > .crm-shell:not(.dashboard-executive) .pagination button:hover:not(:disabled) {border-color:#b99a61;color:#87662e;background:#fbf8ef}
#app > .crm-shell:not(.dashboard-executive) .pagination {color:#626d75;font-size:12px}
#app > .crm-shell:not(.dashboard-executive) .pagination button:disabled {opacity:.4;cursor:default}
#app > .crm-shell:not(.dashboard-executive) .pill {background:#eaf0ea;color:#567264;border-radius:4px;font-size:10px}
#app > .estimate-shell .estimate-status,
#app > .project-shell .project-status {display:inline-block;padding:6px 9px;border-radius:4px;font-size:10px;font-weight:600}
#app > .estimate-shell .estimate-status {background:#eee9db;color:#866e40}
#app > .estimate-shell .estimate-status.aprobado {background:#e4eee6;color:#50745b}
#app > .estimate-shell .estimate-status.rechazado {background:#f4e9e7;color:#a3615c}
#app > .project-shell .project-status {background:#e5ece7;color:#55705b}
#app > .project-shell .progress {height:6px;background:#e7ebe4;border-radius:6px;overflow:hidden}
#app > .project-shell .progress i {background:#b4945a;border-radius:6px}
#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .empty-state {color:#747d84}

/* Calendar remains recognizably a calendar while adopting the executive palette. */
#app > .calendar-shell .calendar-panel {background:#fff;border:1px solid var(--module-line);border-radius:8px;box-shadow:0 4px 14px #1c2b3908;color:#29313a;overflow-x:auto}
#app > .calendar-shell .calendar-toolbar {min-width:700px;padding:17px 20px;border-bottom:1px solid #e3e6e0;gap:10px}
#app > .calendar-shell .calendar-toolbar h2 {color:#303943;font:400 23px Georgia,serif;text-transform:none}
#app > .calendar-shell .calendar-toolbar button {width:auto;margin:0;padding:9px 12px;background:#f8f9f6;border:1px solid #dce1db;color:#59636b;font:11px 'Segoe UI',sans-serif}
#app > .calendar-shell .calendar-toolbar button:hover {background:#f2eee2;border-color:#c1aa7d}
#app > .calendar-shell .view-tabs button {background:#f5f6f2;border:1px solid #dce1db!important;border-radius:5px!important}
#app > .calendar-shell .view-tabs .selected {background:#1d2630;color:#e5cc9d;border-color:#1d2630!important}
#app > .calendar-shell .calendar-grid {min-width:700px;background:#fff}
#app > .calendar-shell .dow {padding:14px;color:#7b858c;background:#f8f9f6;border-color:#e5e8e2;font-weight:600}
#app > .calendar-shell .cal-cell {background:#fff;border-color:#e7eae5;min-height:119px}
#app > .calendar-shell .cal-cell:hover {background:#fbfaf6}
#app > .calendar-shell .day-num {color:#58646e;font-size:12px}
#app > .calendar-shell .today .day-num {display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#22303d;color:#e7ce9e}
#app > .calendar-shell .cal-event {background:#f0ecdf;color:#5e4c2e;border-left-color:#b4945a;font-size:11px}
#app > .calendar-shell .status-Confirmado {background:#eaf0ee;color:#526f68;border-left-color:#76a198}
#app > .calendar-shell .status-Completado {background:#eaf0e8;color:#567558;border-left-color:#7da86d}
#app > .calendar-shell .status-Cancelado {background:#f5eae8;color:#9b6762;border-left-color:#b96d6d}
#app > .calendar-shell .day-board {min-width:700px;color:#3a4650}
#app > .calendar-shell .day-title {color:#8b6f3f;text-transform:none}
#app > .calendar-shell .empty {color:#87918f}

/* Documents and photographic gallery. */
#app > .documents-shell .documents-toolbar input {width:min(360px,100%)}
#app > .documents-shell .doc-row {min-width:860px;grid-template-columns:minmax(175px,2fr) 90px 95px minmax(120px,1.3fr) minmax(205px,1.6fr);padding:15px 19px;border-bottom:1px solid #e9ece7;color:#44505a;font-size:12px}
#app > .documents-shell .doc-header {background:#f8f9f6;color:#788188;font-size:10px}
#app > .documents-shell .doc-name strong {color:#303943;font-size:12px;overflow-wrap:anywhere}
#app > .documents-shell .doc-name b {color:#a6874f}
#app > .documents-shell .doc-name small {color:#818b93}
#app > .documents-shell .doc-badge {background:#eee9db;color:#81683e;font-size:10px}
#app > .documents-shell .relations {color:#66737b}
#app > .documents-shell .doc-actions button,
#app > .documents-shell .doc-actions a {width:auto;margin:0;padding:7px 9px;background:#fff;color:#59636b;border:1px solid #d8ddd8;border-radius:5px;letter-spacing:0}
#app > .documents-shell .doc-actions button:hover,
#app > .documents-shell .doc-actions a:hover {background:#fbf8ef;color:#87662e;border-color:#b99a61}
#app > .documents-shell .empty-docs,
#app > .photos-shell .empty-photos {color:#717d84}
#app > .photos-shell .photos-toolbar {justify-content:space-between;color:#7b858c;font-size:12px}
#app > .photos-shell .photo-filters {flex-wrap:wrap}
#app > .photos-shell .photo-filters button {width:auto;margin:0;padding:9px 13px;background:#f8f9f6;color:#606b74;border:1px solid #dce1db;border-radius:5px;font:11px 'Segoe UI',sans-serif;letter-spacing:0}
#app > .photos-shell .photo-filters .selected {background:#1d2630;color:#e5cc9d;border-color:#1d2630}
#app > .photos-shell .photo-grid {padding:22px;gap:20px}
#app > .photos-shell .photo-card {background:#fff;border:1px solid #dfe4dd;border-radius:8px;box-shadow:0 3px 12px #1c2b390c}
#app > .photos-shell .photo-card:hover {border-color:#b99a61;box-shadow:0 12px 24px #1c2b3918}
#app > .photos-shell .photo-img {height:190px;background:#e9ece8}
#app > .photos-shell .photo-img span {background:#1a232ddf;color:#e7cf9e}
#app > .photos-shell .photo-meta {padding:15px;gap:8px}
#app > .photos-shell .photo-meta strong {color:#303943;font-size:13px}
#app > .photos-shell .photo-meta :is(small,em) {color:#78838b}

/* Dialogs appear outside #app. The body selector keeps the original login and Dashboard untouched. */
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) {background:#0a1016b8;backdrop-filter:blur(4px)}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.modal-card,.calendar-modal,.document-modal,.photo-modal) {
  background:#fafbf8;
  color:#2a333c;
  border:1px solid #dce1da;
  border-top:3px solid #b4945a;
  border-radius:9px;
  box-shadow:0 24px 75px #0b151e70;
}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.modal-card,.calendar-modal,.document-modal,.photo-modal) h2 {color:#29313a;font:400 31px Georgia,serif}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.modal-card,.calendar-modal,.document-modal,.photo-modal) .kicker {color:#a28450}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.modal-close,.light-close) {width:auto;color:#68727b;padding:4px 8px;font-size:25px}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) label {color:#59646d;font-size:12px;font-weight:600}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(input,select,textarea) {background:#fff;color:#25303a;border:1px solid #d8ded7;border-radius:5px;padding:11px 12px;outline:none}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(input,select,textarea):focus {border-color:#b4945a;box-shadow:0 0 0 3px #b4945a24}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.gold-btn,.cancel,.finance-table button,.edit-photo) {width:auto;margin:0;border-radius:5px;font:600 12px 'Segoe UI',sans-serif;letter-spacing:0}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .gold-btn {background:#1c2630;border:1px solid #1c2630;color:#e7cf9f;padding:11px 18px}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .cancel {background:#fff;color:#69737b;border:1px solid #d9ded9;padding:11px 18px}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.detail-sections div,.estimate-total) {background:#f3f5f0;border:1px solid #e0e5de;color:#647078;border-radius:5px}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.detail-sections b,.estimate-total strong) {color:#9c7840}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .detail-grid span {color:#69767f}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .detail-grid strong {color:#2a343c;overflow-wrap:anywhere}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .finance-table :is(th,td) {border-color:#e2e6df;color:#4b5760}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .finance-table th {color:#927341;background:#f3f5f0}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .finance-table button {background:#fff;color:#8b6b37;border:1px solid #cdb786;padding:7px 9px}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .upload-zone {background:#f7f3e9;color:#927542;border:1px dashed #b4945a}
body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) .muted {color:#69747d}

@media(max-width:1100px){
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-side,.calendar-side,.documents-side,.photos-side) {width:210px;padding-left:16px;padding-right:16px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-main,.calendar-main,.documents-main,.photos-main) {width:calc(100% - 210px);margin-left:210px;padding-left:24px;padding-right:24px}
}
@media(max-width:720px){
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-side,.calendar-side,.documents-side,.photos-side) {position:relative;inset:auto;width:100%;height:auto;min-height:125px;padding:16px 18px;border:0}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-title,
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) .side-brand {min-height:38px;padding:0;border:0;font-size:15px}
  #app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-brand span:last-child {font-size:15px}
  #app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-brand small {font-size:7px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .side-title::before,
  #app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-mark {width:34px;height:34px;font-size:18px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav {display:flex;gap:5px;min-width:0;margin:17px 0 0;padding:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#59616a #171c22}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav::before {display:none}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-side,.calendar-side,.documents-side,.photos-side) nav a {min-height:37px;white-space:nowrap;font-size:11px;padding:8px 11px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side nav a::before {width:16px;font-size:13px;margin-right:5px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .crm-side .logout {position:absolute;top:14px;right:18px;width:auto;margin:0;padding:9px 10px;font-size:10px}
  #app > :is(.calendar-shell,.documents-shell,.photos-shell) .side-foot {display:none}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) > :is(.crm-main,.calendar-main,.documents-main,.photos-main) {width:100%;min-height:calc(100vh - 125px);margin:0;padding:0 18px 32px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) {min-height:210px;margin:17px 0 20px;padding:24px;align-items:flex-start;flex-direction:column;justify-content:center;gap:16px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) :is(h1,h2) {font-size:37px;margin:8px 0}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) p {font-size:12px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) :is(.crm-header,.calendar-head,.documents-head,.photos-head) .gold-btn {padding:9px 13px;font-size:11px}
  #app > .crm-shell:not(.dashboard-executive) .client-toolbar {padding:13px}
  #app > .crm-shell:not(.dashboard-executive) .client-toolbar input {min-width:100%;margin:0}
  #app > .crm-shell:not(.dashboard-executive) .client-toolbar select {flex:1;min-width:135px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-head {display:none}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;gap:12px;padding:17px}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row > div {display:block;min-width:0}
  #app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell) .table-row > .row-actions {grid-column:1/-1;display:flex;gap:8px;padding-top:9px;border-top:1px solid #eef0ea}
  #app > .project-shell .table-row > div:nth-child(5) {grid-column:1/-1}
  #app > .project-shell .table-row > div:nth-child(5)::before {content:'FINANZAS';display:block;margin-bottom:6px;color:#8a938f;font-size:9px;letter-spacing:.11em}
  #app > .crm-shell:not(.dashboard-executive) .table-row > div:nth-child(4)::before {content:'ALTA';display:block;margin-bottom:6px;color:#8a938f;font-size:9px;letter-spacing:.11em}
  #app > .estimate-shell .table-row > div:nth-child(4)::before {content:'TOTAL';display:block;margin-bottom:6px;color:#8a938f;font-size:9px;letter-spacing:.11em}
  #app > .calendar-shell .calendar-panel {width:100%}
  #app > .calendar-shell .calendar-toolbar {min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;padding:15px 13px}
  #app > .calendar-shell .calendar-toolbar h2 {order:-1;width:100%;font-size:21px;margin-bottom:7px}
  #app > .calendar-shell .calendar-toolbar button {padding:8px 10px}
  #app > .calendar-shell .day-board {min-width:0}
  #app > .documents-shell .doc-header {display:none}
  #app > .documents-shell .doc-row:not(.doc-header) {min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:17px}
  #app > .documents-shell .doc-row:not(.doc-header) > :is(.doc-name,.relations,.doc-actions) {grid-column:1/-1;display:flex}
  #app > .documents-shell .doc-row:not(.doc-header) > .doc-name {display:grid}
  #app > .documents-shell .doc-row:not(.doc-header) > .doc-actions {gap:7px}
  #app > .documents-shell .doc-row:not(.doc-header) > .relations {color:#7a8389}
  #app > .photos-shell .photos-toolbar {align-items:flex-start}
  #app > .photos-shell .photo-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:13px}
  #app > .photos-shell .photo-img {height:150px}
  body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) {padding:12px}
  body:has(#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell)) > :is(.modal,.modal-back) :is(.modal-card,.calendar-modal,.document-modal,.photo-modal) {max-width:100%;max-height:94vh;padding:24px 20px;overflow:auto}
}
@media(prefers-reduced-motion:reduce){#app > :is(.crm-shell:not(.dashboard-executive),.estimate-shell,.project-shell,.calendar-shell,.documents-shell,.photos-shell) *{transition:none!important}}
.client-view-modal .client-invoicing{margin-top:30px;padding-top:24px;border-top:1px solid #e6e9e2}
.client-view-modal .invoice-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}
.client-view-modal .invoice-section-heading h3{margin:5px 0;font-size:23px;color:#20272e}
.client-view-modal .invoice-section-heading p{margin:0;color:#717b83;font-size:12px}
.client-view-modal .invoice-totals{grid-template-columns:repeat(3,minmax(0,1fr))}
.client-view-modal .invoice-table th{color:#87703b}
.client-view-modal .invoice-status{display:inline-block;padding:5px 8px;border-radius:20px;background:#f1f2ef;color:#56606a;font-size:10px;white-space:nowrap}
.client-view-modal .invoice-status.is-paid{background:#e8f2eb;color:#35734d}
.client-view-modal .invoice-status.is-partial{background:#fff3dc;color:#936d22}
.client-view-modal .invoice-status.is-pending{background:#f7eae7;color:#9b4c3c}
.client-view-modal .invoice-table button{color:#705b2d;border-color:#d8c898;border-radius:6px;white-space:nowrap}
.invoice-form-card{width:min(780px,95vw)}
.invoice-lines{grid-column:1/-1;display:flex;flex-direction:column;gap:8px}
.invoice-line{display:grid;grid-template-columns:minmax(180px,1fr) 85px 105px 140px 38px;gap:8px;align-items:center}
.invoice-line input{min-width:0;width:100%;padding:10px;border:1px solid #dfe3dd;border-radius:6px;background:#fff;color:#27313a}
.invoice-remove{height:36px;border:1px solid #e3e5e0;border-radius:6px;background:#fff;color:#8c5547;font-size:18px;cursor:pointer}
.invoice-add-line{justify-self:start;border:0;background:transparent;color:#80682f;font-weight:600;cursor:pointer}
.invoice-preview{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid #e6e9e2;color:#67717a}
.invoice-preview strong{color:#27313a;font-family:Georgia,serif;font-size:25px}
@media(max-width:720px){
  .client-view-modal .invoice-section-heading{align-items:flex-start;flex-direction:column}
  .client-view-modal .invoice-totals{grid-template-columns:1fr}
  .client-view-modal .invoice-table thead{display:none}
  .client-view-modal .invoice-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:13px 4px;border-bottom:1px solid #e6e9e2}
  .client-view-modal .invoice-table td{display:block;padding:4px;border:0;overflow-wrap:anywhere}
  .client-view-modal .invoice-table td:first-child,.client-view-modal .invoice-table td:nth-child(2),.client-view-modal .invoice-table td:last-child{grid-column:1/-1}
  .invoice-line{grid-template-columns:1fr 1fr 1fr 38px;gap:6px}
  .invoice-line input[name="description"]{grid-column:1/4}
  .invoice-line input[name="quantity"]{grid-column:1}
  .invoice-line input[name="unit"]{grid-column:2}
  .invoice-line input[name="unitPrice"]{grid-column:3}
  .invoice-remove{grid-column:4;grid-row:2}
}