/* Lenox SaaS theme layer (UI/UX refresh)
   - Intent: modern B2B SaaS look while keeping existing markup.
   - Scope: visual tokens + components; no functional changes.
*/

:root {
  /* Brand */
  --lx-brand: #ca1517;
  --lx-brand-700: #a81113;
  --lx-brand-50: rgba(202, 21, 23, 0.08);

  /* Surfaces / elevation */
  --lx-surface-0: var(--bg-secondary);
  --lx-surface-1: var(--card-bg);
  --lx-border: var(--border-color);
  --lx-shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --lx-shadow-md: 0 10px 30px rgba(0,0,0,0.10);

  /* Radius */
  --lx-radius-sm: 10px;
  --lx-radius-md: 14px;
  --lx-radius-lg: 18px;

  /* Typography */
  --lx-title-weight: 650;
  --lx-title-tracking: -0.02em;

  /* Semantic accents - pastel variants for cards */
  --lx-info: #3b82f6;
  --lx-info-pastel: #3b82f6;
  --lx-success: #10b981;
  --lx-success-pastel: #5FB597; /* Verde de la captura */
  --lx-warning: #f59e0b;
  --lx-warning-pastel: #FFA14A; /* Naranja de la captura */
  --lx-danger: #ef4444;
  --lx-danger-pastel: #DF6A6A; /* Rojo de la captura */
  --lx-purple-pastel: #b491fb; /* Morado de la captura */
}

[data-theme="dark"] {
  --lx-brand-50: rgba(255, 107, 122, 0.14);
  --lx-shadow-sm: 0 2px 14px rgba(0,0,0,0.35);
  --lx-shadow-md: 0 16px 44px rgba(0,0,0,0.45);
}

/* ===== Page chrome ===== */

body {
  background: var(--lx-surface-0);
}

.app-shell {
  background: var(--lx-surface-0);
}

.app-topbar {
  background: var(--lx-surface-1);
  border-bottom: 1px solid var(--lx-border);
  backdrop-filter: blur(10px);
}

.app-main {
  background: var(--lx-surface-0);
}

/* ===== Titles ===== */

.title-view {
  margin: 0 0 1rem 0;
  padding: 0;
  font-size: 1.625rem;
  font-weight: var(--lx-title-weight);
  letter-spacing: var(--lx-title-tracking);
  line-height: 1.15;
  color: var(--text-primary);
}

@media (max-width: 576px) {
  .title-view {
    font-size: 1.35rem;
  }
}

/* ===== Cards ===== */

.card,
.card-general {
  border-radius: var(--lx-radius-lg);
}

.card-general {
  box-shadow: var(--lx-shadow-sm) !important;
}

.card.shadow-sm {
  box-shadow: var(--lx-shadow-sm) !important;
}

/* ===== Buttons ===== */

.btn-primary,
.boton-general {
  background-color: var(--lx-brand) !important;
  border-color: var(--lx-brand) !important;
}

.btn-primary:hover,
.boton-general:hover {
  background-color: var(--lx-brand-700) !important;
  border-color: var(--lx-brand-700) !important;
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 0.2rem rgba(202, 21, 23, 0.18) !important;
}

/* ===== Inputs ===== */

.form-control,
.form-select,
input,
select,
textarea {
  border-radius: var(--lx-radius-sm);
}

/* ===== Sidebar: soften active + modern hover ===== */

.option-aside-active {
  background-color: var(--lx-brand-50) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  border: 1px solid rgba(202, 21, 23, 0.18);
}

.option-aside-active > a {
  color: var(--text-primary) !important;
}

.option-aside-active .iconify {
  color: var(--lx-brand) !important;
}

.option-aside:hover {
  transform: translateX(0);
}

/* ===== Modals ===== */

.modal-content {
  border-radius: var(--lx-radius-lg);
  box-shadow: var(--lx-shadow-md);
}

.modal-header {
  background: linear-gradient(135deg, var(--lx-brand) 0%, #e24a4c 100%);
}

/* ===== Tables: keep clean SaaS look ===== */

.table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* ===== Links: keep subtle (avoid default bootstrap blue) ===== */

a {
  color: var(--lx-brand);
}

a:hover {
  color: var(--lx-brand-700);
}

/* ===== Bootstrap-ish polish to look SaaS ===== */

.card {
  border: 1px solid var(--lx-border);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--lx-border);
  color: var(--text-primary);
  padding: 0.95rem 1.1rem;
}

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-danger {
  border-bottom: 0;
  color: #fff !important;
}

.card-header.bg-primary {
  background: linear-gradient(135deg, var(--lx-brand) 0%, #e24a4c 100%) !important;
}

.card-header.bg-success {
  background: linear-gradient(135deg, var(--lx-success) 0%, #22c55e 100%) !important;
}

.card-header.bg-info {
  background: linear-gradient(135deg, var(--lx-info) 0%, #60a5fa 100%) !important;
}

.card-header.bg-danger {
  background: linear-gradient(135deg, var(--lx-danger) 0%, #fb7185 100%) !important;
}

.card-body {
  padding: 1.1rem;
}

/* Make “muted” actually look muted in both themes */
.text-muted {
  color: var(--text-secondary) !important;
}

/* Badges: slightly more modern */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Tables inside cards: remove harsh lines */
.table thead th {
  background: transparent;
}

.table-responsive {
  border-radius: var(--lx-radius-md);
}

/* ===== Page header / toolbar (opt-in markup) ===== */

.lx-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lx-page-header .lx-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.lx-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .lx-page-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== Dashboard Cards (Pastel Style) ===== */

.dashboard-card-pastel {
  border-radius: var(--lx-radius-lg);
  border: none;
  box-shadow: var(--lx-shadow-sm);
  color: #fff;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card-pastel:hover {
  transform: translateY(-2px);
  box-shadow: var(--lx-shadow-md);
}

.dashboard-card-pastel .card-body {
  padding: 1.5rem;
  z-index: 2;
  position: relative;
}

.dashboard-card-pastel .metric-label {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  opacity: 0.95;
}

.dashboard-card-pastel .metric-value {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1;
}

/* Background colors matching screenshots */
.pastel-green { background-color: var(--lx-success-pastel) !important; }
.pastel-red { background-color: var(--lx-danger-pastel) !important; }
.pastel-orange { background-color: var(--lx-warning-pastel) !important; }
.pastel-purple { background-color: var(--lx-purple-pastel) !important; }
.pastel-blue { background-color: var(--lx-info-pastel) !important; }

/* The circular progress / icon placeholder on the right */
.pastel-icon-circle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

/* ===== New Table Style (Matching screenshots) ===== */

.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: transparent !important;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: none;
  border-bottom: 2px solid var(--lx-border);
  padding: 1rem 0.75rem;
  letter-spacing: normal;
}

.table tbody td {
  border-bottom: 1px solid var(--lx-border);
  padding: 1rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  background-color: var(--lx-surface-1) !important;
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--lx-surface-0) !important;
}

/* Sort arrows placeholder */
.table thead th::after {
  content: '\21C5'; /* ⇅ */
  font-size: 0.8rem;
  margin-left: 0.25rem;
  opacity: 0.3;
}

/* Remove zebra striping */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--lx-surface-1) !important;
}

/* Action links with only icons: no underline (avoids "red _" next to pencil) */
a:has(> .billing-action-icon),
.table td a.ms-1[title*="Editar"],
.table td a.ms-1[title*="abono"],
.table td a.ms-1[title*="mes pago"],
.table td a.ms-1[title*="Bonificar"],
.table td a.ms-1[title*="mora"] {
  text-decoration: none !important;
}

/* Currency columns: never wrap $ and amount to two lines */
.table td.text-nowrap,
.table th.text-nowrap {
  white-space: nowrap !important;
}
/* Min width for "Total mes" / currency columns so they don't get squeezed */
.table .text-end.text-nowrap {
  min-width: 9rem;
}

/* Billing Edit: 9 fields in one row, no wrap */
.abono-una-fila {
  flex-wrap: nowrap !important;
}
.abono-field-col {
  min-width: 7.5rem;
  flex: 1 1 0;
}

/* ===== Filter bar (opt-in markup) ===== */

.lx-filterbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 100%);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-lg);
  padding: 0.85rem;
}

[data-theme="dark"] .lx-filterbar {
  background: linear-gradient(180deg, rgba(37,37,37,0.9) 0%, rgba(37,37,37,0.0) 100%);
}

.lx-filterbar .form-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Button groups: nicer rounding */
.btn-group > .btn {
  border-radius: 10px !important;
}

.btn-group > .btn:not(:first-child) {
  margin-left: 0.35rem;
}

/* Billing grouped rows (uses bootstrap table-secondary) */
.table-secondary {
  background-color: rgba(202, 21, 23, 0.06) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .table-secondary {
  background-color: rgba(255, 107, 122, 0.12) !important;
}