:root {
  --cm-ink: #172033;
  --cm-muted: #667085;
  --cm-line: #e4e7ec;
  --cm-surface: #ffffff;
  --cm-canvas: #f5f7fb;
  --cm-primary: #3157d5;
  --cm-primary-dark: #2442a6;
  --cm-accent: #34c59a;
  --cm-danger: #d92d20;
  --cm-radius: 16px;
  --cm-shadow: 0 12px 32px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

body.modern-admin,
body.modern-login {
  color: var(--cm-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.modern-admin {
  min-height: 100vh;
  background: var(--cm-canvas) !important;
}

/* Login */
body.modern-login {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(52, 197, 154, .18), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(49, 87, 213, .22), transparent 34%),
    #101828 !important;
}

body.modern-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  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: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.modern-login .form-signin {
  position: relative;
  z-index: 1;
  width: min(100%, 440px) !important;
  max-width: 440px !important;
  margin: 0 !important;
  padding: 42px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}

.modern-login .form-signin::before {
  content: "Administración de cobranzas";
  display: block;
  margin-bottom: 8px;
  color: var(--cm-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.modern-login .form-signin img {
  display: block;
  width: auto !important;
  max-width: 220px !important;
  height: 58px !important;
  margin: 0 auto 28px !important;
  object-fit: contain;
  object-position: center;
}

.modern-login .form-signin h1 {
  margin: 0 0 8px !important;
  color: var(--cm-ink) !important;
  font-size: 30px;
  font-weight: 750 !important;
  letter-spacing: -.03em;
}

.modern-login .form-signin h1::after {
  content: "Ingresá con tus credenciales para continuar.";
  display: block;
  margin-top: 10px;
  color: var(--cm-muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.modern-login .form-control {
  width: 100%;
  height: 52px;
  margin: 14px 0 0;
  padding: 0 16px;
  color: var(--cm-ink);
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .2s, box-shadow .2s;
}

.modern-login .form-control:focus {
  border-color: var(--cm-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(49,87,213,.12);
}

.modern-login .form-login {
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-dark));
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(49,87,213,.24);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.modern-login .form-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(49,87,213,.3);
}

.modern-login .form-login-msg.alert {
  margin-top: 18px !important;
  padding: 12px 14px;
  border: 1px solid #fecdca;
  border-radius: 10px;
  color: #b42318 !important;
  background: #fef3f2;
  font-size: 13px;
}

/* Cabecera de administración */
.modern-admin .navbar {
  min-height: 92px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  border: 0;
  background: #101828 !important;
  box-shadow: 0 8px 24px rgba(16,24,40,.16) !important;
}

.modern-admin .navbar-brand img {
  display: block;
  width: 118px;
  max-width: 118px;
  height: auto;
  object-fit: contain;
}

.modern-admin .navbar-collapse { background: transparent !important; }
.modern-admin .navbar-nav { align-items: center; }
.modern-admin .navbar .nav-link {
  padding: 9px 13px !important;
  color: #e4e7ec !important;
  font-size: 14px;
  font-weight: 600;
}

.modern-admin .navbar .nav-item:last-child .nav-link {
  margin-left: 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
}

.modern-admin section.py-5 {
  padding: 46px 0 18px !important;
  text-align: left !important;
}

.modern-admin section.py-5 h2 {
  margin: 0;
  color: var(--cm-ink) !important;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 760;
  letter-spacing: -.035em;
}

.modern-admin section.py-5 h2::after {
  content: "Gestioná y consultá la información desde un solo lugar";
  display: block;
  margin-top: 8px;
  color: var(--cm-muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.modern-admin > .container,
.modern-admin section .container { max-width: 1180px; }

.modern-admin > .container > .row > .col-12 {
  min-width: 0;
  margin-bottom: 48px;
  padding: 22px;
  border: 1px solid rgba(228,231,236,.9);
  border-radius: var(--cm-radius);
  background: var(--cm-surface);
  box-shadow: var(--cm-shadow);
}

/* Navegación secundaria */
.modern-admin #nav-tab {
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0 !important;
  padding: 5px;
  border: 1px solid var(--cm-line);
  border-radius: 13px;
  background: #f8fafc;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.modern-admin #nav-tab .nav-link {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 9px;
  color: #475467;
  font-size: 13px;
  font-weight: 650;
  transition: .2s ease;
}

.modern-admin #nav-tab .nav-link:hover { color: var(--cm-primary); background: #eef2ff; }
.modern-admin #nav-tab .nav-link.active {
  color: #fff !important;
  background: var(--cm-primary) !important;
  box-shadow: 0 5px 12px rgba(49,87,213,.22);
}

.modern-admin hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--cm-line);
}

.modern-admin .btn {
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
}

.modern-admin .btn-primary,
.modern-admin #dropdownMenuButton {
  border-color: var(--cm-primary);
  background: var(--cm-primary);
}
.modern-admin .btn-primary:hover { border-color: var(--cm-primary-dark); background: var(--cm-primary-dark); }

.modern-admin #btn_generarinforme {
  display: inline-flex !important;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  color: #067647 !important;
  background: #ecfdf3 !important;
  font-size: 14px;
  font-weight: 700;
}

.modern-admin .dropdown-menu {
  padding: 7px;
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  box-shadow: var(--cm-shadow);
}
.modern-admin .dropdown-item { padding: 10px 12px; border-radius: 8px; font-size: 14px; }

/* Formularios y filtros */
.modern-admin .form-group {
  min-width: 190px;
  margin-right: 12px;
  margin-bottom: 18px;
  vertical-align: top;
}
.modern-admin .form-group label {
  margin-bottom: 7px;
  color: #344054 !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.modern-admin .form-control {
  min-height: 44px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  color: var(--cm-ink);
  background: #fff;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.modern-admin .form-control:focus {
  border-color: var(--cm-primary);
  box-shadow: 0 0 0 4px rgba(49,87,213,.1);
}
.modern-admin #total {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 240px;
  min-height: 70px;
  padding: 12px 24px;
  border-radius: 14px;
  color: #067647 !important;
  background: #ecfdf3;
  font-size: 26px !important;
  letter-spacing: -.02em;
}

.modern-admin #informacion {
  display: block;
  margin: 22px 0 8px;
  padding: 14px 18px;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  color: #344054;
  background: #f5f7ff;
  font-size: 14px;
}

.modern-admin #piechart_3d {
  width: 100% !important;
  max-width: 760px;
  height: 500px !important;
  margin: 18px auto 6px !important;
  border: 1px solid var(--cm-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

/* Tablas y DataTables */
.modern-admin .tab-content {
  max-width: 100%;
  margin-top: 18px;
}
.modern-admin .tab-pane { min-width: 0; }
.modern-admin .dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  padding-bottom: 8px;
  color: var(--cm-muted);
  font-size: 13px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #b8c2d8 #eef1f6;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.modern-admin .dataTables_wrapper::-webkit-scrollbar { height: 10px; }
.modern-admin .dataTables_wrapper::-webkit-scrollbar-track { border-radius: 10px; background: #eef1f6; }
.modern-admin .dataTables_wrapper::-webkit-scrollbar-thumb { border-radius: 10px; background: #b8c2d8; }
.modern-admin .dataTables_wrapper .dataTables_filter input,
.modern-admin .dataTables_wrapper .dataTables_length select {
  min-height: 38px;
  margin-left: 8px;
  padding: 6px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
}
.modern-admin table.dataTable,
.modern-admin .table {
  width: 100% !important;
  margin-top: 18px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.modern-admin table.dataTable { min-width: max-content; }
.modern-admin table.dataTable thead th,
.modern-admin .table thead th {
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--cm-line) !important;
  color: #475467;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.modern-admin table.dataTable tbody td,
.modern-admin .table tbody td {
  padding: 14px !important;
  border-top: 1px solid #f0f2f5 !important;
  color: #344054;
  font-size: 13px;
  vertical-align: middle;
}
.modern-admin .table-striped tbody tr:nth-of-type(odd) { background: #fcfcfd; }
.modern-admin table.dataTable tbody tr:hover { background: #f7f9ff; }
.modern-admin .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.modern-admin .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  background: var(--cm-primary) !important;
}

/* Modales */
.modern-admin .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(16,24,40,.2);
}
.modern-admin .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--cm-line); }
.modern-admin .modal-title { color: var(--cm-ink); font-weight: 750; }
.modern-admin .modal-body { padding: 24px; }
.modern-admin .modal-footer { padding: 16px 24px; border-top: 1px solid var(--cm-line); }

/* Vista anual: prioriza la grilla de doce meses sobre los encabezados. */
.annual-dashboard .navbar {
  min-height: 56px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.annual-dashboard .navbar-brand img { width: 76px; max-width: 76px; }

.annual-dashboard section.py-5 { padding: 12px 0 6px !important; }

.annual-dashboard section.py-5 h2 { font-size: 25px; }

.annual-dashboard section.py-5 h2::after {
  margin-top: 3px;
  font-size: 12px;
}

.annual-dashboard section .container,
.annual-dashboard > .annual-container {
  width: calc(100% - 28px);
  max-width: none !important;
}

.annual-dashboard > .annual-container > .row > .col-12 {
  margin-bottom: 24px;
  padding: 10px 12px;
}

.annual-dashboard #nav-tab { margin-top: 0 !important; padding: 2px; }

.annual-dashboard #nav-tab .nav-link { padding: 6px 10px; font-size: 11px; }

.annual-dashboard hr { margin: 8px 0; }

.annual-dashboard .annual-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 5px;
}

.annual-dashboard .annual-year-filter {
  width: 170px;
  min-width: 170px;
  margin: 0;
}

.annual-dashboard .annual-year-filter label { margin-bottom: 3px; }

.annual-dashboard .annual-year-filter .form-control { min-height: 37px; }

.annual-dashboard #btn_generarinforme {
  min-height: 37px;
  padding: 7px 12px !important;
  font-size: 12px;
}

.annual-dashboard .tab-content { margin-top: 5px; }

.annual-dashboard .dataTables_wrapper { width: 100%; overflow-x: visible; }

.annual-dashboard table.dataTable {
  width: 100% !important;
  table-layout: fixed;
}

.annual-dashboard .dataTables_wrapper .dataTables_filter input,
.annual-dashboard .dataTables_wrapper .dataTables_length select {
  min-height: 33px;
  padding: 4px 8px;
}

.annual-dashboard .dataTables_scroll { margin-top: 8px; }

.annual-dashboard .dataTables_scrollHead,
.annual-dashboard .dataTables_scrollBody { border: 0 !important; }

.annual-dashboard .dataTables_scrollHead table,
.annual-dashboard .dataTables_scrollBody table {
  margin: 0 !important;
  border-radius: 0;
}

.annual-dashboard .dataTables_scrollHead table {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.annual-dashboard .dataTables_scrollBody table {
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.annual-dashboard table.dataTable thead th {
  padding: 8px 3px !important;
  font-size: 9px;
  letter-spacing: .025em;
  text-align: center;
}

.annual-dashboard table.dataTable tbody td {
  min-width: 0;
  padding: 7px 3px !important;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

.annual-dashboard table.dataTable tbody td:nth-child(-n + 2) {
  min-width: 0;
  max-width: none;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

.annual-dashboard .annual-amount {
  display: block;
  margin: 0 0 4px;
  color: var(--cm-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}

.annual-dashboard .annual-pay-button {
  display: block;
  min-height: 25px;
  margin: 0 auto;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1.1;
}

.annual-dashboard .annual-paid-button,
.annual-dashboard .annual-paid-button:disabled {
  border: 1px solid #198754;
  background-color: #198754;
  color: #fff;
  opacity: 1;
}

/* Clientes: concentra las acciones y deja el listado visible sin scroll lateral. */
.customers-dashboard .navbar {
  min-height: 56px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.customers-dashboard .navbar-brand img { width: 76px; max-width: 76px; }
.customers-dashboard section.py-5 { padding: 12px 0 6px !important; }
.customers-dashboard section.py-5 h2 { font-size: 25px; }
.customers-dashboard section.py-5 h2::after { margin-top: 3px; font-size: 12px; }

.customers-dashboard section .container,
.customers-dashboard > .customers-container {
  width: calc(100% - 28px);
  max-width: none !important;
}

.customers-dashboard > .customers-container > .row > .col-12 {
  margin-bottom: 24px;
  padding: 10px 12px;
}

.customers-dashboard #nav-tab { padding: 2px; }
.customers-dashboard #nav-tab .nav-link { padding: 6px 10px; font-size: 11px; }
.customers-dashboard hr { margin: 8px 0; }

.customers-dashboard .customers-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
}

.customers-dashboard .customers-toolbar #btn_generarinforme,
.customers-dashboard .customers-toolbar #dropdownMenuButton {
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: 11px;
}

.customers-dashboard .tab-content { margin-top: 5px; }
.customers-dashboard .dataTables_wrapper { overflow-x: visible; font-size: 11px; }

.customers-dashboard .dataTables_wrapper .dataTables_filter input,
.customers-dashboard .dataTables_wrapper .dataTables_length select {
  min-height: 32px;
  padding: 4px 7px;
}

.customers-dashboard table.dataTable {
  width: 100% !important;
  min-width: 0;
  margin-top: 10px !important;
  table-layout: fixed;
}

.customers-dashboard table.dataTable thead th {
  padding: 9px 6px !important;
  font-size: 9px;
  letter-spacing: .025em;
  white-space: normal;
}

.customers-dashboard table.dataTable tbody td {
  padding: 8px 6px !important;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.customers-dashboard .customer-action-button {
  min-height: 29px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap;
}

.users-dashboard .users-toolbar { justify-content: flex-end; }

.payments-dashboard .payments-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 7px;
}

.payments-dashboard .payments-filter {
  width: 190px !important;
  min-width: 0;
  margin: 0;
}

.payments-dashboard .payments-filter label { margin-bottom: 3px; font-size: 11px; }
.payments-dashboard .payments-filter .form-control { min-height: 34px; padding: 5px 8px; }

.payments-dashboard .payments-total {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid #abefc6;
  border-radius: 9px;
  background: #ecfdf3;
}

.payments-dashboard .payments-total #total {
  margin: 0;
  color: #067647 !important;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .modern-login .form-signin { padding: 30px 24px; }
  .modern-admin .navbar { padding: 10px 18px; }
  .modern-admin .navbar-collapse { padding: 12px 0; }
  .modern-admin section.py-5 { padding: 30px 0 14px !important; }
  .modern-admin > .container > .row > .col-12 { padding: 16px; border-radius: 12px; }
  .modern-admin .form-group { width: 100% !important; min-width: 0; margin-right: 0; }
  .modern-admin #piechart_3d { height: 390px !important; }
  .modern-admin .dataTables_wrapper { overflow-x: auto; }
  .modern-admin .dataTables_filter,
  .modern-admin .dataTables_length { float: none !important; margin: 10px 0; text-align: left !important; }
  .annual-dashboard section .container,
  .annual-dashboard > .annual-container { width: calc(100% - 20px); }
  .annual-dashboard .annual-toolbar { align-items: stretch; flex-direction: column; gap: 7px; }
  .annual-dashboard .annual-year-filter { width: 100%; }
  .customers-dashboard section .container,
  .customers-dashboard > .customers-container { width: calc(100% - 20px); }
  .customers-dashboard .dataTables_wrapper { overflow-x: auto; }
  .customers-dashboard table.dataTable { min-width: 760px; }
  .users-dashboard table.dataTable { min-width: 540px; }
  .payments-dashboard .payments-toolbar { align-items: stretch; flex-wrap: wrap; }
  .payments-dashboard .payments-filter { width: 100% !important; }
  .payments-dashboard .payments-total { width: 100%; margin-left: 0; }
}