/* Rasta Pets - contrato de densidad visual.
   Se carga al final de index.html con id css-compact-ui.
   Mantener fuera de capas mientras existan variantes normales sin estratificar.
   Las reglas locales de mayor especificidad y las importantes conservan su prioridad. */

:root {
  /* Contrato de densidad: valores efectivos compartidos por las pantallas. */
  --app-control-font-size: 13.8px;
  --app-button-min-height: 40px;
  --app-button-padding: 9px 14px;
  --app-button-font-size: 13px;
  --app-page-font-size: 14.2px;
  --app-table-font-size: 13.8px;
  --app-table-cell-padding: 12px 14px;
  --app-card-radius: 16px;

  --app-font-size: 15px;
  --app-title-size: 30px;
  --app-subtitle-size: 13.5px;
  --app-control-size: 42px;
  --sidebar-w: 244px;
  --sidebar-w-mini: 70px;
}

html {
  font-size: 15px;
}

body {
  font-size: var(--app-font-size);
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font-size: var(--app-control-font-size);
}

input,
select,
textarea {
  min-height: var(--app-control-size);
  padding: 10px 13px;
}

.btn,
.btn-sec,
.btn-sm,
.primary,
.danger,
.seg,
.chip {
  min-height: var(--app-button-min-height);
  padding: var(--app-button-padding);
  font-size: var(--app-button-font-size);
}

.page,
.page.dashboard,
.page-usuarios,
.clients-page,
.mascotas-page,
.page.servicios,
.page.servicios-dia,
.page.caja,
.page.configuracion,
.reportes-page {
  font-size: var(--app-page-font-size);
}

.page h1,
.page__header h1,
.header-left h1,
.caja-title,
.config-title,
.reportes-title,
.clients-title,
.mascotas-title,
.servicios-title,
.servicios-dia-title {
  font-size: var(--app-title-size);
  line-height: 1.12;
}

.page h2,
.card-header h2,
.detalle-title,
.modal__header h2,
.modal-header h2,
.modal-header h3 {
  font-size: 18px;
}

.page h3,
.card-header h3,
.detalle-section__title {
  font-size: 15px;
}

.subtitle,
.config-subtitle,
.caja-subtitle,
.detalle-subtitle,
.muted,
.kpi-label,
.detalle-label,
label {
  font-size: var(--app-subtitle-size);
}

table,
.modern-table,
.simple-table,
.config-table,
.tbl-usuarios,
.detalle-table {
  font-size: var(--app-table-font-size);
}

th,
td,
.modern-table thead th,
.modern-table tbody td,
.config-table th,
.config-table td,
.tbl-usuarios thead th,
.tbl-usuarios tbody td {
  padding: var(--app-table-cell-padding);
}

.card,
.dash-card,
.kpi-card,
.config-card,
.u-panel {
  border-radius: var(--app-card-radius);
}

.kpi-card {
  padding: 18px 20px;
}

.kpi-icon {
  width: 50px;
  height: 50px;
}

.kpi-icon svg {
  width: 25px;
  height: 25px;
}

.kpi-value {
  font-size: 22px;
}

.kpi-value.small-text {
  font-size: 17px;
}

.sidebar__brand {
  min-height: 96px;
  padding: 18px 15px;
  gap: 11px;
}

.brand__link {
  gap: 10px;
}

.brand__logo {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 15px;
}

.brand__name {
  font-size: 17px;
  letter-spacing: 0;
}

.sidebar__toggle {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 11px;
  font-size: 17px;
}

.sidebar__nav {
  padding: 14px 12px 8px 12px;
}

.nav__item,
.nav__logout {
  min-height: 46px;
  padding: 10px 13px;
  margin-bottom: 6px;
  gap: 11px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.nav__item.active .label {
  font-weight: 750;
}

.nav-icon {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}

.nav__item.active::before {
  left: 6px;
  width: 3px;
  height: 20px;
}

.sidebar__footer {
  padding: 14px 12px;
}

body.sidebar-mini .sidebar__brand {
  min-height: 82px;
  padding: 15px 8px;
}

body.sidebar-mini .brand__logo {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

body.sidebar-mini .sidebar__toggle {
  top: 60px;
  right: 6px;
  width: 24px;
  height: 24px;
  font-size: 14px;
}

body.sidebar-mini .nav__item,
body.sidebar-mini .nav__logout {
  min-height: 46px;
}

body.sidebar-mini .nav-icon {
  width: 22px;
  height: 22px;
}

.modal__header,
.modal-header {
  padding: 20px 26px;
}

.modal__body,
.modal-body {
  padding: 26px;
}

.modal__footer,
.modal-footer {
  padding: 20px 26px;
}

@media (max-width: 768px) {
  :root {
    --app-title-size: 24px;
  }

  body {
    font-size: 13.5px;
  }
}