:root {
  --ink: #1d2433;
  --muted: #647086;
  --line: #dde3eb;
  --panel: #ffffff;
  --page: #f5f7fa;
  --nav: #1f2937;
  --nav-soft: #334155;
  --accent: #0f766e;
  --accent-strong: #0b5d56;
  --warning: #b45309;
  --danger: #b91c1c;
  --ok: #15803d;
  --blue: #2563eb;
  --shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

/* Gestor profesional de expedientes */
.command-bar[hidden]{display:none!important}
.case-list-head,.case-detail-head,.tab-section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}.case-list-head h2,.case-detail-head h2{margin:3px 0 5px;color:#111;font-size:clamp(1.65rem,3vw,2.4rem);letter-spacing:-.035em}.case-list-head p,.case-detail-head p,.tab-section-head p{margin:0}.case-export-actions,.case-head-actions{display:flex;gap:10px;flex-wrap:wrap}.case-filter-bar{display:grid;grid-template-columns:minmax(260px,2fr) repeat(3,minmax(140px,1fr));gap:12px;padding:14px;margin-bottom:14px;background:#fff;border:1px solid #e7e3da;border-radius:14px;box-shadow:0 5px 20px rgba(20,17,10,.04)}.case-filter-bar label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:800;color:#716c61;text-transform:uppercase;letter-spacing:.08em}.case-filter-bar input,.case-filter-bar select{min-height:42px;border:1px solid #dcd7cc;border-radius:9px;padding:0 12px;background:#fbfaf7;color:#161616;text-transform:none;letter-spacing:normal;font:inherit}.case-table-wrap{border:1px solid #ded9cd;border-radius:14px;background:#fff;box-shadow:0 10px 32px rgba(20,17,10,.05)}.case-table{min-width:1500px}.case-table thead{background:#171717}.case-table th{padding:0;border:0}.case-table th button{width:100%;padding:14px 12px;border:0;background:none;color:#fff;text-align:left;font:inherit;font-size:.71rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.case-table th button:hover{color:#d4af58}.case-table td{padding:15px 12px;vertical-align:middle;border-bottom:1px solid #eeeae2;font-size:.83rem}.case-row{cursor:pointer;transition:background .15s ease}.case-row:hover,.case-row:focus{background:#fbf7ed;outline:none}.case-row td:first-child strong{color:#8a6a24}.traffic{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.78rem;font-weight:800}.traffic i{width:9px;height:9px;border-radius:50%;background:#999;box-shadow:0 0 0 4px rgba(0,0,0,.05)}.traffic-verde i{background:#25845d}.traffic-amarillo i{background:#d69a19}.traffic-rojo i{background:#c54141}.case-pagination{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;color:#746e62;font-size:.83rem}.case-pagination>div{display:flex;align-items:center;gap:6px}.page-button{width:34px;height:34px;border:1px solid #ded9cd;border-radius:8px;background:#fff;cursor:pointer}.page-button.active{background:#171717;color:#fff;border-color:#171717}.case-workspace{max-width:1500px}.breadcrumbs{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:#8a8376;font-size:.82rem}.breadcrumbs button{border:0;padding:0;background:none;color:#8a6a24;cursor:pointer;font:inherit}.case-title-line{display:flex;align-items:center;gap:14px}.case-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #ddd7ca;margin-bottom:24px}.case-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:13px 16px;white-space:nowrap;color:#6c675e;font-weight:750;cursor:pointer}.case-tabs button.active{color:#111;border-color:#b08d42}.case-tabs button span{margin-left:5px;padding:2px 7px;border-radius:99px;background:#efe8d6;font-size:.7rem}.case-tab-panel{min-height:380px}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.info-item{display:flex;flex-direction:column;gap:7px;padding:16px;border:1px solid #e4dfd4;border-radius:12px;background:#fff;min-width:0}.info-item span{color:#827b6e;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:750}.info-item strong{color:#1b1b1b;font-size:.92rem;overflow-wrap:anywhere}.client-records{display:grid;gap:16px}.detail-card{padding:24px;background:#fff;border:1px solid #e2ddd2;border-radius:15px}.detail-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.detail-card h3{margin:3px 0 0;font-size:1.3rem}.detail-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.legal-fields .info-item:nth-child(11),.legal-fields .info-item:last-child{grid-column:span 2}.case-documents,.internal-task-list{display:grid;gap:10px}.case-document{display:grid;grid-template-columns:48px minmax(220px,1fr) auto;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid #e4dfd4;border-radius:12px}.case-document>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.case-document>div:nth-child(2) span{color:#7c756a;font-size:.78rem}.file-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#1b1b1b;color:#d6b35d;font-size:.7rem;font-weight:900}.legal-timeline{position:relative;margin-left:94px;border-left:2px solid #d9c999;padding:6px 0}.timeline-event{position:relative;width:100%;display:grid;grid-template-columns:125px minmax(0,1fr) 20px;gap:18px;margin:0 0 16px;padding:18px 20px;text-align:left;border:1px solid #e3ded3;border-radius:13px;background:#fff;color:#222;cursor:pointer;box-shadow:0 5px 18px rgba(31,25,12,.04)}.timeline-event:hover{border-color:#b4944b;transform:translateX(3px)}.timeline-dot{position:absolute;left:-102px;top:25px;width:16px;height:16px;border:4px solid #fff;border-radius:50%;background:#b08d42;box-shadow:0 0 0 2px #b08d42}.timeline-date{font-weight:800;color:#2a2823}.timeline-date small,.timeline-body small{display:block;margin-top:4px;color:#817a6e;font-weight:500}.timeline-body{display:flex;flex-direction:column;gap:5px}.timeline-body>strong{font-size:1.04rem}.timeline-body>span:not(.timeline-type){color:#625d54;line-height:1.5}.timeline-type{width:max-content;padding:3px 8px;border-radius:5px;background:#eee6d4;color:#74591f;font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.timeline-arrow{align-self:center;font-size:1.7rem;color:#b08d42}.internal-task-list article{display:flex;align-items:center;gap:15px;padding:14px;background:#fff;border:1px solid #e4dfd4;border-radius:12px}.internal-task-list article>div{display:flex;flex:1;flex-direction:column;gap:3px}.internal-task-list article>div span{color:#80796e;font-size:.78rem}.event-record{padding:26px;background:#fff;border:1px solid #e1dbcf;border-radius:17px;box-shadow:0 12px 38px rgba(25,21,13,.06)}.event-record>header{display:flex;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid #e9e4da}.event-record h2{font-size:2rem;margin:8px 0}.event-record header p{margin:0;color:#766f63}.event-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:28px;padding:25px 0}.event-main>div>p{line-height:1.75;color:#504b43;white-space:pre-wrap}.event-main aside{display:grid;gap:8px}.event-section{padding:22px 0;border-top:1px solid #ece7de}.event-file{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#faf8f3;border-radius:9px}.comments-list,.audit-list{display:grid;gap:9px}.comments-list article,.audit-list div{padding:13px 15px;background:#faf8f3;border-radius:10px}.comments-list time,.audit-list span{display:block;color:#898174;font-size:.72rem}.comments-list p{margin:7px 0 0}.comment-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}.comment-form textarea{min-height:75px;padding:12px;border:1px solid #dcd6ca;border-radius:10px}.danger-button{background:#fff1f1!important;color:#a82c2c!important;border-color:#e8baba!important}
@media(max-width:1050px){.case-filter-bar{grid-template-columns:repeat(2,1fr)}.summary-grid,.detail-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.legal-timeline{margin-left:55px}.timeline-dot{left:-63px}.timeline-event{grid-template-columns:110px minmax(0,1fr) 16px}}
@media(max-width:680px){.case-list-head,.case-detail-head,.tab-section-head,.event-record>header{align-items:flex-start;flex-direction:column}.case-filter-bar,.summary-grid,.detail-fields,.event-main{grid-template-columns:1fr}.case-pagination{align-items:flex-start;flex-direction:column}.case-document{grid-template-columns:42px 1fr}.case-document .row-actions{grid-column:1/-1}.legal-timeline{margin-left:14px}.timeline-dot{left:-24px}.timeline-event{grid-template-columns:1fr;padding:15px}.timeline-date{font-size:.78rem}.timeline-arrow{display:none}.comment-form{grid-template-columns:1fr}.legal-fields .info-item:nth-child(11),.legal-fields .info-item:last-child{grid-column:auto}}
.case-filter-bar{grid-template-columns:minmax(280px,1fr) minmax(180px,260px)}
.case-table{min-width:1250px}
.case-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.simplified-event .timeline-body>.status{width:max-content;margin-top:5px}
.simplified-event-record .event-main{grid-template-columns:minmax(0,2fr) minmax(240px,1fr)}
@media(max-width:850px){.case-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.case-filter-bar,.case-summary-grid,.simplified-event-record .event-main{grid-template-columns:1fr}}
.payment-list-head,.payment-detail-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}.payment-list-head h2,.payment-detail-head h2{margin:3px 0 5px;color:#111;font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.035em}.payment-list-head p,.payment-detail-head p{margin:0}.payment-list-head select{min-width:170px;min-height:44px;border:1px solid #dcd7cc;border-radius:10px;padding:0 12px;background:#fff}.payment-row{cursor:pointer;transition:background .15s ease}.payment-row:hover,.payment-row:focus{background:#fbf7ed;outline:none}.payment-row td{vertical-align:middle}.payment-balance{color:#8a6a24}.payment-workspace{max-width:1400px}.payment-detail-card{padding:26px;background:#fff;border:1px solid #e1dbcf;border-radius:17px;box-shadow:0 12px 38px rgba(25,21,13,.06)}.payment-detail-head{padding-bottom:22px;border-bottom:1px solid #e9e4da}.payment-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:22px 0}.payment-detail-info{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:16px;padding:20px;background:#faf8f3;border-radius:13px}.payment-detail-info>div{display:flex;flex-direction:column;gap:8px}.payment-detail-info span,.payment-movement-list span{color:#817a6e;font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.payment-detail-info p{margin:0;line-height:1.65;white-space:pre-wrap}.payment-movements{padding:26px 0}.payment-count{padding:6px 11px;border-radius:99px;background:#eee6d4;color:#75591f;font-size:.78rem;font-weight:800}.payment-movement-list{display:grid;gap:10px}.payment-movement-list article{display:grid;grid-template-columns:42px repeat(3,minmax(0,1fr));align-items:center;gap:16px;padding:15px 18px;border:1px solid #e4dfd4;border-radius:12px;background:#fff}.payment-movement-list article>div:not(.movement-index){display:flex;flex-direction:column;gap:5px}.movement-index{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#171717;color:#d6b35d;font-weight:900}.payment-movement-list strong{color:#1b1b1b}.payment-detail-card>.text-button{margin-top:4px}
@media(max-width:850px){.payment-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-movement-list article{grid-template-columns:42px repeat(2,minmax(0,1fr))}.payment-movement-list article>div:last-child{grid-column:2/-1}}
@media(max-width:680px){.payment-list-head,.payment-detail-head{align-items:flex-start;flex-direction:column}.payment-detail-summary,.payment-detail-info{grid-template-columns:1fr}.payment-movement-list article{grid-template-columns:42px 1fr}.payment-movement-list article>div:last-child{grid-column:auto}}

/* Análisis de ingresos (pestaña dentro de Pagos) */
.payment-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #ddd7ca;margin-bottom:20px}
.payment-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:12px 16px;white-space:nowrap;color:#6c675e;font-weight:750;cursor:pointer;font:inherit}
.payment-tabs button.active{color:#111;border-color:#b08d42}
.payment-panel[hidden]{display:none}
.income-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.income-controls label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:800;color:#716c61;text-transform:uppercase;letter-spacing:.08em}
.income-controls select{min-height:42px;border:1px solid #dcd7cc;border-radius:9px;padding:0 12px;background:#fff;font:inherit;text-transform:none;letter-spacing:normal}
.income-controls #incomeExportBtn{margin-left:auto;align-self:flex-end}
.payment-summary.income-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.income-kpis strong{font-size:20px}
.income-kpis small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:600}
.income-chart-wrap{padding:18px 16px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);margin-bottom:16px;overflow-x:auto}
.income-chart{display:block;height:280px}
.income-chart .bar{fill:var(--accent);transition:fill .15s ease;cursor:default}
.income-chart .bar:hover{fill:#b08d42}
.income-chart .grid-line{stroke:#e7e3da;stroke-width:1}
.income-chart .axis-label{fill:#8a8376;font-size:11px}
.income-chart .bar-label{fill:#647086;font-size:11px}
.income-chart .bar-value{fill:#1d2433;font-size:10px;font-weight:700}
.income-breakdowns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.income-breakdowns>div{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.income-breakdowns h3{margin:0 0 12px;font-size:1rem}
.income-bd-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:9px 0;border-bottom:1px solid #eeeae2;font-size:.86rem}
.income-bd-row:last-child{border-bottom:0}
.income-bd-row span:nth-child(2){color:var(--muted)}
.income-bd-row span:last-child{font-weight:700;text-align:right}
.income-delta-up{color:#15803d;font-weight:700}
.income-delta-down{color:#b91c1c;font-weight:700}
.income-delta-flat{color:var(--muted)}
@media(max-width:900px){.payment-summary.income-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.income-breakdowns{grid-template-columns:1fr}.income-controls #incomeExportBtn{margin-left:0;width:100%}}

/* Facturación: Resumen / Gastos (crm-facturacion.js) */
.payment-tabs button[hidden]{display:none}
.income-controls input[type=date]{min-height:42px;border:1px solid #dcd7cc;border-radius:9px;padding:0 10px;background:#fff;font:inherit;text-transform:none;letter-spacing:normal}
.income-controls label[hidden]{display:none}
.payment-summary.billing-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.billing-kpis strong,.billing-exp-totals strong{font-size:20px}
.billing-kpis small,.billing-exp-totals small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:600}
.billing-kpis article.is-positive strong,.billing-amount.is-positive,.billing-case-grid .is-positive strong{color:var(--ok)}
.billing-kpis article.is-negative strong,.billing-amount.is-negative,.billing-case-grid .is-negative strong{color:var(--danger)}
.billing-amount{font-weight:700;text-align:right;white-space:nowrap}
.billing-chart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.billing-chart-head h3{margin:0;font-size:1rem}
.billing-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);font-weight:700}
.billing-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.billing-legend .lg-income::before{background:var(--accent)}
.billing-legend .lg-expense::before{background:#c2410c}
.billing-legend .lg-balance::before{background:var(--blue);height:3px;vertical-align:3px}
.billing-chart .bar-income{fill:var(--accent)}
.billing-chart .bar-expense{fill:#c2410c}
.billing-chart .zero-line{stroke:#b8b2a6;stroke-width:1}
.billing-chart .balance-line{fill:none;stroke:var(--blue);stroke-width:2.5}
.billing-chart .balance-dot{fill:#fff;stroke:var(--blue);stroke-width:2}
.billing-filters{margin-top:4px}
.payment-summary.billing-exp-totals{grid-template-columns:repeat(3,minmax(0,1fr))}
.small-action.danger-text{color:var(--danger)}
.field.billing-check label{display:inline-flex;align-items:center;gap:10px;min-height:40px;color:var(--ink);font-size:14px;cursor:pointer}
.field.billing-check input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.field.billing-check input[type=checkbox]:disabled{cursor:not-allowed}
.field.billing-check label:has(input:disabled){color:var(--muted);cursor:not-allowed}
.field[hidden]{display:none}
.billing-form-error{color:var(--danger);min-height:1em}
.billing-case-box{margin-top:26px}
.billing-case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-modal .field{margin-top:12px}
@media(max-width:1100px){.payment-summary.billing-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.payment-summary.billing-kpis,.payment-summary.billing-exp-totals,.billing-case-grid{grid-template-columns:1fr}}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--nav);
  color: #eef4fb;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e2b84d;
  color: #172033;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.sidebar-footer {
  color: #bac7d7;
  font-size: 13px;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #d8e2ee;
  text-align: left;
}

.nav-item span {
  width: 22px;
  text-align: center;
}

.nav-item.active,
.nav-item:hover {
  background: var(--nav-soft);
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.workspace {
  padding: 24px;
  overflow: hidden;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  min-width: 320px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
}

.button,
.text-button,
.icon-button {
  border: 0;
  border-radius: 8px;
}

.button {
  min-height: 42px;
  padding: 0 16px;
  font-weight: 700;
}

.button.primary {
  background: var(--accent);
  color: #fff;
}

.button.primary:hover {
  background: var(--accent-strong);
}

.button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.text-button {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

.icon-button {
  width: 34px;
  height: 34px;
  background: #eef2f6;
  font-size: 22px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

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

.metric,
.panel,
.table-wrap,
.case-card,
.document-card,
.kanban-column {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  min-height: 116px;
  padding: 18px;
  display: grid;
  align-content: space-between;
}

.metric span {
  color: var(--muted);
  font-size: 14px;
}

.metric strong {
  font-size: 36px;
}

.metric.urgent {
  border-color: #f3c77b;
}

.two-column {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}

.panel {
  padding: 18px;
}

.panel-head,
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.list-toolbar select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.timeline,
.case-stack {
  display: grid;
  gap: 10px;
}

.timeline-item,
.mini-case {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.timeline-item strong,
.mini-case strong {
  display: block;
  margin-bottom: 4px;
}

.timeline-item span,
.mini-case span,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  text-align: left;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: #fbfcfe;
}

/* Cabecera de la tabla de expedientes: el rótulo va dentro de un <button> que no hereda el
   color del <th>, y quedaba blanco sobre fondo claro (solo legible al pasar el mouse). */
.case-table thead { background: #fbfcfe; }
.case-table th button { color: var(--muted); }
.case-table th button:hover,
.case-table th button:focus-visible { color: #8a6a24; }

/* Etapa procesal en el Resumen del expediente: misma tarjeta que los demás datos (cae en la
   celda libre de la cuadrícula); solo conserva los saltos de línea que escriba el usuario. */
.case-summary-grid .case-stage-item strong { white-space: pre-wrap; }

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

.status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #eef2f6;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.status.Activo,
.status.Abierto,
.status.Hecho,
.status.Pagado {
  background: #dcfce7;
  color: var(--ok);
}

.status.Prospecto,
.status.En-revisión,
.status.En-revision,
.status.En-proceso,
.status.Parcial {
  background: #dbeafe;
  color: var(--blue);
}

.status.Pendiente {
  background: #fef3c7;
  color: var(--warning);
}

.status.Alta,
.status.Urgente {
  background: #fee2e2;
  color: var(--danger);
}

.status.Media {
  background: #fef3c7;
  color: var(--warning);
}

.status.Baja {
  background: #e0f2fe;
  color: #0369a1;
}

.status.Cerrado {
  background: #eef0f3;
  color: #596270;
}

.status.Programada {
  background: #dbeafe;
  color: var(--blue);
}

.status.Cancelado,
.status.Anulado {
  background: #fee2e2;
  color: var(--danger);
}

.case-notes {
  grid-column: 1 / -1;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.document-card .row-actions {
  justify-content: flex-start;
}
.doc-meta .status {
  justify-self: start;
}

.small-action {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  min-height: 32px;
  padding: 0 10px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.case-card,
.document-card {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.case-card header,
.document-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.case-meta,
.doc-meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.kanban-column {
  padding: 14px;
  min-height: 360px;
}

.kanban-column h2 {
  margin-bottom: 12px;
}

.task-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  margin-bottom: 10px;
}

.task-card strong {
  display: block;
  margin-bottom: 8px;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.payment-summary article {
  min-height: 92px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.payment-summary span {
  color: var(--muted);
  font-size: 13px;
}

.payment-summary strong {
  font-size: 24px;
}

.modal {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.modal::backdrop {
  background: rgba(15, 23, 42, .45);
}

.modal form {
  padding: 20px;
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
}

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

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 9px 10px;
}

.field textarea {
  resize: vertical;
  min-height: 92px;
}

.empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fbfcfe;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 14px;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav-list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: auto;
  }

  .nav-item {
    justify-content: center;
    white-space: nowrap;
  }

  .nav-item span {
    display: none;
  }

  .topbar,
  .top-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    min-width: 0;
  }

  .metric-grid,
  .two-column,
  .kanban,
  .payment-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace {
    padding: 16px;
  }

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

  .metric strong {
    font-size: 30px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Cuentas de honorarios y abonos */
.payment-modal {
  width: min(980px, calc(100vw - 32px));
}

.payment-ledger {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.asesoria-quickpick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: var(--panel, #f6efdf);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.asesoria-quickpick small {
  color: var(--muted);
  font-size: 12px;
}

.payment-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.payment-ledger-head h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 17px;
}

.payment-ledger-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.payment-ledger-rows {
  display: grid;
  gap: 10px;
}

.payment-entry-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 38px;
  gap: 10px;
  align-items: end;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.payment-entry-row label {
  display: grid;
  gap: 5px;
}

.payment-entry-row label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.payment-entry-row input,
.payment-entry-row select {
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.remove-payment-entry {
  width: 38px;
  height: 39px;
  border: 0;
  border-radius: 9px;
  color: var(--danger);
  background: #feeceb;
  font-size: 22px;
}

.payment-ledger-summary {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--accent-pale);
  font-size: 13px;
}

.payment-ledger-summary strong {
  margin-left: 6px;
  color: var(--ink);
}

.payment-entry-row { position: relative; }
.payment-entry-row label.full { grid-column: 1 / -1; }
.payment-entry-row textarea {
  width: 100%;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  resize: vertical;
}
.payment-entry-row input[type="file"] { font-size: 12px; }
.payment-entry-row.locked {
  grid-template-columns: 1fr 38px;
  background: #eef2f7;
  align-items: start;
}
.payment-entry-locked {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  font-size: 13px;
}
.payment-entry-locked .full { grid-column: 1 / -1; }
.payment-entry-locked span { color: var(--muted); font-size: 11px; font-weight: 700; display: block; }
.payment-entry-locked p { margin: 2px 0 0; }

.payment-movement-list article > div.full { grid-column: 1 / -1; }
.payment-movement-list .movement-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.payment-movement-list .movement-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.empty.compact {
  padding: 13px;
  font-size: 13px;
}

.payment-history {
  min-width: 190px;
}

.payment-history summary {
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--accent-strong);
  background: var(--accent-pale);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.payment-history-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.payment-history-list > div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #f8fafc;
  white-space: nowrap;
}

.payment-history-list span,
.payment-history-list strong {
  font-size: 12px;
}

.payment-history-list small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 720px) {
  .payment-ledger-head {
    flex-direction: column;
  }

  .payment-entry-row {
    grid-template-columns: 1fr 1fr 38px;
  }

  .payment-entry-row label:nth-child(3) {
    grid-column: 1 / 3;
  }

  .payment-entry-row .remove-payment-entry {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .payment-ledger-summary {
    flex-direction: column;
    gap: 6px;
  }
}

/* Seguridad, usuarios, permisos, bitácora y papelera */
.auth-pending .app-shell {
  visibility: hidden;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(197, 160, 79, .2), transparent 28%),
    linear-gradient(145deg, #101a29, #1b3150);
}

.login-screen[hidden] {
  display: none;
}

.login-card {
  width: min(430px, 100%);
  padding: 34px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

.login-legal {
  width: min(430px, 100%);
  margin: 16px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
}

.login-legal a {
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.login-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin-bottom: 16px;
}

.login-card h1 {
  margin: 5px 0 8px;
}

.login-card > p:not(.eyebrow, .form-message) {
  color: var(--muted);
  margin-bottom: 22px;
}

.login-card label,
.admin-modal label,
.compact-modal label {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  font-weight: 700;
  color: var(--ink);
}

.login-card input,
.admin-modal input,
.admin-modal select,
.compact-modal input,
.admin-filters input,
.admin-filters select,
.admin-heading input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}

.login-card > .button {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.password-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.password-field input {
  border: 0;
  border-radius: 0;
}

.password-field button {
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 12px;
  background: #f7f8fa;
  color: var(--navy);
  cursor: pointer;
  font-weight: 700;
}

.form-message {
  min-height: 20px;
  color: #a33434;
  font-size: .9rem;
}

.sidebar-footer {
  flex-wrap: wrap;
}

.sidebar-footer .text-button {
  width: 100%;
  margin-top: 6px;
  color: #fff;
  text-align: left;
}

.admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-heading h2 {
  margin: 2px 0 0;
}

.admin-heading > input {
  max-width: 360px;
}

.admin-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 220px 190px;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
}

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

.protected-badge {
  display: inline-flex;
  margin-top: 5px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f8edd1;
  color: #795a15;
  font-size: .72rem;
  font-weight: 800;
}

.roles-heading {
  margin: 26px 0 12px;
}

.roles-heading h3,
.roles-heading p {
  margin: 0;
}

.role-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.role-card div {
  display: grid;
  gap: 4px;
}

.role-card span {
  color: var(--muted);
  font-size: .8rem;
}

.status.active {
  background: #e7f6ed;
  color: #277544;
}

.status.inactive {
  background: #eceff3;
  color: #59616d;
}

.status.blocked {
  background: #fae5e5;
  color: #9b3030;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.settings-grid .panel {
  padding: 24px;
}

.admin-modal {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.compact-modal {
  width: min(520px, calc(100vw - 32px));
}

.admin-modal form,
.compact-modal form {
  padding: 24px;
}

.permission-matrix {
  max-height: 430px;
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.permission-matrix table {
  min-width: 1060px;
  font-size: .78rem;
}

.permission-matrix th,
.permission-matrix td {
  padding: 8px;
  text-align: center;
}

.permission-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
}

.permission-select {
  min-width: 84px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

@media (max-width: 800px) {
  .admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filters,
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Rediseño institucional 2026 */
:root {
  --ink: #092244;
  --muted: #657184;
  --line: #e4e9ef;
  --panel: #ffffff;
  --page: #eef3f8;
  --nav: #0a2342;
  --nav-soft: #153557;
  --accent: #caa864;
  --accent-strong: #b38d45;
  --accent-pale: #f4ead5;
  --warning: #b36b14;
  --danger: #b42318;
  --ok: #14804a;
  --blue: #2366b1;
  --shadow: 0 18px 38px rgba(16, 38, 64, .09);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 6%, rgba(202, 168, 100, .08), transparent 24rem),
    var(--page);
}

svg {
  display: block;
}

.app-shell {
  grid-template-columns: 292px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 0 24px;
  gap: 0;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 34%),
    var(--nav);
}

.brand {
  min-height: 205px;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px 25px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.brand-mark {
  position: relative;
  width: 76px;
  height: 76px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  letter-spacing: -.08em;
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 30px;
  top: 19px;
  border-bottom: 3px solid var(--accent);
}

.brand-mark::before {
  left: 13px;
  border-left: 3px solid var(--accent);
  transform: skewY(38deg);
}

.brand-mark::after {
  right: 13px;
  border-right: 3px solid var(--accent);
  transform: skewY(-38deg);
}

.brand-mark span {
  position: relative;
  z-index: 1;
  width: auto;
  padding-top: 4px;
  background: var(--nav);
}

.brand-copy strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .01em;
}

.brand-copy span {
  margin-top: 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .24em;
}

.brand-logo {
  width: 116px;
  height: 116px;
  display: block;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.05);
  clip-path: inset(3px);
  transform: scale(1.025);
}

.nav-list {
  gap: 0;
  padding: 22px 0;
}

.nav-item {
  position: relative;
  min-height: 58px;
  padding: 0 28px;
  gap: 16px;
  border-radius: 0;
  color: #f4f7fb;
  font-size: 16px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, padding .18s ease;
}

.nav-item:hover {
  padding-left: 32px;
  background: rgba(255, 255, 255, .06);
}

.nav-item.active {
  background: var(--accent);
  color: var(--nav);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  right: 0;
  width: 4px;
  height: 100%;
  background: #fff;
  opacity: .75;
}

.nav-item span.nav-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
}

.nav-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon-money {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 700;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 24px 0;
  padding: 18px 0 0;
  color: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .1);
}

.storage-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #67c990;
  box-shadow: 0 0 0 4px rgba(103, 201, 144, .12);
}

.workspace {
  min-width: 0;
  padding: 42px clamp(28px, 3.2vw, 58px) 52px;
  overflow: visible;
}

.topbar {
  min-height: 88px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

h1 {
  color: var(--ink);
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.12;
}

.welcome-message {
  margin: 9px 0 0;
  color: #6e747c;
  font-size: 16px;
}

.user-chip {
  min-width: 230px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  border: 1px solid rgba(202, 168, 100, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 24px rgba(18, 39, 63, .08);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(202, 168, 100, .5);
  box-shadow: 0 14px 30px rgba(18, 39, 63, .13);
}

.user-chip:focus-visible {
  outline: 3px solid rgba(202, 168, 100, .36);
  outline-offset: 3px;
}

.account-menu {
  position: relative;
  z-index: 40;
}

.account-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.user-chip[aria-expanded="true"] .account-chevron {
  transform: rotate(180deg);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 310px;
  padding: 10px;
  border: 1px solid rgba(202, 168, 100, .24);
  border-radius: 17px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 54px rgba(18, 39, 63, .2);
  animation: accountMenuIn .16s ease-out;
}

.account-dropdown[hidden] {
  display: none;
}

@keyframes accountMenuIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.account-menu-head {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
}

.account-menu-head span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.account-menu-head small {
  color: var(--muted);
  font-size: 12px;
}

.account-menu-item,
.account-dropdown .nav-item {
  width: 100%;
  min-height: 58px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-menu-item:hover,
.account-dropdown .nav-item:hover,
.account-dropdown .nav-item.active {
  background: #f4f0e7;
  color: var(--nav);
}

.account-menu-item > span:not(.account-menu-icon) {
  width: auto;
  display: grid !important;
  flex: 1 1 auto;
  gap: 2px;
  text-align: left;
}

.account-menu-item strong,
.account-menu-item small {
  display: block;
}

.account-menu-item strong {
  font-size: 14px;
}

.account-menu-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.account-menu-icon {
  width: 36px;
  height: 36px;
  display: grid !important;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 10px;
  background: #edf1f5;
  color: var(--nav);
}

.account-menu-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-menu-divider {
  height: 1px;
  margin: 7px 9px;
  background: var(--line);
}

.account-logout {
  color: #923d3d;
}

.account-logout .account-menu-icon {
  color: #923d3d;
  background: #faeeee;
}

.user-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border-radius: 50%;
  color: #fff;
  background: var(--nav);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.user-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.user-chip small,
.user-chip strong {
  display: block;
}

.user-chip small {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.user-chip strong {
  font-size: 15px;
}

.command-bar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}

.search-box {
  width: min(510px, 48vw);
  min-width: 260px;
  height: 45px;
  border-color: transparent;
  border-radius: 12px;
  box-shadow: 0 7px 22px rgba(18, 39, 63, .06);
}

.search-box > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: #7a8695;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.button {
  min-height: 45px;
  border-radius: 11px;
}

.button.primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--nav);
}

.button.primary:hover {
  background: var(--nav-soft);
}

.button.secondary {
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(18, 39, 63, .05);
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: clamp(15px, 2vw, 26px);
  margin-bottom: 30px;
}

.metric {
  min-height: 228px;
  padding: 30px 20px 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.metric:hover {
  transform: translateY(-4px);
  border-color: rgba(202, 168, 100, .48);
  box-shadow: 0 22px 42px rgba(16, 38, 64, .13);
}

.metric-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--accent);
}

.metric-icon svg {
  width: 55px;
  height: 55px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric strong {
  margin-bottom: 6px;
  color: var(--nav);
  font-size: 46px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric .metric-label {
  color: #5f6470;
  font-size: 18px;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, .95fr);
  gap: clamp(18px, 2.4vw, 34px);
}

.panel,
.table-wrap,
.case-card,
.document-card,
.kanban-column,
.payment-summary article {
  border-color: rgba(255, 255, 255, .82);
  border-radius: 18px;
}

.panel {
  min-height: 224px;
  padding: 29px 32px;
}

.panel-head {
  align-items: flex-end;
  margin-bottom: 24px;
}

.panel h2 {
  color: var(--ink);
  font-size: 23px;
}

.panel-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.text-button {
  padding: 7px 0;
  color: var(--accent-strong);
}

.timeline,
.activity-list {
  display: grid;
  gap: 12px;
}

.timeline-item,
.activity-item {
  position: relative;
  min-height: 59px;
  padding: 9px 12px 9px 47px;
  border: 0;
  border-radius: 12px;
  background: #f8fafc;
}

.timeline-item::before,
.activity-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 23px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-item strong,
.activity-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 14px;
}

.timeline-item span,
.activity-item span {
  color: var(--muted);
  font-size: 12px;
}

.activity-item::before {
  border: 0;
  background: var(--accent-pale);
  box-shadow: inset 0 0 0 5px #fff;
}

.empty {
  border-color: #dce3eb;
  border-radius: 12px;
  background: #f8fafc;
}

.card-grid,
.document-grid {
  gap: 18px;
}

.case-card,
.document-card {
  padding: 20px;
}

.kanban {
  gap: 18px;
}

.kanban-column {
  padding: 18px;
}

.modal {
  border-radius: 18px;
}

.field input,
.field select,
.field textarea,
.list-toolbar select {
  border-radius: 10px;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .brand {
    min-height: 180px;
  }

  .workspace {
    padding-left: 28px;
    padding-right: 28px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .metric {
    min-height: 190px;
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .brand,
  .sidebar-footer {
    display: none;
  }

  .nav-list {
    display: flex;
    gap: 4px;
    padding: 9px;
    overflow-x: auto;
  }

  .nav-item {
    min-width: max-content;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
  }

  .nav-item:hover {
    padding-left: 13px;
  }

  .nav-item.active::after {
    display: none;
  }

  .nav-item span.nav-icon {
    display: grid;
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .nav-icon svg {
    width: 19px;
    height: 19px;
  }

  .workspace {
    padding-top: 28px;
  }

  .topbar {
    flex-direction: row;
    align-items: flex-start;
  }

  .command-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    flex-direction: row;
  }

  .search-box {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .workspace {
    padding: 22px 16px 36px;
  }

  .topbar {
    min-height: auto;
  }

  .user-chip {
    min-width: 0;
    min-height: 48px;
    padding: 7px;
  }

  .user-chip .user-copy {
    display: none;
  }

  .account-dropdown {
    width: min(310px, calc(100vw - 32px));
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .welcome-message {
    font-size: 14px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .button {
    padding: 0 10px;
    font-size: 13px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .metric {
    min-height: 160px;
    padding: 20px 10px;
    border-radius: 17px;
  }

  .metric-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
  }

  .metric-icon svg {
    width: 40px;
    height: 40px;
  }

  .metric strong {
    font-size: 36px;
  }

  .metric .metric-label {
    font-size: 15px;
  }

  .panel {
    padding: 22px 20px;
  }

  .panel h2 {
    font-size: 19px;
  }
}
.internal-tasks-dashboard-card {
  min-height: 0;
  margin-top: clamp(18px, 2.4vw, 34px);
}

.internal-tasks-dashboard-card[hidden] {
  display: none;
}

.internal-tasks-dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 18px;
}

.internal-tasks-dashboard-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--nav);
  background: var(--accent-pale);
  font-size: .78rem;
}

.internal-tasks-dashboard-summary strong {
  font-size: 1rem;
}

.internal-tasks-dashboard-summary .internal-tasks-overdue-summary {
  color: #9b2c23;
  background: #fae9e7;
}

.internal-tasks-dashboard-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.internal-task-dashboard-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  color: inherit;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.internal-task-dashboard-item:hover,
.internal-task-dashboard-item:focus-visible {
  border-color: rgba(202, 168, 100, .62);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 38, 64, .08);
  transform: translateY(-1px);
}

.internal-task-dashboard-marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(202, 168, 100, .16);
}

.internal-task-dashboard-item-overdue .internal-task-dashboard-marker {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);
}

.internal-task-dashboard-item-today .internal-task-dashboard-marker {
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(179, 107, 20, .13);
}

.internal-task-dashboard-item-no-date .internal-task-dashboard-marker {
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(90, 105, 125, .12);
}

.internal-task-dashboard-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.internal-task-dashboard-case,
.internal-task-dashboard-body strong,
.internal-task-dashboard-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internal-task-dashboard-case {
  color: #9b7529;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.internal-task-dashboard-body strong {
  color: var(--nav);
  font-size: .9rem;
}

.internal-task-dashboard-meta {
  color: var(--muted);
  font-size: .74rem;
}

.internal-task-dashboard-arrow {
  color: var(--accent-strong);
  font-size: 1.45rem;
  line-height: 1;
}

.case-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.case-archive-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e0e5eb;
  border-radius: 12px;
  background: #f3f6f9;
}

.case-archive-switch button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.case-archive-switch button:hover {
  color: var(--nav);
}

.case-archive-switch button.active {
  color: var(--nav);
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 38, 64, .1);
}

.case-archive-switch button span {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--nav);
  background: var(--accent-pale);
  font-size: .7rem;
  text-align: center;
}

@media (max-width: 1050px) {
  .internal-tasks-dashboard-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .internal-tasks-dashboard-list {
    grid-template-columns: 1fr;
  }

  .case-list-actions {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
  }

  .case-archive-switch,
  .case-archive-switch button {
    flex: 1;
  }

  .case-archive-switch button {
    justify-content: center;
  }
}

/* ETAPA 8 — sección Google Drive */
.drive-admin{display:grid;gap:20px;max-width:900px}
.drive-admin-head h2{margin:8px 0 4px;font-size:1.4rem}
.drive-admin-head p{margin:0;color:#766f63;max-width:60ch}
.drive-admin-head .status{margin-bottom:6px}
.drive-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.drive-admin-actions{display:flex;flex-wrap:wrap;gap:10px}
.drive-admin-note{margin:0;color:#6b6459;font-size:.86rem;min-height:1.2em}
.status.Activo{background:#e6f4ec;color:#1c7a4d}
.status.Inactivo{background:#f3efe6;color:#7a7161}
.drive-admin-diag{margin:0;padding:12px 14px;background:#f7f4ec;border:1px solid #e2ddd0;border-radius:10px;font-size:.78rem;white-space:pre-wrap;overflow-x:auto;color:#4a453c}
.drive-admin-alert{margin:0;padding:12px 16px;background:#fdf1dc;border:1px solid #e6c37a;border-left:4px solid #d99a2b;border-radius:10px;color:#7a5a12;font-size:.9rem;line-height:1.45}
.drive-admin-alert strong{color:#6b4e0f}
.drive-admin-alert .drive-admin-alert-detail{display:block;margin-top:6px;font-size:.78rem;color:#94795a;word-break:break-word}
.drive-failed{display:grid;gap:8px;padding-top:8px;border-top:1px solid #e8e3d6}
.drive-failed h3{margin:4px 0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.drive-failed p.muted{margin:0;font-size:.84rem}
.drive-failed-count{display:inline-flex;min-width:22px;height:22px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#f3efe6;color:#7a7161;font-size:.8rem;font-weight:700}
.drive-failed-scroll{overflow-x:auto}
.drive-failed-table{width:100%;border-collapse:collapse;font-size:.86rem}
.drive-failed-table th,.drive-failed-table td{padding:8px 10px;text-align:left;border-bottom:1px solid #eee7d8;vertical-align:top}
.drive-failed-table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#8a8172}
.drive-failed-actions{display:flex;flex-wrap:wrap;gap:6px}
.drive-failed-actions .button{padding:5px 10px;font-size:.8rem}

/* ============================================================================
   ETAPA 8b — Compatibilidad responsive (móvil / tablet / laptop / escritorio)
   Bloque final: gana sobre las reglas previas por orden de cascada.
   ============================================================================ */
html, body { max-width: 100%; }
/* overflow-x: clip (no 'hidden') evita que se rompa `position: sticky` de la barra lateral */
.app-shell { max-width: 100%; overflow-x: clip; }
.app-shell, .sidebar, .workspace, .nav-list, .view, .case-workspace, .payment-workspace { min-width: 0; }

/* Tablas anchas: el scroll horizontal vive DENTRO del contenedor, nunca desborda la página */
.table-wrap, .case-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: 0; z-index: 40; height: auto;
    max-width: 100%; overflow: visible; padding: 0;
  }
  .brand, .sidebar-footer { display: none; }
  .nav-list {
    display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 10px;
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .nav-item {
    flex: 0 0 auto; min-width: auto; min-height: 42px;
    padding: 0 14px; border-radius: 999px; font-size: 13px; white-space: nowrap;
  }
  .nav-item:hover { padding-left: 14px; }
  .nav-item span.nav-icon { display: none; }
  .workspace { padding: 20px 15px 40px; overflow: visible; max-width: 100%; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; min-height: auto; }
  .account-menu { align-self: flex-end; }
  .command-bar { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; min-width: 0; }
  .top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .top-actions > * { flex: 1 1 auto; }
}

@media (max-width: 820px) {
  .summary-grid, .case-summary-grid, .detail-fields,
  .dashboard-panels, .two-column, .kanban, .payment-summary,
  .payment-detail-summary, .payment-detail-info, .settings-grid,
  .drive-admin-grid, .internal-tasks-dashboard-summary, .pending-dashboard-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .metric { min-height: 130px; padding: 16px 10px; border-radius: 16px; }
  .metric strong { font-size: 26px; }
  .metric-icon { width: 40px; height: 40px; margin-bottom: 6px; }
  .metric-icon svg { width: 34px; height: 34px; }
  .case-list-head, .case-detail-head, .payment-list-head, .payment-detail-head,
  .tab-section-head, .event-record > header, .pending-module-head, .drive-admin-head {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .case-head-actions, .case-export-actions, .drive-admin-actions { width: 100%; }
  .case-filter-bar { grid-template-columns: minmax(0, 1fr) !important; }
  .case-document { grid-template-columns: 40px minmax(0, 1fr); }
  .case-document .row-actions { grid-column: 1 / -1; }
  .payment-entry-row { grid-template-columns: 1fr 1fr; }
  .payment-movement-list article { grid-template-columns: 38px minmax(0, 1fr); }
  .payment-movement-list article > div:not(.movement-index) { grid-column: 2 / -1; }
  .comment-form { grid-template-columns: 1fr; }
  .legal-timeline { margin-left: 14px; }
  .timeline-dot { left: -23px; }
  .timeline-event { grid-template-columns: 1fr; }
  .timeline-arrow { display: none; }
}

@media (max-width: 560px) {
  .workspace { padding: 16px 12px 40px; }
  .modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  .modal form { max-height: 86vh; overflow-y: auto; }
  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions .button { width: 100%; }
  .drive-admin-actions .button { flex: 1 1 100%; }
  h1 { font-size: 23px; }
  .case-tabs { gap: 2px; }
  .case-tabs button { padding: 11px 12px; font-size: 13px; }
}

/* "¿Olvidaste tu contraseña?" en el login */
.login-card .login-forgot{display:block;margin:-4px 0 6px auto;padding:2px 0;font-size:.86rem}
/* Si la tarjeta no cabe (pantallas bajas / zoom), el login se desplaza en vez de cortarse. */
.login-screen{overflow-y:auto;align-content:safe center}
.billing-case-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}