/* Sistema único para los encabezados de módulos.
   Se carga después de styles.css para aislarlo de reglas heredadas del prototipo. */
:root {
  --module-header-icon-size: 56px;
  --module-header-icon-radius: 18px;
  --module-header-icon-glyph: 28px;
  --module-header-title-size: 28px;
  --module-header-title-line: 34px;
}

.vaccines-page .health-treatment-header,
.deworming-page .health-treatment-header,
.treatments-page .health-treatment-header,
.weight-page .health-treatment-header,
.documents-page .document-page-header,
.expenses-page .expense-page-header {
  display: grid !important;
  grid-template-columns: var(--module-header-icon-size) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 4px !important;
  padding: 8px 2px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.expenses-page .expense-page-title {
  display: contents !important;
}

.vaccines-page .health-treatment-header-icon,
.deworming-page .health-treatment-header-icon,
.treatments-page .health-treatment-header-icon,
.weight-page .health-treatment-header-icon,
.documents-page .document-page-symbol,
.expenses-page .expense-page-title > span {
  display: grid !important;
  width: var(--module-header-icon-size) !important;
  height: var(--module-header-icon-size) !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: var(--module-header-icon-radius) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    0 5px 12px rgba(35, 58, 70, 0.09) !important;
}

.vaccines-page .health-treatment-header-icon {
  background: #7667c7 !important;
}

.deworming-page .health-treatment-header-icon {
  background: #3d9961 !important;
}

.treatments-page .health-treatment-header-icon {
  background: #1e80b5 !important;
}

.weight-page .health-treatment-header-icon {
  background: #168a9a !important;
}

.documents-page .document-page-symbol {
  background: #5f6fc4 !important;
}

.expenses-page .expense-page-title > span {
  background: #b6782e !important;
}

.solid-module-icon {
  display: block;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-image: var(--solid-icon);
  mask-image: var(--solid-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.solid-document { --solid-icon: url("assets/icons/fill/file-fill.svg"); }
.solid-weight { --solid-icon: url("assets/icons/fill/scales-fill.svg"); }
.solid-vaccine { --solid-icon: url("assets/icons/fill/syringe-fill.svg"); }
.solid-medication { --solid-icon: url("assets/icons/fill/pill-fill.svg"); }
.solid-expense { --solid-icon: url("assets/icons/fill/money-wavy-fill.svg"); }

.health-treatment-header-icon .solid-module-icon,
.document-page-symbol .solid-module-icon,
.expense-page-title > span .solid-module-icon {
  width: 28px;
  height: 28px;
}

/* Corrección óptica: los SVG no ocupan la misma proporción de su viewBox. */
.vaccines-page .health-treatment-header-icon .solid-vaccine {
  width: 26px;
  height: 26px;
  transform: translateY(-1px);
}

.weight-page .health-treatment-header-icon .solid-weight,
.expenses-page .expense-page-title > span .solid-expense {
  width: 26px;
  height: 26px;
}

.documents-page .document-page-symbol .solid-document {
  width: 25px;
  height: 25px;
  transform: translateY(-1px);
}

.treatments-page .health-treatment-header-icon .solid-medication {
  width: 28px;
  height: 28px;
}

.vaccines-page .health-treatment-header-icon .app-glyph,
.weight-page .health-treatment-header-icon .app-glyph,
.documents-page .document-page-symbol .app-glyph,
.expenses-page .expense-page-title > span .app-glyph {
  width: var(--module-header-icon-glyph) !important;
  height: var(--module-header-icon-glyph) !important;
  fill: currentColor !important;
  stroke: none !important;
}

.deworming-page .health-treatment-header-icon > svg {
  width: 38px !important;
  height: 38px !important;
  transform: translateY(1px);
}

.treatments-page .health-treatment-header-icon .app-glyph,
.treatments-page .health-medication-icon .app-glyph {
  fill: currentColor !important;
  stroke: none !important;
}

.treatments-page .health-medication-icon {
  color: #fff;
}

.treatments-page .health-medication-icon .app-glyph {
  width: 28px !important;
  height: 28px !important;
}

.treatments-page .health-medication-icon .solid-module-icon {
  width: 28px;
  height: 28px;
}

.home-quick-grid .quick-icon.type-document,
.home-quick-grid .quick-icon.type-weight,
.home-quick-grid .quick-icon.type-vaccine,
.home-quick-grid .quick-icon.type-deworming,
.home-quick-grid .quick-icon.type-medication,
.home-quick-grid .quick-icon.type-expense {
  border: 0 !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    0 3px 8px rgba(35, 58, 70, 0.08) !important;
}

/* Los iconos de formato dentro de las fichas usan tinta azul sobre fondo claro. */
.treatments-page .medication-history-card .health-medication-icon {
  color: #258ab7;
}

.home-quick-grid .quick-icon.type-document {
  background: #5f6fc4 !important;
}

.home-quick-grid .quick-icon.type-weight {
  background: #168a9a !important;
}

.home-quick-grid .quick-icon.type-vaccine {
  background: #7667c7 !important;
}

.home-quick-grid .quick-icon.type-deworming {
  background: #3d9961 !important;
}

.home-quick-grid .quick-icon.type-medication {
  background: #1e80b5 !important;
}

.home-quick-grid .quick-icon.type-expense {
  background: #b6782e !important;
}

.home-quick-grid .quick-icon:is(.type-document, .type-weight, .type-vaccine, .type-medication, .type-expense) .app-glyph {
  fill: currentColor !important;
  stroke: none !important;
}

.home-quick-grid .quick-icon.type-deworming > svg {
  width: 34px;
  height: 34px;
  transform: translateY(1px);
}

.home-quick-grid .quick-icon .solid-module-icon {
  width: 25px;
  height: 25px;
  background: #fff !important;
}

.home-quick-grid .quick-icon .solid-vaccine,
.home-quick-grid .quick-icon .solid-expense {
  width: 23px;
  height: 23px;
}

.home-quick-grid .quick-icon .solid-vaccine {
  transform: translateY(-2px);
}

.home-quick-grid .quick-icon .solid-expense {
  transform: translateY(-1px);
}

.home-quick-grid .quick-icon .solid-document {
  width: 21px;
  height: 21px;
  transform: translateY(-2px);
}

.home-quick-grid .quick-icon .solid-weight {
  width: 23px;
  height: 23px;
  transform: translateY(-1px);
}

.home-quick-grid .quick-icon .solid-medication {
  width: 25px;
  height: 25px;
  transform: translateY(-1px);
}

.vaccines-page .health-treatment-header-copy h1,
.deworming-page .health-treatment-header-copy h1,
.treatments-page .health-treatment-header-copy h1,
.weight-page .health-treatment-header-copy h1,
.documents-page .document-page-title h1,
.expenses-page .expense-page-title h1 {
  margin: 0 0 2px !important;
  color: #233f50 !important;
  font-size: var(--module-header-title-size) !important;
  font-weight: 750 !important;
  line-height: var(--module-header-title-line) !important;
  letter-spacing: -0.025em !important;
}

.vaccines-page .health-treatment-header-copy > span,
.deworming-page .health-treatment-header-copy > span,
.treatments-page .health-treatment-header-copy > span,
.weight-page .health-treatment-header-copy > span,
.documents-page .document-page-title > span,
.expenses-page .expense-page-title small {
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  font-weight: 540 !important;
  line-height: 18px !important;
}

@media (max-width: 699px) {
  :root {
    --module-header-icon-size: 52px;
    --module-header-icon-radius: 17px;
    --module-header-title-size: 26px;
    --module-header-title-line: 31px;
  }

  .vaccines-page .health-treatment-header,
  .deworming-page .health-treatment-header,
  .treatments-page .health-treatment-header,
  .weight-page .health-treatment-header,
  .documents-page .document-page-header,
  .expenses-page .expense-page-header {
    grid-template-columns: var(--module-header-icon-size) minmax(0, 1fr) 42px !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
}