/* ============================================================
   Lexitra — Sistema de Gestión para Estudios Jurídicos
   Brand: Manrope · #2563EB · #0E0E12 · #FFFFFF · #EFEAE1
   ============================================================ */

:root {
  /* Brand palette */
  --blue:              #2563EB;
  --blue-hover:        #1D4ED8;
  --ink:               #0E0E12;
  --paper:             #FFFFFF;
  --bone:              #EFEAE1;

  /* Semantic aliases */
  --color-primary:     var(--blue);
  --color-primary-hover: var(--blue-hover);
  --color-success:     #10B981;
  --color-warning:     #F59E0B;
  --color-danger:      #EF4444;
  --color-neutral:     #6B7280;
  --color-info:        #06B6D4;

  /* Backgrounds */
  --bg-body:           var(--bone);
  --bg-card:           var(--paper);
  --bg-sidebar:        #0F172A;
  --bg-sidebar-hover:  rgba(255,255,255,.06);
  --bg-sidebar-active: rgba(37,99,235,.18);

  /* Text */
  --text-primary:      var(--ink);
  --text-secondary:    #5C5C66;
  --text-muted:        #9CA3AF;
  --text-sidebar:      rgba(255,255,255,.65);

  /* Borders */
  --border-color:      rgba(0,0,0,.1);
  --border-radius:     6px;
  --border-radius-lg:  8px;

  /* No shadows — brand rule */
  --shadow-sm:         none;
  --shadow:            none;
  --shadow-lg:         none;

  /* Font */
  --font-sans:         'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:         'Fira Code', 'Courier New', monospace;

  /* Layout */
  --sidebar-width:     240px;
  --navbar-height:     60px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---- Typography ---- */
h1 { font-size: 1.714rem; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 1.429rem; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.143rem; font-weight: 600; }
h4 { font-size: 1rem;     font-weight: 600; }
.text-mono { font-family: var(--font-mono); font-size: 0.857rem; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.857rem; }
.text-xs { font-size: 0.75rem; }
.text-gray { color: var(--text-secondary); }

/* ---- Layout ---- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform .2s;
}
.sidebar-logo {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: .625rem;
}
.sidebar-logo svg { flex-shrink: 0; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1.25rem;
  cursor: pointer;
  border-radius: 0;
  transition: background .12s;
  color: var(--text-sidebar);
  border: none;
  border-left: 2px solid transparent;
  background: none;
  width: 100%;
  font-size: .929rem;
  font-family: inherit;
  font-weight: 500;
}
.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: #fff;
}
.nav-item.active {
  background: var(--bg-sidebar-active);
  color: #fff;
  border-left-color: var(--blue);
  font-weight: 600;
}
.nav-item svg { flex-shrink: 0; opacity: .6; }
.nav-item:hover svg,
.nav-item.active svg { opacity: 1; }
.nav-section-label {
  padding: 1rem 1.25rem .3rem;
  font-size: .714rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.25);
  font-weight: 600;
}

/* ---- Main area ---- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar {
  height: var(--navbar-height);
  background: var(--paper);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-search {
  flex: 1;
  max-width: 400px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: .375rem .75rem .375rem 2.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: .857rem;
  background: var(--bone);
  outline: none;
  transition: border-color .12s;
  font-family: inherit;
  color: var(--text-primary);
}
.topbar-search input:focus { border-color: var(--blue); background: var(--paper); }
.topbar-search-icon {
  position: absolute;
  left: .625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.topbar-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--border-radius);
  transition: background .12s;
  font-size: .857rem;
  font-weight: 500;
}
.topbar-user:hover { background: var(--bone); }
.avatar {
  width: 32px; height: 32px;
  background: var(--blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .786rem;
  flex-shrink: 0;
}

/* ---- Page content ---- */
.page-content {
  padding: 1.5rem;
  flex: 1;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-title { margin-bottom: .25rem; }
.page-subtitle { color: var(--text-secondary); font-size: .857rem; }

/* ---- Cards ---- */
.card {
  background: var(--paper);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-title { font-weight: 600; font-size: 1rem; }
.card-body { padding: 1.25rem; }

/* ---- Metric cards ---- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.metric-card {
  background: var(--paper);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.metric-icon {
  width: 44px; height: 44px;
  border-radius: var(--border-radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.metric-icon.blue   { background: rgba(37,99,235,.1); color: var(--blue); }
.metric-icon.green  { background: rgba(16,185,129,.1); color: var(--color-success); }
.metric-icon.orange { background: rgba(245,158,11,.1); color: var(--color-warning); }
.metric-icon.red    { background: rgba(239,68,68,.1);  color: var(--color-danger); }
.metric-value { font-size: 1.571rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.metric-label { font-size: .786rem; color: var(--text-secondary); margin-top: .25rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  border-radius: var(--border-radius);
  font-size: .857rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-secondary {
  background: var(--paper);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover:not(:disabled) { background: var(--bone); }
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { background: #DC2626; }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  padding: .375rem .5rem;
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) { background: var(--bone); color: var(--text-primary); }
.btn-sm { padding: .3125rem .625rem; font-size: .786rem; }
.btn-icon { padding: .4375rem; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem .5rem;
  border-radius: 9999px;
  font-size: .714rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-blue    { background: rgba(37,99,235,.1);  color: #1D4ED8; }
.badge-green   { background: rgba(16,185,129,.1); color: #059669; }
.badge-orange  { background: rgba(245,158,11,.1); color: #B45309; }
.badge-red     { background: rgba(239,68,68,.1);  color: #DC2626; }
.badge-gray    { background: rgba(107,114,128,.1);color: #4B5563; }
.badge-purple  { background: rgba(139,92,246,.1); color: #7C3AED; }
.badge-cyan    { background: rgba(6,182,212,.1);  color: #0891B2; }

/* Estado del caso */
.badge-purple      { background: rgba(139,92,246,.1); color: #7C3AED; }
.badge-presentado  { background: rgba(37,99,235,.1);  color: #1D4ED8; }
.badge-en_trámite  { background: rgba(245,158,11,.1); color: #B45309; }
.badge-sentenciado { background: rgba(16,185,129,.1); color: #059669; }
.badge-apelado     { background: rgba(239,68,68,.1);  color: #DC2626; }
.badge-cerrado     { background: rgba(107,114,128,.1);color: #4B5563; }

/* ---- Table ---- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  background: var(--paper);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .857rem;
}
thead th {
  background: var(--bone);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: .786rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(37,99,235,.02); }
.table-actions { display: flex; gap: .25rem; }

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: flex-end;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border-color);
}
.pagination-info { color: var(--text-secondary); font-size: .786rem; margin-right: auto; }
.page-btn {
  min-width: 32px; height: 32px;
  padding: 0 .5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--paper);
  cursor: pointer;
  font-size: .786rem;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.page-btn:hover:not(:disabled) { background: var(--bone); }
.page-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Forms ---- */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .857rem;
  font-weight: 600;
  color: var(--text-primary);
}
.form-label .required { color: var(--color-danger); margin-left: .125rem; }
.form-control {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: .857rem;
  background: var(--paper);
  color: var(--text-primary);
  outline: none;
  transition: border-color .12s;
  font-family: inherit;
}
.form-control:focus { border-color: var(--blue); }
.form-control.is-invalid { border-color: var(--color-danger); }
.invalid-feedback {
  display: none;
  font-size: .786rem;
  color: var(--color-danger);
  margin-top: .25rem;
}
.is-invalid ~ .invalid-feedback,
.form-control.is-invalid + .invalid-feedback { display: block; }
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { cursor: pointer; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,18,.55);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 200;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.modal {
  background: var(--paper);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 540px;
  animation: modal-in .15s ease;
}
.modal-lg { max-width: 720px; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header {
  padding: 1.25rem 1.25rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-body { padding: 1.25rem; }
.modal-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* ---- Toast ---- */
#toast-container {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 999;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem;
  border-radius: var(--border-radius);
  background: var(--paper);
  border: 1px solid var(--border-color);
  font-size: .857rem;
  min-width: 260px; max-width: 360px;
  pointer-events: all;
  animation: toast-in .2s ease;
  border-left: 3px solid var(--color-neutral);
}
.toast.success { border-left-color: var(--color-success); }
.toast.error   { border-left-color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-warning); }
.toast.info    { border-left-color: var(--blue); }
.toast-icon { flex-shrink: 0; }
.toast-msg  { flex: 1; }
.toast-close { cursor: pointer; color: var(--text-muted); background: none; border: none; font-size: 1rem; line-height: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Login page ---- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
.login-card {
  background: var(--paper);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  width: 100%;
  max-width: 400px;
  padding: 2.5rem 2rem;
}
.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.login-logo h1 { font-size: 1.286rem; font-weight: 700; color: var(--text-primary); margin-top: .75rem; }
.login-logo p  { font-size: .857rem; color: var(--text-secondary); }

/* ---- Alerts ---- */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--border-radius);
  font-size: .857rem;
  margin-bottom: 1rem;
  display: flex; align-items: flex-start; gap: .5rem;
}
.alert-danger  { background: rgba(239,68,68,.07);   color: #DC2626; border: 1px solid rgba(239,68,68,.2); }
.alert-success { background: rgba(16,185,129,.07);  color: #059669; border: 1px solid rgba(16,185,129,.2); }
.alert-warning { background: rgba(245,158,11,.07);  color: #B45309; border: 1px solid rgba(245,158,11,.2); }
.alert-info    { background: rgba(37,99,235,.07);   color: #1D4ED8; border: 1px solid rgba(37,99,235,.2); }

/* ---- Urgency colors ---- */
.urgency-today { color: var(--color-danger); font-weight: 700; }
.urgency-3days { color: var(--color-warning); font-weight: 600; }
.urgency-7days { color: #D97706; }
.urgency-past  { color: var(--text-muted); }

/* ---- Utility ---- */
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.hidden { display: none !important; }
.loading-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Responsive ---- */
.btn-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .375rem;
  color: var(--text-primary);
  border-radius: var(--border-radius);
  transition: background .12s;
  flex-shrink: 0;
}
.btn-hamburger:hover { background: var(--bone); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14,14,18,.5);
  z-index: 99;
}
.sidebar-backdrop.visible { display: block; }

@media (max-width: 768px) {
  .btn-hamburger { display: flex; align-items: center; justify-content: center; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .topbar-search { max-width: none; }
  #global-search-results { left: 0; right: 0; width: auto; }
}

/* ---- Import modal ---- */
.import-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.import-step-num {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: .1rem;
}
.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem;
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
  transition: border-color .12s, background .12s;
  width: 100%;
}
.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: var(--blue);
  background: rgba(37,99,235,.04);
  color: var(--blue);
}
.import-dropzone.has-file {
  border-color: var(--color-success);
  background: rgba(16,185,129,.04);
  color: var(--color-success);
}

/* ── Clientes — card view (mobile) ─────────────────────────────── */
.cliente-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: .875rem 1rem;
  margin-bottom: .625rem;
}
.cliente-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.cliente-card-name {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cliente-card-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-bottom: .625rem;
}
.cliente-card-meta span { display: flex; align-items: center; gap: .35rem; }
.cliente-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .5rem;
  border-top: 1px solid var(--border-color);
  margin-top: .25rem;
}
.cliente-card-saldo {
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* fix: never overflow viewport horizontally */
html, body { overflow-x: hidden; max-width: 100%; }
.main-content { overflow-x: hidden; }

/* ── Mobile tweaks (≤640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  /* Colapsa TODOS los grids inline generados por JS a una columna */
  .page-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .page-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    width: 100%;
  }
  .page-header .btn-primary { flex: 1; justify-content: center; }
  .clientes-filters { flex-direction: column; }
  .clientes-filters .topbar-search,
  .clientes-filters select { width: 100% !important; max-width: none !important; flex: none !important; }

  /* Topbar: ocultar "Carga Rápida" label en mobile muy chico */
  .topbar { padding: .5rem .75rem; gap: .375rem; }
  .topbar-actions { gap: .375rem; }
}

/* ── Print / PDF export ──────────────────────────────────── */
@media print {
  .sidebar,
  .topbar,
  .cuenta-tabs,
  .reportes-controls,
  #tab-cc, #tab-gastos, #tab-morosidad, #tab-reportes,
  #cuenta-header-actions,
  .no-print { display: none !important; }

  .main-content { margin: 0 !important; }
  .page-content { padding: 0 !important; }

  /* Ocultar paneles que no son reportes */
  #panel-cc,
  #panel-gastos,
  #panel-morosidad { display: none !important; }

  /* Mostrar panel reportes aunque tenga .hidden */
  #panel-reportes { display: block !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  a { text-decoration: none; color: inherit; }
}