/* ============================================================================
   TRIA Legal — Componentes UI reutilizables
   ============================================================================ */

/* === Containers === */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* === Cards === */

.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  border: 1px solid var(--gray-200);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--space-2) 0;
}

.card-subtitle {
  font-size: 14px;
  color: var(--gray-500);
  margin: 0 0 var(--space-6) 0;
}

/* === Buttons === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  min-height: 44px;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--orange);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--orange-dark);
}

.btn-secondary {
  background-color: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--gray-200);
}

.btn-danger {
  background-color: white;
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--error-bg);
}

.btn-link {
  background: transparent;
  color: var(--green-700);
  padding: 8px 12px;
  min-height: auto;
}

.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  min-height: 32px;
}

/* === Inputs === */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--error-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: white;
  color: var(--gray-900);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(45, 148, 86, 0.15);
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--error-border);
}

.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.3);
}

.form-help {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: var(--space-2);
}

.form-error {
  font-size: 13px;
  color: var(--error-text);
  margin-top: var(--space-2);
}

/* === Alerts === */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.alert-success {
  background-color: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.alert-error {
  background-color: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.alert-info {
  background-color: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

.alert-warning {
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

/* === Badges === */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.badge-super-admin {
  background: var(--orange);
  color: white;
}

.badge-owner {
  background: var(--green-700);
  color: white;
}

.badge-lawyer {
  background: var(--blue-dark);
  color: white;
}

.badge-viewer {
  background: var(--gray-200);
  color: var(--gray-700);
}

.badge-active {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.badge-inactive {
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
}

/* === Shell layout (sidebar + content) === */

.app-body {
  margin: 0;
  background: var(--gray-50);
}

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

/* === Sidebar === */

.sidebar {
  background: var(--navy);
  color: white;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green-500) 0%, var(--green-700) 100%);
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sidebar-brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: white;
}

.sidebar-brand-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.nav-item.active {
  background: var(--green-700);
  color: white;
  font-weight: 600;
}

.nav-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-item.active .nav-item-icon {
  opacity: 1;
}

.sidebar-user {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout {
  background: transparent;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white !important;
  text-decoration: none !important;
}

/* === Mobile header === */

.mobile-header {
  display: none;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-3) var(--space-4);
  align-items: center;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-menu-btn {
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 18px;
  color: var(--gray-700);
  cursor: pointer;
  min-height: 36px;
}

.mobile-header-brand {
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}

/* === Área de contenido === */

.app-content {
  padding: var(--space-8);
  max-width: 100%;
  overflow-x: auto;
}

.loading-screen {
  text-align: center;
  padding: var(--space-16);
  color: var(--gray-500);
}

.loading-screen .spinner {
  width: 24px;
  height: 24px;
  border-width: 3px;
  margin-bottom: var(--space-3);
  color: var(--green-700);
}

.loading-screen p {
  margin: 0;
  font-size: 14px;
}

/* === Tablas === */

.table-container {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  background: var(--gray-50);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
}

.table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--gray-50);
}

/* === Modal === */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 45, 61, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-content {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.modal-close {
  font-size: 24px;
  color: var(--gray-500);
  padding: 0 8px;
  cursor: pointer;
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  background: var(--gray-50);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* === Toast (notificaciones) === */

.toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
}

.toast {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: white;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: toast-in 200ms ease-out;
}

.toast-success {
  border-left: 4px solid var(--green-500);
}

.toast-error {
  border-left: 4px solid var(--error-text);
}

.toast-info {
  border-left: 4px solid var(--blue-dark);
}

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* === Loading spinner === */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--gray-500);
}

.empty-state h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.empty-state p {
  font-size: 14px;
  margin: 0;
}

/* === Login layout === */

.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--green-700) 0%, var(--navy) 100%);
}

.login-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.login-brand {
  text-align: center;
  margin-bottom: var(--space-8);
}

.login-brand-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: -0.5px;
}

.login-brand-tag {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0;
}

/* === Welcome layout === */

.welcome-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-100);
  margin: 0 auto var(--space-6) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-2) 0;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--gray-600);
  margin: 0 0 var(--space-8) 0;
}

.welcome-info {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
  text-align: left;
}

.welcome-info dt {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: var(--space-3);
}

.welcome-info dt:first-child {
  margin-top: 0;
}

.welcome-info dd {
  font-size: 15px;
  color: var(--gray-900);
  margin: 2px 0 0 0;
}

/* === Layout para app shell === */

.app-main {
  padding: var(--space-8) 0;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--gray-500);
  margin: 4px 0 0 0;
}

/* === Stub / Empty section card === */

.stub-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  max-width: 720px;
  margin: var(--space-8) auto;
}

.stub-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-100);
  margin: 0 auto var(--space-5) auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--green-700);
}

.stub-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-2) 0;
}

.stub-tagline {
  font-size: 15px;
  color: var(--gray-600);
  margin: 0 0 var(--space-6) 0;
  line-height: 1.5;
}

.stub-features {
  text-align: left;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: 0 auto var(--space-6) auto;
  max-width: 480px;
}

.stub-features-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin: 0 0 var(--space-3) 0;
}

.stub-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stub-features-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: 14px;
  color: var(--gray-700);
}

.stub-features-list li::before {
  content: '→';
  color: var(--green-700);
  font-weight: 600;
  flex-shrink: 0;
}

.sprint-tag {
  display: inline-block;
  background: var(--green-100);
  color: var(--green-700);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: var(--space-4);
}

/* === Modal large (para plan de sprint) === */

.modal-content-lg {
  max-width: 640px;
}

.modal-body h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: var(--space-5) 0 var(--space-2) 0;
}

.modal-body h4:first-child {
  margin-top: 0;
}

.modal-body ul {
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-6);
}

.modal-body li {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 4px;
}

/* === No-permission card (para roles sin acceso a una sección) === */

.no-perm-card {
  background: white;
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning-text);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  max-width: 520px;
  margin: var(--space-8) auto;
}

.no-perm-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--warning-text);
  margin: 0 0 var(--space-2) 0;
}

.no-perm-card p {
  font-size: 14px;
  color: var(--gray-700);
  margin: 0;
  line-height: 1.5;
}

/* === Responsive === */

/* ============================================================================
   SPRINT B — Componentes nuevos
   ============================================================================ */

/* === Filtros bar === */

.filters-bar {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

.filter-group.filter-search {
  flex: 1 1 280px;
  min-width: 240px;
}

.filter-group.filter-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-1);
}

.filter-group .form-input,
.filter-group .form-select {
  padding: 8px 12px;
  font-size: 14px;
}

/* === Tabla de leads === */

.table-leads tbody tr.row-clickable {
  cursor: pointer;
}

.table-leads tbody tr.row-clickable:hover {
  background: var(--green-100);
}

.lead-id {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  font-weight: 600;
  white-space: nowrap;
}

/* === Stage badges === */

.stage-nuevo {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

.stage-contactado {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #a5b4fc;
}

.stage-calificado {
  background: #ecfeff;
  color: #155e75;
  border: 1px solid #67e8f9;
}

.stage-propuesta-enviada {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.stage-firmado {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.stage-descartado {
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
}

/* === Source tag === */

.source-tag {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* === Paginación === */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.pagination-info {
  font-size: 13px;
  color: var(--gray-600);
}

/* === Breadcrumb === */

.breadcrumb {
  font-size: 14px;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-link {
  color: var(--green-700);
  text-decoration: none;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--gray-400);
}

.breadcrumb-current {
  color: var(--gray-700);
  font-weight: 500;
}

/* === Form rows (campos en columnas en desktop) === */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row .form-group {
  margin-bottom: var(--space-4);
}

/* === Detail grid (lead/case detail page) === */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--space-4);
}

/* === Detail card === */

.detail-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.detail-card-header {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-50);
}

.detail-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.detail-card-body {
  padding: var(--space-5);
}

/* === Detail list (dl) === */

.detail-list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.detail-list dt {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
  align-self: start;
  padding-top: 2px;
}

.detail-list dd {
  font-size: 14px;
  color: var(--gray-900);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
  word-break: break-word;
}

.detail-list dd:last-of-type,
.detail-list dt:last-of-type + dd {
  border-bottom: none;
  padding-bottom: 0;
}

/* === Notas internas === */

.note-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}

.note-form .btn {
  align-self: flex-start;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.note-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}

.note-header strong {
  font-size: 13px;
  color: var(--navy);
}

.note-time {
  font-size: 12px;
  color: var(--gray-500);
}

.note-body {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === Page header con acciones === */

.page-header-actions {
  display: flex;
  gap: var(--space-2);
}

/* === Page title con badge inline === */

.page-title .badge {
  vertical-align: middle;
  margin-left: var(--space-3);
  font-size: 12px;
}

/* === Responsive del Sprint B === */

@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group {
    min-width: auto;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .detail-list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .detail-list dt {
    margin-top: var(--space-2);
  }
  .pagination {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ============================================================================
   FIN SPRINT B
   ============================================================================ */

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobile-header {
    display: flex;
  }
  .app-content {
    padding: var(--space-5) var(--space-4);
  }
  .stub-card {
    padding: var(--space-8) var(--space-5);
  }
}

@media (max-width: 640px) {
  .card {
    padding: var(--space-5);
  }
  .login-card,
  .welcome-card {
    padding: var(--space-8) var(--space-6);
  }
  .table th,
  .table td {
    padding: var(--space-3);
  }
  .modal-content {
    margin: var(--space-4);
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Casos — Sprint C parte 1
   ============================================================================
   Tabla de casos + badges de Pipeline B (10 stages post-firma).
   ============================================================================ */


.table-cases tbody tr.row-clickable {
  cursor: pointer;
}

.table-cases tbody tr.row-clickable:hover {
  background: var(--green-100);
}

.next-action-cell {
  max-width: 240px;
  line-height: 1.3;
}


/* === Stage badges del Pipeline B === */

.case-stage-iniciado {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.case-stage-documentacion-recibida {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

.case-stage-estrategia-presentada {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #a5b4fc;
}

.case-stage-primer-pago-cobrado {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.case-stage-tramite-en-marcha {
  background: #ecfeff;
  color: #155e75;
  border: 1px solid #67e8f9;
}

.case-stage-avance-procesal {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}

.case-stage-dictamen-favorable {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.case-stage-segundo-pago-cobrado {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.case-stage-cerrado-ganado {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  font-weight: 600;
}

.case-stage-cerrado-perdido {
  background: var(--gray-100);
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
}


/* ============================================================================
   Clientes — Sprint C parte 2
   ============================================================================
   Tabla de clientes + tabs del detalle + count-badge + data grid.
   ============================================================================ */


.table-clients tbody tr.row-clickable {
  cursor: pointer;
}

.table-clients tbody tr.row-clickable:hover {
  background: var(--green-100);
}


/* === Count badge === */

.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.count-badge-active {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.count-badge-closed {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
}

.count-badge-secondary {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--gray-200);
  color: var(--gray-600);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}


/* === Tabs (detalle de cliente) === */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
  margin: 0 0 var(--space-5) 0;
}

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 150ms, border-color 150ms;
}

.tab:hover {
  color: var(--gray-900);
}

.tab-active {
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}

.tab-active:hover {
  color: var(--green-900);
}

.tab-badge {
  display: inline-block;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.tab-active .tab-badge {
  background: var(--green-100);
  color: var(--green-900);
}

.tab-content {
  margin-top: 0;
}


/* === Data grid === */

.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 var(--space-5) 0;
}

.data-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-row-full {
  grid-column: 1 / -1;
}

.data-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  font-weight: 500;
  margin: 0;
}

.data-value {
  font-size: 14px;
  color: var(--gray-900);
  margin: 0;
  word-break: break-word;
}

.data-value-multiline {
  white-space: pre-wrap;
}

.card-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}


/* === Alias breadcrumb-separator === */

.breadcrumb-separator {
  color: var(--gray-400);
}


/* ============================================================================
   Promoción Lead → Caso — Sprint C parte 3
   ============================================================================
   Card especial en el sidebar del detalle del lead que muestra el estado
   de promoción (pending / ready / done) y, si aplica, abre el modal de
   promoción. Reutiliza .modal-overlay, .modal-content-lg y .form-* del
   sistema existente.
   ============================================================================ */


/* Card de promoción base (cuando el lead aún no está firmado) */
.promotion-card {
  border: 1px solid var(--gray-200);
}

/* Estado "ready": stage firmado, listo para promover. Resalta visualmente */
.promotion-card-ready {
  border: 2px solid var(--orange);
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.promotion-card-ready .detail-card-title {
  color: var(--orange);
}

/* Estado "done": ya promovido. Verde sutil */
.promotion-card-done {
  border: 2px solid var(--success-border);
  background: linear-gradient(135deg, var(--success-bg) 0%, #ffffff 100%);
}

.promotion-card-done .detail-card-title {
  color: var(--success-text);
}

/* Estado "pending": stage no firmado. Gris suave */
.promotion-card-pending {
  background: var(--gray-50, #fafafa);
}


/* === Sub-secciones dentro de modales (modal de promoción) === */

.form-section-title {
  margin: var(--space-5) 0 var(--space-2) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

.form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-section-help {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 var(--space-4) 0;
}


/* === Responsive === */

@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr;
  }
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .tab {
    flex-shrink: 0;
  }
}
/* ============================================================================
   Kanban — Sprint C parte 5
   ============================================================================
   Vista panorámica del pipeline de leads con drag-and-drop entre columnas.
   ============================================================================ */
 
 
/* === Tablero principal: 5 columnas en grid === */
 
.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6) 0;
  align-items: start;
}
 
 
/* === Columna === */
 
.kanban-column {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 240px;
}
 
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  background: #ffffff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
 
.kanban-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
}
 
.kanban-column-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  flex: 1;
  min-height: 100px;
}
 
 
/* === Card === */
 
.kanban-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: box-shadow 150ms, transform 150ms, border-color 150ms;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
 
.kanban-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-color: var(--green-500);
}
 
.kanban-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
  line-height: 1.3;
}
 
.kanban-card-meta {
  font-size: 12px;
  color: var(--gray-600);
}
 
.kanban-card-phone {
  font-family: monospace;
}
 
.kanban-card-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}
 
.kanban-card-institution {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-sm);
}
 
.kanban-card-assigned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--green-100);
  color: var(--green-900);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
}
 
.kanban-card-unassigned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  border: 1px dashed var(--gray-300);
}
 
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--gray-200);
}
 
.kanban-card-id {
  font-family: monospace;
  font-weight: 500;
}
 
 
/* === Estados de drag (SortableJS) === */
 
.kanban-card-ghost {
  opacity: 0.4;
  background: var(--green-100);
  border: 2px dashed var(--green-500);
}
 
.kanban-card-chosen {
  cursor: grabbing;
}
 
.kanban-card-drag {
  transform: rotate(2deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
 
 
/* === Empty state de columna === */
 
.kanban-empty {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  padding: var(--space-4) var(--space-2);
  font-style: italic;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-sm);
}
 
 
/* === Footer del Kanban (chip de descartados) === */
 
.kanban-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}
 
.discarded-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  font-family: inherit;
}
 
.discarded-chip:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--gray-400);
}
 
.discarded-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-600);
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 12px;
}
 
.discarded-chip-arrow {
  color: var(--gray-400);
  font-size: 16px;
}
 
.discarded-chip-empty {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
}
 
 
/* === Responsive: el Kanban requiere desktop ===
   Para anchuras menores a 1024px el módulo kanban.js renderiza un blocker,
   pero por seguridad agregamos un degradé visual aquí también.
   ============================================================================ */
 
@media (max-width: 1023px) {
  .kanban-board {
    /* Por si llegara a renderizarse en un viewport pequeño, scroll horizontal */
    overflow-x: auto;
    grid-template-columns: repeat(5, 280px);
  }
}
/* ============================================================================
   Sprint D — Documentos + Pagos
   ============================================================================ */

/* Cards específicas (extienden .detail-card existente) */
.documents-card .detail-card-header,
.payments-card .detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Tabla de documentos / pagos */
.table-documents th,
.table-payments th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.table-documents td,
.table-payments td {
  vertical-align: middle;
}

/* Celda de archivo (documento) */
.doc-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-name-cell strong {
  word-break: break-all;
  color: var(--navy);
}

.doc-description {
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

/* Acciones a la derecha */
.th-actions-doc,
.td-actions-doc,
.th-actions-payment,
.td-actions-payment {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* Monto */
.td-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--navy);
}

/* Badges adicionales */
.badge-soft {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.badge-category {
  background: var(--green-100);
  color: var(--green-700);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
}

/* Estados de pago */
.badge-status-pendiente {
  background: #fef3c7;
  color: #92400e;
}

.badge-status-cobrado {
  background: #d1fae5;
  color: #065f46;
}

.badge-status-cancelado {
  background: var(--gray-200);
  color: var(--gray-600);
  text-decoration: line-through;
}

/* Botones de acción tipo icono dentro de tablas */
.btn-icon-action,
.btn-icon-danger {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn-icon-action:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

.btn-icon-danger:hover {
  background: #fee2e2;
  border-color: #fecaca;
}

/* Botón link en celda de comprobante */
.btn-link-payment {
  background: transparent;
  border: none;
  color: var(--blue-dark);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  font-family: inherit;
  text-align: left;
  word-break: break-all;
}

.btn-link-payment:hover {
  color: var(--orange);
}

/* Indicadores 💰/⏳ en header del caso */
.case-payment-indicators {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 18px;
  vertical-align: middle;
}

.case-payment-indicators .indicator {
  display: inline-flex;
  align-items: center;
}

.case-payment-indicators .indicator-cobrado {
  color: var(--green-700);
}

.case-payment-indicators .indicator-pendiente {
  color: #d97706;
}
/* ============================================================================
   Sprint E parte 1 — Estilos del Dashboard
   ============================================================================ */

.dashboard-loading {
  text-align: center;
  color: var(--gray-500);
  padding: 48px 0;
  font-size: 14px;
}

.dashboard-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: #991b1b;
}

.dashboard-error p {
  margin: 0 0 12px 0;
}

.dashboard-error-detail {
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #7f1d1d;
}

.dashboard-empty {
  color: var(--gray-500);
  font-size: 14px;
  padding: 16px 0;
  margin: 0;
}

.dashboard-link {
  color: inherit;
  text-decoration: none;
}

.dashboard-link:hover {
  text-decoration: underline;
}

.dashboard-note {
  margin: 12px 0 0 0;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

.dashboard-note code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-style: normal;
  background: var(--gray-100);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* KPI grid */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.kpi-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kpi-card-warn {
  border-color: #fcd34d;
  background: #fffbeb;
}

.kpi-card-success {
  border-color: var(--green-500);
  background: var(--green-100);
}

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 4px;
}

.kpi-card-success .kpi-value {
  color: var(--green-700);
}

.kpi-card-warn .kpi-value {
  color: #92400e;
}

.kpi-hint {
  font-size: 11px;
  color: var(--gray-500);
}

/* Secciones del dashboard */
.dashboard-section {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-section-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.dashboard-section-meta {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

/* Pipeline strip */
.pipeline-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.pipeline-cell {
  background: #f9fafb;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pipeline-cell-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}

/* Tabla del dashboard */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dashboard-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gray-200);
  background: #f9fafb;
}

.dashboard-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  vertical-align: middle;
}

.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}

.dashboard-table .th-amount,
.dashboard-table .td-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-table .th-count,
.dashboard-table .td-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Estados de vencimiento */
.overdue-critical {
  color: #991b1b;
  font-weight: 600;
}

.overdue-warn {
  color: #92400e;
  font-weight: 600;
}

.overdue-ok {
  color: var(--gray-600);
}

/* Page header con boton de refresh */
.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* ============================================================================
   Sprint E parte 1.6 — Estilos clickables del Dashboard (append adicional)
   ============================================================================ */

/* KPI cards clickeables */
a.kpi-card,
a.kpi-card-clickable {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

a.kpi-card:hover,
a.kpi-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  border-color: var(--green-500);
}

/* Pipeline cells clickeables */
a.pipeline-cell,
a.pipeline-cell-clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

a.pipeline-cell:hover,
a.pipeline-cell-clickable:hover {
  background: white;
  border-color: var(--green-500);
  transform: translateY(-1px);
}

/* Tablas con filas clickeables */
.dashboard-table-clickable tbody tr.row-clickable {
  cursor: pointer;
  transition: background 100ms ease;
}

.dashboard-table-clickable tbody tr.row-clickable:hover {
  background: var(--green-100);
}
/* ============================================================================
   Sprint E parte 2 — Estilos del Audit log viewer
   ============================================================================ */

/* Tabla audit con texto compacto */
.table-audit thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-audit tbody td {
  font-size: 13px;
  vertical-align: middle;
}

.table-audit tbody tr.row-clickable {
  cursor: pointer;
  transition: background 100ms ease;
}

.table-audit tbody tr.row-clickable:hover {
  background: var(--green-100);
}

/* Code de la accion (lead.created, payment.deleted, etc.) */
.audit-action-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gray-800);
  white-space: nowrap;
}

/* Hint "Ver →" en la columna detalle */
.audit-detail-hint {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
}

.table-audit tbody tr:hover .audit-detail-hint {
  color: var(--green-700);
}

/* Bloque JSON en el modal de detalle */
.audit-json-block {
  background: #f9fafb;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-800);
  overflow-x: auto;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ============================================================================
   Sprint E parte 4 — Estilos del Reporte diario
   ============================================================================ */

.report-container {
  max-width: 920px;
  margin: 0 auto;
  background: white;
  padding: 32px 40px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: var(--gray-900);
  font-size: 13px;
  line-height: 1.5;
}

/* ----- Header del reporte ----- */
.report-header {
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.report-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.report-brand-mark {
  width: 36px;
  height: 36px;
  background: var(--green-700);
  border-radius: 6px;
}

.report-brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  font-family: "Fraunces", Georgia, serif;
}

.report-brand-tag {
  font-size: 12px;
  color: var(--gray-500);
}

.report-header-meta {
  font-size: 12px;
  color: var(--gray-700);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0;
}

.report-date {
  font-weight: 600;
  text-transform: capitalize;
}

.report-cut,
.report-author {
  color: var(--gray-600);
}

.report-confidential {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 8px;
}

/* ----- Secciones ----- */
.report-section {
  margin-bottom: 32px;
  page-break-inside: avoid;
}

.report-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
}

.report-subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 16px 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-subsection-hint {
  font-size: 12px;
  color: var(--gray-500);
  margin: 0 0 8px 0;
  font-style: italic;
}

/* ----- KPI grid ----- */
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.report-kpi-card {
  background: #f9fafb;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px 14px;
}

.report-kpi-card.report-kpi-warn {
  background: #fffbeb;
  border-color: #fcd34d;
}

.report-kpi-card.report-kpi-success {
  background: var(--green-100);
  border-color: var(--green-500);
}

.report-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.report-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
  margin-bottom: 2px;
}

.report-kpi-card.report-kpi-success .report-kpi-value {
  color: var(--green-700);
}

.report-kpi-card.report-kpi-warn .report-kpi-value {
  color: #92400e;
}

.report-kpi-hint {
  font-size: 11px;
  color: var(--gray-500);
}

/* ----- Tabla ----- */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}

.report-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f9fafb;
  border-bottom: 1px solid var(--gray-300);
}

.report-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  vertical-align: top;
}

.report-table.report-table-compact thead th,
.report-table.report-table-compact tbody td {
  padding: 6px 8px;
  font-size: 11px;
}

.report-cell-sub {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.report-cell-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-overdue-critical {
  color: #991b1b;
  font-weight: 600;
}

.report-overdue-warn {
  color: #92400e;
  font-weight: 600;
}

.report-muted {
  color: var(--gray-400);
  font-style: italic;
}

/* Badges Caso/Lead en columna Tipo */
.report-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-badge-case {
  background: #dbeafe;
  color: #1e3a8a;
}

.report-badge-lead {
  background: #f3e8ff;
  color: #6b21a8;
}

/* ----- Por usuario ----- */
.report-user-block {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  page-break-inside: avoid;
}

.report-user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.report-user-role {
  font-size: 11px;
  color: var(--gray-500);
  margin-left: 6px;
  font-weight: 500;
}

.report-user-meta {
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 500;
}

.report-user-empty {
  font-size: 12px;
  color: var(--gray-400);
  font-style: italic;
  padding: 4px 0;
}

.report-leads-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-700);
  margin: 12px 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----- Pipeline strips ----- */
.report-pipe-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.report-pipe-cell {
  background: #f9fafb;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.report-pipe-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.report-pipe-total {
  font-size: 11px;
  color: var(--gray-500);
  text-align: right;
}

/* ----- Empty positivo ----- */
.report-empty-positive {
  background: var(--green-100);
  border: 1px solid var(--green-500);
  color: var(--green-900);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  font-weight: 500;
}

.report-empty {
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-300);
  color: var(--gray-500);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  font-style: italic;
}

/* ----- Footer ----- */
.report-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 2px solid var(--gray-200);
  font-size: 11px;
  color: var(--gray-500);
}

.report-footer-meta {
  margin-top: 4px;
  text-transform: capitalize;
}

/* ============================================================================
   Print styles — para que window.print() genere un PDF limpio
   ============================================================================ */

@media print {
  /* Ocultar todo lo que no es el reporte */
  .sidebar,
  .mobile-header,
  .page-header-actions,
  .page-header > div:first-child,
  .modal-overlay,
  #toast-container {
    display: none !important;
  }

  /* App-content sin padding */
  body,
  .app-body,
  .app-shell,
  .app-content {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-content {
    grid-column: 1 / -1 !important;
  }

  /* Container del reporte: full width sin shadow */
  .report-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12mm 14mm !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Forzar colores en impresion (algunos navegadores los quitan) */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Page breaks */
  .report-section {
    page-break-inside: avoid;
  }

  .report-user-block {
    page-break-inside: avoid;
  }

  .report-table {
    page-break-inside: auto;
  }

  .report-table tr {
    page-break-inside: avoid;
  }

  /* Ajustes de fuente para impresion */
  body {
    font-size: 11px !important;
  }

  /* Ocultar .page-header (el del portal) y dejar solo el header del reporte */
  .page-header {
    display: none !important;
  }

  /* Tamano de pagina */
  @page {
    size: letter;
    margin: 10mm 12mm;
  }
}
/* ============================================================================
   Sprint E parte 6 — Reinvitación + reset de contraseña
   ============================================================================ */

/* Badge de invitación pendiente */
.badge.badge-pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* Alert de éxito (para mensajes positivos en modales) */
.alert.alert-success {
  background: var(--green-100);
  border: 1px solid var(--green-500);
  color: var(--green-900);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
/* ============================================================================
   Sidebar logo en lugar del cuadro verde
   ============================================================================ */

.sidebar-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  background: white;
  border-radius: 8px;
  padding: 4px;
}