.contracts-section { --contract-navy:#073b57; --contract-ink:#102f49; --contract-teal:#078c82; --contract-mint:#eaf7f5; --contract-line:#c8dbe7; --contract-soft:#f4f8fb; color:var(--contract-ink); font-family:"Manrope",sans-serif; padding:0; overflow:hidden; }
.contracts-header,.contract-workspace-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 30px; border-bottom:1px solid var(--contract-line); background:linear-gradient(120deg,#fff 0%,#f4fbfb 65%,#e8f6f5 100%); }
.contracts-header h2 { margin:5px 0 4px; font-size:27px; color:#062d46; letter-spacing:-.02em; }.contracts-header p { margin:0; color:#526d82; }.contracts-eyebrow { color:#23708a; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.contracts-primary,.contracts-secondary,.contracts-open { border:1px solid transparent; border-radius:9px; font:inherit; font-weight:700; cursor:pointer; }.contracts-primary { background:var(--contract-teal); color:#fff; padding:12px 18px; box-shadow:0 6px 15px rgba(7,140,130,.15); }.contracts-secondary { background:#fff; color:var(--contract-ink); border-color:#bed3e1; padding:10px 15px; }.contracts-primary:hover { background:#06776f; }.contracts-secondary:hover { border-color:#6d9eb5; background:#f8fbfd; }
.contracts-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:22px 30px 0; }.contracts-kpis article { min-height:108px; padding:18px 20px; border:1px solid var(--contract-line); border-radius:12px; background:#fff; }.contracts-kpis span,.contracts-kpis small { display:block; color:#647d90; }.contracts-kpis strong { display:block; margin:7px 0 5px; color:#063b57; font-size:24px; }
.contracts-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) minmax(190px,240px) minmax(190px,240px); align-items:end; gap:12px; margin:18px 30px; padding:15px; border:1px solid var(--contract-line); border-radius:12px; background:var(--contract-soft); }.contracts-toolbar label,.contract-field { display:grid; gap:6px; }.contracts-toolbar label span,.contract-field>span { color:#3f5a70; font-size:12px; font-weight:700; }.contracts-toolbar input,.contracts-toolbar select,.contract-field input,.contract-field select,.contract-field textarea,.contract-line input,.contract-line select { width:100%; border:1px solid #bfd2df; border-radius:8px; background:#fff; color:#16364f; font:inherit; padding:11px 12px; outline:none; }.contracts-toolbar input:focus,.contracts-toolbar select:focus,.contract-field input:focus,.contract-field select:focus,.contract-field textarea:focus,.contract-line input:focus,.contract-line select:focus { border-color:var(--contract-teal); box-shadow:0 0 0 3px rgba(7,140,130,.1); }.contract-field b { color:#c2362b; }

.contract-support-assets { display:grid; gap:10px; padding:14px; border:1px solid #c9dde5; border-radius:10px; background:#f5fafb; }.contract-support-assets>span { color:#24465c; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }.contract-support-asset-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:210px; overflow:auto; }.contract-support-asset-options label { display:flex; align-items:flex-start; gap:9px; padding:10px; border:1px solid #d7e4ea; border-radius:8px; background:#fff; cursor:pointer; }.contract-support-asset-options label:has(input:checked) { border-color:var(--contract-teal); background:#eef9f7; }.contract-support-asset-options input { width:auto; margin-top:3px; accent-color:var(--contract-teal); }.contract-support-asset-options span { display:grid; gap:2px; }.contract-support-asset-options strong { color:#173b51; font-size:13px; }.contract-support-asset-options small { color:#668093; font-size:11px; }
.contracts-list { margin:0 30px 30px; }.contracts-table-wrap { overflow-x:auto; border:1px solid var(--contract-line); border-radius:12px; }.contracts-table { width:100%; border-collapse:collapse; background:#fff; }.contracts-table th { padding:12px 15px; background:#edf4f8; color:#536e83; font-size:11px; letter-spacing:.07em; text-align:left; text-transform:uppercase; }.contracts-table td { padding:16px 15px; border-top:1px solid #deebf1; vertical-align:middle; }.contracts-table td strong,.contracts-table td small { display:block; }.contracts-table td small { margin-top:4px; color:#688094; }.contracts-open { width:38px; height:38px; background:#eff8f7; border-color:#b9deda; color:var(--contract-teal); font-size:19px; }.contract-status-badge,.contract-status-pill { display:inline-flex; border-radius:99px; padding:6px 10px; background:#e8f1f7; color:#315a74; font-size:12px; font-weight:800; }.contract-status-badge[data-status="Activo"],.contract-status-badge[data-status="Firmado"] { background:#e2f5ef; color:#087664; }.contract-status-badge[data-status="Vencido"],.contract-status-badge[data-status="Anulado"] { background:#f8e8e6; color:#a64135; }.contracts-empty { display:grid; gap:6px; place-items:center; min-height:220px; padding:30px; border:1px dashed #b9cfdd; border-radius:12px; color:#647d90; text-align:center; }.contracts-empty.is-error { color:#9b3b33; }
.contract-workspace { background:#eef4f8; min-height:75vh; }.contract-workspace-header { position:sticky; top:0; z-index:10; padding:14px 24px; box-shadow:0 5px 18px rgba(17,54,77,.08); }.contract-heading-actions,.contract-workspace-actions { display:flex; align-items:center; gap:12px; }.contract-save-state { color:#647d90; font-size:12px; }.contract-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; max-width:1540px; margin:0 auto; padding:22px; }.contract-editor,.contract-summary-column { display:grid; align-content:start; gap:16px; }.contract-summary-column { position:sticky; top:88px; }
.contract-card { border:1px solid var(--contract-line); border-radius:13px; background:#fff; padding:20px; box-shadow:0 6px 20px rgba(28,68,91,.05); }.contract-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }.contract-card-title span { color:#29718a; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.contract-card-title h3 { margin:4px 0 0; color:#082f49; font-size:19px; }.contract-card-title small { color:#6b8395; }.contract-grid { display:grid; gap:15px; }.contract-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }.contract-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }.contract-span-two { grid-column:span 2; }.contract-field textarea { resize:vertical; line-height:1.5; }
.contract-vault-insight { display:flex; align-items:center; gap:18px; margin-top:17px; padding:14px 16px; border:1px solid #bee1dd; border-radius:10px; background:var(--contract-mint); color:#426579; font-size:13px; }.contract-vault-insight div { min-width:135px; }.contract-vault-insight strong,.contract-vault-insight span { display:block; }.contract-vault-insight strong { color:#06766e; font-size:20px; }.contract-vault-insight p { margin:0 0 0 auto; }
.contract-lines-head,.contract-line { display:grid; grid-template-columns:minmax(230px,2fr) minmax(105px,.8fr) 90px 120px minmax(130px,1fr) minmax(170px,1.25fr) 36px; gap:9px; align-items:start; }.contract-lines-head { padding:0 6px 8px; color:#658094; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.contract-line { padding:12px; border-top:1px solid #dce8ef; }.contract-line:first-child { border-top:0; }.contract-line label { display:grid; gap:5px; }.contract-line label>span { display:none; }.contract-line input,.contract-line select { min-width:0; padding:9px 10px; font-size:13px; }.contract-line .contract-line-subfield { margin-top:4px; background:#f7fafc; font-size:11px; }.contract-line-dates { grid-template-columns:1fr; }.contract-line-dates input+input { margin-top:4px; }.contract-line-remove { width:34px; height:34px; border:1px solid #e2c4c0; border-radius:8px; background:#fff; color:#a94b41; cursor:pointer; font-size:18px; }
.contract-summary-card h3 { margin:7px 0 18px; color:#0a3650; }.contract-summary-card dl { margin:0; }.contract-summary-card dl div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #dce8ef; }.contract-summary-card dt { color:#617b8e; }.contract-summary-card dd { margin:0; color:#073d58; font-weight:800; }.contract-summary-note { margin-top:14px; padding:14px; border-radius:10px; background:#edf7f5; }.contract-summary-note strong { color:#08776e; }.contract-summary-note p { margin:5px 0 0; color:#526f80; font-size:12px; line-height:1.45; }.contract-flow-card ol { list-style:none; margin:15px 0 0; padding:0; }.contract-flow-card li { display:flex; gap:11px; padding:10px 0; color:#7790a2; transition:color .2s ease; }.contract-flow-card li b { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; border-radius:50%; background:#e7eef3; transition:background .2s ease,color .2s ease; }.contract-flow-card li span,.contract-flow-card li strong,.contract-flow-card li small { display:block; }.contract-flow-card li small { margin-top:2px; }.contract-flow-card li.is-complete { color:#3f746f; }.contract-flow-card li.is-complete b { background:#dff3ee; color:#08776e; }.contract-flow-card li.is-current { color:#086f69; }.contract-flow-card li.is-current b { background:var(--contract-teal); color:#fff; box-shadow:0 0 0 4px rgba(7,140,130,.12); }
@media (max-width:1100px) { .contract-layout { grid-template-columns:1fr; }.contract-summary-column { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }.contract-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }.contract-lines-head { display:none; }.contract-line { grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #d5e4ec; border-radius:10px; margin-top:10px; }.contract-line label>span { display:block; color:#5e788c; font-size:11px; font-weight:700; }.contract-line-remove { justify-self:end; } }
@media (max-width:720px) { .contracts-header,.contract-workspace-header { align-items:stretch; flex-direction:column; }.contracts-kpis,.contracts-toolbar,.contract-grid-four,.contract-grid-two,.contract-summary-column,.contract-support-asset-options { grid-template-columns:1fr; }.contracts-kpis { padding:15px; }.contracts-toolbar,.contracts-list { margin:15px; }.contract-layout { padding:12px; }.contract-span-two { grid-column:span 1; }.contract-line { grid-template-columns:1fr; }.contract-workspace-actions { display:grid; grid-template-columns:1fr 1fr; } }
@media print { .module-nav,.app-header,.app-footer,.contract-workspace-header,.contract-flow-card,#addContractLineBtn,.contract-line-remove { display:none!important; }.contracts-directory { display:none!important; }.contract-workspace,.contract-layout { display:block!important; background:#fff; padding:0; }.contract-summary-column { position:static; margin-top:16px; }.contract-card { break-inside:avoid; box-shadow:none; }.contract-field input,.contract-field select,.contract-field textarea,.contract-line input,.contract-line select { border:0; padding-left:0; appearance:none; }.contract-lines-head { display:grid; } }

.contracts-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 15px 20px; padding:14px 4px 0; color:#60798b; font-size:12px; }
.contracts-pagination:empty { display:none; }
.contracts-pagination>div { display:flex; align-items:center; gap:6px; }
.contracts-pagination button { min-width:36px; min-height:36px; padding:7px 11px; border:1px solid #c5d9e3; border-radius:8px; background:#fff; color:#17445d; font:700 12px Manrope,sans-serif; cursor:pointer; }
.contracts-pagination button:hover:not(:disabled),.contracts-pagination button.active { border-color:#0b8f83; background:#e8f6f3; color:#08776e; }
.contracts-pagination button:disabled { opacity:.45; cursor:not-allowed; }
.contracts-pagination i { padding:0 2px; color:#7c909e; font-style:normal; }
@media (max-width:720px) { .contracts-pagination { align-items:flex-start; flex-direction:column; }.contracts-pagination>div { width:100%; overflow-x:auto; padding-bottom:4px; } }

/* Professional contract workflow */
.contract-field { position:relative; }.contract-field small { color:#718797; font-size:11px; line-height:1.35; }.contract-client-lookup { z-index:7; }.contract-lookup-menu { position:absolute; z-index:40; top:calc(100% + 5px); left:0; right:0; max-height:290px; overflow:auto; padding:6px; border:1px solid #a9c8d8; border-radius:10px; background:#fff; box-shadow:0 16px 35px rgba(16,51,72,.17); }.contract-lookup-menu button { display:grid; gap:3px; width:100%; padding:10px 11px; border:0; border-radius:7px; background:transparent; color:#123a53; font:inherit; text-align:left; cursor:pointer; }.contract-lookup-menu button:hover,.contract-lookup-menu button:focus { background:#e9f6f4; outline:none; }.contract-lookup-menu button strong { font-size:13px; }.contract-lookup-menu button span,.contract-lookup-empty { color:#6b8191; font-size:11px; }.contract-lookup-empty { padding:14px; text-align:center; }
.contract-send-button { border-color:#87c7c1; color:#05776f; }.contract-lines { display:grid; gap:13px; }.contract-line { display:block; padding:16px; border:1px solid #d2e2eb!important; border-radius:12px; background:#fbfdfe; }.contract-line-top { display:grid; grid-template-columns:130px minmax(270px,2.1fr) minmax(125px,.8fr) 90px 130px 36px; gap:10px; align-items:start; }.contract-line-terms { display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)) minmax(250px,1.45fr); gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid #dce8ef; align-items:end; }.contract-line label { position:relative; display:grid; gap:5px; }.contract-line label>span:first-child { display:block; color:#526f83; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.contract-product-menu { top:47px; }.contract-line-subfield { background:#fff!important; }.contract-coterm-field { grid-template-columns:1fr; }.contract-coterm-control { display:grid!important; grid-template-columns:auto minmax(125px,1fr); align-items:center; gap:8px; height:42px; color:inherit!important; font:inherit!important; letter-spacing:0!important; text-transform:none!important; }.contract-check { display:flex!important; align-items:center; gap:6px; min-height:42px; white-space:nowrap; color:#35556d!important; font-size:12px!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; }.contract-check input { width:16px!important; height:16px!important; margin:0; padding:0!important; accent-color:var(--contract-teal); }.contract-coterm-control>input { height:42px; }.contract-coterm-field input:disabled { opacity:.55; background:#edf2f5; }
@media (max-width:1250px) { .contract-line-top { grid-template-columns:120px minmax(230px,2fr) repeat(3,minmax(90px,1fr)) 36px; }.contract-line-terms { grid-template-columns:repeat(3,minmax(0,1fr)); }.contract-coterm-field { grid-column:span 2; } }
@media (max-width:820px) { .contract-line-top,.contract-line-terms { grid-template-columns:1fr 1fr; }.contract-line-product,.contract-coterm-field { grid-column:1 / -1; }.contract-line-remove { justify-self:end; }.contract-workspace-actions { display:grid; grid-template-columns:1fr; }.contract-workspace-actions button { width:100%; } }
@media (max-width:560px) { .contract-line-top,.contract-line-terms { grid-template-columns:1fr; }.contract-line-product,.contract-coterm-field { grid-column:auto; } }
.contract-line-top { grid-template-columns:minmax(170px,1fr) minmax(250px,1.7fr) 115px minmax(115px,.75fr) 82px 120px 36px; }
@media (max-width:1250px) { .contract-line-top { grid-template-columns:repeat(3,minmax(0,1fr)); }.contract-line-product { grid-column:span 2; } }
@media (max-width:820px) { .contract-line-top { grid-template-columns:1fr 1fr; }.contract-line-family,.contract-line-product { grid-column:1 / -1; } }
@media (max-width:560px) { .contract-line-top { grid-template-columns:1fr; }.contract-line-family,.contract-line-product { grid-column:auto; } }
.contract-field>span small { margin-left:5px; font-weight:500; letter-spacing:0; text-transform:none; }
.contract-line input[type="number"] { appearance:textfield; -moz-appearance:textfield; }.contract-line input[type="number"]::-webkit-inner-spin-button,.contract-line input[type="number"]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.contract-coterm-help { display:block!important; margin-top:2px; color:#718797!important; font-size:10px!important; font-weight:500!important; letter-spacing:0!important; line-height:1.3; text-transform:none!important; }
.contract-company-signature { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(360px,560px) auto; justify-content:start; align-items:end; gap:16px; margin-top:18px; padding:18px; border:1px solid #c8dce6; border-radius:11px; background:#f7fafc; }.contract-company-signature>div { align-self:center; }.contract-company-signature strong,.contract-company-signature span { display:block; }.contract-company-signature strong { color:#123c55; }.contract-company-signature span { margin-top:4px; color:#6b8191; font-size:12px; }.contract-company-signature canvas { width:100%; height:220px; border:1px solid #afc8d5; border-radius:8px; background:#fff; cursor:crosshair; touch-action:none; }
.contract-required-mark { color:#c2362b; }.contract-formalization-card { scroll-margin-top:92px; }.contract-formalization-card.is-signature-guided { animation:contract-signature-guide 2.2s ease; }.contract-field.is-required-missing input,.contract-company-signature.is-required-missing canvas { border-color:#cf4d42; box-shadow:0 0 0 3px rgba(207,77,66,.12); }.contract-company-signature.is-required-missing { border-color:#df9e98; background:#fff8f7; }
@keyframes contract-signature-guide { 0%,100% { box-shadow:0 6px 20px rgba(28,68,91,.05); } 22%,72% { border-color:#d1695f; box-shadow:0 0 0 4px rgba(209,105,95,.12),0 12px 28px rgba(28,68,91,.09); } }
@media (prefers-reduced-motion:reduce) { .contract-formalization-card.is-signature-guided { animation:none; border-color:#d1695f; } }
@media (max-width:820px) { .contract-formalization-card .contract-card-title { align-items:flex-start; flex-direction:column; }.contract-formalization-card .contract-card-title small { width:100%; }.contract-company-signature { grid-template-columns:minmax(0,1fr); gap:12px; padding:14px; }.contract-company-signature canvas { display:block; width:100%; min-width:0; height:180px; }.contract-company-signature .contracts-secondary { width:100%; justify-content:center; } }

/* Contract directory follows the project management summary and filter layout. */
#contractsDirectory { background: #f7f9fb; }
#contractsDirectory .contracts-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}
#contractsDirectory .contracts-kpis article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 4px;
  min-width: 0;
  min-height: 104px;
  padding: 14px 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c7d7e2;
  border-radius: 12px;
  box-shadow: none;
}
#contractsDirectory .contracts-kpis article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #2589b8;
}
#contractsDirectory .contracts-kpis article:nth-child(2)::before { background: #17a781; }
#contractsDirectory .contracts-kpis article:nth-child(3)::before { background: #efa91f; }
#contractsDirectory .contracts-kpis span { color: #587186; font-size: .74rem; font-weight: 650; letter-spacing: 0; }
#contractsDirectory .contracts-kpis strong {
  margin: 0;
  color: #102f42;
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: normal;
}
#contractsDirectory .contracts-kpis small { color: #6c8191; font-size: .76rem; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#contractsDirectory .contracts-toolbar {
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) minmax(200px, .8fr);
  align-items: end;
  gap: 16px;
  margin: 0 0 20px;
  padding: 18px 32px;
  border: 0;
  border-bottom: 1px solid #b8c9d8;
  border-radius: 0;
  background: #e8eef4;
}
#contractsDirectory .contracts-toolbar label { min-width: 0; margin: 0; gap: 7px; }
#contractsDirectory .contracts-toolbar label span { color: #42566b; font-size: 13px; font-weight: 700; }
#contractsDirectory .contracts-toolbar :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 52px;
  min-height: 52px;
  font-weight: 500;
}
#contractsDirectory .contracts-list { margin-inline: 32px; }
@media (max-width: 900px) {
  #contractsDirectory .contracts-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #contractsDirectory .contracts-toolbar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {

  #contractsDirectory .contracts-toolbar { padding-inline: 16px; }
  #contractsDirectory .contracts-list { margin-inline: 16px; }
}

@media (max-width: 480px) {
  #contractsDirectory .contracts-kpis { grid-template-columns: minmax(0, 1fr); }
}