.page-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; min-height: 104px; margin-bottom: 18px; padding: 21px 23px; border: 1px solid #203a5a; border-radius: var(--radius-lg); background: linear-gradient(118deg, #0e1827 0%, #13243a 62%, #123d76 100%); color: #fff; box-shadow: var(--shadow); }
.page-hero::before { content: ""; position: absolute; width: 360px; height: 360px; right: -80px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(53,134,255,.48), rgba(53,134,255,0) 68%); }
.page-hero::after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg, transparent 25%, #000); }
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { color: #8fa6c2; }
.page-hero h2 { margin: 0 0 6px; font-size: clamp(24px, 2.7vw, 32px); }
.page-hero p { max-width: 680px; margin: 0; color: #b3c0d2; font-size: 12px; }
.hero-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hero-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.06); color: #dad6e4; font-size: 11px; font-weight: 750; backdrop-filter: blur(10px); }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; }
.kpi-card { position: relative; overflow: hidden; min-width: 0; min-height: 124px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.kpi-card:hover { transform: translateY(-2px); border-color: #bdcad8; box-shadow: var(--shadow); }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); opacity: .9; }
.kpi-card.success::before { background: var(--success); }
.kpi-card.warning::before { background: var(--warning); }
.kpi-card.alert::before { background: var(--danger); }
.kpi-card::after { content: ""; position: absolute; inset: auto -24px -42px auto; width: 100px; height: 100px; border-radius: 50%; background: rgba(20,100,244,.055); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.kpi-value { position: relative; z-index: 1; display: block; margin-top: 13px; color: var(--text-strong); font-size: 27px; line-height: 1; letter-spacing: -.035em; font-weight: 880; }
.kpi-note { position: relative; z-index: 1; display: block; margin-top: 9px; color: var(--muted-2); font-size: 10px; font-weight: 650; }
.kpi-card.alert .kpi-icon { background: var(--danger-soft); color: var(--danger); }
.kpi-card.warning .kpi-icon { background: var(--warning-soft); color: var(--warning); }
.kpi-card.success .kpi-icon { background: var(--success-soft); color: var(--success); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; margin-top: 16px; }
.content-grid.equal { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 16px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.panel-header h2 { margin: 0; color: var(--text-strong); font-size: 18px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.search-box { position: relative; flex: 1 1 250px; max-width: 390px; }
.search-box input { padding-left: 38px; background: var(--surface-soft); }
.search-box svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.toolbar select { width: auto; min-width: 150px; background: var(--surface-soft); }
.toolbar-spacer { flex: 1 1 auto; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 13px; border-bottom: 1px solid #e6ebf1; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; background: #f2f6fa; color: #667085; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { color: #344054; font-size: 12px; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: #f7faff; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--text-strong); font-weight: 800; }
.table-primary { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.entity-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d4e1f2; border-radius: 10px; background: linear-gradient(145deg, #edf4ff, #e9f9fc); color: var(--primary); font-size: 12px; font-weight: 900; }
.entity-sub { margin-top: 2px; color: var(--muted-2); font-size: 10px; }

.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; border: 1px solid #dce3eb; border-radius: 999px; padding: 4px 8px; background: #f3f6f9; color: #5f6f82; font-size: 9px; font-weight: 900; letter-spacing: .03em; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; opacity: .75; }
.badge.VERDE,.badge.ACTIVO,.badge.COBRADA,.badge.COMPLETADA,.badge.OK { color: var(--success); border-color: #ccebdc; background: var(--success-soft); }
.badge.AMARILLO,.badge.PENDIENTE,.badge.POR_VENCER,.badge.EN_PROCESO,.badge.POR_VALIDAR { color: var(--warning); border-color: #f2dba9; background: var(--warning-soft); }
.badge.ROJO,.badge.VENCIDA,.badge.CRITICA,.badge.BLOQUEADA,.badge.ERROR { color: var(--danger); border-color: #f1c8c4; background: var(--danger-soft); }
.badge.GRIS,.badge.INACTIVO,.badge.CANCELADA { color: #667085; background: #f2f4f7; }
.badge.ALTA { color: #a5441d; border-color: #f0d4c9; background: #fff2ed; }
.badge.MEDIA { color: var(--info); border-color: #cedcff; background: var(--info-soft); }
.badge.BAJA { color: #65717e; background: #f1f4f7; }

.health-list, .timeline-list, .compact-list { display: grid; gap: 7px; }
.health-row, .compact-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 9px 10px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; }
.health-dot { width: 10px; height: 10px; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); background: #92909a; }
.health-dot.VERDE { background: #1aa56e; box-shadow: 0 0 0 3px rgba(26,165,110,.11); }
.health-dot.AMARILLO { background: #e5951c; box-shadow: 0 0 0 3px rgba(229,149,28,.12); }
.health-dot.ROJO { background: #db4d4d; box-shadow: 0 0 0 3px rgba(219,77,77,.12); }
.health-name, .compact-title { color: var(--text-strong); font-size: 12px; font-weight: 800; }
.health-meta, .compact-meta { margin-top: 2px; color: var(--muted); font-size: 10px; }
.health-value { text-align: right; color: var(--muted); font-size: 10px; }

.timeline-item { position: relative; display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 10px; padding: 8px 0; }
.timeline-item:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 35px; bottom: -8px; width: 1px; background: var(--border); }
.timeline-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 900; }
.timeline-title { color: var(--text-strong); font-size: 11px; font-weight: 800; }
.timeline-meta { margin-top: 3px; color: var(--muted-2); font-size: 9px; }

.empty { display: grid; place-items: center; min-height: 150px; padding: 28px; text-align: center; color: var(--muted); }
.empty-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.empty strong { display: block; margin-bottom: 4px; color: var(--text-strong); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(11,9,17,.42); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 110; top: 0; right: 0; width: min(500px, 100vw); height: 100vh; display: flex; flex-direction: column; background: var(--surface); box-shadow: -24px 0 70px rgba(15,12,22,.22); transform: translateX(102%); transition: transform 220ms ease; }
.drawer.open { transform: translateX(0); }
.drawer-header { padding: 22px 23px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(120deg, #0e1827, #12365f); color: white; }
.drawer-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.drawer-header .eyebrow { color: #87a0bf; }
.drawer-header h2 { margin: 0; font-size: 22px; }
.drawer-header p { margin: 6px 0 0; color: #a9b9cc; font-size: 11px; }
.drawer-close { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px 23px; }
.drawer-footer { padding: 14px 23px 18px; border-top: 1px solid var(--border); background: #f8fafc; }

.toast-container { position: fixed; right: 22px; bottom: 22px; z-index: 160; display: grid; gap: 9px; }
.toast { min-width: 290px; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #0e1827; color: white; box-shadow: var(--shadow-lg); animation: toast-in 180ms ease both; font-size: 12px; font-weight: 700; }
.toast::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #2f80ff; box-shadow: 0 0 0 4px rgba(47,128,255,.13); }
@keyframes toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:translateY(0); } }

.skeleton { border-radius: 8px; background: linear-gradient(90deg, #e7edf4 25%, #f6f9fc 42%, #e7edf4 62%); background-size: 300% 100%; animation: shimmer 1.25s infinite linear; }
@keyframes shimmer { to { background-position: -300% 0; } }
.loading-panel { display: grid; gap: 11px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

@media (max-width: 1260px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1050px) { .content-grid, .content-grid.equal { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero { align-items: flex-start; flex-direction: column; padding: 21px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .panel { padding: 15px; }
  .toolbar { align-items: stretch; }
  .search-box, .toolbar select { max-width: none; width: 100%; }
}
@media (max-width: 430px) { .kpi-grid { grid-template-columns: 1fr; } }

.drawer-header p:empty { display: none; }
.page-hero > div > p:last-child:empty { display: none; }

/* Sprint 1 · Clientes 360 */
.client-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 20px 22px; border: 1px solid #203a5a; border-radius: var(--radius-lg); background: linear-gradient(118deg, #0e1827 0%, #13243a 62%, #123d76 100%); color: #fff; box-shadow: var(--shadow); }
.client-hero::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(53,134,255,.42), transparent 68%); }
.client-hero > * { position: relative; z-index: 1; }
.client-hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.client-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.client-identity h2 { margin: 1px 0 7px; font-size: clamp(24px, 3vw, 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.entity-avatar-lg { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); color: #fff; font-size: 15px; }
.detail-tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 14px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-sm); }
.detail-tab { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.detail-tab:hover { background: #edf4ff; color: var(--primary); }
.detail-tab.active { background: var(--primary); color: #fff; box-shadow: 0 5px 15px rgba(20,100,244,.18); }
.client-metrics { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.client-metric { position: relative; min-width: 0; min-height: 104px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); }
.client-metric::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 4px 4px 0; background: var(--primary); }
.client-metric.success::before { background: var(--success); }
.client-metric.warning::before { background: var(--warning); }
.client-metric.alert::before { background: var(--danger); }
.client-metric.system::before { background: var(--system); }
.client-metric span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.client-metric strong { display: block; margin-top: 12px; color: var(--text-strong); font-size: 23px; line-height: 1; letter-spacing: -.03em; }
.client-metric small { display: block; margin-top: 8px; color: var(--muted-2); font-size: 9px; }
.client-summary-sections { align-items: start; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: #f1f5f9; color: var(--text-strong); }
.progress-inline { width: 82px; height: 5px; overflow: hidden; margin-bottom: 4px; border-radius: 99px; background: #e7edf4; }
.progress-inline span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 38px; color: var(--text); font-size: 12px; font-weight: 700; }
.check-row input { width: 16px; height: 16px; }
.timeline-detail { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (max-width: 1200px) { .client-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) { .client-hero { align-items: flex-start; flex-direction: column; } .client-hero-main { align-items: flex-start; flex-direction: column; } .client-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 430px) { .client-metrics { grid-template-columns: 1fr; } }
.badge.COMPLETADO,.badge.FINALIZADO { color: var(--success); border-color: #ccebdc; background: var(--success-soft); }
.badge.BLOQUEADO { color: var(--danger); border-color: #f1c8c4; background: var(--danger-soft); }
.badge.EN_PAUSA,.badge.PAUSADO { color: var(--warning); border-color: #f2dba9; background: var(--warning-soft); }
.badge.PLANEADO { color: var(--info); border-color: #cedcff; background: var(--info-soft); }
.client-hero .btn-secondary { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; box-shadow: none; }
.client-hero .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Record integrity / duplicate resolution */
.record-management-head { display:flex; align-items:center; gap:12px; padding:2px 0 16px; }
.record-management-head > div:last-child { display:grid; gap:3px; }
.record-management-head strong { color:var(--text-strong); font-size:14px; }
.record-management-head span { color:var(--muted); font-size:11px; }
.record-action-card { display:grid; gap:14px; margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:13px; background:#f8fafc; }
.record-action-card h3 { margin:2px 0 0; color:var(--text-strong); font-size:16px; }
.record-action-card p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.record-action-card.danger-zone { border-color:#f2d4d1; background:#fffafa; }
.record-counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.record-counts span { display:grid; gap:2px; min-width:0; padding:9px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--muted); font-size:9px; }
.record-counts strong { color:var(--text-strong); font-size:15px; }
.integrity-warning, .integrity-alert, .integrity-linked { display:grid; gap:5px; padding:12px 13px; border:1px solid #d8e5f4; border-radius:11px; background:#f4f8fd; }
.integrity-warning { border-color:#f1d3cf; background:#fff7f6; }
.integrity-warning strong, .integrity-alert strong, .integrity-linked strong { color:var(--text-strong); font-size:12px; }
.integrity-warning span, .integrity-alert span, .integrity-linked span { color:var(--muted); font-size:11px; line-height:1.45; }
.integrity-warning small { color:var(--danger); font-size:10px; font-weight:700; }
.integrity-match-list { display:grid; gap:7px; margin-top:8px; }
.integrity-match { display:flex; align-items:flex-start; gap:9px; padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.integrity-match.selected { border-color:#9fc1f7; background:#f3f7ff; box-shadow:inset 3px 0 0 var(--primary); }
.integrity-match input { width:auto; margin-top:2px; }
.integrity-match span { display:grid; gap:2px; }
.integrity-match strong { font-size:12px; }
.integrity-match small { color:var(--muted); font-size:10px; }
.merge-contacts { display:grid; gap:7px; }
.merge-contact-row { display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.merge-contact-row input { width:auto; margin-top:2px; }
.merge-contact-row span { display:grid; gap:2px; }
.merge-contact-row strong { color:var(--text-strong); font-size:11px; }
.merge-contact-row small { color:var(--muted); font-size:10px; line-height:1.35; }
@media (max-width:560px) { .record-counts { grid-template-columns:repeat(2,minmax(0,1fr)); } }