:root {
  --ink: #244357;
  --ink-soft: #627783;
  --cream: #f3f6f8;
  --paper: rgba(255, 255, 255, 0.78);
  --paper-solid: #ffffff;
  --blue: #a9d3ee;
  --blue-strong: #72b5df;
  --blue-deep: #2d6688;
  --yellow: #f5d875;
  --yellow-soft: #fff2bd;
  --coral: #f3aaa0;
  --mint: #b8ddc6;
  --line: rgba(45, 84, 104, 0.13);
  --shadow: 0 14px 34px rgba(55, 75, 85, 0.09), 0 2px 7px rgba(55, 75, 85, 0.05);
  --radius: 10px;
  --nav-height: 78px;
  font-family: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
}

/* Keep letters separate everywhere, including controls whose font shorthand
   resets inherited variants. Preserve kerning and numeric variants. */
*, *::before, *::after {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0 !important;
}

/* Visor de documentos */
.document-viewer-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: 760px;
  max-height: min(860px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background: #f5f8fa;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(23, 47, 63, 0.26);
}

.document-viewer-dialog::backdrop {
  background: rgba(25, 44, 56, 0.34);
  backdrop-filter: blur(9px);
}

#documentViewerContent {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  max-height: min(860px, calc(100dvh - 28px));
}

.document-viewer-handle {
  display: none;
}

.document-viewer-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(36, 67, 87, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.document-viewer-heading > button {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 67, 87, 0.06);
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
}

.document-viewer-heading h2,
.document-viewer-heading p,
.document-viewer-heading div > span {
  margin: 0;
}

.document-viewer-heading div > span {
  color: #397c9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.document-viewer-heading h2 {
  overflow: hidden;
  margin: 2px 0 1px;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-viewer-heading p {
  color: var(--ink-soft);
  font-size: 10px;
}

.document-viewer-category {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--document-color) 15%, white);
  font-size: 20px;
}

.document-preview-stage {
  display: grid;
  min-height: 380px;
  overflow: auto;
  padding: 17px;
  background: #e8edf0;
}

.document-pdf-frame,
.document-image-preview {
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: 12px;
  background: white;
  box-shadow: 0 7px 24px rgba(36, 67, 87, 0.12);
}

.document-image-preview {
  height: auto;
  min-height: 0;
  max-height: 620px;
  object-fit: contain;
}

.document-preview-placeholder {
  display: grid;
  align-self: center;
  justify-items: center;
  max-width: 410px;
  margin: auto;
  padding: 38px 26px;
  border: 1px solid rgba(36, 67, 87, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  text-align: center;
}

.document-preview-placeholder > span {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 15px;
  border-radius: 21px;
  background: color-mix(in srgb, var(--document-color) 16%, white);
  font-size: 29px;
}

.document-preview-placeholder strong {
  font-size: 17px;
}

.document-preview-placeholder p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.document-viewer-notes {
  margin: 0;
  padding: 12px 18px 0;
  background: white;
  color: var(--ink-soft);
  font-size: 12px;
}

.document-viewer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 13px 16px max(13px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(36, 67, 87, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

.document-viewer-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.document-delete-button {
  background: #fff0ee;
  color: #b54f46;
}

.document-download-button {
  background: #d8eef9;
  color: #237ba5;
}

.document-edit-button {
  background: #eef3f6;
  color: #496b7b;
}

.document-download-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@media (max-width: 620px) {
  .document-viewer-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto 0 0;
    border-radius: 27px 27px 0 0;
  }

  #documentViewerContent {
    max-height: calc(100dvh - 28px);
  }

  .document-viewer-handle {
    display: block;
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(36, 67, 87, 0.16);
    transform: translateX(-50%);
  }

  .document-viewer-heading {
    padding: 22px 13px 13px;
  }

  .document-viewer-category {
    width: 38px;
    height: 38px;
  }

  .document-preview-stage {
    min-height: 320px;
    padding: 12px;
  }

  .document-pdf-frame {
    min-height: 470px;
  }
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--cream);
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(169, 211, 238, 0.24), transparent 28rem),
    radial-gradient(circle at 8% 92%, rgba(184, 201, 232, 0.16), transparent 30rem),
    var(--cream);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(114, 181, 223, 0.42);
  outline-offset: 2px;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 19rem;
  height: 19rem;
  border-radius: 45% 55% 58% 42%;
  filter: blur(1px);
  opacity: 0.28;
  pointer-events: none;
}

.ambient-one {
  top: -8rem;
  right: -8rem;
  background: var(--blue);
  transform: rotate(22deg);
}

.app-shell {
  width: min(100%, 980px);
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 18px calc(var(--nav-height) + 34px);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: max(12px, env(safe-area-inset-top)) 0 10px;
  background: linear-gradient(to bottom, rgba(243, 246, 248, 0.96) 55%, rgba(243, 246, 248, 0));
}

.pet-switcher,
.account-button,
.icon-button,
.text-button,
.nav-item,
.filter-chip,
.option-card,
.quick-card,
.record-card,
.pet-choice {
  border: 0;
  cursor: pointer;
}

.pet-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 3px 11px rgba(63, 83, 94, 0.05);
  backdrop-filter: blur(16px) saturate(1.2);
}

.mini-avatar,
.pet-photo,
.choice-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(145deg, var(--yellow-soft), var(--yellow));
}

.pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-avatar-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #e5f1f6;
  color: #4e8299;
}

.pet-avatar-placeholder.cat {
  background: #f3ecdd;
  color: #987843;
}

.pet-avatar-placeholder .app-glyph {
  width: 56%;
  height: 56%;
}

.mini-avatar {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 13px;
}

.dog-face {
  position: relative;
  width: 70%;
  height: 68%;
  margin-top: 10%;
  border-radius: 48% 48% 45% 45%;
  background: #c9874f;
  box-shadow: inset 0 -3px 0 rgba(104, 64, 36, 0.1);
}

.dog-face::before,
.dog-face::after {
  position: absolute;
  z-index: -1;
  top: -5%;
  width: 42%;
  height: 65%;
  content: "";
  border-radius: 50% 50% 65% 35%;
  background: #9b623d;
}

.dog-face::before {
  left: -27%;
  transform: rotate(25deg);
}

.dog-face::after {
  right: -27%;
  transform: rotate(-25deg) scaleX(-1);
}

.dog-eyes {
  position: absolute;
  top: 33%;
  left: 22%;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: #3d312b;
  box-shadow: 18px 0 #3d312b;
}

.dog-muzzle {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 40%;
  height: 36%;
  border-radius: 50%;
  background: #f6d8b5;
  transform: translateX(-50%);
}

.dog-muzzle::before {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 7px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #3d312b;
  transform: translateX(-50%);
}

.pet-switcher-copy {
  display: grid;
  min-width: 84px;
  text-align: left;
}

.pet-switcher-copy span {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pet-switcher-copy strong {
  margin-top: 1px;
  font-size: 15px;
}

.chevron {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translateY(1px);
}

.account-button,
.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 3px 11px rgba(63, 83, 94, 0.05);
}

.account-button svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

#content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100vh - 180px);
  outline: none;
}

.page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  animation: none;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

button,
[role="button"],
summary {
  -webkit-tap-highlight-color: transparent;
}

.quick-card:active,
.reminder-button:active,
.option-card:active,
.primary-button:active,
.secondary-button:active,
.text-button:active {
  transform: scale(0.975);
  transition-duration: 70ms;
}

.context-highlight {
  animation: context-highlight 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes context-highlight {
  0%, 100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(61, 139, 183, 0);
  }
  20%, 72% {
    background-color: rgba(169, 211, 238, 0.3);
    box-shadow: 0 0 0 7px rgba(169, 211, 238, 0.15);
  }
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 2px 20px;
}

.page-heading.compact {
  align-items: center;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  margin-bottom: 0;
  font-size: clamp(29px, 7vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 0;
  font-size: 24px;
  letter-spacing: -0.012em;
}

h3 {
  margin-bottom: 5px;
  font-size: 16px;
}

.muted {
  color: var(--ink-soft);
}

.local-sync-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(59, 139, 183, 0.16);
  border-radius: 17px;
  background: rgba(220, 241, 252, 0.82);
}

.local-sync-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: white;
  color: #2c86b8;
  font-size: 17px;
  font-weight: 800;
}

.local-sync-banner strong,
.local-sync-banner p {
  display: block;
}

.local-sync-banner strong {
  font-size: 12px;
}

.local-sync-banner p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.3;
}

.local-sync-banner button {
  min-height: 35px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: #4da7da;
  color: white;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.local-sync-banner.waiting {
  grid-template-columns: auto minmax(0, 1fr);
  background: rgba(255, 241, 199, 0.7);
  border-color: rgba(193, 151, 48, 0.16);
}

.hero-card,
.surface-card,
.quick-card,
.record-card,
.option-card,
.profile-hero,
.info-card,
.report-sheet,
.document-card,
.form-card {
  border: 1px solid rgba(45, 84, 104, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-card {
  position: relative;
  display: grid;
  min-height: 200px;
  overflow: hidden;
  padding: 25px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.5), transparent 54%),
    linear-gradient(135deg, #a9d3ee, #cfe7f4);
}

.hero-card::before,
.hero-card::after {
  display: none;
}

.hero-card::before {
  top: -55px;
  right: -45px;
  width: 190px;
  height: 190px;
}

.hero-card::after {
  right: 100px;
  bottom: -65px;
  width: 135px;
  height: 135px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 65%;
}

.home-page .page-heading {
  margin-top: 0;
  margin-bottom: 14px;
}

.welcome-title {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.035em;
}

.hero-copy h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.05;
}

.hero-copy p {
  margin-bottom: 0;
  color: rgba(36, 67, 87, 0.8);
  line-height: 1.45;
}

.profile-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(48, 124, 162, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(44, 75, 91, 0.07);
  cursor: default;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.profile-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
}

.profile-progress-heading strong {
  font-size: 12px;
}

.profile-progress-heading b {
  color: #287da7;
  font-size: 11px;
  white-space: nowrap;
}

.profile-progress-missing {
  grid-column: 1 / -1;
  margin-top: -2px;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.4;
}

.profile-progress-missing > button {
  padding: 2px 1px;
  border: 0;
  background: transparent;
  color: #287da7;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.profile-progress-missing > button:hover,
.profile-progress-missing > button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-focus-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(46, 126, 164, 0.18);
  border-radius: 10px;
  background: #edf6fa;
  color: #315e73;
}

.profile-focus-hint > span,
.profile-focus-hint .app-glyph {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.profile-focus-hint p { margin: 0; }
.profile-focus-hint.completed { background: #edf7f0; color: #35704b; }

.profile-multi-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.profile-multi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-multi-chips:empty { display: none; }

.profile-multi-chips button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px 4px 10px;
  border: 1px solid rgba(53, 112, 140, 0.12);
  border-radius: 10px;
  background: #edf5f8;
  color: #315f74;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.profile-multi-chips .app-glyph { width: 13px; height: 13px; }

.profile-multi-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.profile-multi-entry button {
  min-width: 70px;
  border: 0;
  border-radius: 10px;
  background: #e4f0f6;
  color: #26769c;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.profile-field-target {
  position: relative;
  z-index: 1;
  padding: 7px;
  margin: -7px;
  border-radius: 10px;
  outline: 2px solid rgba(50, 139, 181, 0.42);
  outline-offset: 2px;
  animation: profile-field-arrival 700ms ease both;
}

@keyframes profile-field-arrival {
  from { outline-color: rgba(50, 139, 181, 0); transform: translateY(5px); }
  to { outline-color: rgba(50, 139, 181, 0.42); transform: translateY(0); }
}

/* Accesos rápidos: colores suaves por categoría, sin colorear las tarjetas. */
.home-quick-grid .quick-icon.type-document {
  background: #eef0f8;
  color: #6678a8;
}

.home-quick-grid .quick-icon.type-weight {
  background: #edf5f4;
  color: #4b8390;
}

.home-quick-grid .quick-icon.type-vaccine {
  background: #f8efeb;
  color: #a5674d;
}

.home-quick-grid .quick-icon.type-deworming {
  background: #edf5ef;
  color: #5c886b;
}

.home-quick-grid .quick-icon.type-medication {
  background: #eaf3f8;
  color: #347aa1;
}

.home-quick-grid .quick-icon.type-expense {
  background: #f7f1e8;
  color: #946a3d;
}

/* Encabezados de sección: una sola escala y la misma paleta que en Inicio. */
.health-treatment-header,
.document-page-header,
.expense-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  padding: 8px 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.health-treatment-header-icon,
.document-page-symbol,
.expense-page-title > span {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 18px;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.26);
}

.health-treatment-header-icon .app-glyph,
.health-treatment-header-icon > svg,
.document-page-symbol .app-glyph,
.expense-page-title .app-glyph {
  width: 28px;
  height: 28px;
}

.preventive-page-header.header-vaccine .preventive-page-header-icon {
  background: linear-gradient(145deg, #b77a5f, #95563f);
}

.preventive-page-header.header-deworming .preventive-page-header-icon {
  background: linear-gradient(145deg, #71a47f, #4f7c5e);
}

.treatments-page .health-treatment-header-icon {
  background: linear-gradient(145deg, #5594b8, #2d6e95);
}

.weight-page .weight-page-header-icon {
  background: linear-gradient(145deg, #6498a1, #3f7782);
}

.document-page-symbol {
  background: linear-gradient(145deg, #7d8fbe, #586c9e);
}

.expense-page-title > span {
  background: linear-gradient(145deg, #aa8256, #866039);
}

.health-treatment-header-copy h1,
.preventive-page-header.header-deworming .health-treatment-header-copy h1,
.document-page-title h1,
.expense-page-title h1 {
  margin: 0 0 2px;
  font-size: 28px;
  font-weight: 750;
  line-height: 34px;
  letter-spacing: -0.025em;
}

.health-treatment-header-copy > span,
.document-page-title > span,
.expense-page-title small {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 18px;
}

@media (max-width: 699px) {
  .health-treatment-header,
  .document-page-header,
  .expense-page-header {
    gap: 12px;
    padding-bottom: 12px;
  }

  .health-treatment-header-icon,
  .document-page-symbol,
  .expense-page-title > span {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .health-treatment-header-copy h1,
  .preventive-page-header.header-deworming .health-treatment-header-copy h1,
  .document-page-title h1,
  .expense-page-title h1 {
    font-size: 26px;
    line-height: 31px;
  }
}

/* Onboarding 2026: short story, KOHO-like access and contextual permission. */
.onboarding-story-page,
.onboarding-access-page,
.onboarding-notifications-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.onboarding-story-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: calc(100% - 76px); }
.onboarding-story-bars i { height: 3px; border-radius: 3px; background: #d9e2e7; }
.onboarding-story-bars i.active { background: #278cb6; }
.onboarding-skip { position: absolute; top: max(17px, env(safe-area-inset-top)); right: 20px; min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: #58717e; font: inherit; font-size: 14px; cursor: pointer; }
.onboarding-story-visual { position: relative; display: grid; flex: 1 1 auto; place-items: center; min-height: 300px; padding-top: 45px; }
.onboarding-story-icon { position: absolute; top: 58px; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #e5f4fa; color: #1685b2; transform: translateX(-50%); }
.onboarding-story-icon .app-glyph { width: 28px; height: 28px; }
.onboarding-story-copy { margin: 12px 0 22px; }
.onboarding-story-copy > span, .onboarding-notification-copy > span, .onboarding-access-copy > span { color: #2785ac; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.onboarding-story-copy h1, .onboarding-notification-copy h1, .onboarding-access-copy h1 { margin: 8px 0 10px; color: #173b50; font-size: clamp(30px, 8.4vw, 42px); line-height: 1.07; letter-spacing: -.04em; }
.onboarding-story-copy p, .onboarding-notification-copy p, .onboarding-access-copy p { margin: 0; color: #5e7582; font-size: 16px; line-height: 1.55; }
.onboarding-mini-stack { display: grid; width: min(100%, 330px); margin-top: 68px; padding: 10px; gap: 7px; border: 1px solid #deeaef; border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 20px 50px rgba(30,67,84,.11); transform: rotate(-2deg); }
.onboarding-mini-stack > span { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 55px; padding: 6px 9px; border-bottom: 1px solid #e8eef1; color: #183b4f; }
.onboarding-mini-stack > span:last-child { border-bottom: 0; }
.onboarding-mini-stack i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #eaf5fa; color: #1887b2; }
.onboarding-mini-stack i .app-glyph { width: 21px; height: 21px; }
.onboarding-mini-stack b { font-size: 14px; }.onboarding-mini-stack small { color: #6d818c; font-size: 11px; }
.onboarding-reminder-card { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 14px; width: min(100%, 330px); margin-top: 68px; padding: 18px; border: 1px solid #dce9ee; border-radius: 10px; background: #fff; box-shadow: 0 22px 52px rgba(30,67,84,.13); transform: rotate(1.5deg); }
.onboarding-reminder-card > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 10px; background: #1d8eba; color: #fff; }
.onboarding-reminder-card .app-glyph { width: 29px; height: 29px; }.onboarding-reminder-card div { display: grid; gap: 2px; }.onboarding-reminder-card small { color: #2785ac; font-size: 10px; font-weight: 800; }.onboarding-reminder-card strong { color: #173b50; font-size: 18px; }.onboarding-reminder-card p { margin: 0; color: #6c818d; font-size: 13px; }
.onboarding-report-card { width: min(100%, 330px); margin-top: 70px; padding: 22px; border: 1px solid #dde8ed; border-radius: 10px; background: #fff; box-shadow: 0 22px 52px rgba(30,67,84,.13); transform: rotate(-1deg); }
.onboarding-report-card > div { display: flex; align-items: center; gap: 10px; color: #173b50; }.onboarding-report-card > div span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #e5f4fa; color: #1685b2; }.onboarding-report-card .app-glyph { width: 20px; height: 20px; }.onboarding-report-card i { display: block; width: 100%; height: 7px; margin-top: 14px; border-radius: 4px; background: #e8eef1; }.onboarding-report-card i.short { width: 68%; }.onboarding-report-card small { display: block; margin-top: 20px; color: #319064; font-weight: 700; }

.onboarding-access-page { width: 100%; max-width: 600px; padding: 0; background: linear-gradient(145deg, #4d83bd 0%, #8d82c7 49%, #e8a49b 100%); }
.onboarding-access-visual { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; min-height: 0; padding: max(28px, env(safe-area-inset-top)) 24px 30px; overflow: hidden; color: #fff; }
.onboarding-access-visual::before, .onboarding-access-visual::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); opacity: .28; }.onboarding-access-visual::before { top: 9%; right: -16%; width: 260px; height: 260px; background: #ffe3b0; }.onboarding-access-visual::after { top: 31%; left: -20%; width: 300px; height: 300px; background: #73d9e4; }
.onboarding-access-visual > .onboarding-brand-mark { position: absolute; z-index: 1; top: max(32px, env(safe-area-inset-top)); left: 24px; width: 44px; height: 44px; color: #fff; }.onboarding-access-visual > .onboarding-brand-mark .app-glyph { width: 29px; height: 29px; }
.onboarding-access-preview { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; width: min(92%, 360px); margin: auto; padding: 15px; border: 1px solid rgba(255,255,255,.38); border-radius: 10px; background: rgba(255,255,255,.18); box-shadow: 0 26px 70px rgba(21,36,64,.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: rotate(-3deg); }
.onboarding-access-preview > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.88); color: #37749a; }.onboarding-access-preview .app-glyph { width: 25px; height: 25px; }.onboarding-access-preview div { display: grid; gap: 2px; }.onboarding-access-preview small { font-size: 9px; letter-spacing: .06em; }.onboarding-access-preview strong { font-size: 18px; }.onboarding-access-preview p { margin: 0; font-size: 11px; opacity: .82; }
.onboarding-access-copy { position: relative; z-index: 1; }.onboarding-access-copy > span { color: rgba(255,255,255,.72); }.onboarding-access-copy h1 { color: #fff; }.onboarding-access-copy p { color: rgba(255,255,255,.86); }
.onboarding-access-dock { display: grid; gap: 10px; padding: 20px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0; background: #fff; }
.cloud-auth-form { display: grid; gap: 12px; }
.cloud-auth-form > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; min-height: 38px; text-align: center; }
.cloud-auth-form > div > button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #edf3f6; color: #345564; }
.cloud-auth-form > div svg { width: 18px; height: 18px; }
.cloud-auth-form label { display: grid; gap: 7px; color: #526c79; font-size: 13px; font-weight: 650; }
.cloud-auth-form input { width: 100%; min-height: 50px; padding: 0 14px; box-sizing: border-box; border: 1px solid #cfdee5; border-radius: 10px; background: #fff; color: #173b50; font: inherit; font-size: 16px; }
.cloud-auth-help, .cloud-auth-error { margin: 0; font-size: 12px; line-height: 1.45; text-align: center; }
.cloud-auth-help { color: #71858f; }
.cloud-auth-error { color: #b64d49; }
.cloud-auth-sent { display: grid; justify-items: center; gap: 7px; padding: 8px 4px; text-align: center; }
.cloud-auth-sent > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e0f4e9; color: #218554; }
.cloud-auth-sent svg { width: 23px; height: 23px; }
.cloud-auth-sent strong { color: #173b50; font-size: 18px; }
.cloud-auth-sent p { margin: 0; color: #71858f; font-size: 13px; line-height: 1.45; }
.cloud-otp-form { margin: 10px auto; width: min(100%, 320px); text-align: left; }
.cloud-otp-form input { letter-spacing: .12em; }
.onboarding-access-dock .primary-button, .onboarding-outline-button { min-height: 52px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }.onboarding-access-dock .primary-button { background: #173f55; }.onboarding-outline-button { border: 1px solid #cfdde3; background: #fff; color: #173b50; }
.onboarding-notifications-page { justify-content: center; text-align: center; }
.onboarding-notification-art { position: relative; display: grid; width: 120px; height: 120px; margin: 0 auto 34px; place-items: center; border-radius: 50%; background: #e8f5fa; color: #1685b2; }.onboarding-notification-art span { position: relative; z-index: 2; }.onboarding-notification-art .app-glyph { width: 48px; height: 48px; }.onboarding-notification-art i { position: absolute; width: 100%; height: 100%; border: 1px solid #7ec4de; border-radius: 50%; animation: onboarding-pulse 2.4s ease-out infinite; }.onboarding-notification-art i:last-child { animation-delay: 1.2s; }
@keyframes onboarding-pulse { from { opacity: .55; transform: scale(.8); } to { opacity: 0; transform: scale(1.55); } }
.onboarding-notification-copy { margin: 0 auto; max-width: 420px; }.onboarding-notification-actions { display: grid; gap: 8px; width: 100%; margin-top: 36px; }.onboarding-notification-actions .primary-button { min-height: 52px; border-radius: 10px; }.onboarding-text-button { min-height: 46px; border: 0; background: transparent; color: #58717e; font: inherit; font-weight: 650; cursor: pointer; }

/* Settings details: iOS-like grouped controls, without technical account clutter. */
.settings-detail-page { padding-bottom: calc(38px + env(safe-area-inset-bottom)); }
.settings-detail-intro { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; margin: 10px 0 25px; }.settings-detail-intro .settings-account-avatar { width: 58px; height: 58px; }.settings-detail-intro h2, .settings-detail-copy h2 { margin: 0 0 4px; color: #173b50; font-size: 20px; }.settings-detail-intro p, .settings-detail-copy p { margin: 0; color: #708590; font-size: 13px; line-height: 1.45; }
.settings-form { display: grid; gap: 13px; padding: 16px; border: 1px solid rgba(36,67,87,.08); border-radius: 10px; background: #fff; }.settings-form label, .settings-field-group label { display: grid; gap: 7px; color: #526c79; font-size: 13px; font-weight: 650; }.settings-form label small { color: #8b9aa1; font-weight: 500; }.settings-form input, .settings-field-group select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #d6e1e6; border-radius: 10px; background: #fff; color: #173b50; font: inherit; font-size: 15px; }.settings-save-button { min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #173f55; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }.settings-destructive-button { display: block; min-height: 46px; margin: 28px auto 0; padding: 0 18px; border: 0; background: transparent; color: #c6524a; font: inherit; font-weight: 650; cursor: pointer; }
.cloud-account-card { display: grid; gap: 8px; margin-top: 16px; padding: 17px; border: 1px solid #d5e2e8; border-radius: 12px; background: rgba(255,255,255,.94); }
.cloud-account-card.is-connected { border-color: #b9dfce; background: #f4fbf7; }
.cloud-account-card > strong { color: #173b50; font-size: 16px; }
.cloud-account-card > p { margin: 0; color: #6f838e; font-size: 13px; line-height: 1.5; }
.cloud-account-status { width: fit-content; padding: 5px 9px; border-radius: 999px; background: #e0f4e9; color: #218554; font-size: 11px; font-weight: 700; }
.cloud-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }
.cloud-account-actions button, .cloud-account-secondary { min-height: 45px; padding: 0 12px; border: 1px solid #cfdee5; border-radius: 10px; background: #fff; color: #28566c; font: inherit; font-size: 13px; font-weight: 700; }
.cloud-account-actions button:first-child { border-color: #1c789f; background: #1c789f; color: #fff; }
.settings-cloud-auth { margin-top: 6px; }
.settings-cloud-auth .settings-save-button { width: 100%; }
@media (max-width: 390px) { .cloud-account-actions { grid-template-columns: 1fr; } }
.settings-detail-copy { margin: 10px 3px 17px; }.settings-native-group { overflow: hidden; margin-top: 16px; border: 1px solid rgba(36,67,87,.075); border-radius: 10px; background: #fff; }
.settings-toggle-row { position: relative; display: grid; grid-template-columns: 1fr 49px; align-items: center; gap: 12px; min-height: 62px; padding: 10px 13px; border-bottom: 1px solid rgba(36,67,87,.075); cursor: pointer; }.settings-toggle-row:last-child { border-bottom: 0; }.settings-toggle-row > span, .settings-native-link > span { display: grid; gap: 2px; }.settings-toggle-row strong, .settings-native-link strong { color: #173b50; font-size: 15px; font-weight: 600; }.settings-toggle-row small, .settings-native-link small { color: #7b8e98; font-size: 12px; }.settings-toggle-row input { position: absolute; opacity: 0; }.settings-toggle-row > i { position: relative; width: 49px; height: 29px; border-radius: 15px; background: #d4dce0; transition: background 180ms ease; }.settings-toggle-row > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform 180ms ease; }.settings-toggle-row input:checked + i { background: #3ba5c9; }.settings-toggle-row input:checked + i::after { transform: translateX(20px); }
.settings-native-link, .settings-choice { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 13px; border: 0; border-bottom: 1px solid rgba(36,67,87,.075); background: transparent; color: #78909b; font: inherit; text-align: left; cursor: pointer; }.settings-native-link:last-child, .settings-choice:last-child { border-bottom: 0; }.settings-native-link > .app-glyph, .settings-choice > .app-glyph { width: 20px; height: 20px; }.settings-choice.is-selected span { color: #167eaa; font-weight: 700; }.settings-footnote { margin: 10px 4px 0; color: #83949c; font-size: 11px; line-height: 1.45; }.settings-field-group { display: grid; gap: 0; }.settings-field-group label, .settings-field-group > div { padding: 13px; border-bottom: 1px solid rgba(36,67,87,.075); }.settings-field-group > div { display: flex; justify-content: space-between; color: #657c88; font-size: 14px; }.settings-field-group > div strong { color: #173b50; }.settings-empty-state { display: grid; place-items: center; max-width: 390px; margin: 70px auto 0; text-align: center; }.settings-empty-state > span { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: #e8f4f9; color: #2088b1; }.settings-empty-state > span .app-glyph { width: 31px; height: 31px; }.settings-empty-state h2 { margin: 18px 0 7px; color: #173b50; font-size: 22px; }.settings-empty-state p { margin: 0; color: #708590; font-size: 14px; line-height: 1.55; }.settings-empty-state button { min-height: 42px; margin-top: 22px; padding: 0 18px; border: 0; border-radius: 10px; background: #e5edf1; color: #85959d; font: inherit; font-weight: 700; }.settings-about { margin-top: 45px; margin-bottom: 30px; }.settings-about > span { background: #dff1f8; }.settings-about small { margin-top: 9px; color: #8b9aa2; }

/* Image-with-overlay record (chosen concept 3). */
.record-card-with-preview,
.home-page .record-list .record-card-with-preview,
.history-day-records .record-card-with-preview {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #203843;
  text-align: left;
}
.record-card-with-preview .timeline-featured-image,
.home-page .record-list .record-card-with-preview .timeline-featured-image,
.history-day-records .record-card-with-preview .timeline-featured-image { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 8.3; }
.record-card-with-preview::after { content: ""; position: absolute; z-index: 1; inset: 34% 0 0; background: linear-gradient(to bottom, transparent, rgba(12,29,37,.84)); pointer-events: none; }
.record-card-with-preview .timeline-featured-copy,
.home-page .record-list .record-card-with-preview .timeline-featured-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; color: #fff; }
.record-card-with-preview .timeline-featured-copy > span:first-child,
.home-page .record-list .record-card-with-preview .timeline-featured-copy > span:first-child { order: 1; }
.record-card-with-preview .timeline-featured-copy strong { color: #fff; font-size: 17px; line-height: 1.25; text-shadow: 0 1px 7px rgba(0,0,0,.25); }
.record-card-with-preview .timeline-featured-copy p { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 12px; }
.record-card-with-preview .record-date,
.home-page .record-list .record-card-with-preview .record-date,
.history-day-records .record-card-with-preview .record-date { order: 2; display: block; padding: 0; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.timeline-photo-count { display: none; }

@media (max-width: 680px) {
  .onboarding-story-page, .onboarding-notifications-page { padding-right: 18px; padding-left: 18px; }
  .onboarding-story-visual { min-height: 280px; }
  .onboarding-access-copy h1 { font-size: 34px; }
  .home-page .record-list .record-card-with-preview .timeline-featured-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .record-card-with-preview .timeline-featured-copy, .home-page .record-list .record-card-with-preview .timeline-featured-copy { padding: 14px; }
  .history-day-records .record-card-with-preview .timeline-featured-image { aspect-ratio: 4 / 3; }
}

/* Medication: visual single-screen editor approved in the concept. */
.add-dialog.unified-add-dialog .visual-medication-form {
  display: grid;
  gap: 0;
  padding: 0 10px 10px;
}
.visual-medication-list {
  position: relative;
  overflow: visible;
  border: 1px solid #dfe8ed;
  border-radius: 16px;
  background: #fff;
}
.visual-medication-row {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 102px;
  padding: 18px 20px;
  border-bottom: 1px solid #dfe8ed;
}
.visual-medication-row:last-child { border-bottom: 0; }
.visual-row-label { display: flex; align-items: center; gap: 12px; color: #486575; }
.visual-row-label > span { display: grid; width: 24px; height: 24px; place-items: center; color: #199bd0; }
.visual-row-label svg { width: 24px; height: 24px; }
.visual-row-label strong { font-size: 15px; font-weight: 650; }
.visual-repeat-icon { font-size: 22px; font-weight: 500; line-height: 1; }
.visual-medication-row > input[name="title"] {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1px solid #cfdae0;
  border-radius: 13px;
  color: #24485c;
  background: #fff;
  font-size: 17px;
}
.visual-choice-group { display: grid; gap: 10px; }
.dose-choice-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frequency-choice-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual-choice-group label { display: block; min-width: 0; cursor: pointer; }
.visual-choice-group input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visual-choice-group span {
  display: grid;
  min-height: 56px;
  padding: 8px 10px;
  place-items: center;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #294b5d;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.visual-choice-group input:checked + span {
  border-color: #159bd2;
  color: #1489b8;
  background: #e4f5fc;
  box-shadow: inset 0 0 0 1px rgba(21,155,210,.08);
}
.visual-choice-group input:focus-visible + span { outline: 3px solid rgba(21,155,210,.18); outline-offset: 2px; }
.visual-custom-field { grid-column: 2; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin-top: -6px; }
.visual-custom-field.hidden { display: none; }
.visual-custom-field > span { color: #607887; font-size: 13px; }
.visual-custom-field input { min-height: 48px; }
.visual-time-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.day-period-chip { display: inline-flex; min-height: 48px; padding: 0 18px; align-items: center; border-radius: 13px; color: #168fbe; background: #eaf7fc; font-size: 15px; }
.visual-time-control .medication-time-field { width: min(210px, 55%); }
.visual-time-control .medication-time-field > .form-field-label { display: none; }
.visual-time-control .time-picker-trigger { min-height: 56px; border-radius: 13px; }
.visual-duration-control { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 14px; }
.visual-duration-control > button { display: grid; width: 58px; height: 58px; padding: 0; place-items: center; border: 1px solid #cfdae0; border-radius: 50%; color: #1698cb; background: #fff; font-size: 25px; }
.visual-duration-control > label { display: grid; justify-items: center; gap: 3px; color: #24485c; }
.visual-duration-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visual-duration-control strong { font-size: 20px; font-weight: 500; }
.visual-duration-control strong [data-medication-duration-unit] { font-size: 20px; font-weight: 700; }
.visual-duration-control small { color: #77909e; font-size: 13px; font-weight: 400; text-align: center; }
.visual-medication-form > .visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; }
.visual-medication-extras { display: grid; gap: 12px; padding: 16px 4px 0; }
.visual-medication-form .guided-actions { margin-top: 16px !important; }
.visual-medication-form .guided-primary-button { background: #184c61; }

@media (max-width: 600px) {
  .add-dialog.unified-add-dialog .visual-medication-form { padding: 0 0 8px; }
  .visual-medication-row { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 16px; }
  .visual-row-label { gap: 9px; }
  .visual-custom-field { grid-column: 1; grid-template-columns: 1fr; margin-top: 0; }
  .dose-choice-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .visual-choice-group span { min-height: 52px; padding: 6px; font-size: 14px; }
  .visual-time-control { justify-content: stretch; }
  .visual-time-control .medication-time-field { width: auto; flex: 1; }
  .day-period-chip { min-height: 52px; }
  .visual-duration-control { grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 8px; }
  .visual-duration-control > button { width: 52px; height: 52px; }
}

/* Dosis: el mismo selector compacto en alta, edición y confirmación. */
.adaptive-dose-control {
  display: grid;
  gap: 9px;
}

.medication-dose-amount-select,
.custom-dose-field input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #24485c;
  background-color: #fff;
  font: inherit;
  font-size: 15px;
}

.medication-dose-amount-select {
  cursor: pointer;
}

.custom-dose-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.custom-dose-field.hidden {
  display: none;
}

.custom-dose-field > span {
  color: #607887;
  font-size: 12px;
  font-weight: 650;
}

.medication-dose-amount-select:focus,
.custom-dose-field input:focus {
  border-color: #42a5d1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 165, 209, .13);
}

.medication-end-date-context {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #dce7ec;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7fbfd, #eef7fa);
}

.medication-end-date-context > span {
  color: #6c8390;
  font-size: 12px;
  font-weight: 650;
}

.medication-end-date-context > strong {
  color: #1c4d63;
  font-size: 20px;
  font-weight: 680;
}

.medication-end-date-context > small {
  color: #66808e;
  font-size: 12px;
}

.medication-course-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 4px 2px;
}

.medication-course-progress > span {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf2;
}

.medication-course-progress > span > i {
  display: block;
  width: var(--treatment-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5bb6dd, #2887b6);
}

.medication-course-progress > small {
  color: #527181;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .saved-inline-dose {
    grid-template-columns: 1fr;
  }

  .saved-inline-edit-form {
    padding: 12px;
  }
}

/* Unified, single-window add flow. */
.add-dialog.unified-add-dialog {
  position: fixed;
  z-index: 230;
  inset: 50% auto auto 50%;
  width: min(680px, calc(100vw - 32px));
  height: auto;
  max-height: min(740px, calc(100dvh - 32px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 18px;
  background: #f7f9fb;
  box-shadow: 0 28px 80px rgba(20, 48, 62, .24);
}

.add-dialog-backdrop:not([hidden]) {
  z-index: 45;
  background: rgba(36, 55, 65, .34);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.unified-add-dialog .modal-content {
  max-height: min(720px, calc(100dvh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 24px;
}

.unified-add-heading {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  margin: 0 -24px 18px;
  padding: 14px 18px 12px 24px;
  border-bottom: 1px solid #e1e8ec;
  background: rgba(247, 249, 251, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.unified-add-heading h2 {
  margin: 0;
  color: #173b50;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 650;
  letter-spacing: -.025em;
}

.guided-close-button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eaf0f3;
  color: #24495d;
}

.guided-close-button svg { width: 21px; height: 21px; }
.unified-add-form { gap: 14px; }
.unified-add-form .guided-step { display: block !important; padding: 0; animation: none !important; }
.unified-add-form .guided-intro,
.unified-add-form [data-guided-review],
.unified-add-form .weight-review-card { display: none; }
.unified-add-form [data-wizard-step="1"] > .guided-actions { display: none; }
.unified-add-form .guided-fields { gap: 14px; }
.unified-add-form .guided-actions { position: static; margin-top: 18px; padding: 0; background: none; }
.unified-add-form .guided-actions .guided-primary-button { width: 100%; min-height: 56px; border-radius: 13px; }
.unified-add-form .guided-fields > label,
.unified-add-form fieldset { font-weight: 600; }
.unified-add-form .field-help,
.unified-add-form label small,
.unified-add-form fieldset p { font-weight: 400; }
.unified-add-dialog .visit-child-back-button { display: none; }

.save-confirmation-dialog .modal-content { padding-bottom: 28px; }
.confirmation-heading { border-bottom: 0; margin-bottom: 0; }
.record-save-confirmation { display: grid; justify-items: center; padding: 8px 8px 4px; text-align: center; }
.save-avatar-animation { position: relative; width: 92px; height: 92px; margin: 4px 0 18px; overflow: hidden; border-radius: 50%; background: #e4eef2; box-shadow: 0 0 0 8px #eef4f6; }
.save-pet-photo,
.save-success-layer { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.save-pet-photo .pet-image,
.save-pet-photo .pet-avatar-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.save-pet-photo {
  z-index: 2;
  clip-path: circle(50% at 50% 50%);
  backface-visibility: hidden;
  will-change: opacity, transform;
  animation: save-photo-away .38s cubic-bezier(.4, 0, .2, 1) 1.15s forwards;
}
.save-success-layer {
  z-index: 1;
  color: #fff;
  background: #39a96b;
  transform: scale(.7);
  opacity: 0;
  will-change: opacity, transform;
  animation: save-success-reveal .34s cubic-bezier(.22, 1, .36, 1) 1.43s forwards;
}
.save-success-layer .save-drawn-check { width: 52px; height: 52px; overflow: visible; }
.save-success-layer .save-drawn-check path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: save-check-draw .38s cubic-bezier(.4, 0, .2, 1) 1.58s forwards;
}
.record-save-confirmation h2 { margin: 0; color: #173b50; font-size: 27px; font-weight: 680; letter-spacing: -.03em; }
.record-save-confirmation > .saved-pet-name { margin: 0 0 5px; color: #4c7488; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.saved-record-summary { width: 100%; margin-top: 22px; overflow: hidden; border: 1px solid #dce6eb; border-radius: 14px; background: #fff; text-align: left; }
.saved-record-summary > div,
.saved-record-summary > button { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 11px 16px; border: 0; border-bottom: 1px solid #e4ebee; color: inherit; background: transparent; font: inherit; text-align: left; }
.saved-record-summary > button { cursor: pointer; transition: background 140ms ease; }
.saved-record-summary > button:hover,
.saved-record-summary > button:focus-visible { background: #f3f9fc; }
.saved-record-summary > div:last-child,
.saved-record-summary > button:last-child { border-bottom: 0; }
.saved-record-summary span { color: #718590; font-size: 13px; }
.saved-record-summary strong { color: #183d51; font-size: 15px; font-weight: 650; text-align: right; }
.saved-record-summary i { display: grid; width: 17px; height: 17px; color: #91a6b1; }
.saved-record-summary i svg { width: 17px; height: 17px; }
.saved-record-summary:has(.saved-inline-edit-form) { overflow: visible; }
.saved-inline-edit-form { display: grid; gap: 12px; padding: 14px; border-bottom: 1px solid #e4ebee; background: #f5fafc; }
.saved-inline-edit-form:last-child { border-bottom: 0; border-radius: inherit; }
.saved-inline-edit-form > label,
.saved-inline-field { display: grid; gap: 7px; min-width: 0; }
.saved-inline-edit-form > label > span,
.saved-inline-field > span { color: #4f6c7c; font-size: 12px; font-weight: 700; }
.saved-inline-edit-form input:not([type="checkbox"]):not([type="radio"]),
.saved-inline-edit-form select,
.saved-inline-edit-form textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cedde5; border-radius: 11px; color: #173b50; background: #fff; font: inherit; font-size: 14px; outline: none; }
.saved-inline-edit-form textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.saved-inline-edit-form input:focus,
.saved-inline-edit-form select:focus,
.saved-inline-edit-form textarea:focus { border-color: #42a5d1; box-shadow: 0 0 0 3px rgba(66, 165, 209, .13); }
.saved-inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.saved-inline-actions button { min-height: 40px; border: 1px solid #d3e0e6; border-radius: 10px; color: #4b6878; background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.saved-inline-actions button[type="submit"] { border-color: #174f63; color: #fff; background: #174f63; }
.saved-inline-dose { display: grid; grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.saved-inline-dose .medication-dose-unit-trigger,
.saved-inline-dose .adaptive-dose-trigger { min-height: 44px; border-radius: 11px; }
.saved-inline-dose .dose-choice-group { grid-template-columns: repeat(4, minmax(48px, 1fr)); }
.saved-inline-unit { position: relative; }
.saved-inline-unit input { padding-right: 42px !important; }
.saved-inline-unit > span { position: absolute; top: 50%; right: 13px; color: #557382; font-weight: 700; transform: translateY(-50%); }
.saved-inline-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.saved-inline-checks label { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 9px; border: 1px solid #d6e3e9; border-radius: 10px; background: #fff; }
.saved-inline-checks input { accent-color: #2f91bd; }
.saved-inline-checks.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saved-inline-custom-frequency { margin-top: 7px; }
.saved-inline-date-field { min-width: 0; }
.saved-inline-date-field > .form-field-label:empty { display: none; }
.saved-inline-date-field .date-picker-trigger {
  min-height: 48px;
  padding: 0 13px;
  border-radius: 11px;
}
.saved-inline-date-field .date-picker-trigger strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-confirmation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 20px; }
.saved-confirmation-actions > button { min-height: 56px; border-radius: 13px; font: inherit; font-weight: 700; cursor: pointer; }
.saved-confirmation-actions .guided-primary-button { width: 100%; }
.saved-close-button { border: 1px solid #d5e1e7; color: #456273; background: #fff; }
.record-save-confirmation > .guided-primary-button { width: 100%; min-height: 56px; margin-top: 20px; border-radius: 13px; }

.record-save-confirmation > h2,
.record-save-confirmation > p,
.record-save-confirmation > .saved-record-summary,
.record-save-confirmation > .saved-confirmation-actions,
.record-save-confirmation > .guided-primary-button { opacity: 1; transform: none; animation: none; }

@keyframes save-photo-away {
  0% { opacity: 1; transform: scale(1); visibility: visible; }
  99% { opacity: 0; transform: scale(.78); visibility: visible; }
  100% { opacity: 0; transform: scale(.78); visibility: hidden; }
}

@keyframes save-success-reveal {
  to { opacity: 1; transform: scale(1); }
}

@keyframes save-check-draw {
  to { stroke-dashoffset: 0; }
}

.record-save-confirmation.is-settled .save-pet-photo { visibility: hidden; opacity: 0; animation: none; }
.record-save-confirmation.is-settled .save-success-layer { opacity: 1; transform: none; animation: none; }
.record-save-confirmation.is-settled .save-success-layer .save-drawn-check path { stroke-dashoffset: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .save-pet-photo { opacity: 0; animation: none; }
  .save-success-layer { opacity: 1; transform: none; animation: none; }
  .save-success-layer .save-drawn-check path { stroke-dashoffset: 0; animation: none; }
  .record-save-confirmation > h2,
    .record-save-confirmation > p,
    .record-save-confirmation > .saved-record-summary,
    .record-save-confirmation > .saved-confirmation-actions,
    .record-save-confirmation > .guided-primary-button { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 680px) {
  .add-dialog.unified-add-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  .unified-add-dialog .modal-content { max-height: calc(100dvh - 20px); padding: 0 16px 18px; }
  .unified-add-heading { min-height: 66px; margin-right: -16px; margin-left: -16px; padding-right: 12px; padding-left: 18px; }
  .saved-record-summary > div,
  .saved-record-summary > button { grid-template-columns: 84px minmax(0, 1fr) auto; padding-right: 12px; padding-left: 12px; }
  .saved-confirmation-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.profile-progress-track {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce8ed;
}

.profile-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56acd7, #328bb8);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-progress-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #287da7;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  padding: 4px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.profile-progress-action i {
  font-size: 17px;
  font-style: normal;
  line-height: 0;
}

.profile-progress-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.profile-progress-action.weight {
  color: #5d7684;
}

.profile-progress-action:active {
  transform: scale(0.97);
}

.profile-progress-card.complete {
  cursor: default;
}

.profile-progress-card.complete .profile-progress-track i {
  background: linear-gradient(90deg, #67b884, #4a9e69);
}

.profile-progress-complete {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #418a5c;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  grid-column: 1 / -1;
  justify-self: end;
}

.profile-progress-complete i {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #58aa75;
  color: white;
  font-size: 9px;
  font-style: normal;
}

.profile-page .profile-progress-card {
  margin: 10px 0 14px;
}

.profile-setup-card {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  align-items: center;
  gap: 13px;
  width: min(100%, 520px);
  min-height: 76px;
  margin: 10px 0 14px;
  padding: 13px 15px;
  border: 1px solid #dce7ec;
  border-radius: 10px;
  background: #edf5fa;
  color: #183b4f;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(37,74,91,.05);
  transition: transform .17s ease, background .17s ease, box-shadow .17s ease;
}

.profile-setup-card:hover { background: #e8f2f8; box-shadow: 0 8px 19px rgba(37,74,91,.08); }
.profile-setup-card:active { transform: scale(.985); }

.profile-setup-ring,
.profile-setup-sheet-ring {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 50% !important;
  background: conic-gradient(from -90deg, var(--blue-deep) 0 var(--profile-progress), #d7e2e8 var(--profile-progress) 360deg);
}

.profile-setup-ring i,
.profile-setup-sheet-ring i { width: 23px; height: 23px; border-radius: 50%; background: #edf5fa; }
.profile-setup-copy { min-width: 0; }
.profile-setup-copy strong { display: block; color: var(--ink); font-size: 15px; line-height: 20px; }
.profile-setup-copy small { display: block; margin-top: 2px; color: #526b78; font-size: 13px; line-height: 18px; }
.profile-setup-chevron { display: grid; place-items: center; color: var(--blue-deep); }
.profile-setup-chevron .app-glyph { width: 17px; height: 17px; }

.profile-setup-dialog .add-dialog-content { padding: 22px 22px calc(24px + env(safe-area-inset-bottom, 0px)); }
.profile-setup-sheet-head { display: grid; grid-template-columns: 50px minmax(0,1fr) 44px; align-items: center; gap: 13px; margin-bottom: 18px; }
.profile-setup-sheet-ring { width: 48px; height: 48px; }
.profile-setup-sheet-ring i { width: 37px; height: 37px; background: #f7f9fb; }
.profile-setup-sheet-head > div > span { color: #758a96; font-size: 12px; }
.profile-setup-sheet-head h2 { margin: 1px 0 0; color: #183b4f; font-size: 24px; line-height: 30px; }
.profile-setup-sheet-head p { margin: 2px 0 0; color: #667e8a; font-size: 13px; }
.profile-setup-task-list { overflow: hidden; border: 1px solid #dce6eb; border-radius: 10px; background: rgba(255,255,255,.86); }
.profile-setup-task-list > button { display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 12px; width: 100%; min-height: 67px; padding: 10px 13px; border: 0; background: transparent; color: #183b4f; font: inherit; text-align: left; cursor: pointer; }
.profile-setup-task-list > button + button { border-top: 1px solid #e3eaee; }
.profile-setup-task-list > button:active { background: #f1f6f8; }
.profile-setup-task-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #edf2f5; color: #647c88; font-size: 12px; font-weight: 700; }
.profile-setup-task-list strong { display: block; font-size: 14px; line-height: 19px; }
.profile-setup-task-list small { display: block; margin-top: 2px; color: #768b96; font-size: 12px; line-height: 17px; }
.profile-setup-task-list i { display: grid; color: #91a3ac; }
.profile-setup-task-list i .app-glyph { width: 16px; height: 16px; }

.profile-edit-progress {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(45, 102, 136, 0.14);
  border-radius: 10px;
  background: #edf5fa;
}

.profile-edit-progress > span:nth-child(2) strong,
.profile-edit-progress > span:nth-child(2) small {
  display: block;
}

.profile-edit-progress > span:nth-child(2) strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
}

.profile-edit-progress > span:nth-child(2) small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
}

.profile-edit-progress > b {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
}

.profile-form-grid > .profile-field-missing {
  position: relative;
}

.profile-form-grid > .profile-field-missing::after {
  content: "Falta";
  position: absolute;
  top: 1px;
  right: 1px;
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 750;
}

.profile-form-grid > .profile-field-missing input,
.profile-form-grid > .profile-field-missing select,
.profile-form-grid > .profile-field-missing .date-picker-trigger {
  border-color: rgba(45, 102, 136, 0.32);
  background-color: #f5fafd;
}

.profile-derived-field {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px;
  border: 1px solid rgba(45, 102, 136, 0.32);
  border-radius: 10px;
  background: #f5fafd;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-derived-field small,
.profile-derived-field strong {
  display: block;
}

.profile-derived-field small {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
}

.profile-derived-field > span:last-child {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.profile-derived-field .app-glyph {
  width: 15px;
  height: 15px;
}

@media (max-width: 520px) {
  .profile-setup-card { width: 100%; }
  .profile-setup-dialog .add-dialog-content { padding-right: 15px; padding-left: 15px; }
  .profile-setup-sheet-head { grid-template-columns: 44px minmax(0,1fr) 42px; gap: 10px; }
  .profile-setup-sheet-ring { width: 42px; height: 42px; }
  .profile-setup-sheet-ring i { width: 32px; height: 32px; }
  .profile-setup-sheet-head h2 { font-size: 21px; line-height: 27px; }
}

.profile-page > .page-heading h1,
.nav-main .nav-item span:last-child {
  letter-spacing: 0.01em;
  font-kerning: normal;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "kern" 1;
}

.pet-photo {
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 50%;
  bottom: auto;
  width: 126px;
  height: 126px;
  border: 5px solid rgba(255, 255, 255, 0.68);
  border-radius: 42px;
  box-shadow: 0 14px 22px rgba(40, 82, 105, 0.12);
  transform: translateY(-50%) rotate(1deg);
}

.species-decoration {
  position: absolute;
  z-index: 0;
  color: rgba(36, 67, 87, 0.1);
  pointer-events: none;
}

.dog-paw {
  fill: currentColor;
}

.paw-one {
  top: -15px;
  right: 32px;
  width: 132px;
  transform: rotate(17deg);
}

.paw-two {
  right: 28%;
  bottom: -43px;
  width: 112px;
  transform: rotate(-24deg);
}

.cat-whiskers {
  top: 9%;
  right: 3%;
  width: min(42%, 240px);
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 5;
}

.pet-photo .dog-face {
  width: 64%;
  height: 66%;
  margin-top: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(36, 67, 87, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 750;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4fa276;
  box-shadow: 0 0 0 4px rgba(79, 162, 118, 0.12);
}

.status-pill.attention .status-dot {
  background: #cf6f62;
  box-shadow: 0 0 0 4px rgba(207, 111, 98, 0.12);
}

.section-block {
  margin-top: 28px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.section-heading h2 {
  font-size: 19px;
}

.text-button {
  padding: 6px 0;
  background: none;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 500;
}

.surface-card,
.info-card,
.form-card {
  background: var(--paper);
  backdrop-filter: blur(12px);
}

.reminder-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 15px;
  transform: translateZ(0);
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 170ms ease, border-color 170ms ease, filter 170ms ease;
}

.reminder-card .icon-tile,
.reminder-card .date-badge {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), filter 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .reminder-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(55, 75, 85, 0.11);
  }

  .reminder-button:hover .icon-tile {
    transform: scale(1.06) rotate(-2deg);
  }

  .reminder-button:hover .date-badge {
    transform: translateX(-2px);
  }
}

.reminder-button:active {
  transform: scale(0.982);
  box-shadow: 0 5px 14px rgba(55, 75, 85, 0.08);
  filter: saturate(1.04);
}

.reminder-button:active .icon-tile {
  transform: scale(0.94);
}

.reminder-list {
  display: grid;
  gap: 9px;
}

.home-reminder-disclosure {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.home-reminder-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
}

.home-reminder-disclosure summary::-webkit-details-marker {
  display: none;
}

.home-reminder-disclosure summary p,
.home-reminder-disclosure summary h2 {
  margin: 0;
}

.home-page .section-heading h2,
.home-reminder-disclosure > summary h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.reminder-summary-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 10px;
}

.reminder-summary-counts b,
.reminder-summary-counts > span {
  padding: 5px 7px;
  border-radius: 999px;
}

.reminder-summary-counts b {
  background: rgba(207, 111, 98, 0.13);
  color: #a34f45;
}

.reminder-summary-counts > span {
  background: rgba(215, 173, 61, 0.14);
  color: #8a6a18;
}

.reminder-summary-counts > span.today-count {
  background: rgba(99, 174, 218, 0.14);
  color: #287dad;
}

.reminder-summary-counts i {
  font-size: 16px;
  font-style: normal;
  transition: transform 160ms ease;
}

.home-reminder-disclosure[open] .reminder-summary-counts i {
  transform: rotate(180deg);
}

.home-reminder-content {
  padding: 2px 0 14px;
}

.reminder-section-label {
  margin: 12px 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reminder-section-label.overdue {
  color: #a34f45;
}

.reminder-section-label.upcoming {
  color: #8a6a18;
}

.reminder-section-label.today {
  color: #287dad;
}

.future-reminders-disclosure {
  margin-top: 13px;
}

.future-reminders-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 10px 11px 10px 13px;
  border: 1px solid rgba(64, 137, 178, 0.13);
  border-radius: 17px;
  background: rgba(217, 239, 250, 0.52);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background 160ms ease, transform 160ms ease;
}

.future-reminders-disclosure > summary::-webkit-details-marker {
  display: none;
}

.future-reminders-copy {
  display: flex;
  align-items: center;
}

.future-reminders-copy strong {
  font-size: 13px;
  font-weight: 780;
}

.future-reminders-chevron {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--blue-deep);
  transition: transform 180ms ease;
}

.future-reminders-chevron svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.future-reminders-disclosure[open] .future-reminders-chevron {
  transform: rotate(180deg);
}

.future-reminders-disclosure[open] > summary {
  background: rgba(217, 239, 250, 0.76);
}

.future-reminders-disclosure > .reminder-list {
  margin-top: 9px;
}

.reminder-card.future {
  border-color: rgba(36, 67, 87, 0.1);
  box-shadow: 0 6px 16px rgba(55, 75, 85, 0.04);
}

.reminder-card.upcoming {
  border-color: rgba(94, 135, 181, 0.2);
}

.reminder-card.today {
  border-color: rgba(75, 158, 207, 0.2);
  background: linear-gradient(135deg, rgba(222, 241, 252, 0.72), rgba(255, 255, 255, 0.82));
}

.icon-tile.medication-today {
  background: rgba(169, 211, 238, 0.47);
}

.reminder-card.overdue {
  border-color: rgba(193, 95, 82, 0.28);
  background: linear-gradient(135deg, rgba(255, 231, 227, 0.76), rgba(255, 255, 255, 0.8));
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--yellow-soft);
  font-size: 22px;
}

.app-glyph {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.icon-tile.blue {
  background: rgba(169, 211, 238, 0.47);
}

.icon-tile.coral {
  background: rgba(243, 170, 160, 0.35);
}

.reminder-copy strong,
.reminder-copy span {
  display: block;
}

.reminder-copy {
  min-width: 0;
}

.reminder-copy span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13px;
}

.date-badge {
  min-width: 56px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  text-align: center;
}

.date-badge strong,
.date-badge span {
  display: block;
}

.date-badge strong {
  font-size: 13px;
}

.date-badge span {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.reminder-button {
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.row-chevron {
  color: var(--blue-deep);
  font-size: 24px;
  line-height: 1;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  position: relative;
  display: grid;
  min-height: 132px;
  padding: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.67);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.quick-alert-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #cf6f62;
  color: white !important;
  font-size: 10px !important;
  font-weight: 900;
  line-height: 1;
}

.quick-card:hover,
.option-card:hover,
.record-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(55, 75, 85, 0.12);
}

.quick-card strong {
  align-self: end;
  font-size: 15px;
}

.quick-card span:last-child {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
}

.quick-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 25px;
  line-height: 1;
}

.quick-icon.type-vaccine {
  color: #287dad;
}

.quick-icon.type-vaccine .app-glyph {
  width: 25px;
  height: 25px;
}

.report-open-button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 170ms ease, background 170ms ease;
}

.report-open-button::after {
  position: absolute;
  top: -35%;
  left: -38%;
  width: 28%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
  transition: left 430ms cubic-bezier(0.22, 1, 0.36, 1);
}

.report-open-button span {
  display: inline-block;
  margin-left: 3px;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .report-open-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 26px rgba(38, 112, 150, 0.24);
  }

  .report-open-button:hover::after {
    left: 112%;
  }

  .report-open-button:hover span {
    transform: translateX(4px);
  }
}

.report-open-button:active {
  transform: scale(0.97);
  box-shadow: 0 5px 13px rgba(38, 112, 150, 0.2);
}

.report-open-button:active span {
  transform: translateX(2px);
}

.modern-scale-icon {
  display: block;
  width: 28px;
  height: 28px;
}

.modern-scale-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.report-cta {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 20px;
  background: linear-gradient(135deg, var(--yellow-soft), #fff9df);
}

.report-cta::after {
  position: absolute;
  right: -22px;
  bottom: -50px;
  width: 145px;
  height: 145px;
  content: "🐾";
  color: rgba(245, 216, 117, 0.47);
  font-size: 100px;
  transform: rotate(-19deg);
}

.report-cta p {
  max-width: 460px;
  margin: 7px 0 16px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 17px;
  border-radius: 13px;
  cursor: pointer;
  font-weight: 600;
}

.primary-button {
  border: 1px solid rgba(40, 90, 120, 0.16);
  background: var(--blue-deep);
  color: white;
  box-shadow: 0 8px 18px rgba(45, 102, 136, 0.18);
}

.secondary-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
}

.ghost-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--blue-deep);
}

.full-width {
  width: 100%;
}

.record-list {
  display: grid;
  gap: 10px;
}

.record-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
}

.record-card > span:nth-child(2) {
  min-width: 0;
}

.record-card p {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-card.record-card-note p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.generic-photo-preview {
  overflow: hidden;
  border-radius: 16px;
  background: #eaf0f3;
  aspect-ratio: 4 / 3;
}
.generic-photo-preview[hidden] { display: none; }
.generic-photo-preview img { width: 100%; height: 100%; object-fit: contain; }
.push-settings-card { margin: 16px 0; padding: 18px; border: 1px solid #dce6eb; border-radius: 18px; background: rgba(255,255,255,.78); }
.push-settings-card p { margin: 0; color: #5d7280; line-height: 1.5; }
.push-settings-card button { margin-top: 12px; padding: 10px 15px; border: 1px solid #c8d8e0; border-radius: 12px; background: #fff; color: #245873; font: inherit; cursor: pointer; }
.unified-record-dialog .unified-record-value-row strong,
.unified-record-dialog .unified-record-value-row.is-static strong {
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.record-date {
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
}

.bottom-nav {
  position: fixed;
  z-index: 50;
  right: max(12px, calc((100vw - 610px) / 2));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - 610px) / 2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: var(--nav-height);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  background: rgba(247, 249, 247, 0.68);
  box-shadow: 0 15px 38px rgba(44, 64, 74, 0.18), inset 0 0 0 1px rgba(69, 94, 108, 0.08);
  backdrop-filter: blur(25px) saturate(1.45);
}

.nav-item {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px;
  border-radius: 17px;
  background: transparent;
  color: var(--ink-soft);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.nav-item span:last-child {
  font-size: 10px;
  font-weight: 720;
}

.nav-item.active {
  background: rgba(169, 211, 238, 0.5);
  color: #1e597a;
}

.nav-item:active {
  transform: scale(0.97);
}

.nav-item.nav-add svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-item.nav-add.add-open {
  z-index: 2;
  background: #2d789f;
  color: white;
}

.nav-item.nav-add.add-open svg {
  transform: rotate(45deg);
}

.filter-row {
  display: flex;
  gap: 8px;
  margin: 0 -18px 17px;
  padding: 2px 18px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 740;
}

.filter-chip.active {
  border-color: rgba(45, 102, 136, 0.13);
  background: var(--ink);
  color: white;
}

.search-box {
  position: relative;
  margin-bottom: 14px;
}

.search-box svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-linecap: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
}

.search-box input {
  width: 100%;
  height: 48px;
  padding: 0 15px 0 42px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  box-shadow: 0 5px 17px rgba(55, 75, 85, 0.05);
}

.timeline {
  position: relative;
  display: grid;
  gap: 11px;
}

.timeline::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 23px;
  width: 2px;
  content: "";
  background: linear-gradient(var(--blue), rgba(169, 211, 238, 0.08));
}

.timeline .record-card {
  position: relative;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 245px;
  padding: 30px;
  border: 1px dashed rgba(45, 84, 104, 0.23);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

.empty-state span {
  font-size: 38px;
}

.empty-state p {
  max-width: 330px;
  margin: 10px 0 0;
  line-height: 1.5;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.option-card {
  display: grid;
  min-height: 136px;
  padding: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.option-card:nth-child(3n + 1) .option-icon {
  background: var(--yellow-soft);
}

.option-card:nth-child(3n + 2) .option-icon {
  background: rgba(169, 211, 238, 0.42);
}

.option-card:nth-child(3n + 3) .option-icon {
  background: rgba(184, 221, 198, 0.46);
}

.option-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px 14px 17px 12px;
  font-size: 23px;
  transform: rotate(-2deg);
}

.option-card strong {
  align-self: end;
  line-height: 1.2;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 17px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255, 242, 189, 0.78), rgba(255, 255, 255, 0.77));
}

.profile-hero .pet-photo {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 94px;
  height: 94px;
  border-width: 4px;
  border-radius: 30px;
  transform: rotate(1deg);
}

.profile-hero h2 {
  font-size: 27px;
}

.profile-hero p {
  margin: 5px 0 0;
  color: var(--ink-soft);
}

.info-card {
  padding: 6px 16px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}

.info-row:last-child {
  border-bottom: 0;
}

.info-row span {
  color: var(--ink-soft);
  font-size: 13px;
}

.info-row strong {
  max-width: 58%;
  font-size: 14px;
  text-align: right;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 15px;
}

.tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--yellow-soft);
  font-size: 12px;
  font-weight: 740;
}

.vaccine-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.vaccine-overview.status-current {
  border-color: rgba(82, 157, 111, 0.28);
  background: linear-gradient(135deg, rgba(224, 245, 231, 0.9), rgba(255, 255, 255, 0.78));
}

.vaccine-overview.status-upcoming {
  border-color: rgba(204, 160, 50, 0.3);
  background: linear-gradient(135deg, rgba(255, 244, 198, 0.92), rgba(255, 255, 255, 0.78));
}

.vaccine-overview.status-overdue {
  border-color: rgba(193, 95, 82, 0.32);
  background: linear-gradient(135deg, rgba(255, 225, 220, 0.92), rgba(255, 255, 255, 0.8));
}

.vaccine-overview.status-neutral {
  background: linear-gradient(135deg, rgba(221, 241, 253, 0.9), rgba(255, 255, 255, 0.78));
}

.vaccine-overview-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-deep);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(55, 75, 85, 0.08);
}

.vaccine-overview > div {
  display: grid;
  gap: 3px;
}

.vaccine-overview > div > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.vaccine-overview strong {
  font-size: 21px;
}

.vaccine-overview p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.vaccine-upcoming-list,
.administered-vaccine-list {
  display: grid;
  gap: 10px;
}

.upcoming-vaccine-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid rgba(203, 159, 44, 0.27);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 243, 193, 0.86), rgba(255, 255, 255, 0.75));
  box-shadow: 0 9px 22px rgba(55, 75, 85, 0.06);
}

.upcoming-vaccine-card.overdue {
  border-color: rgba(193, 95, 82, 0.28);
  background: linear-gradient(135deg, rgba(255, 226, 221, 0.88), rgba(255, 255, 255, 0.78));
}

.upcoming-vaccine-card p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.35;
}

.vaccine-date-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.vaccine-date-tile strong {
  font-size: 16px;
  line-height: 1;
}

.vaccine-date-tile span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.vaccine-date-tile small {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.coverage-status-grid {
  display: grid;
  gap: 8px;
}

.coverage-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
}

.coverage-status-mark {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-strong);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.coverage-status-card.current .coverage-status-mark {
  background: #59a976;
}

.coverage-status-card.upcoming .coverage-status-mark {
  background: #d7ad3d;
}

.coverage-status-card.overdue .coverage-status-mark {
  background: #cf6f62;
}

.coverage-status-card.recommended .coverage-status-mark {
  background: #7d9fb2;
}

.coverage-status-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.coverage-status-card > div span,
.coverage-status-card small {
  color: var(--ink-soft);
  font-size: 10px;
}

.coverage-status-card small {
  grid-column: 2;
}

.parasite-kind-icon {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 21px;
}

.deworming-schedule-section {
  margin-top: 20px;
}

.deworming-schedule-grid {
  display: grid;
  gap: 10px;
}

.deworming-schedule-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 20px rgba(55, 75, 85, 0.05);
}

.deworming-schedule-card.current {
  border-color: rgba(82, 157, 111, 0.2);
  background: linear-gradient(135deg, rgba(232, 247, 237, 0.7), rgba(255, 255, 255, 0.8));
}

.deworming-schedule-card.upcoming {
  border-color: rgba(215, 173, 61, 0.28);
  background: linear-gradient(135deg, rgba(255, 246, 210, 0.72), rgba(255, 255, 255, 0.8));
}

.deworming-schedule-card.overdue {
  border-color: rgba(193, 95, 82, 0.27);
  background: linear-gradient(135deg, rgba(255, 232, 228, 0.76), rgba(255, 255, 255, 0.8));
}

.deworming-schedule-card .parasite-kind-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.deworming-schedule-card .parasite-icon {
  width: 22px;
  height: 22px;
}

.deworming-schedule-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.deworming-schedule-copy strong {
  font-size: 16px;
}

.deworming-schedule-copy span {
  color: var(--ink-soft);
  font-size: 11px;
}

.deworming-schedule-copy small {
  margin-top: 3px;
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 750;
}

.deworming-date-empty {
  display: grid;
  place-items: center;
  width: 54px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  font-weight: 800;
}

@media (min-width: 700px) {
  .deworming-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.parasite-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parasite-icon.worm {
  stroke: #cf6f86;
  stroke-width: 2.4;
}

.parasite-icon.worm circle {
  fill: #cf6f86;
  stroke: none;
}

.parasite-icon.mite {
  fill: #8a624e;
  stroke: #8a624e;
  stroke-width: 1.45;
}

.vaccine-coverage-chips .parasite-icon {
  width: 15px;
  height: 15px;
}

.vaccine-status-groups,
.vaccine-plan-groups {
  display: grid;
  gap: 18px;
}

.vaccine-status-group,
.vaccine-plan-group {
  padding-left: 13px;
  border-left: 3px solid #7d9fb2;
}

.vaccine-status-group.group-legal,
.vaccine-plan-group.group-legal {
  border-left-color: #cf6f62;
}

.vaccine-status-group.group-essential,
.vaccine-plan-group.group-essential {
  border-left-color: #59a976;
}

.vaccine-group-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.vaccine-group-heading > div {
  display: grid;
  gap: 2px;
}

.vaccine-group-heading strong {
  font-size: 14px;
}

.vaccine-group-heading span {
  color: var(--ink-soft);
  font-size: 10px;
}

.vaccine-status-list,
.vaccine-plan-list {
  border-top: 1px solid var(--line);
}

.vaccine-status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 1px;
  border-bottom: 1px solid var(--line);
}

.vaccine-status-row > div {
  display: grid;
  gap: 3px;
}

.vaccine-status-row small,
.vaccine-status-label {
  color: var(--ink-soft);
  font-size: 10px;
}

.vaccine-status-label {
  max-width: 132px;
  text-align: right;
}

.vaccine-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7d9fb2;
  box-shadow: 0 0 0 4px rgba(125, 159, 178, 0.14);
}

.vaccine-status-row.current .vaccine-status-dot {
  background: #59a976;
  box-shadow: 0 0 0 4px rgba(89, 169, 118, 0.14);
}

.vaccine-status-row.upcoming .vaccine-status-dot {
  background: #d7ad3d;
  box-shadow: 0 0 0 4px rgba(215, 173, 61, 0.14);
}

.vaccine-status-row.overdue .vaccine-status-dot {
  background: #cf6f62;
  box-shadow: 0 0 0 4px rgba(207, 111, 98, 0.14);
}

.swipe-hint {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
}

.vaccine-status-carousel {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-right: 0;
  padding: 2px 0 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.vaccine-status-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.vaccine-status-carousel::-webkit-scrollbar {
  display: none;
}

.vaccine-status-slide {
  flex: 0 0 min(86%, 360px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(55, 75, 85, 0.07);
  scroll-snap-align: start;
}

.vaccine-status-slide.slide-pending {
  border-color: rgba(207, 111, 98, 0.28);
}

.vaccine-status-slide.slide-upcoming {
  border-color: rgba(215, 173, 61, 0.3);
}

.vaccine-status-slide.slide-current {
  border-color: rgba(89, 169, 118, 0.28);
}

.status-slide-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: rgba(230, 239, 244, 0.58);
}

.slide-pending .status-slide-heading {
  background: rgba(255, 231, 227, 0.72);
}

.slide-upcoming .status-slide-heading {
  background: rgba(255, 244, 198, 0.72);
}

.slide-current .status-slide-heading {
  background: rgba(224, 245, 231, 0.72);
}

.status-slide-heading > div > span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-slide-heading h3 {
  margin: 4px 0 2px;
  font-size: 21px;
}

.status-slide-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.status-slide-heading > strong {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.status-slide-list {
  padding: 4px 14px 10px;
}

.status-slide-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 11px 1px;
  border-bottom: 1px solid var(--line);
}

.status-slide-row:last-child {
  border-bottom: 0;
}

.status-slide-row > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.status-slide-row > div small,
.status-slide-row > span:last-child {
  color: var(--ink-soft);
  font-size: 9px;
}

.status-slide-row > div small:empty {
  display: none;
}

.status-slide-row > span:last-child {
  grid-column: 2;
}

.status-slide-row > .vaccine-status-dot {
  grid-row: 1;
  align-self: center;
}

.status-slide-row.overdue .vaccine-status-dot {
  animation: overdue-status-halo 2.35s ease-in-out infinite;
}

@keyframes overdue-status-halo {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(207, 111, 98, 0.13);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(207, 111, 98, 0.04), 0 0 8px rgba(207, 111, 98, 0.075);
  }
}

/* Navegación inferior agrupada con Añadir independiente. */
.bottom-nav {
  right: max(12px, calc((100vw - 440px) / 2));
  left: max(12px, calc((100vw - 440px) / 2));
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  min-height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.nav-main,
.bottom-nav > .nav-add {
  position: relative;
  overflow: hidden;
  min-height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(248, 250, 250, 0.76);
  box-shadow: 0 12px 32px rgba(44, 64, 74, 0.14), inset 0 0 0 1px rgba(69, 94, 108, 0.055);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  pointer-events: auto;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 180ms ease, opacity 180ms ease;
}

.nav-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 7px;
  border-radius: 22px;
}

.bottom-nav > .nav-add {
  width: 64px;
  min-width: 64px;
  padding: 7px 4px;
  border-radius: 21px;
}

.nav-main::before,
.bottom-nav > .nav-add::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.32), transparent 48%, rgba(142, 196, 224, 0.08));
  content: "";
  pointer-events: none;
}

.nav-main .nav-item,
.bottom-nav > .nav-add > * {
  position: relative;
  z-index: 1;
}

.nav-main .nav-item svg {
  transition: stroke-width 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease;
}

.nav-main .nav-item {
  min-width: 72px;
  min-height: 48px;
  gap: 1px;
  padding: 4px 3px;
  color: #697f8b;
}

.nav-main .nav-item span:last-child {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 650;
}

.nav-main .nav-item .profile-nav-badge {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: calc(50% + 7px);
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(248, 250, 250, 0.98);
  border-radius: 50%;
  background: #3e9dca;
  color: white;
  box-shadow: 0 2px 6px rgba(35, 109, 145, 0.24);
}

.nav-main .nav-item .profile-nav-badge[hidden] {
  display: none;
}

.nav-main .nav-item.active {
  background: rgba(143, 205, 236, 0.32);
  color: #116f9f;
}

.nav-main .nav-item.active svg {
  stroke-width: 2.45;
  filter: drop-shadow(0 1px 3px rgba(34, 133, 180, 0.22));
  transform: translateY(-0.5px);
}

.bottom-nav.is-scrolled .nav-main .nav-item.active {
  background: rgba(137, 201, 232, 0.32);
  color: #0d6f9f;
}

.bottom-nav.is-scrolled .nav-main,
.bottom-nav.is-scrolled > .nav-add {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(231, 241, 247, 0.63);
  box-shadow: 0 15px 38px rgba(36, 61, 76, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(82, 124, 147, 0.08);
  backdrop-filter: blur(30px) saturate(1.65);
  -webkit-backdrop-filter: blur(30px) saturate(1.65);
}

.bottom-nav.is-scrolled .nav-main::before,
.bottom-nav.is-scrolled > .nav-add::before {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.45), rgba(189, 222, 238, 0.1) 52%, rgba(255, 255, 255, 0.14));
}

.bottom-nav > .nav-add:active {
  transform: scale(0.96);
}

body.add-dialog-open .nav-main {
  opacity: 0.3;
  pointer-events: none;
}

body.add-dialog-open .bottom-nav > .nav-add,
body.add-dialog-open .bottom-nav.is-scrolled > .nav-add {
  border-color: rgba(255, 255, 255, 0.92);
  background: #dceff8;
  color: #1e6f96;
  box-shadow: 0 11px 28px rgba(37, 86, 111, 0.18), inset 0 0 0 1px rgba(52, 126, 162, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.add-dialog-open .bottom-nav > .nav-add::before,
body.add-dialog-open .bottom-nav.is-scrolled > .nav-add::before {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 58%);
}

body.add-dialog-open .bottom-nav > .nav-add svg {
  filter: none;
  stroke-width: 2;
}

@media (max-width: 430px) {
  .bottom-nav {
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 8px;
  }

  .nav-main,
  .bottom-nav > .nav-add {
    min-height: 62px;
  }

  .bottom-nav > .nav-add {
    width: 60px;
    min-width: 60px;
    border-radius: 20px;
  }

  .nav-main .nav-item {
    min-width: 0;
  }
}

/* Selector de estado inspirado en UISegmentedControl: selección por elevación, no por tinte. */
.vaccines-page .vaccine-state-summary {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(43, 70, 84, 0.07);
  border-radius: 12px;
  background: #e8edef;
  box-shadow: inset 0 1px 2px rgba(36, 58, 69, 0.035);
}

.vaccines-page .vaccine-state-summary > button {
  min-height: 64px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  opacity: 0.68;
  transform: none;
  transition: opacity 180ms ease, background 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms ease;
}

.vaccines-page .vaccine-state-summary > button:hover {
  border-color: transparent;
  opacity: 0.88;
}

.vaccines-page .vaccine-state-summary > button.active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(35, 57, 68, 0.12), 0 1px 2px rgba(35, 57, 68, 0.06);
  opacity: 1;
  transform: none;
}

.vaccines-page .vaccine-state-summary > button:active {
  transform: scale(0.985);
}

.vaccines-page .vaccine-state-summary > button:focus-visible {
  outline: 2px solid #405f6f;
  outline-offset: -2px;
}

.vaccines-page .vaccine-state-summary > button.active span {
  color: #344f5e;
  font-weight: 720;
}

/* Historial de vacunas en formato de cartilla cronológica. */
.vaccines-page .administered-vaccines-disclosure > summary {
  min-height: 54px;
  padding: 13px 14px;
}

.vaccines-page .administered-vaccines-disclosure > summary h2 {
  color: #29495b;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.vaccines-page .administered-summary-meta {
  display: inline-flex;
  align-items: center;
  color: #748893;
  font-size: 10px;
  font-weight: 560;
  white-space: nowrap;
}

.vaccines-page .administered-vaccines-disclosure[open] {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.vaccines-page .administered-vaccines-disclosure[open] > summary {
  padding: 2px 1px 12px;
}

.vaccines-page .administered-vaccines-content,
.vaccines-page .administered-vaccines-disclosure[open] .administered-vaccines-content {
  margin-top: 0;
  padding: 0;
  border-top: 0;
}

.vaccines-page .vaccine-administered-timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding: 2px 0 0;
}

.vaccines-page .vaccine-administered-timeline::before {
  position: absolute;
  z-index: 0;
  top: 11px;
  bottom: 18px;
  left: 9px;
  width: 1.5px;
  background: #c5d5dc;
  content: "";
}

.vaccines-page .vaccine-administered-timeline .swipe-record-shell {
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-card {
  position: relative;
  min-height: 126px;
  padding: 4px 8px 24px 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-card::before {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 3px;
  width: 13px;
  height: 13px;
  border: 3px solid #f4f7f8;
  border-radius: 50%;
  background: #58a274;
  content: "";
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-card:focus-visible {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .vaccines-page .vaccine-administered-timeline .administered-vaccine-card:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: none;
    transform: none;
  }
}

.vaccines-page .vaccine-administered-timeline .swipe-record-shell.selected .administered-vaccine-card {
  border-color: transparent;
  border-radius: 10px;
  background: #e8f2f6;
  box-shadow: inset 0 0 0 1px rgba(39, 125, 168, 0.14);
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-date {
  display: block;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-date time {
  color: #667f8b;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-date span {
  display: none;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-card h3 {
  margin: 6px 0 3px;
  color: #29495b;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.vaccines-page .vaccine-administered-timeline .administered-vaccine-card > p {
  margin: 0 0 9px;
  color: #748893;
  font-size: 10px;
  line-height: 1.4;
}

.vaccines-page .vaccine-administered-timeline .vaccine-coverage-chips {
  gap: 5px;
}

.vaccines-page .vaccine-administered-timeline .vaccine-coverage-chips > span {
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: #e9f1f4;
  color: #557583;
  font-size: 8px;
  font-weight: 690;
}

.vaccines-page .vaccine-administered-timeline .swipe-delete-action {
  border-radius: 10px;
}

@media (max-width: 430px) {
  .vaccines-page .administered-summary-meta {
    font-size: 9px;
  }

  .vaccines-page .vaccine-administered-timeline .administered-vaccine-card {
    min-height: 122px;
    padding-right: 4px;
  }
}

/* Escala global solicitada: todas las superficies no circulares usan 10 px. */
:is(
  [class*="-card"],
  [class*="-panel"],
  [class*="-sheet"],
  [class*="-banner"],
  [class*="-dialog"],
  [class*="-field"],
  [class*="-picker"],
  [class*="-tile"],
  [class*="-preview"],
  [class*="-box"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .primary-button,
  .secondary-button,
  .filter-chip
) {
  border-radius: 10px !important;
}

.bottom-nav.setup-hidden {
  display: none;
}

.app-shell.onboarding-mode {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  background: linear-gradient(145deg, #f5f8fa 0%, #eef6fa 58%, #f8faf9 100%);
}

.app-shell.onboarding-mode .topbar {
  display: none;
}

.app-shell.onboarding-mode #content {
  min-height: 100dvh;
}

.onboarding-page {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(20px, calc((100vw - 520px) / 2)) max(22px, env(safe-area-inset-bottom));
  animation: onboarding-page-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell.onboarding-mode .personalize-page {
  box-sizing: border-box;
  padding-right: max(20px, calc((100vw - 680px) / 2));
  padding-left: max(20px, calc((100vw - 680px) / 2));
}

@keyframes onboarding-page-in {
  from { opacity: 0; transform: translateX(18px) scale(0.995); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.onboarding-welcome-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.onboarding-welcome-content {
  display: grid;
  align-content: center;
  justify-items: center;
  flex: 1;
  margin: 0;
  padding: 24px 0;
  text-align: center;
}

.onboarding-brand-mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: #f8dc72;
  color: #2b759c;
  box-shadow: 0 14px 32px rgba(47, 100, 128, 0.15);
}

.onboarding-brand-mark svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
}

.onboarding-wordmark {
  margin-top: 17px;
  color: var(--blue-deep);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.onboarding-welcome-content h1,
.onboarding-step-heading h1 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.onboarding-welcome-content p,
.onboarding-step-heading p {
  max-width: 330px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-bottom-action,
.onboarding-form-footer {
  display: grid;
  gap: 14px;
  width: 100%;
}

.onboarding-bottom-action {
  width: min(100%, 430px);
  margin: 0 auto;
}

.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.onboarding-progress span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9d5db;
  transition: width 180ms ease, border-radius 180ms ease, background 180ms ease;
}

.onboarding-progress span.active {
  width: 19px;
  border-radius: 999px;
  background: #3f9dcc;
}

.onboarding-primary {
  position: relative;
  width: 100%;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid rgba(29, 110, 151, 0.18);
  background: linear-gradient(135deg, #3da4d3, #267ea9);
  box-shadow: 0 12px 26px rgba(34, 116, 158, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-size: 14px;
  transition: transform 150ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.onboarding-primary::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.16), transparent 42%);
  content: "";
  pointer-events: none;
}

.onboarding-primary span,
.onboarding-primary i {
  position: relative;
  z-index: 1;
}

.onboarding-primary i {
  font-size: 17px;
  font-style: normal;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 30px rgba(34, 116, 158, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.onboarding-primary:hover i {
  transform: translateX(3px);
}

.onboarding-primary:active {
  transform: scale(0.98);
  box-shadow: 0 7px 16px rgba(34, 116, 158, 0.2);
}

.onboarding-back {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 20px;
}

.onboarding-step-heading {
  margin-top: 24px;
  text-align: center;
}

.onboarding-step-heading > span {
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-pet-form {
  display: grid;
  gap: 18px;
  width: min(100%, 430px);
  margin: 28px auto 0;
}

.onboarding-photo-field {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: fit-content;
  margin-inline: auto;
  border-radius: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-photo-field:focus-within {
  outline: 2px solid rgba(40, 125, 167, 0.48);
  outline-offset: 7px;
}

.onboarding-photo-field:active .onboarding-photo-preview {
  transform: scale(0.97);
}

.onboarding-photo-preview {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border: 3px solid white;
  border-radius: 50% !important;
  background: var(--yellow-soft);
  box-shadow: 0 9px 24px rgba(36, 67, 87, 0.13);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.onboarding-photo-preview > * {
  width: 100%;
  height: 100%;
}

.onboarding-photo-button {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #287da7;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.onboarding-photo-button span {
  color: var(--ink-soft);
  font-weight: 600;
}

.onboarding-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.onboarding-name-field,
.onboarding-species-field {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.onboarding-name-field input {
  width: 100%;
  min-height: 50px;
  margin-top: 7px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.onboarding-species-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.onboarding-species-field > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 7px;
}

.onboarding-species-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-soft);
  cursor: pointer;
}

.onboarding-species-choice:has(input:checked) {
  border-color: rgba(55, 151, 202, 0.48);
  background: #dff2fb;
  color: #176f9c;
  box-shadow: inset 0 0 0 1px rgba(55, 151, 202, 0.08);
}

.onboarding-species-choice input {
  position: absolute;
  opacity: 0;
}

.species-choice-symbol {
  display: grid;
  place-items: center;
}

.species-choice-symbol svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onboarding-species-choice strong {
  font-size: 12px;
}

.onboarding-profile-note {
  margin: -4px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.personalize-intro > .onboarding-progress {
  margin-bottom: 14px;
}

.personalize-page {
  width: min(100%, 680px);
  margin-inline: auto;
  padding-bottom: 30px;
}

.personalize-page.first-setup {
  padding-top: 18px;
}

.personalize-intro {
  display: grid;
  justify-items: center;
  max-width: 560px;
  margin: 0 auto 16px;
  text-align: center;
}

.personalize-pet-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 9px;
  overflow: hidden;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--yellow-soft);
  box-shadow: 0 8px 22px rgba(36, 67, 87, 0.12);
}

.personalize-pet-avatar > * {
  width: 100%;
  height: 100%;
}

.personalize-intro p,
.personalize-intro h1,
.personalize-intro > span:last-child {
  margin: 0;
}

.personalize-intro p {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 760;
}

.personalize-intro h1 {
  margin-top: 3px;
  font-size: clamp(23px, 5vw, 30px);
  letter-spacing: -0.035em;
}

.personalize-intro > span:last-child {
  max-width: 430px;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.module-preferences-form {
  display: grid;
  gap: 12px;
}

.module-preset-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.module-preset-row button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(45, 84, 104, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
}

.module-preset-row button.is-selected {
  border-color: #477b94;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px #477b94;
  color: #234b5f;
}

.module-preset-row button.is-selected::after {
  margin-left: 6px;
  content: "✓";
}

.module-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.module-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 104px;
  padding: 10px 6px 9px;
  border: 1px solid rgba(45, 84, 104, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.module-choice:has(input:checked) {
  border-color: rgba(72, 163, 214, 0.4);
  background: rgba(220, 241, 252, 0.84);
}

.module-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.module-choice-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: white;
  color: var(--blue-deep);
  box-shadow: 0 5px 13px rgba(36, 67, 87, 0.07);
}

.module-choice-icon .app-glyph {
  width: 23px;
  height: 23px;
}

.module-choice-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.module-choice-copy strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
}

.module-choice-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(45, 84, 104, 0.13);
  border-radius: 50%;
  background: white;
  color: transparent;
  font-size: 10px;
  font-weight: 900;
}

.module-choice:has(input:checked) .module-choice-check {
  border-color: #4ba7d9;
  background: #4ba7d9;
  color: white;
}

.module-save-button {
  position: sticky;
  z-index: 3;
  bottom: 12px;
  width: min(100%, 440px);
  min-height: 50px;
  margin: 3px auto 0;
  box-shadow: 0 10px 28px rgba(45, 125, 170, 0.23);
}

@media (max-width: 620px) {
  .module-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personalize-page.first-setup {
    padding-top: 6px;
  }

  .module-choice {
    min-height: 94px;
  }
}

/* Portada fotográfica del inicio y selector compacto al desplazarse. */
.topbar.home-collapsible {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 50%;
  width: min(calc(100% - 36px), 924px);
  min-height: 78px;
  padding: max(10px, env(safe-area-inset-top)) 0 9px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(0 28% 62% round 28px);
  filter: blur(8px);
  transform: translate(-50%, -22px) scale(0.9);
  transform-origin: top center;
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease, visibility 0s linear 360ms;
  will-change: transform, opacity, clip-path;
}

.topbar.home-collapsible .account-button {
  display: none;
}

.topbar.home-collapsible.is-condensed {
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  clip-path: inset(0 round 0);
  filter: blur(0);
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: home-header-unfold 520ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

@keyframes home-header-unfold {
  0% {
    clip-path: inset(0 28% 62% round 28px);
    filter: blur(8px);
    opacity: 0;
    transform: translate(-50%, -22px) scale(0.9);
  }
  68% {
    clip-path: inset(0 round 7px);
    filter: blur(0);
    opacity: 1;
    transform: translate(-50%, 3px) scale(1.012);
  }
  100% {
    clip-path: inset(0 round 0);
    filter: blur(0);
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.home-cover-card {
  position: relative;
  isolation: isolate;
  min-height: clamp(238px, 38vw, 330px);
  overflow: hidden;
  border: 1px solid rgba(45, 84, 104, 0.12);
  border-radius: 10px;
  background: linear-gradient(145deg, #a9d3ee, #7eb6d5);
  box-shadow: 0 17px 38px rgba(38, 67, 83, 0.14);
}

.home-cover-media,
.home-cover-media .pet-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-cover-media {
  transform: translate3d(0, calc(var(--home-header-progress, 0) * 16px), 0) scale(calc(1 + var(--home-header-progress, 0) * 0.035));
  transform-origin: center;
  transition: transform 80ms linear;
}

.home-cover-media .pet-image {
  object-fit: cover;
  object-position: var(--cover-x, 50%) var(--cover-y, 50%);
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), object-position 160ms ease-out;
}

.home-cover-card:hover .home-cover-media .pet-image {
  transform: scale(1.035);
}

.home-cover-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  content: "";
  background: linear-gradient(90deg, rgba(8, 24, 33, 0.58) 0%, rgba(8, 24, 33, 0.42) 31%, rgba(8, 24, 33, 0.15) 57%, transparent 82%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.home-cover-card::before {
  display: none;
}

.home-cover-blur {
  position: absolute;
  z-index: 1;
  inset: -14px;
  overflow: hidden;
  filter: blur(12px);
  opacity: 0.92;
  transform: scale(1.055);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, rgba(0, 0, 0, 0.72) 48%, transparent 78%);
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, rgba(0, 0, 0, 0.72) 48%, transparent 78%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.home-cover-blur .pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cover-x, 50%) var(--cover-y, 50%);
}

.home-cover-card.without-photo .home-cover-blur {
  display: none;
}

.home-cover-card.without-photo .home-cover-media {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dcecf3, #b9d7e5);
}

.cover-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(43, 91, 112, 0.5);
}

.cover-photo-placeholder.cat {
  background: linear-gradient(145deg, #f2eadb, #e4d6bb);
  color: rgba(126, 92, 43, 0.48);
}

.cover-photo-placeholder > span {
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.cover-photo-placeholder .app-glyph {
  width: 58px;
  height: 58px;
}

.home-cover-card.without-photo .dog-face {
  width: 112px;
  height: 106px;
  margin-top: 0;
  transform: scale(1.25);
}

.home-cover-copy {
  position: absolute;
  z-index: 2;
  left: clamp(21px, 4vw, 38px);
  bottom: clamp(22px, 4vw, 34px);
  display: grid;
  justify-items: start;
  max-width: min(520px, 76%);
  color: #fff;
  opacity: clamp(0, calc(1 - var(--home-header-progress, 0) * 1.35), 1);
  transform: translate3d(0, calc(var(--home-header-progress, 0) * -12px), 0);
  transition: opacity 80ms linear, transform 80ms linear;
}

.home-cover-adjust-trigger {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 10px;
  background: rgba(21, 36, 44, 0.48);
  box-shadow: 0 8px 22px rgba(10, 26, 35, 0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: background 160ms ease, transform 160ms ease;
}

.home-cover-adjust-trigger.icon-only {
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.home-cover-adjust-trigger svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-cover-adjust-trigger:hover,
.home-cover-adjust-trigger:focus-visible {
  background: rgba(21, 36, 44, 0.66);
  transform: translateY(-1px);
}

.home-cover-card.is-adjusting {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.home-cover-card.is-adjusting:active {
  cursor: grabbing;
}

.home-cover-card.is-adjusting::after,
.home-cover-card.is-adjusting .home-cover-blur {
  opacity: 0;
}

.home-cover-card.is-adjusting .home-cover-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.home-cover-card.is-adjusting .home-cover-media .pet-image,
.home-cover-card.is-adjusting:hover .home-cover-media .pet-image {
  transform: scale(1);
  transition: none;
}

.home-cover-adjust-panel {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  pointer-events: none;
}

.home-cover-adjust-panel > span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  background: rgba(14, 29, 37, 0.57);
  box-shadow: 0 7px 18px rgba(7, 23, 31, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.home-cover-adjust-panel > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 10px;
  background: rgba(246, 249, 250, 0.88);
  box-shadow: 0 9px 24px rgba(7, 23, 31, 0.18);
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.home-cover-adjust-panel button {
  min-width: 82px;
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #34586b;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
}

.home-cover-adjust-panel button[data-action="save-cover-adjust"] {
  background: #2388bd;
  color: #fff;
  box-shadow: 0 5px 13px rgba(35, 136, 189, 0.22);
}

.home-cover-adjust-panel button:active {
  transform: scale(0.97);
}

.home-cover-copy::before {
  display: none;
}

.home-cover-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: clamp(35px, 7vw, 54px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 15px rgba(7, 25, 35, 0.28);
}

.home-cover-greeting {
  margin: 0 0 3px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(7, 25, 35, 0.28);
}

.home-cover-name svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.home-cover-copy > p {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 2.5vw, 19px);
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(7, 25, 35, 0.32);
}

.home-cover-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(7, 25, 35, 0.36);
}

.home-cover-action span {
  transition: transform 180ms ease;
}

.home-cover-action:hover span,
.home-cover-action:focus-visible span {
  transform: translateX(4px);
}

.home-cover-action:focus-visible,
.home-cover-name:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 5px;
  border-radius: 6px;
}

#homeCareSection {
  scroll-margin-top: 94px;
}

@media (max-width: 699px) {
  .home-page {
    width: calc(100% + 36px);
    max-width: none;
    margin-right: -18px;
    margin-left: -18px;
  }

  .home-page > :not(.home-cover-card) {
    margin-right: 18px;
    margin-left: 18px;
  }

  .home-cover-card {
    min-height: clamp(300px, 42svh, 360px);
    border-width: 0 0 1px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 34px rgba(38, 67, 83, 0.16);
  }

  .home-cover-copy {
    left: 24px;
    bottom: 34px;
    max-width: 82%;
  }

  .home-cover-action {
    margin-top: 18px;
  }

  .home-cover-adjust-trigger {
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
  }

  .home-cover-adjust-panel {
    padding: max(12px, env(safe-area-inset-top)) 12px 18px;
  }

  .topbar.home-collapsible {
    top: max(7px, env(safe-area-inset-top));
    width: calc(100% - 24px);
    min-height: 68px;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
  }

  .topbar.home-collapsible.is-condensed {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Ajustes de tamaño para la iconografía aprobada. */
.back-button .app-glyph,
.guided-back-button .app-glyph,
.onboarding-back .app-glyph,
.row-chevron .app-glyph,
.time-picker-chevron .app-glyph,
.modal-option-chevron .app-glyph,
.vaccine-disease-chevron .app-glyph,
.health-medication-chevron .app-glyph,
.expense-record-chevron .app-glyph,
.home-priority-alert-chevron .app-glyph,
.home-today-time i .app-glyph,
.record-detail-row i .app-glyph,
.profile-action-list i .app-glyph,
.photo-action-options i .app-glyph {
  width: 16px;
  height: 16px;
}

/* Cabeceras de módulos: componente final compartido.
   Este bloque vive al final para neutralizar estilos heredados de prototipos anteriores. */
.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;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  padding: 8px 2px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

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

.health-treatment-header-icon,
.document-page-symbol,
.expense-page-title > span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 0;
  border-radius: 18px;
  color: #fff;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    0 5px 12px rgba(35, 58, 70, 0.09);
}

.preventive-page-header.header-vaccine .preventive-page-header-icon {
  background: linear-gradient(145deg, #b77a5f, #95563f);
  color: #fff;
}

.preventive-page-header.header-deworming .preventive-page-header-icon {
  background: linear-gradient(145deg, #71a47f, #4f7c5e);
}

.treatments-page .health-treatment-header-icon {
  border-radius: 18px;
  background: linear-gradient(145deg, #5594b8, #2d6e95);
}

.weight-page .weight-page-header-icon {
  background: linear-gradient(145deg, #6498a1, #3f7782);
  color: #fff;
}

.documents-page .document-page-symbol {
  background: linear-gradient(145deg, #7d8fbe, #586c9e);
}

.expenses-page .expense-page-title > span {
  background: linear-gradient(145deg, #aa8256, #866039);
  color: #fff;
}

.preventive-page-header.header-vaccine .app-glyph,
.weight-page .weight-page-header-icon .app-glyph,
.document-page-symbol .app-glyph,
.expense-page-title > span .app-glyph {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

.preventive-page-header.header-deworming .preventive-page-header-icon > svg,
.treatments-page .health-treatment-header-icon > svg {
  width: 30px;
  height: 30px;
}

.health-treatment-header-copy h1,
.document-page-title h1,
.expense-page-title h1 {
  margin: 0 0 2px;
  color: #233f50;
  font-size: 28px;
  font-weight: 750;
  line-height: 34px;
  letter-spacing: -0.025em;
}

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

@media (max-width: 699px) {
  .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: 52px minmax(0, 1fr) 42px;
    gap: 12px;
    padding-bottom: 12px;
  }

  .health-treatment-header-icon,
  .document-page-symbol,
  .expense-page-title > span {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .treatments-page .health-treatment-header-icon {
    border-radius: 17px;
  }

  .health-treatment-header-copy h1,
  .document-page-title h1,
  .expense-page-title h1 {
    font-size: 26px;
    line-height: 31px;
  }
}

.back-button > span:first-child,
.secondary-button > span:first-child,
.primary-button > span:first-child,
.danger-button > span:first-child,
.profile-delete-button > span:first-child,
.document-download-button > span:first-child,
.document-delete-button > span:first-child,
.document-edit-button > span:first-child {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}

.back-button .app-glyph,
.secondary-button > span:first-child .app-glyph,
.primary-button > span:first-child .app-glyph,
.danger-button > span:first-child .app-glyph,
.profile-delete-button .app-glyph,
.document-download-button .app-glyph,
.document-delete-button .app-glyph,
.document-edit-button .app-glyph {
  width: 17px;
  height: 17px;
}

.swipe-delete-action .app-glyph,
.bulk-record-toolbar .danger-button .app-glyph {
  width: 18px;
  height: 18px;
}

.swipe-delete-action,
.bulk-record-toolbar .danger-button,
.report-actions button,
.profile-delete-button,
.document-download-button,
.document-delete-button,
.document-edit-button {
  gap: 7px;
}

.home-today-icon .app-glyph,
.target-status-icon .app-glyph,
.vaccine-disease-detail-status > span .app-glyph,
.parasite-overview-icon .app-glyph {
  width: 24px;
  height: 24px;
}

.toast-check .app-glyph,
.selection-check .app-glyph,
.record-selection-mark .app-glyph,
.module-choice-check .app-glyph {
  width: 15px;
  height: 15px;
}

.time-picker-clock .app-glyph,
.date-picker-calendar .app-glyph {
  width: 21px;
  height: 21px;
}

.species-choice-symbol .app-glyph {
  width: 31px;
  height: 31px;
}

.crop-flip-symbol {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.crop-flip-symbol .app-glyph {
  width: 15px;
  height: 15px;
}

.crop-tool-row > button > .app-glyph {
  width: 21px;
  height: 21px;
}

.zoom-control > span .app-glyph {
  width: 20px;
  height: 20px;
}

/* Rediseño 2026-08-20: prevención y peso con superficies nativas y color semántico. */
.vaccines-page,
.deworming-page,
.weight-page {
  --care-surface: rgba(255, 255, 255, 0.91);
  --care-border: rgba(43, 70, 84, 0.105);
  --care-shadow: 0 7px 22px rgba(35, 58, 70, 0.055);
}

.vaccines-page .section-block,
.deworming-page .section-block,
.weight-page .section-block {
  margin-top: 24px;
}

.vaccines-page .section-heading,
.deworming-page .section-heading,
.weight-page .section-heading {
  min-height: 30px;
  margin-bottom: 9px;
  padding: 0 2px;
}

.vaccines-page .section-heading h2,
.deworming-page .section-heading h2,
.weight-page .section-heading h2 {
  color: #29495b;
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.vaccines-page .health-treatment-header,
.deworming-page .health-treatment-header,
.weight-page .health-treatment-header {
  gap: 11px;
  margin-bottom: 12px;
  padding: 2px 0 8px;
}

.vaccines-page .health-treatment-header-icon,
.deworming-page .health-treatment-header-icon,
.weight-page .health-treatment-header-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(39, 125, 168, 0.11);
  border-radius: 10px;
  background: #eef5f8;
  color: #287da8;
  box-shadow: none;
}

.vaccines-page .health-treatment-header-icon svg,
.deworming-page .health-treatment-header-icon svg,
.weight-page .health-treatment-header-icon svg {
  width: 27px;
  height: 27px;
}

.deworming-page .health-treatment-header-icon svg {
  width: 34px;
  height: 34px;
}

.vaccines-page .health-treatment-header-copy h1,
.deworming-page .health-treatment-header-copy h1,
.weight-page .health-treatment-header-copy h1 {
  margin: 0 0 2px;
  color: #233f50;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.045em;
}

.vaccines-page .health-treatment-header-copy > span,
.deworming-page .health-treatment-header-copy > span,
.weight-page .health-treatment-header-copy > span {
  color: #70848f;
  font-size: 11px;
  font-weight: 540;
}

.vaccines-page .health-add-medication,
.deworming-page .health-add-medication,
.weight-page .health-add-medication {
  min-height: 42px;
  border: 1px solid rgba(39, 125, 168, 0.1);
  border-radius: 10px;
  background: #eaf4f8;
  color: #247aa5;
  box-shadow: none;
  transition: background 160ms ease, transform 140ms ease;
}

.vaccines-page .health-add-medication:hover,
.deworming-page .health-add-medication:hover,
.weight-page .health-add-medication:hover {
  background: #dfeff6;
}

.vaccines-page .health-add-medication:active,
.deworming-page .health-add-medication:active,
.weight-page .health-add-medication:active {
  transform: scale(0.97);
}

/* Resumen preventivo: una fila informativa, sin grandes fondos de alerta. */
.vaccines-page .vaccine-overview,
.deworming-page .vaccine-overview {
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.vaccines-page .vaccine-overview.status-current,
.vaccines-page .vaccine-overview.status-upcoming,
.vaccines-page .vaccine-overview.status-overdue,
.vaccines-page .vaccine-overview.status-neutral,
.deworming-page .vaccine-overview.status-current,
.deworming-page .vaccine-overview.status-upcoming,
.deworming-page .vaccine-overview.status-overdue,
.deworming-page .vaccine-overview.status-neutral {
  border-color: var(--care-border);
  background: var(--care-surface);
}

.vaccines-page .vaccine-overview-icon,
.deworming-page .vaccine-overview-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #edf3f5;
  color: #6d8795;
  box-shadow: none;
  font-size: 15px;
}

.vaccines-page .vaccine-overview.status-current .vaccine-overview-icon,
.deworming-page .vaccine-overview.status-current .vaccine-overview-icon {
  background: #e8f4ec;
  color: #3f8b5d;
}

.vaccines-page .vaccine-overview.status-upcoming .vaccine-overview-icon,
.deworming-page .vaccine-overview.status-upcoming .vaccine-overview-icon {
  background: #f8f2df;
  color: #9a7720;
}

.vaccines-page .vaccine-overview.status-overdue .vaccine-overview-icon,
.deworming-page .vaccine-overview.status-overdue .vaccine-overview-icon {
  background: #f8eae7;
  color: #b65348;
}

.vaccines-page .vaccine-overview > div,
.deworming-page .vaccine-overview > div {
  gap: 2px;
}

.vaccines-page .vaccine-overview strong,
.deworming-page .vaccine-overview strong {
  color: #29495b;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.vaccines-page .vaccine-overview p,
.deworming-page .vaccine-overview p {
  color: #70848f;
  font-size: 11px;
  line-height: 1.4;
}

/* Próximas vacunas como lista, no como colección de tarjetas coloreadas. */
.vaccines-page .vaccine-upcoming-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.vaccines-page .upcoming-vaccine-card,
.vaccines-page .upcoming-vaccine-card.overdue {
  gap: 12px;
  min-height: 82px;
  padding: 12px 13px;
  border: 0;
  border-bottom: 1px solid rgba(43, 70, 84, 0.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vaccines-page .upcoming-vaccine-card:last-child {
  border-bottom: 0;
}

.vaccines-page .upcoming-vaccine-card > div:nth-child(2) > strong {
  color: #29495b;
  font-size: 14px;
  font-weight: 710;
  line-height: 1.3;
}

.vaccines-page .upcoming-vaccine-card p {
  margin-top: 4px;
  color: #70848f;
  font-size: 10px;
  line-height: 1.4;
}

.vaccines-page .vaccine-date-tile,
.deworming-page .vaccine-date-tile {
  width: 50px;
  height: 54px;
  border: 1px solid rgba(43, 70, 84, 0.09);
  border-radius: 9px;
  background: #f6f8f9;
}

.vaccines-page .upcoming-vaccine-card.overdue .vaccine-date-tile {
  border-color: rgba(182, 83, 72, 0.15);
  background: #faf1ef;
  color: #a94e44;
}

.vaccines-page .upcoming-vaccine-card .text-button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: #eef5f8;
  color: #287da8;
  font-size: 11px;
  font-weight: 720;
}

/* Estado de vacunas: carrusel conservado, color limitado a indicadores. */
.vaccines-page .vaccine-status-tabs {
  padding: 4px;
  border: 1px solid rgba(43, 70, 84, 0.08);
  border-radius: 10px;
  background: #edf1f3;
}

.vaccines-page .vaccine-status-tab {
  min-height: 48px;
  border-radius: 8px;
}

.vaccines-page .vaccine-status-tab.active {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 10px rgba(39, 60, 70, 0.075);
}

.vaccines-page .vaccine-status-carousel {
  gap: 10px;
  padding-top: 3px;
}

.vaccines-page .vaccine-status-slide,
.vaccines-page .vaccine-status-slide.slide-pending,
.vaccines-page .vaccine-status-slide.slide-upcoming,
.vaccines-page .vaccine-status-slide.slide-current {
  border-color: var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.vaccines-page .status-slide-heading,
.vaccines-page .slide-pending .status-slide-heading,
.vaccines-page .slide-upcoming .status-slide-heading,
.vaccines-page .slide-current .status-slide-heading {
  align-items: center;
  padding: 14px 15px 11px;
  border-bottom: 1px solid rgba(43, 70, 84, 0.08);
  background: transparent;
}

.vaccines-page .status-slide-heading > div > span {
  display: none;
}

.vaccines-page .status-slide-heading h3 {
  margin: 0 0 2px;
  color: #29495b;
  font-size: 18px;
  font-weight: 720;
}

.vaccines-page .status-slide-heading > strong {
  min-width: 29px;
  height: 29px;
  background: #eef2f4;
  color: #607985;
}

.vaccines-page .slide-pending .status-slide-heading > strong {
  background: #f8eae7;
  color: #b65348;
}

.vaccines-page .slide-upcoming .status-slide-heading > strong {
  background: #f8f2df;
  color: #95731e;
}

.vaccines-page .slide-current .status-slide-heading > strong {
  background: #e8f4ec;
  color: #3f8b5d;
}

.vaccines-page .status-slide-list {
  padding: 2px 14px 7px;
}

.vaccines-page .status-slide-row {
  gap: 10px;
  padding: 12px 2px;
}

.vaccines-page .status-slide-row > div strong {
  color: #29495b;
  font-size: 13px;
  font-weight: 690;
}

.vaccines-page .status-slide-row > div small,
.vaccines-page .status-slide-row > span:last-child {
  font-size: 9px;
  line-height: 1.35;
}

.vaccines-page .status-carousel-dots span {
  width: 5px;
  height: 5px;
  background: #c3cdd2;
}

.vaccines-page .status-carousel-dots span.active {
  width: 15px;
  background: #5d8295;
}

/* Historial preventivo con el mismo peso visual que Tratamientos. */
.vaccines-page .administered-vaccines-disclosure {
  overflow: hidden;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.vaccines-page .administered-vaccines-disclosure > summary {
  padding: 14px 15px;
}

.vaccines-page .administered-vaccines-content {
  padding: 0 10px 10px;
  border-top: 1px solid rgba(43, 70, 84, 0.08);
}

.vaccines-page .administered-vaccines-help {
  margin: 10px 3px 7px;
}

.vaccines-page .administered-vaccine-card,
.deworming-page .administered-vaccine-card {
  border-color: rgba(43, 70, 84, 0.09);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(35, 58, 70, 0.045);
}

.vaccines-page .vaccine-coverage-chips > span,
.deworming-page .vaccine-coverage-chips > span {
  background: #f0f4f6;
  color: #526f7e;
}

/* Desparasitación: dos fichas limpias, estado en el icono y la fecha. */
.deworming-page .deworming-schedule-section {
  margin-top: 18px;
}

.deworming-page .deworming-schedule-grid {
  gap: 9px;
}

.deworming-page .deworming-schedule-card,
.deworming-page .deworming-schedule-card.current,
.deworming-page .deworming-schedule-card.upcoming,
.deworming-page .deworming-schedule-card.overdue {
  width: 100%;
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: var(--care-shadow);
  cursor: pointer;
}

.deworming-page .deworming-schedule-card .parasite-kind-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef3f5;
}

.deworming-page .deworming-schedule-card.current .parasite-kind-icon {
  background: #e8f4ec;
}

.deworming-page .deworming-schedule-card.upcoming .parasite-kind-icon {
  background: #f8f2df;
}

.deworming-page .deworming-schedule-card.overdue .parasite-kind-icon {
  background: #f8eae7;
}

.deworming-page .deworming-schedule-copy strong {
  color: #29495b;
  font-size: 15px;
  font-weight: 710;
}

.deworming-page .deworming-schedule-copy span {
  color: #70848f;
  font-size: 13px;
  line-height: 1.3;
}

.deworming-page .deworming-schedule-copy small {
  color: #5f7885;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.deworming-page .deworming-history-card {
  padding: 0;
}

.deworming-history-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 13px 15px;
}

.deworming-history-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #edf5f3;
  color: #4d9788;
}

.deworming-history-icon .parasite-icon {
  width: 25px;
  height: 25px;
}

.deworming-history-icon.combined .app-glyph {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

.deworming-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.deworming-page .deworming-history-copy h3 {
  overflow: hidden;
  margin: 0;
  color: #29495b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deworming-history-copy > time {
  color: #6f838e;
  font-size: 10px;
  line-height: 1.25;
}

.deworming-kind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.deworming-kind-tag {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.deworming-kind-tag.internal {
  border-color: rgba(190, 100, 123, 0.14);
  background: #fbf0f3;
  color: #a85f72;
}

.deworming-kind-tag.external {
  border-color: rgba(138, 98, 78, 0.14);
  background: #f8f1e9;
  color: #80614f;
}

.deworming-history-copy > time {
  color: #85959d;
}

.deworming-history-copy > p {
  overflow: hidden;
  margin: 2px 0 0;
  color: #758993;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deworming-page .deworming-schedule-card.overdue .deworming-schedule-copy small {
  color: #a9564c;
}

.deworming-page .deworming-schedule-card.upcoming .deworming-schedule-copy small {
  color: #8d7022;
}

/* Peso: dato principal claro, gráfica amplia y registros como filas. */
.weight-page .weight-page-header-icon .app-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.weight-page .weight-overview-card,
.weight-page .weight-overview-card.target-on-target,
.weight-page .weight-overview-card.target-above,
.weight-page .weight-overview-card.target-below,
.weight-page .weight-overview-card.target-neutral {
  gap: 20px;
  padding: 21px 19px;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.weight-page .weight-current-card {
  padding: 5px 12px 3px;
}

.weight-page .weight-current-card > span {
  color: #70848f;
  font-size: 10px;
  font-weight: 690;
  letter-spacing: 0.045em;
}

.weight-page .weight-current-card > strong {
  margin-top: 4px;
  color: #233f50;
  font-size: clamp(48px, 12vw, 64px);
  font-weight: 730;
}

.weight-page .weight-current-card > p {
  margin-top: 13px;
  color: #70848f;
  font-size: 11px;
  line-height: 1.5;
}

.weight-page .weight-target-summary {
  gap: 13px;
  padding: 14px;
  border-color: rgba(43, 70, 84, 0.09);
  border-radius: 9px;
  background: #f7f9fa;
}

.weight-page .target-status-icon {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.weight-page .target-on-target .target-status-icon {
  background: #4f9569;
}

.weight-page .target-above .target-status-icon {
  background: #b95d51;
}

.weight-page .target-below .target-status-icon {
  background: #ad882a;
}

.weight-page .target-neutral .target-status-icon {
  background: #6f8d9c;
}

.weight-page .target-status-copy strong {
  color: #29495b;
  font-size: 12px;
  font-weight: 700;
}

.weight-page .target-status-copy {
  gap: 5px;
}

.weight-page .target-status-copy span,
.weight-page .target-reference span {
  font-size: 10px;
}

.weight-page .target-reference strong {
  color: #29495b;
  font-size: 15px;
  font-weight: 700;
}

.weight-page .chart-card {
  padding: 11px 8px 3px;
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: #fbfcfd;
  box-shadow: var(--care-shadow);
}

.weight-chart-heading {
  margin-bottom: 10px;
}

.weight-chart-range {
  display: grid;
  grid-template-columns: repeat(var(--weight-range-count, 4), minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid rgba(49, 77, 92, 0.08);
  border-radius: 12px;
  background: rgba(224, 234, 239, 0.72);
}

.weight-chart-range button {
  min-width: 0;
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #627985;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.weight-chart-range button.active {
  background: rgba(255, 255, 255, 0.94);
  color: #294f63;
  box-shadow: 0 2px 8px rgba(40, 70, 84, 0.1);
}

.weight-page .weight-chart polyline {
  stroke: #527f94;
  stroke-width: 1.7;
}

.weight-page .chart-points circle.chart-point-dot {
  fill: #527f94;
  stroke: #fbfcfd;
  stroke-width: 1.5;
}

.weight-page .chart-point:hover .chart-point-dot,
.weight-page .chart-point:focus .chart-point-dot,
.weight-page .chart-point:focus-visible .chart-point-dot {
  fill: #315f75;
}

.weight-page .chart-grid line {
  stroke: rgba(43, 70, 84, 0.075);
}

.weight-page .chart-grid text,
.weight-page .chart-date {
  fill: #84969f;
  font-weight: 500;
}

.weight-page .target-line .target-band {
  fill: rgba(82, 127, 148, 0.055);
}

.weight-page .target-line line {
  stroke: #8ca3ae;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.weight-page .target-line text {
  fill: #748992;
  font-size: 9px;
  font-weight: 500;
}

.weight-page .weight-record-list {
  gap: 8px;
}

.weight-page .weight-record-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 88px;
  padding: 0 14px;
  border-color: var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: 0 5px 16px rgba(35, 58, 70, 0.045);
}

.weight-page .weight-record-accent {
  display: none;
}

.weight-page .weight-record-copy {
  padding: 12px 0;
}

.weight-page .weight-record-heading strong {
  color: #29495b;
  font-size: 18px;
  font-weight: 720;
}

.weight-page .current-badge {
  padding: 3px 6px;
  background: #e7f1f6;
  color: #287da8;
  font-size: 8px;
}

.weight-page .weight-record-side {
  min-width: 72px;
  gap: 7px;
}

.weight-page .weight-change {
  color: #5c7582;
  font-size: 11px;
  font-weight: 680;
}

.weight-page .edit-record-label span {
  color: #9aabb3;
  font-size: 23px;
  font-weight: 400;
}

.weight-page .weight-records-heading {
  align-items: center;
}

.weight-page .weight-sort-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 128px;
  max-width: 128px;
  min-height: 34px;
  padding: 0 29px 0 11px;
  border: 1px solid rgba(43, 70, 84, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
  color: #58717e;
}

.weight-page .weight-sort-control select {
  width: 100%;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
}

.weight-page .weight-sort-control > span:last-child {
  position: absolute;
  right: 9px;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.weight-page .weight-sort-control svg {
  width: 100%;
  height: 100%;
}

.weight-page .weight-records-footer {
  margin-top: 4px;
}

.weight-page .weight-records-toggle {
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: #39758f;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
}

.weight-page .care-plan-card {
  border: 1px solid var(--care-border);
  border-radius: 10px;
  background: var(--care-surface);
  box-shadow: var(--care-shadow);
}

.weight-page .clinical-note {
  border-radius: 9px;
  background: #f0f4f6;
}

@media (min-width: 700px) {
  .weight-page .weight-overview-card {
    grid-template-columns: minmax(210px, 0.72fr) minmax(320px, 1.28fr);
    align-items: center;
  }

  .weight-page .weight-current-card {
    border-right: 1px solid rgba(43, 70, 84, 0.09);
  }
}

@media (max-width: 699px) {
  .vaccines-page .section-block,
  .deworming-page .section-block,
  .weight-page .section-block {
    margin-top: 21px;
  }

  .vaccines-page .health-treatment-header,
  .deworming-page .health-treatment-header,
  .weight-page .health-treatment-header {
    grid-template-columns: 46px minmax(0, 1fr) 42px;
  }

  .vaccines-page .health-treatment-header-icon,
  .deworming-page .health-treatment-header-icon,
  .weight-page .health-treatment-header-icon {
    width: 46px;
    height: 46px;
  }

  .vaccines-page .health-treatment-header-copy h1,
  .deworming-page .health-treatment-header-copy h1,
  .weight-page .health-treatment-header-copy h1 {
    font-size: 24px;
  }

  .vaccines-page .health-add-medication,
  .deworming-page .health-add-medication,
  .weight-page .health-add-medication {
    width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .vaccines-page .upcoming-vaccine-card {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 11px;
  }

  .vaccines-page .upcoming-vaccine-card .text-button {
    padding: 0 8px;
  }

  .vaccines-page .vaccine-status-slide {
    flex-basis: calc(100% - 22px);
  }

  .deworming-page .deworming-schedule-grid {
    grid-template-columns: 1fr;
  }

  .weight-page .weight-overview-card {
    padding: 17px 14px 14px;
  }

  .weight-page .weight-target-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .weight-page .target-reference {
    grid-column: 2;
    justify-items: start;
    padding: 8px 0 0;
    border-top: 1px solid rgba(43, 70, 84, 0.08);
    border-left: 0;
  }

  .weight-page .chart-card {
    margin-right: 0;
    margin-left: 0;
    padding: 10px 2px 2px;
  }

  .weight-page .weight-chart {
    min-width: 352px;
  }

  .weight-page .chart-grid text,
  .weight-page .chart-date {
    font-size: 13px;
  }

  .weight-page .target-line text {
    font-size: 10.5px;
  }

}

/* Revisión visual basada en superficies iOS: jerarquía tipográfica y color semántico. */
.home-today-panel {
  display: grid;
  gap: 10px;
}

.home-today-panel > h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.02em;
  text-align: center;
}

.home-today-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 14px 16px;
  border-color: rgba(49, 77, 92, 0.11);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 20px rgba(41, 62, 72, 0.055);
  text-align: left;
}

.home-today-card:hover,
.home-today-card:focus-visible {
  border-color: rgba(37, 123, 167, 0.26);
  box-shadow: 0 11px 26px rgba(41, 74, 91, 0.09);
}

.home-today-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #eef4f7;
  color: #2d7fa8;
}

.home-today-icon .app-glyph {
  width: 26px;
  height: 26px;
  stroke-width: 1.85;
}

.home-today-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-today-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 770;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-today-copy small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.home-today-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1f79a6;
  font-size: 13px;
  font-weight: 800;
}

.home-today-time i {
  color: #91a1a9;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  transition: transform 160ms ease;
}

.home-today-card:hover .home-today-time i {
  transform: translateX(2px);
}

.home-today-card.is-empty {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  min-height: 82px;
}

.home-priority-alert {
  border-color: rgba(49, 77, 92, 0.11);
  border-left: 3px solid #ca6559;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 20px rgba(41, 62, 72, 0.055);
}

.home-priority-alert-copy {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.home-priority-alert-copy:focus-visible {
  border-radius: 8px;
  outline: 2px solid rgba(37, 123, 167, 0.48);
  outline-offset: 4px;
}

.home-priority-alert-icon {
  background: #f8efed;
  color: #b9584c;
  box-shadow: none;
}

.home-priority-alert-chevron {
  color: #91a1a9;
  font-size: 25px;
  line-height: 1;
  transition: transform 160ms ease;
}

.home-priority-alert-copy:hover .home-priority-alert-chevron {
  transform: translateX(2px);
}

.home-priority-alert time {
  color: #a05b52;
}

.home-priority-status {
  display: block;
  margin-top: 4px;
  color: #9a5d55;
  font-size: 12px;
  font-weight: 650;
}

.home-priority-status time {
  color: inherit;
  font: inherit;
}

.home-priority-alert-actions {
  justify-content: flex-start;
  margin-left: 61px;
}

.home-priority-alert-actions button {
  min-height: 42px;
  background: #f0f3f5;
  color: #536d7a;
}

.home-priority-alert-actions button.primary {
  background: #277da8;
  color: #fff;
  box-shadow: 0 5px 13px rgba(39, 125, 168, 0.16);
}

.home-priority-status time {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
}

.home-quick-grid .quick-card {
  border-color: rgba(49, 77, 92, 0.09);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 15px rgba(41, 62, 72, 0.045);
}

.home-quick-grid .quick-icon {
  background: #f0f4f6;
}

.home-page .report-cta {
  border: 1px solid rgba(49, 77, 92, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px rgba(41, 62, 72, 0.055);
}

.home-page .report-cta::after {
  color: rgba(94, 128, 145, 0.14);
}

@media (min-width: 700px) {
  .home-priority-alert-actions {
    justify-content: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 699px) {
  .home-today-card {
    min-height: 88px;
    padding: 13px 14px;
  }

  .home-today-panel > h2 {
    font-size: 17px;
  }

  .home-today-copy strong {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.home-collapsible.is-condensed {
    animation: none;
  }

  .home-cover-media,
  .home-cover-copy {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-slide-row.overdue .vaccine-status-dot {
    animation: none;
  }
}

.status-slide-row.overdue .vaccine-status-dot {
  background: #cf6f62;
  box-shadow: 0 0 0 4px rgba(207, 111, 98, 0.14);
}

.status-slide-row.upcoming .vaccine-status-dot {
  background: #d7ad3d;
  box-shadow: 0 0 0 4px rgba(215, 173, 61, 0.14);
}

.status-slide-row.current .vaccine-status-dot {
  background: #59a976;
  box-shadow: 0 0 0 4px rgba(89, 169, 118, 0.14);
}

.status-slide-empty {
  display: grid;
  place-items: center;
  min-height: 118px;
  color: var(--ink-soft);
  text-align: center;
}

.status-slide-empty span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(89, 169, 118, 0.12);
  color: #59a976;
  font-weight: 900;
}

.status-slide-empty p {
  margin: -22px 0 0;
  font-size: 10px;
}

.status-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}

.status-carousel-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(36, 67, 87, 0.18);
  transition: width 160ms ease, background 160ms ease;
}

.status-carousel-dots span.active {
  width: 15px;
  background: var(--blue-deep);
}

.editable-record {
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.editable-record:focus-visible {
  border-color: rgba(45, 102, 136, 0.45);
  outline: none;
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .editable-record:hover {
    border-color: rgba(45, 102, 136, 0.45);
    outline: none;
    transform: translateY(-1px);
  }
}

.swipe-record-shell {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  background: transparent;
}

.swipe-record-card {
  position: relative;
  z-index: 1;
  height: 100%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  transition: margin-left 240ms cubic-bezier(.22, 1, .36, 1), width 240ms cubic-bezier(.22, 1, .36, 1), transform 180ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.swipe-record-shell.delete-revealed .swipe-record-card {
  transform: translateX(82px);
}

.swipe-delete-action {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 82px;
  background: #cf6f62;
  color: white;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 120ms ease;
}

.swipe-record-shell.swiping .swipe-delete-action,
.swipe-record-shell.delete-revealed .swipe-delete-action {
  opacity: 1;
}

.record-selection-mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: auto;
  left: 7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #9eb0ba;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: transparent;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-8px, -50%) scale(.82);
  box-shadow: none;
  transition: opacity 160ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), border-color 160ms ease, background 160ms ease, color 160ms ease;
}

body.record-selection-open .swipe-record-card {
  width: calc(100% - 38px);
  margin-left: 38px;
}

body.record-selection-open .record-selection-mark {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  cursor: pointer;
}

body.record-selection-open .swipe-delete-action {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

.swipe-record-shell.selected .record-selection-mark {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: white;
  box-shadow: 0 4px 11px rgba(36, 67, 87, .16);
}

.swipe-record-shell.selected .swipe-record-card {
  border-color: rgba(36, 67, 87, 0.07);
  background: #eef7fb;
  box-shadow: 0 9px 22px rgba(55, 75, 85, 0.055);
}

body.record-selection-open .swipe-record-card:hover,
body.record-selection-open .swipe-record-card:focus-visible {
  transform: none;
}

.bulk-record-toolbar {
  position: fixed;
  z-index: 240;
  right: max(12px, calc((100vw - 440px) / 2));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - 440px) / 2));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 64px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 22px;
  background: rgba(248, 250, 250, 0.82);
  box-shadow: 0 15px 38px rgba(36, 61, 76, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}

.bulk-record-toolbar:not([hidden]) {
  display: grid;
}

.bulk-record-toolbar > button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 3px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #607784;
  font: inherit;
  cursor: pointer;
}

.bulk-record-toolbar > button:active {
  background: rgba(143, 205, 236, 0.25);
}

.bulk-record-toolbar > button > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
}

.bulk-record-toolbar > button svg {
  width: 21px;
  height: 21px;
}

.bulk-record-toolbar > button strong {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 650;
}

.bulk-record-toolbar .bulk-delete-button {
  color: #c65750;
}

.bulk-selection-status {
  position: fixed;
  z-index: 241;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: #287fa9;
  color: white;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  transform: translateX(-50%);
  box-shadow: 0 7px 18px rgba(35, 104, 137, 0.22);
}

.bulk-selection-status:not([hidden]) {
  display: block;
}

.bulk-select-all-icon {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
}

.bulk-select-all-icon i {
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

body.record-selection-open .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
}

.vaccine-reference-disclosure {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vaccine-reference-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
}

.vaccine-reference-disclosure summary::-webkit-details-marker {
  display: none;
}

.vaccine-reference-disclosure summary > div {
  display: grid;
  gap: 3px;
}

.vaccine-reference-disclosure summary p {
  margin: 0;
}

.vaccine-reference-disclosure summary > div > strong {
  font-size: 17px;
}

.vaccine-reference-disclosure summary > span {
  color: var(--ink-soft);
  font-size: 10px;
  text-align: right;
}

.vaccine-reference-disclosure summary b {
  display: inline-block;
  margin-left: 5px;
  font-size: 15px;
  transition: transform 160ms ease;
}

.vaccine-reference-disclosure[open] summary b {
  transform: rotate(180deg);
}

.vaccine-reference-content {
  padding: 4px 2px 16px;
}

.vaccine-plan-row {
  padding: 12px 1px;
  border-bottom: 1px solid var(--line);
}

.vaccine-plan-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.vaccine-plan-row > div:first-child span,
.vaccine-plan-row small {
  color: var(--ink-soft);
  font-size: 9px;
  text-align: right;
}

.vaccine-plan-row dl {
  display: grid;
  gap: 5px;
  margin: 9px 0 0;
}

.vaccine-plan-row dl div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
}

.vaccine-plan-row dt,
.vaccine-plan-row dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.vaccine-plan-row dt {
  color: var(--ink-soft);
  font-weight: 750;
}

.region-pill {
  max-width: 48%;
  padding: 7px 10px;
  border: 1px solid rgba(72, 137, 176, 0.2);
  border-radius: 999px;
  background: rgba(230, 245, 253, 0.72);
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 750;
  text-align: center;
}

.vaccine-reference-intro,
.clinical-disclaimer {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.reference-sources {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.reference-sources > strong {
  padding: 12px 1px 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reference-sources a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 1px;
  border-bottom: 1px solid var(--line);
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 680;
  text-decoration: none;
}

.reference-sources a:active {
  opacity: 0.62;
}

.reference-source-note {
  margin: 10px 1px 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.5;
}

.vaccine-reference-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.vaccine-reference-card {
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid #7d9fb2;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
}

.vaccine-reference-card.category-mandatory {
  border-top-color: #cf6f62;
}

.vaccine-reference-card.category-essential {
  border-top-color: #59a976;
}

.vaccine-reference-card.category-optional {
  border-top-color: #7d9fb2;
}

.vaccine-reference-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.vaccine-reference-title span {
  max-width: 54%;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.vaccine-reference-card dl {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}

.vaccine-reference-card dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
}

.vaccine-reference-card dt,
.vaccine-reference-card dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.vaccine-reference-card dt {
  color: var(--ink-soft);
  font-weight: 750;
}

.vaccine-reference-card small {
  display: block;
  margin-top: 10px;
  color: #9a675f;
  font-size: 9px;
}

.clinical-disclaimer {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(230, 245, 253, 0.62);
}

.administered-vaccine-card {
  padding: 16px;
  border: 1px solid rgba(36, 67, 87, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 7px 18px rgba(55, 75, 85, 0.045);
}

.administered-vaccine-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.administered-vaccine-date time {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.administered-vaccine-date span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(36, 67, 87, 0.07);
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.administered-vaccine-card h3 {
  margin: 9px 0 8px;
  font-size: 17px;
}

.medication-state.active {
  background: rgba(89, 169, 118, 0.14);
  color: #397b50;
}

.medication-state.scheduled {
  background: rgba(215, 173, 61, 0.16);
  color: #806219;
}

.medication-state.completed,
.medication-state.suspended {
  background: rgba(36, 67, 87, 0.07);
  color: var(--ink-soft);
}

.medication-card-kicker {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.medication-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.medication-plan-stat {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(45, 102, 136, 0.1);
  border-radius: 13px;
  background: rgba(239, 248, 253, 0.72);
}

.medication-plan-stat.dose {
  border-color: rgba(45, 102, 136, 0.15);
  background: rgba(213, 238, 251, 0.72);
}

.medication-plan-stat.notification.disabled {
  background: rgba(36, 67, 87, 0.045);
}

.medication-plan-stat > span,
.medication-period span {
  display: block;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.medication-plan-stat strong {
  display: block;
  margin-top: 5px;
  color: var(--blue-deep);
  font-size: 14px;
  line-height: 1.16;
}

.medication-plan-stat.dose strong {
  font-size: 18px;
}

.medication-plan-stat small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.25;
}

.medication-period {
  display: grid;
  grid-template-columns: max-content minmax(30px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(36, 67, 87, 0.035);
}

.medication-period > div:last-child {
  text-align: right;
}

.medication-period strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
}

.medication-period.chronic > div:last-child strong {
  color: #2d7e67;
}

.medication-period-line {
  position: relative;
  height: 1px;
  background: rgba(45, 102, 136, 0.25);
}

.medication-period-line::before,
.medication-period-line::after {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #77afd0;
  content: "";
  transform: translateY(-50%);
}

.medication-period-line::before { left: 0; }
.medication-period-line::after { right: 0; }

.treatments-page {
  padding-bottom: 26px;
}

.treatments-back-button {
  margin-bottom: 10px;
}

.health-treatment-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 10px;
}

.health-treatment-header-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #397fa6, #1f5d82);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.health-treatment-header-icon svg {
  width: 32px;
  height: 32px;
}

.preventive-page-header {
  margin-bottom: 4px;
}

.preventive-page-header-icon {
  background: linear-gradient(145deg, #4a99c3, #236b92);
}

.preventive-page-header.header-deworming .preventive-page-header-icon {
  background: linear-gradient(145deg, #5c9d9c, #367575);
}

.preventive-page-header.header-deworming .health-treatment-header-copy h1 {
  font-size: 28px;
}

.health-treatment-header-copy {
  min-width: 0;
}

.health-treatment-header-copy p,
.health-treatment-header-copy > span {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.health-treatment-header-copy h1 {
  margin: 1px 0 2px;
  font-size: 30px;
  letter-spacing: -0.025em;
}

.health-add-medication {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 14px;
  background: rgba(99, 174, 218, 0.14);
  color: #287dad;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.health-add-medication span {
  font-size: 18px;
  font-weight: 500;
}

.health-add-medication .health-add-medication-label {
  font-size: 12px;
  font-weight: 800;
}

.medication-history-card.administered-vaccine-card {
  padding: 11px;
  border-color: rgba(36, 67, 87, 0.07);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 9px 22px rgba(55, 75, 85, 0.055);
}

.health-medication-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 4px 10px;
}

.health-medication-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #397fa6, #1f5d82);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32);
}

.health-medication-icon svg {
  width: 39px;
  height: 39px;
}

.health-medication-copy {
  min-width: 0;
}

.health-medication-copy > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.health-medication-copy h3,
.medication-history-card .health-medication-copy h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-medication-copy p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.health-medication-schedule {
  display: block;
  margin-top: 3px;
  color: #2589c5;
  font-size: 12px;
  line-height: 1.25;
}

.health-medication-schedule.without-reminder {
  color: var(--ink-soft);
}

.health-medication-chevron {
  color: rgba(36, 67, 87, 0.28);
  font-size: 25px;
}

.health-medication-footer {
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(169, 211, 238, 0.43);
  color: #287dad;
  font-size: 11px;
  font-weight: 780;
  text-align: center;
}

.health-medication-footer.scheduled {
  background: rgba(255, 226, 153, 0.5);
  color: #7e651e;
}

.health-medication-footer.completed,
.health-medication-footer.suspended {
  background: rgba(36, 67, 87, 0.065);
  color: var(--ink-soft);
}

.medication-finished-card.administered-vaccine-card {
  border-color: rgba(36, 67, 87, 0.05);
  background: rgba(248, 250, 251, 0.88);
  box-shadow: 0 7px 18px rgba(55, 75, 85, 0.035);
}

.medication-finished-card .health-medication-icon {
  background: linear-gradient(145deg, #a9b5bb, #7f9099);
  filter: grayscale(1);
}

/* Tratamientos v253: icono por formato, próxima toma y progreso integrado. */
.medication-history-card.administered-vaccine-card {
  padding: 18px;
}

.medication-history-card .health-medication-row {
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  gap: 13px;
  padding: 0 0 17px;
}

.medication-history-card .health-medication-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #e8f5fa;
  color: #258ab7;
  box-shadow: none;
}

.medication-history-card .health-medication-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medication-history-card .health-medication-icon .solid-module-icon {
  width: 25px;
  height: 25px;
}

.medication-form-glyph {
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  -webkit-mask: var(--medication-form-icon) center / contain no-repeat;
  mask: var(--medication-form-icon) center / contain no-repeat;
}

.medication-form-tablet { --medication-form-icon: url("assets/icons/medication/tablet.svg?v=2"); }
.medication-form-capsule { --medication-form-icon: url("assets/icons/medication/capsule.svg"); }
.medication-form-drops { --medication-form-icon: url("assets/icons/medication/drops.svg"); }
.medication-form-liquid { --medication-form-icon: url("assets/icons/medication/liquid.svg"); }
.medication-form-sachet { --medication-form-icon: url("assets/icons/medication/sachet.svg"); }
.medication-form-spray { --medication-form-icon: url("assets/icons/medication/spray.svg"); }

.medication-history-card .health-medication-copy h3 {
  font-size: 17px;
  line-height: 1.28;
}

.medication-history-card .health-medication-copy {
  display: grid;
  gap: 4px;
}

.medication-history-card .health-medication-copy p,
.medication-history-card .health-medication-schedule {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.medication-next-time {
  display: grid;
  grid-template-columns: 20px auto;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 5px;
  row-gap: 2px;
  min-width: 70px;
  color: #234357;
  text-align: right;
}

.medication-next-time > span {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  color: #2b9dcc;
}

.medication-next-time svg {
  width: 20px;
  height: 20px;
}

.medication-next-time small {
  grid-column: 2;
  grid-row: 1;
  color: #82949e;
  font-size: 9px;
  line-height: 1.15;
}

.medication-next-time strong {
  grid-column: 2;
  grid-row: 2;
  font-size: 18px;
  line-height: 1.1;
}

.medication-course-summary {
  display: grid;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid rgba(36, 67, 87, .09);
}

.medication-course-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.medication-course-summary span {
  color: #3b677e;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.medication-course-summary small {
  color: #708792;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.medication-course-summary > i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf1;
}

.medication-course-summary > i > b {
  display: block;
  width: var(--treatment-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35a8d4, #64c4df);
}

.medication-course-summary.chronic span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #55af9a;
}

@media (max-width: 390px) {
  .medication-history-card .health-medication-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 11px;
  }
  .medication-history-card .health-medication-chevron { display: none; }
  .medication-next-time { min-width: 66px; }
}

.medication-finished-card .health-medication-copy h3,
.medication-finished-card .health-medication-schedule {
  color: #667983;
}

.finished-treatments-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.finished-treatments-disclosure > summary::-webkit-details-marker {
  display: none;
}

.finished-treatments-disclosure > summary h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.treatments-page .section-heading h2 {
  font-size: 19px;
  line-height: 1.2;
}

.finished-treatments-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
}

.finished-treatments-meta b {
  font-size: 12px;
  font-weight: 650;
}

.finished-treatments-meta i {
  display: inline-block;
  font-size: 19px;
  font-style: normal;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.finished-treatments-disclosure[open] .finished-treatments-meta i {
  transform: rotate(180deg);
}

.finished-treatments-disclosure > .administered-vaccine-list {
  margin-top: 13px;
}

.administered-vaccines-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.administered-vaccines-disclosure > summary::-webkit-details-marker {
  display: none;
}

.administered-vaccines-disclosure > summary h2 {
  margin: 0;
  font-size: 19px;
}

.administered-vaccines-disclosure > summary i {
  color: var(--ink-soft);
  font-size: 19px;
  font-style: normal;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.administered-vaccines-disclosure[open] > summary i {
  transform: rotate(180deg);
}

.administered-vaccines-content {
  margin-top: 12px;
}

.administered-vaccines-help {
  margin: 0 2px 9px;
  color: var(--ink-soft);
  font-size: 11px;
}

:is(
  .home-reminder-disclosure .reminder-summary-counts i,
  .future-reminders-disclosure .future-reminders-meta i,
  .finished-treatments-disclosure .finished-treatments-meta i,
  .administered-vaccines-disclosure > summary i,
  .vaccine-reference-disclosure > summary b
) {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0;
  line-height: 1;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), background 180ms ease;
}

:is(
  .home-reminder-disclosure .reminder-summary-counts i,
  .future-reminders-disclosure .future-reminders-meta i,
  .finished-treatments-disclosure .finished-treatments-meta i,
  .administered-vaccines-disclosure > summary i,
  .vaccine-reference-disclosure > summary b
)::after {
  width: 7px;
  height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  content: "";
  transform: translateY(-1.5px) rotate(45deg);
}

.home-reminder-disclosure[open] > summary .reminder-summary-counts i,
.future-reminders-disclosure[open] > summary .future-reminders-meta i,
.finished-treatments-disclosure[open] > summary .finished-treatments-meta i,
.administered-vaccines-disclosure[open] > summary i,
.vaccine-reference-disclosure[open] > summary b {
  transform: rotate(180deg);
}

@media (max-width: 430px) {
  .health-treatment-header {
    gap: 10px;
    padding: 1px 1px 8px;
  }

  .health-treatment-header-icon {
    width: 47px;
    height: 47px;
  }

  .health-treatment-header-copy h1 {
    font-size: 27px;
  }

  .health-add-medication {
    width: 40px;
    padding: 0;
  }

  .health-add-medication-label {
    display: none;
  }
}

.health-medication-empty {
  margin: 2px 0 0;
  padding: 14px 4px;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
}

.medication-dose-input {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(128px, 1.2fr);
  gap: 7px;
}

.medication-dose-input select {
  min-width: 0;
}

.vaccine-coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vaccine-coverage-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid rgba(45, 102, 136, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 720;
}

.administered-vaccine-card > p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.vaccine-card-photos-section {
  padding: 17px;
}

.compact-upload {
  position: relative;
  min-height: 40px;
  cursor: pointer;
}

.compact-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vaccine-photos-help {
  margin: -4px 0 14px;
  color: var(--ink-soft);
  font-size: 11px;
}

.vaccine-card-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.vaccine-card-photo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.vaccine-card-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vaccine-card-photo figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 9px;
  color: var(--ink-soft);
  font-size: 10px;
}

.vaccine-card-photo figcaption .icon-button {
  width: 27px;
  height: 27px;
  min-height: 0;
}

.vaccine-photo-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 130px;
  border: 1px dashed rgba(45, 84, 104, 0.18);
  border-radius: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.vaccine-photo-empty span {
  font-size: 28px;
}

.vaccine-photo-empty p {
  margin: 5px 0 0;
  font-size: 12px;
}

.form-grid .full-span {
  grid-column: 1 / -1;
}

.vaccine-coverage-selector {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.vaccine-coverage-selector legend {
  padding: 0 5px;
  font-size: 12px;
  font-weight: 780;
}

.vaccine-coverage-selector > p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.vaccine-coverage-selector > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.vaccine-coverage-selector label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(169, 211, 238, 0.14);
  font-size: 10px;
  line-height: 1.2;
}

.vaccine-coverage-selector input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue-deep);
}

.weight-overview-card {
  display: grid;
  gap: 17px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow);
  transition: border-color 180ms ease, background 180ms ease;
}

.weight-overview-card.target-on-target {
  border-color: rgba(82, 157, 111, 0.3);
  background: linear-gradient(145deg, rgba(236, 249, 240, 0.86), rgba(255, 255, 255, 0.8));
}

.weight-overview-card.target-above {
  border-color: rgba(193, 95, 82, 0.34);
  background: linear-gradient(145deg, rgba(255, 236, 232, 0.82), rgba(255, 255, 255, 0.82));
}

.weight-overview-card.target-below {
  border-color: rgba(204, 160, 50, 0.34);
  background: linear-gradient(145deg, rgba(255, 247, 213, 0.88), rgba(255, 255, 255, 0.82));
}

.weight-overview-card.target-neutral {
  border-color: rgba(72, 137, 176, 0.24);
  background: linear-gradient(145deg, rgba(232, 246, 255, 0.8), rgba(255, 255, 255, 0.82));
}

.weight-current-card {
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 6px 12px 2px;
  text-align: center;
}

.weight-current-card > span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weight-current-card > strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(46px, 13vw, 66px);
  letter-spacing: -0.055em;
  line-height: 1;
}

.weight-current-card > p {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.weight-target-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(55, 75, 85, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.target-status-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  font-weight: 900;
}

.target-on-target .target-status-icon {
  background: #59a976;
}

.target-above .target-status-icon {
  background: #cf6f62;
}

.target-below .target-status-icon {
  background: #d7ad3d;
}

.target-neutral .target-status-icon {
  background: var(--blue-strong);
}

.target-status-copy {
  display: grid;
  gap: 2px;
}

.target-status-copy strong {
  font-size: 13px;
}

.target-status-copy span,
.target-reference span {
  color: var(--ink-soft);
  font-size: 11px;
}

.target-reference {
  display: grid;
  justify-items: end;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.target-reference strong {
  font-size: 18px;
}

.chart-card {
  overflow: hidden;
  padding: 16px 10px 6px;
}

.weight-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

.weight-chart {
  display: block;
  width: 100%;
  min-width: 320px;
}

@media (max-width: 699px) {
  .chart-card {
    margin-right: -3px;
    margin-left: -3px;
    padding: 12px 4px 4px;
  }

  .weight-chart {
    min-width: 340px;
  }

  .weight-page .weight-chart {
    min-width: 100%;
  }

  .weight-page .weight-chart-wrap {
    overflow-x: hidden;
  }
}

.chart-grid line {
  stroke: rgba(45, 84, 104, 0.1);
  stroke-width: 1;
}

.chart-grid text,
.chart-dates text {
  fill: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.weight-chart polyline {
  fill: none;
  stroke: var(--blue-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.target-line line {
  stroke: var(--coral);
  stroke-dasharray: 7 6;
  stroke-width: 2;
}

.target-line .target-band {
  fill: rgba(243, 170, 160, 0.17);
  stroke: none;
}

.target-line text {
  fill: #a1554d;
  font-size: 11px;
  font-weight: 780;
}


.chart-points circle {
  fill: var(--yellow);
  stroke: white;
  stroke-width: 4;
}

.chart-point {
  cursor: pointer;
  outline: none;
}

.chart-point-hit {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: all;
}

.chart-point-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 160ms ease, fill 160ms ease;
}

.chart-point:hover .chart-point-dot,
.chart-point:focus .chart-point-dot,
.chart-point:focus-visible .chart-point-dot {
  fill: #ffd75f;
  transform: scale(1.35);
}

.chart-tooltip {
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.chart-point:hover .chart-tooltip,
.chart-point:focus .chart-tooltip,
.chart-point:focus-visible .chart-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.chart-tooltip rect {
  fill: #24495f;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  filter: drop-shadow(0 5px 8px rgba(36, 73, 95, 0.2));
}

.chart-tooltip text {
  fill: white;
  font-size: 11px;
  text-anchor: start;
}

.chart-tooltip-weight {
  font-weight: 800;
}

.chart-tooltip-date {
  fill: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600;
}

.care-plan-card {
  padding: 18px;
}

.care-plan-card .section-heading {
  align-items: flex-start;
  padding: 0;
}

.care-plan-card .eyebrow {
  margin-bottom: 4px;
}

.clinical-note {
  margin: 18px 0 0;
  padding: 13px;
  border-radius: 13px;
  background: rgba(169, 211, 238, 0.18);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.care-plan-card form {
  display: grid;
  gap: 11px;
}

.care-plan-card label {
  max-width: 260px;
}

.care-plan-card textarea {
  min-height: 90px;
}

.care-plan-card .primary-button {
  justify-self: start;
}

.field-help {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.chronological-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.weight-record-list {
  display: grid;
  gap: 10px;
}

.weight-record-card {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-height: 104px;
  padding: 0 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(55, 75, 85, 0.07);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.weight-record-card:focus-visible {
  border-color: rgba(45, 102, 136, 0.32);
  box-shadow: 0 12px 28px rgba(55, 75, 85, 0.11);
  transform: translateY(-1px);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .weight-record-card:hover {
    border-color: rgba(45, 102, 136, 0.32);
    box-shadow: 0 12px 28px rgba(55, 75, 85, 0.11);
    transform: translateY(-1px);
    outline: none;
  }
}

.weight-record-accent {
  background: var(--blue);
}

.weight-record-card.latest .weight-record-accent {
  background: var(--yellow);
}

.weight-record-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 0;
}

.weight-record-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weight-record-heading strong {
  font-size: 20px;
}

.current-badge {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--yellow-soft);
  color: var(--blue-deep);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.weight-record-card time,
.weight-record-notes {
  color: var(--ink-soft);
}

.weight-record-card time {
  font-size: 11px;
  font-weight: 750;
}

.weight-record-notes {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weight-record-side {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 11px;
  min-width: 88px;
}

.weight-change {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
}

.edit-record-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.edit-record-label span {
  color: var(--blue-deep);
  font-size: 19px;
  line-height: 0;
}

.weight-records-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.weight-records-toggle {
  min-height: 42px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-deep);
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 15px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--blue-deep);
  cursor: pointer;
  font-weight: 760;
}

.form-card {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.profile-editor-form {
  gap: 14px;
  padding: 0;
}

.profile-form-section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(36, 67, 87, 0.075);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(55, 75, 85, 0.055);
}

.profile-form-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.profile-form-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 10px;
  background: rgba(77, 167, 218, 0.13);
  color: #287dad;
  font-size: 10px;
  font-weight: 850;
}

.profile-form-heading h2 {
  font-size: 17px;
  line-height: 1.2;
}

.profile-form-heading p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.35;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.profile-form-grid > label,
.profile-form-grid > .medication-date-field {
  min-width: 0;
}

.profile-form-grid > .sterilization-date-field {
  min-width: 0;
}

.sterilization-date-field > .medication-date-field {
  height: 100%;
}

.sterilization-date-field .field-help {
  display: none;
}

.profile-form-grid input,
.profile-form-grid select,
.profile-form-grid .date-picker-trigger {
  height: 49px;
  border-color: rgba(36, 67, 87, 0.11);
  background-color: rgba(248, 251, 253, 0.95);
}

.profile-form-grid select {
  padding-right: 38px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6b8290 50%), linear-gradient(135deg, #6b8290 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.profile-form-grid input[readonly] {
  border-color: transparent;
  background: rgba(36, 67, 87, 0.055);
  color: var(--ink-soft);
}

.profile-editor-form > .form-actions {
  padding: 4px 2px 0;
}

.profile-editor-form > .form-actions .primary-button {
  min-width: min(100%, 220px);
}

.profile-delete-zone {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding: 24px 2px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(177, 77, 68, 0.16);
}

.profile-delete-button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(181, 63, 55, 0.24);
  border-radius: 10px;
  background: rgba(255, 239, 237, 0.78);
  color: #ad4139;
  font: inherit;
  font-weight: 720;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.profile-delete-button:hover,
.profile-delete-button:focus-visible {
  background: #ffe5e1;
  outline: none;
}

.profile-delete-button:active {
  transform: scale(0.98);
}

.delete-pet-dialog {
  width: min(calc(100% - 32px), 420px);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 10px;
  background: rgba(250, 252, 253, 0.97);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(28, 43, 53, 0.3);
  backdrop-filter: blur(24px);
}

.delete-pet-dialog[open] {
  animation: sheet-in 220ms ease both;
}

.delete-pet-dialog::backdrop {
  background: rgba(25, 40, 50, 0.38);
  backdrop-filter: blur(6px);
}

#deletePetDialogContent {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 22px 20px;
  text-align: center;
}

.delete-pet-alert-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: #ffe4e0;
  color: #ad4139;
  font-size: 24px;
  font-weight: 800;
}

#deletePetDialogContent h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

#deletePetDialogContent p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

#deletePetDialogContent .delete-pet-only-note {
  color: #95483f;
}

.delete-pet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.danger-button.delete-pet-confirm {
  border-radius: 10px;
  background: #c84f45;
  color: #fff;
}

.danger-button.delete-pet-confirm:hover,
.danger-button.delete-pet-confirm:focus-visible {
  background: #b7443b;
}

.photo-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(169, 211, 238, 0.16);
}

.profile-photo-editors {
  display: grid;
  gap: 12px;
}

.cover-photo-editor {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.72);
}

.photo-preview {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.85);
  border-radius: 29px;
  background: linear-gradient(145deg, var(--yellow-soft), var(--yellow));
  box-shadow: 0 8px 18px rgba(55, 75, 85, 0.1);
}

.cover-photo-preview {
  width: 100%;
  height: 132px;
  border-width: 3px;
  border-radius: 10px;
}

.cover-photo-preview .pet-image {
  object-fit: cover;
}

.photo-editor-copy {
  min-width: 0;
}

.photo-editor-copy strong,
.photo-editor-copy span {
  display: block;
}

.photo-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.photo-edit-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(36, 67, 87, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  transition: transform 160ms ease, background 160ms ease;
}

.photo-edit-launch svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-edit-launch:active {
  transform: scale(0.97);
}

.profile-save-dock {
  position: fixed;
  z-index: 46;
  right: max(18px, calc((100vw - 440px) / 2));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px);
  left: max(18px, calc((100vw - 440px) / 2));
  display: flex;
  justify-content: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  background: rgba(241, 247, 250, 0.76);
  box-shadow: 0 13px 32px rgba(33, 67, 85, 0.16);
  pointer-events: none;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.profile-save-dock .primary-button {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 160ms ease, background 180ms ease;
}

.profile-save-dock .primary-button:disabled {
  background: rgba(154, 174, 184, 0.52);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.86);
  cursor: default;
}

.edit-profile-page {
  padding-bottom: 86px;
}

.photo-tool-button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.photo-tool-button.danger {
  color: #ad5148;
}

.photo-editor-copy span {
  margin: 4px 0 10px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
}

.file-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.unit-input {
  position: relative;
}

.unit-input input {
  padding-right: 48px;
}

.unit-input span {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 780;
  transform: translateY(-50%);
  pointer-events: none;
}

.form-grid {
  display: grid;
  gap: 16px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 740;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(45, 84, 104, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

input,
select {
  height: 47px;
  padding: 0 13px;
}

textarea {
  min-height: 110px;
  padding: 13px;
  resize: vertical;
}

/* Biblioteca de documentos y asistente de carga. */
.documents-page {
  display: grid;
  gap: 18px;
}

.document-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(36, 67, 87, 0.07);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 34px rgba(36, 67, 87, 0.07);
}

.document-page-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background: linear-gradient(145deg, #69b8dd, #257ea9);
  color: white;
}

.document-page-symbol .app-glyph {
  width: 29px;
  height: 29px;
}

.document-page-title p,
.document-page-title h1,
.document-page-title span {
  margin: 0;
}

.document-page-title p,
.document-page-title span {
  color: var(--ink-soft);
  font-size: 12px;
}

.document-page-title h1 {
  margin: 1px 0 2px;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1;
}

.document-smart-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(66, 151, 196, 0.14);
  border-radius: 19px;
  background: rgba(221, 243, 253, 0.66);
}

.document-smart-note > span {
  color: #2e8ab7;
  font-size: 20px;
  line-height: 1;
}

.document-smart-note strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}

.document-smart-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.document-category-overview {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: none;
}

.document-category-overview::-webkit-scrollbar {
  display: none;
}

.document-category-overview > button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 11px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--document-color) 22%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--document-color) 9%, white);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.document-category-overview > button:first-child {
  --document-color: #7da2b5;
}

.document-category-overview > button.active {
  border-color: color-mix(in srgb, var(--document-color) 48%, white);
  background: color-mix(in srgb, var(--document-color) 19%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--document-color) 13%, transparent);
}

.document-category-overview button i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--document-color) 17%, white);
  font-style: normal;
}

.document-library-tools {
  display: grid;
  gap: 11px;
}

.document-filter-row {
  margin: 0;
}

.document-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 9px 0 14px;
  border: 1px solid rgba(36, 67, 87, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 7px 22px rgba(36, 67, 87, 0.04);
}

.document-search > span {
  color: #658392;
  line-height: 1;
}

.document-search > span svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.document-search input {
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
}

.document-search input::placeholder {
  color: #748893;
  font-weight: 400;
  opacity: 1;
}

.documents-page .filter-chip {
  font-weight: 500;
}

.document-tag-filter-row {
  padding-top: 1px;
}

.document-tag-filter-row .filter-chip {
  background: rgba(255, 255, 255, 0.58);
}

.document-tag-filter-row .filter-chip.active {
  background: #e7f1f5;
  color: #315f73;
}

.document-search input:focus {
  outline: 0;
}

.document-search button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 67, 87, 0.07);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 18px;
}

.document-library {
  display: grid;
  gap: 11px;
}

.document-results-count {
  margin: 0 2px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.document-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 3px;
}

.document-section-heading p,
.document-section-heading h2 {
  margin: 0;
}

.document-section-heading h2 {
  margin-top: 3px;
  font-size: 22px;
}

.document-section-heading > span {
  color: var(--ink-soft);
  font-size: 14px;
}

.documents-page .document-card {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  min-height: 78px;
  padding: 12px 13px;
  border: 1px solid rgba(36, 67, 87, 0.07);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 22px rgba(36, 67, 87, 0.045);
}

.document-card .document-icon {
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--document-color) 15%, white);
  font-size: 23px;
}

.document-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-card-copy {
  display: grid;
  align-content: center;
}

.document-card-copy > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.document-card-copy > p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-top: 3px;
  font-size: 11px;
}

.document-card-copy > p time {
  color: #81939c;
}

.document-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.document-card-tags > span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf3f5;
  color: #59717c;
  font-size: 9px;
  font-weight: 500;
}

.document-card-copy > small {
  overflow: hidden;
  margin-top: 3px;
  color: #82939d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-file-badge {
  padding: 5px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--document-color) 10%, white);
  color: color-mix(in srgb, var(--document-color) 70%, #264357);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.document-more-button {
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.document-empty-state {
  display: grid;
  justify-items: center;
  padding: 38px 20px;
  border: 1px dashed rgba(36, 67, 87, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.document-empty-state > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background: #dff2fb;
  color: #2e82aa;
}

.document-empty-state h3 {
  margin: 13px 0 4px;
}

.document-empty-state p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 12px;
}

.document-upload-fields {
  padding: 14px;
}

.document-file-picker {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 190px;
  padding: 28px 20px;
  border: 1.5px dashed rgba(47, 137, 181, 0.32);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(235, 248, 253, 0.88), rgba(255, 255, 255, 0.84));
  cursor: pointer;
  text-align: center;
}

.document-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.document-upload-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 21px;
  background: #d6eef9;
  color: #257fa9;
  box-shadow: inset 0 0 0 1px rgba(42, 130, 174, 0.08);
}

.document-upload-icon .app-glyph {
  width: 30px;
  height: 30px;
}

.document-file-picker strong,
.document-file-picker small {
  display: block;
}

.document-file-picker strong {
  color: var(--ink);
  font-size: 15px;
}

.document-file-picker small {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.document-analysis-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: 16px;
  background: #edf7fb;
}

.document-analysis-status.hidden {
  display: none;
}

.document-analysis-status strong,
.document-analysis-status small {
  display: block;
}

.document-analysis-status strong {
  font-size: 12px;
}

.document-analysis-status small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 10px;
}

.document-analysis-spinner {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border: 3px solid rgba(47, 137, 181, 0.16);
  border-top-color: #328db9;
  border-radius: 50%;
  animation: document-spin 0.75s linear infinite;
}

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

.document-category-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.document-category-picker legend {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
}

.document-category-picker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.document-category-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 7px 9px;
  border: 1px solid rgba(36, 67, 87, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
}

.document-category-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.document-category-picker label:has(input:checked) {
  border-color: color-mix(in srgb, var(--document-color) 58%, white);
  background: color-mix(in srgb, var(--document-color) 12%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--document-color) 16%, white);
}

.document-tag-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.document-tag-picker legend {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 500;
}

.document-tag-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.document-tag-picker label {
  position: relative;
  cursor: pointer;
}

.document-tag-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.document-tag-picker label > span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(36, 67, 87, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #5b707b;
  font-size: 10px;
  font-weight: 500;
}

.document-tag-picker label:has(input:checked) > span {
  border-color: #74a9c0;
  background: #e5f2f7;
  color: #2f708d;
}

.document-category-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--document-color) 17%, white);
  font-size: 15px;
}

.document-analysis-disclosure {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(36, 67, 87, 0.045);
}

.document-analysis-disclosure strong {
  font-size: 10px;
}

.document-analysis-disclosure span {
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .documents-page {
    gap: 14px;
  }

  .document-page-header {
    gap: 11px;
    padding: 14px;
    border-radius: 21px;
  }

  .document-page-symbol {
    width: 49px;
    height: 49px;
    border-radius: 16px;
  }

  .document-page-title h1 {
    font-size: 27px;
  }

  .document-page-title p,
  .document-page-title span {
    font-size: 10px;
  }

  .document-page-header .health-add-medication {
    min-width: 45px;
    width: 45px;
    padding: 0;
  }

  .document-page-header .health-add-medication strong {
    display: none;
  }

  .document-smart-note {
    padding: 12px;
  }

  .documents-page .document-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 72px;
    padding: 10px;
  }

  .document-card .document-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .document-file-badge {
    align-self: start;
  }

  .document-more-button {
    display: none;
  }

  .document-category-picker > div {
    gap: 6px;
  }

  .document-category-picker label {
    min-height: 41px;
    padding: 6px 7px;
  }
}

input[type="file"] {
  height: auto;
  padding: 11px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 48px;
  color: var(--ink);
}

.toggle-row input {
  width: 22px;
  height: 22px;
}

.document-list {
  display: grid;
  gap: 10px;
}

.document-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.document-card > div {
  min-width: 0;
}

.document-card strong {
  overflow-wrap: anywhere;
}

.document-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 49px;
  border-radius: 10px 10px 13px 9px;
  background: var(--yellow-soft);
  font-size: 20px;
}

.document-card p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.report-sheet {
  overflow: hidden;
  background: #fff;
}

.report-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
  border-bottom: 4px solid var(--yellow);
  background: #f7fbfd;
}

.report-brand {
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.report-body {
  padding: 22px;
}

.report-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.report-intro .mini-avatar {
  width: 62px;
  height: 62px;
  border-radius: 18px;
}

.report-grid {
  display: grid;
  gap: 20px;
  margin-top: 22px;
}

.report-section h3 {
  margin-bottom: 9px;
  color: var(--blue-deep);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.report-section p,
.report-section li {
  color: #3e5664;
  font-size: 13px;
  line-height: 1.55;
}

.report-section ul {
  margin: 0;
  padding-left: 18px;
}

.report-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.report-top > div small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 9px;
}

.report-intro {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.report-pet-heading {
  min-width: 0;
}

.report-pet-heading p,
.report-pet-heading h2,
.report-pet-heading span {
  margin: 0;
}

.report-pet-heading p {
  color: var(--blue-deep);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-pet-heading h2 {
  margin: 2px 0 3px;
  font-size: 27px;
}

.report-pet-heading span {
  color: var(--ink-soft);
  font-size: 11px;
}

.report-pet-heading small {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
}

.report-id-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 8px;
}

.report-id-facts > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(169, 211, 238, 0.13);
}

.report-id-facts small,
.report-id-facts strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-id-facts small {
  color: var(--ink-soft);
  font-size: 8px;
  text-transform: uppercase;
}

.report-id-facts strong {
  font-size: 10px;
}

.report-alert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.report-alert {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 67px;
  padding: 11px;
  border: 1px solid rgba(36, 67, 87, 0.07);
  border-radius: 13px;
  background: #f6f9fa;
}

.report-alert span {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.report-alert strong {
  font-size: 10px;
  line-height: 1.3;
}

.report-alert.attention {
  border-color: rgba(207, 111, 98, 0.22);
  background: rgba(255, 236, 232, 0.7);
}

.report-alert.active {
  border-color: rgba(77, 167, 218, 0.2);
  background: rgba(226, 244, 253, 0.78);
}

.report-clinical-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.report-section {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(36, 67, 87, 0.075);
  border-radius: 15px;
  background: #fbfcfd;
}

.report-section-wide {
  grid-column: 1 / -1;
}

.report-section-title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}

.report-section-title h3,
.report-section-title p {
  margin: 0;
}

.report-section-title h3 {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.report-section-title p {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.3;
}

.report-section-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: rgba(77, 167, 218, 0.12);
  color: #287dad;
  font-size: 8px;
  font-weight: 900;
}

.report-medication-list,
.report-status-list,
.report-history-list {
  display: grid;
  gap: 7px;
}

.report-medication-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 11px;
  background: rgba(169, 211, 238, 0.12);
}

.report-medication-row div,
.report-medication-row strong,
.report-medication-row span {
  min-width: 0;
}

.report-medication-row strong,
.report-medication-row span {
  display: block;
}

.report-medication-row strong {
  font-size: 11px;
}

.report-medication-row span,
.report-medication-row small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 9px;
}

.report-medication-row small {
  flex: 0 0 auto;
  max-width: 40%;
  text-align: right;
}

.report-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 9px 10px 9px 13px;
  border-left: 3px solid #89afc2;
  border-radius: 9px;
  background: rgba(244, 248, 250, 0.9);
}

.report-status-row > span,
.report-status-row > small {
  color: var(--ink-soft);
  font-size: 8px;
}

.report-status-row > strong {
  font-size: 9px;
  text-align: right;
}

.report-status-row > small {
  grid-column: 1 / -1;
}

.report-status-row.tone-overdue {
  border-left-color: #cf6f62;
}

.report-status-row.tone-upcoming {
  border-left-color: #d7ad3d;
}

.report-status-row.tone-current {
  border-left-color: #5fae7b;
}

.report-context-line {
  margin: 9px 0 0 !important;
  font-size: 9px !important;
}

.report-mini-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.report-mini-dates span {
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(36, 67, 87, 0.05);
  color: var(--ink-soft);
  font-size: 8px;
}

.report-mini-dates strong {
  margin-right: 4px;
  color: var(--ink);
}

.report-weight-summary {
  display: grid;
}

.report-weight-summary > strong {
  color: var(--blue-deep);
  font-size: 28px;
  line-height: 1;
}

.report-weight-summary > span {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 750;
}

.report-weight-summary > small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 8px;
}

.report-history-list article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 11px;
  padding: 8px 0;
  border-top: 1px solid rgba(36, 67, 87, 0.075);
}

.report-history-list article:first-child {
  border-top: 0;
}

.report-history-list time {
  color: var(--blue-deep);
  font-size: 9px;
  font-weight: 800;
}

.report-history-list strong {
  font-size: 10px;
}

.report-history-list p {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.report-care-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  background: #f5f9fb;
}

.report-care-row > div {
  display: grid;
  gap: 3px;
}

.report-care-row span,
.report-care-row small {
  color: var(--ink-soft);
  font-size: 8px;
  text-transform: uppercase;
}

.report-care-row strong {
  font-size: 10px;
}

.report-empty-line {
  margin: 0 !important;
  color: var(--ink-soft) !important;
  font-size: 10px !important;
}

.report-note {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.4;
  text-align: center;
}

.report-plain-content {
  margin-top: 8px;
}

.report-plain-section {
  padding: 16px 1px;
  border-bottom: 1px solid rgba(36, 67, 87, 0.1);
}

.report-plain-section:last-child {
  border-bottom: 0;
}

.report-plain-section h3 {
  margin: 0 0 7px;
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.report-plain-section > p,
.report-plain-treatment p {
  margin: 0;
  color: #3e5664;
  font-size: 11px;
  line-height: 1.55;
}

.report-plain-section > p + p,
.report-plain-treatment + .report-plain-treatment {
  margin-top: 8px;
}

.report-plain-treatment > strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12px;
}

.report-period-note {
  display: block;
  margin: -2px 0 8px;
  color: var(--ink-soft);
  font-size: 8px;
  line-height: 1.4;
}

/* Gastos */
.expense-quick-card .quick-icon {
  border-radius: 9px;
  background: rgba(255, 234, 217, 0.88);
  color: #9a6038;
}

.expense-quick-card .quick-icon .app-glyph {
  width: 21px;
  height: 21px;
}

.expense-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 17px 18px;
  border: 1px solid rgba(36, 67, 87, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 36px rgba(36, 67, 87, 0.08);
}

.expense-page-title {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.expense-page-title > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ffead9;
  color: #9a6038;
}

.expense-page-title .app-glyph {
  width: 28px;
  height: 28px;
}

.expense-page-title p,
.expense-page-title h1,
.expense-page-title small {
  margin: 0;
}

.expense-page-title p,
.expense-page-title small {
  color: var(--ink-soft);
}

.expense-page-title p {
  font-size: 10px;
}

.expense-page-title h1 {
  margin: 1px 0 2px;
  font-size: 29px;
}

.expense-page-title small {
  font-size: 11px;
}

.expense-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px minmax(240px, 0.9fr);
  grid-template-areas:
    "month month month"
    "total donut breakdown"
    "period donut breakdown";
  align-items: center;
  gap: 14px 26px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(36, 67, 87, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 45px rgba(36, 67, 87, 0.08);
}

.expense-month-toolbar {
  display: grid;
  grid-area: month;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(36, 67, 87, 0.075);
}

.expense-month-toolbar button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: rgba(90, 167, 211, 0.13);
  color: var(--blue-deep);
  cursor: pointer;
  font: inherit;
  font-size: 27px;
  line-height: 1;
  transition: background 150ms ease, transform 100ms ease, opacity 150ms ease;
}

.expense-month-toolbar button:active {
  transform: scale(0.94);
}

.expense-month-toolbar button:disabled {
  opacity: 0.25;
  cursor: default;
}

.expense-month-toolbar > div {
  min-width: 0;
  text-align: center;
}

.expense-month-toolbar span,
.expense-month-toolbar strong {
  display: block;
}

.expense-month-toolbar span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 720;
}

.expense-month-toolbar strong {
  margin-top: 2px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-total-copy {
  grid-area: total;
  align-self: end;
}

.expense-total-copy > span,
.expense-total-copy > strong,
.expense-total-copy > small {
  display: block;
}

.expense-total-copy > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
}

.expense-total-copy > strong {
  margin: 3px 0 4px;
  color: var(--ink);
  font-size: clamp(30px, 4.2vw, 43px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.expense-total-copy > small {
  color: var(--ink-soft);
  font-size: 10px;
}

.expense-donut {
  position: relative;
  display: grid;
  grid-area: donut;
  place-content: center;
  width: 156px;
  height: 156px;
  color: var(--ink);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.expense-donut > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.expense-donut-track {
  stroke: #e4ebee;
}

.expense-donut-segment {
  cursor: pointer;
  outline: none;
  transition: filter 150ms ease, opacity 150ms ease, stroke-width 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.expense-donut:has(.expense-donut-segment:hover) .expense-donut-segment:not(:hover),
.expense-donut:has(.expense-donut-segment.is-active) .expense-donut-segment:not(.is-active) {
  opacity: 0.48;
}

.expense-donut-segment:hover,
.expense-donut-segment:focus-visible,
.expense-donut-segment.is-active {
  filter: saturate(1.12) drop-shadow(0 3px 3px rgba(36, 67, 87, 0.15));
  stroke-width: 21;
}

.expense-donut-center {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  place-content: center;
  width: 110px;
  min-height: 110px;
  padding: 9px 7px;
  border: 1px solid rgba(36, 67, 87, 0.045);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(36, 67, 87, 0.035);
}

.expense-donut-context {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 780;
  letter-spacing: 0.025em;
}

.expense-donut-center > strong {
  max-width: 96px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 820;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-donut-center > small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.15;
}

.expense-donut-center > em {
  margin-top: 2px;
  color: var(--blue-deep);
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
}

.expense-period-stats {
  display: grid;
  grid-area: period;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: start;
  gap: 8px;
}

.expense-period-stats > div {
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(36, 67, 87, 0.045);
}

.expense-period-stats span,
.expense-period-stats strong {
  display: block;
}

.expense-period-stats span {
  color: var(--ink-soft);
  font-size: 9px;
}

.expense-period-stats strong {
  margin-top: 2px;
  font-size: 12px;
}

.expense-breakdown {
  display: grid;
  grid-area: breakdown;
  gap: 7px;
}

.expense-breakdown-row {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px 5px 5px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--expense-color) 8%, white);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.expense-breakdown-row.is-active {
  background: color-mix(in srgb, var(--expense-color) 16%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--expense-color) 32%, white);
  transform: translateX(2px);
}

.expense-breakdown-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--expense-color) 18%, white);
  font-size: 16px;
}

.expense-breakdown-row strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-breakdown-row > span:last-child {
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.expense-empty-chart {
  display: grid;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 11px;
}

.expense-empty-chart strong {
  color: var(--ink);
  font-size: 14px;
}

.expense-history-section {
  margin-top: 27px;
}

.expense-month-groups,
.expense-record-list {
  display: grid;
  gap: 10px;
}

.expense-month-group + .expense-month-group {
  margin-top: 12px;
}

.expense-month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.expense-month-heading h3,
.expense-month-heading strong {
  margin: 0;
  font-size: 12px;
}

.expense-month-heading h3 {
  color: var(--ink-soft);
}

.expense-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(36, 67, 87, 0.075);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 22px rgba(36, 67, 87, 0.055);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.expense-record:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 30px rgba(36, 67, 87, 0.09);
}

.expense-record-visual {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 15px;
  background: color-mix(in srgb, var(--expense-color) 18%, white);
  color: color-mix(in srgb, var(--expense-color) 75%, #243f50);
}

.expense-record-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expense-record-visual .app-glyph {
  width: 24px;
  height: 24px;
}

.expense-record-visual > span {
  font-size: 22px;
}

.expense-record-copy,
.expense-record-amount {
  min-width: 0;
}

.expense-record-copy > strong,
.expense-record-copy > span,
.expense-record-copy > small,
.expense-record-amount > small {
  display: block;
}

.expense-record-copy > strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-record-copy > span,
.expense-record-copy > small,
.expense-record-amount > small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 10px;
}

.expense-record-copy > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-record-amount {
  font-size: 15px;
  font-weight: 820;
  text-align: right;
}

.expense-record-amount > small {
  color: #5b9977;
  font-weight: 700;
}

.expense-record-chevron {
  color: #8da0aa;
  font-size: 24px;
  font-weight: 350;
}

.expense-empty-state {
  display: grid;
  justify-items: center;
  padding: 38px 20px;
  border: 1px dashed rgba(36, 67, 87, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.expense-empty-state > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 19px;
  background: #ffead9;
  color: #9a6038;
}

.expense-empty-state .app-glyph {
  width: 28px;
  height: 28px;
}

.expense-empty-state h3 {
  margin: 13px 0 4px;
  font-size: 19px;
}

.expense-empty-state p {
  max-width: 360px;
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.expense-category-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.expense-category-picker legend {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 760;
}

.expense-category-picker > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.expense-category-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid rgba(36, 67, 87, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.expense-wizard .guided-intro {
  padding-bottom: 9px;
}

.expense-wizard .guided-fields {
  gap: 9px;
  padding: 12px;
}

.expense-wizard .expense-category-picker > div {
  gap: 5px 7px;
}

.expense-category-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.expense-category-picker label:has(input:checked) {
  border-color: color-mix(in srgb, var(--expense-color) 58%, white);
  background: color-mix(in srgb, var(--expense-color) 13%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--expense-color) 18%, white);
}

.expense-category-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--expense-color) 18%, white);
  font-size: 17px;
}

.expense-category-picker label > span:last-child {
  min-width: 0;
}

.medication-duration-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.medication-duration-field > legend {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 760;
}

.medication-duration-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.medication-duration-modes label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 43px;
  padding: 8px 12px;
  border: 1px solid rgba(36, 67, 87, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
}

.medication-duration-modes input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.medication-duration-modes label:has(input:checked) {
  border-color: rgba(55, 155, 211, 0.42);
  background: #dff2fc;
  color: #176e9e;
  box-shadow: inset 0 0 0 1px rgba(55, 155, 211, 0.12);
}

.medication-duration-days {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 8px;
  margin-top: 9px;
}

.medication-duration-days > button {
  display: grid;
  place-items: center;
  min-height: 47px;
  padding: 0;
  border: 1px solid rgba(36, 67, 87, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--blue-deep);
  cursor: pointer;
  font: 500 25px/1 "Plus Jakarta Sans", sans-serif;
}

.medication-duration-days > label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 47px;
  border: 1px solid rgba(36, 67, 87, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.medication-duration-days input {
  width: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 760 18px/1 "Plus Jakarta Sans", sans-serif;
  text-align: right;
  outline: 0;
  appearance: textfield;
}

.medication-duration-days input::-webkit-inner-spin-button,
.medication-duration-days input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.medication-duration-days label span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.medication-duration-field > p {
  margin: 7px 2px 0;
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
}

.guided-review-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 0 15px 10px;
  padding: 13px;
  border: 1px solid rgba(55, 155, 211, 0.16);
  border-radius: 19px;
  background: linear-gradient(145deg, #e6f5fd, rgba(255, 255, 255, 0.86));
}

.guided-review-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: white;
  color: #247faa;
  box-shadow: 0 7px 16px rgba(36, 67, 87, 0.08);
}

.guided-review-icon .app-glyph {
  width: 28px;
  height: 28px;
}

.guided-review-card > div {
  display: grid;
  gap: 2px;
}

.guided-review-card span,
.guided-review-card small {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.guided-review-card strong {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.15;
}

.weight-review-card strong {
  font-size: 25px;
}

.guided-review-meta {
  opacity: 0.78;
}

/* Radio compacto común para todas las superficies rectangulares. */
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  dialog,
  .surface-card,
  .quick-card,
  .record-card,
  .option-card,
  .profile-hero,
  .info-card,
  .report-sheet,
  .document-card,
  .form-card,
  .primary-button,
  .secondary-button,
  .search-box,
  .filter-chip,
  .guided-fields,
  .guided-review-card,
  .date-picker-trigger,
  .time-picker-trigger,
  .medication-duration-modes label,
  .medication-duration-days > button,
  .medication-duration-days > label,
  .expense-category-picker label,
  .document-category-picker label,
  .expense-record,
  .document-file-picker,
  .expense-receipt-upload,
  .local-sync-banner,
  .empty-state
) {
  border-radius: 10px;
}

/* Prueba visual: superficies de Inicio con un radio compacto de 10 px. */
.home-page :is(
  .hero-card,
  .quick-card,
  .reminder-card,
  .record-card,
  .report-cta,
  .report-cta .primary-button,
  .future-reminders-disclosure > summary,
  .icon-tile,
  .date-badge,
  .local-sync-banner,
  .empty-state
) {
  border-radius: 10px;
}

.expense-amount-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(36, 67, 87, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.83);
}

.expense-amount-input input {
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 22px;
  font-weight: 760;
}

.expense-amount-input span {
  display: grid;
  place-items: center;
  height: 100%;
  border-left: 1px solid rgba(36, 67, 87, 0.08);
  color: #8b6a4e;
  font-size: 18px;
  font-weight: 750;
}

.expense-receipt-upload {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 10px !important;
  border: 1px dashed rgba(36, 67, 87, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  cursor: pointer;
}

.expense-receipt-upload > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.expense-receipt-preview {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 14px;
  background: #ffead9;
  color: #9a6038;
}

.expense-receipt-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expense-receipt-preview .app-glyph {
  width: 26px;
  height: 26px;
}

.expense-receipt-upload > span:last-child strong,
.expense-receipt-upload > span:last-child small {
  display: block;
}

.expense-receipt-upload > span:last-child strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-receipt-upload > span:last-child small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 10px;
}

@media (max-width: 699px) {
  .expense-page-header {
    margin-top: 12px;
    padding: 14px;
    border-radius: 21px;
  }

  .expense-page-title > span {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .expense-page-title h1 {
    font-size: 25px;
  }

  .expense-page-header .health-add-medication-label {
    display: none;
  }

  .expense-page-header .health-add-medication {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 15px;
  }

  .expense-overview-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "month"
      "total"
      "donut"
      "period"
      "breakdown";
    gap: 17px;
    padding: 19px 17px;
    border-radius: 24px;
  }

  .expense-month-toolbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px;
    padding-bottom: 14px;
  }

  .expense-month-toolbar button {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 31px;
  }

  .expense-month-toolbar span {
    font-size: 10px;
  }

  .expense-month-toolbar strong {
    font-size: 16px;
  }

  .expense-total-copy {
    text-align: center;
  }

  .expense-total-copy > strong {
    font-size: 38px;
  }

  .expense-donut {
    justify-self: center;
    width: 190px;
    height: 190px;
    touch-action: pan-y;
  }

  .expense-donut-center {
    width: 118px;
    min-height: 118px;
    padding: 8px 6px;
  }

  .expense-donut-center > strong {
    max-width: 104px;
    font-size: 17px;
  }

  .expense-donut-center > small,
  .expense-donut-center > em {
    font-size: 9px;
  }

  .expense-donut-context {
    font-size: 9px;
  }

  .expense-breakdown {
    padding-top: 4px;
    border-top: 1px solid rgba(36, 67, 87, 0.075);
  }

  .expense-record {
    grid-template-columns: auto minmax(0, 1fr) auto 12px;
    gap: 9px;
    padding: 10px;
  }

  .expense-record-visual {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }

  .expense-record-copy > strong {
    font-size: 13px;
  }

  .expense-record-amount {
    font-size: 13px;
  }

  .expense-record-amount > small,
  .expense-record-copy > small {
    display: none;
  }

  .expense-category-picker > div {
    grid-template-columns: 1fr 1fr;
  }
}

/* Informe clínico: una hoja sobria y legible al imprimir en A4. */
.report-page .report-sheet {
  width: min(100%, 820px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #d7e0e5;
  border-radius: 4px;
  background: #fff;
  color: #203b4c;
  box-shadow: 0 18px 44px rgba(36, 67, 87, 0.1);
  font-family: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.clinical-report-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 20px;
  border-top: 7px solid #7ebfe4;
  border-bottom: 1px solid #cbd7dd;
}

.clinical-report-brand {
  display: block;
  margin-bottom: 5px;
  color: #327fa9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.clinical-report-header h2 {
  margin: 0;
  color: #203b4c;
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.clinical-report-meta {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  text-align: right;
}

.clinical-report-meta span {
  color: #6a7f8c;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clinical-report-meta strong {
  font-size: 11px;
}

.clinical-report-body {
  padding: 21px 28px 18px;
}

.clinical-patient-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
}

.clinical-patient-heading span,
.clinical-patient-heading p,
.clinical-patient-heading h3 {
  margin: 0;
}

.clinical-patient-heading span {
  color: #6a7f8c;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clinical-patient-heading h3 {
  margin: 2px 0 2px;
  color: #172f3e;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.clinical-patient-heading p {
  color: #4f6674;
  font-size: 11px;
}

.clinical-patient-heading > strong {
  padding: 5px 9px;
  border: 1px solid #cadbe4;
  border-radius: 4px;
  color: #326e91;
  font-size: 10px;
  font-weight: 750;
}

.clinical-demographics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #cbd7dd;
  border-left: 1px solid #cbd7dd;
}

.clinical-demographics > div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid #cbd7dd;
  border-bottom: 1px solid #cbd7dd;
}

.clinical-demographics dt,
.clinical-demographics dd {
  margin: 0;
}

.clinical-demographics dt {
  margin-bottom: 3px;
  color: #6a7f8c;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clinical-demographics dd {
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 620;
  line-height: 1.3;
}

.clinical-demographics dd > strong,
.clinical-demographics dd > small {
  display: block;
}

.clinical-demographics dd > strong {
  font: inherit;
}

.clinical-demographics dd > small {
  margin-top: 2px;
  color: #6a7f8c;
  font-size: 8.5px;
  font-weight: 520;
  line-height: 1.25;
}

.clinical-section {
  margin-top: 16px;
}

.clinical-section > h3,
.clinical-section-heading {
  margin: 0 0 7px;
  padding-bottom: 5px;
  border-bottom: 2px solid #5d9fc5;
}

.clinical-section > h3,
.clinical-section-heading h3 {
  color: #244b62;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clinical-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #d5dfe4;
}

.clinical-key-grid p {
  margin: 0;
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.35;
}

.clinical-key-grid p + p {
  border-left: 1px solid #d5dfe4;
}

.clinical-key-grid strong {
  display: block;
  margin-bottom: 2px;
  color: #637986;
  font-size: 8px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.clinical-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #2d4655;
  font-size: 9px;
  line-height: 1.35;
}

.clinical-table th {
  padding: 5px 7px;
  border-bottom: 1px solid #b9c9d1;
  background: #eef5f8;
  color: #526c7a;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
}

.clinical-table td {
  padding: 6px 7px;
  border-bottom: 1px solid #dce4e8;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.clinical-table tbody tr:last-child td {
  border-bottom: 0;
}

.clinical-table strong,
.clinical-table span {
  display: block;
}

.clinical-table span {
  margin-top: 2px;
  color: #637986;
  font-size: 8px;
}

.clinical-medication-table th:nth-child(1) { width: 22%; }
.clinical-medication-table th:nth-child(2) { width: 27%; }
.clinical-medication-table th:nth-child(3) { width: 22%; }
.clinical-medication-table th:nth-child(4) { width: 29%; }

.clinical-prevention-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 18px;
}

.clinical-prevention-grid h4 {
  margin: 0 0 3px;
  color: #405d6d;
  font-size: 9px;
  font-weight: 750;
}

.clinical-table.compact td:first-child {
  width: 80px;
  color: #5c7481;
  white-space: nowrap;
}

.clinical-prevention-grid > div:last-child .clinical-table.compact td:first-child {
  width: auto;
  color: inherit;
  white-space: normal;
}

.clinical-prevention-grid > div:last-child .clinical-table.compact td:last-child {
  width: 82px;
  text-align: right;
  white-space: nowrap;
}

.clinical-status-overdue td:first-child {
  border-left: 3px solid #d87869;
}

.clinical-status-upcoming td:first-child {
  border-left: 3px solid #d8ae3f;
}

.clinical-deworming-table {
  margin-top: 9px;
  border-top: 1px solid #ccd8de;
}

.clinical-deworming-table th,
.clinical-deworming-table td {
  width: 25%;
}

.clinical-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.clinical-section-heading h3 {
  margin: 0;
}

.clinical-section-heading span {
  color: #6a7f8c;
  font-size: 7.5px;
}

.clinical-history-table td:first-child {
  width: 105px;
  color: #526d7c;
  font-weight: 650;
  white-space: nowrap;
}

.clinical-empty {
  margin: 0;
  padding: 7px 0;
  color: #637986;
  font-size: 9px;
}

.clinical-report-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 17px;
  padding-top: 8px;
  border-top: 1px solid #bfcdd4;
  color: #6d808b;
  font-size: 7.5px;
  line-height: 1.35;
}

.clinical-report-footer span:last-child {
  text-align: right;
}

@media (max-width: 699px) {
  .report-body,
  .report-top {
    padding: 16px;
  }

  .report-intro {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .report-id-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-alert-grid,
  .report-clinical-grid {
    grid-template-columns: 1fr;
  }

  .report-section-wide {
    grid-column: auto;
  }

  .clinical-report-header,
  .clinical-report-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .clinical-report-header h2 {
    font-size: 20px;
  }

  .clinical-demographics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clinical-prevention-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .clinical-table {
    font-size: 8px;
  }

  .clinical-medication-table th:nth-child(4),
  .clinical-medication-table td:nth-child(4) {
    display: none;
  }

  .clinical-medication-table th:nth-child(1) { width: 28%; }
  .clinical-medication-table th:nth-child(2) { width: 40%; }
  .clinical-medication-table th:nth-child(3) { width: 32%; }
}

.sheet {
  width: min(calc(100% - 24px), 520px);
  margin: auto auto 12px;
  padding: 10px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  background: rgba(250, 250, 247, 0.93);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(35, 53, 62, 0.24);
  backdrop-filter: blur(28px);
}

.sheet[open] {
  animation: sheet-in 220ms ease both;
}

.sheet::backdrop {
  background: rgba(32, 48, 58, 0.25);
  backdrop-filter: blur(3px);
}

.crop-dialog {
  width: min(calc(100% - 24px), 520px);
  margin: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 25px;
  background: rgba(250, 250, 247, 0.97);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(32, 48, 58, 0.3);
  backdrop-filter: blur(28px);
}

.add-dialog {
  position: fixed;
  z-index: 55;
  top: auto;
  right: auto;
  bottom: calc(var(--nav-height) + max(20px, env(safe-area-inset-bottom)));
  left: 50%;
  width: min(calc(100% - 18px), 540px);
  max-height: min(calc(100dvh - var(--nav-height) - 54px), 700px);
  margin: 0;
  padding: 9px 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  background: rgba(248, 249, 252, 0.98);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(32, 48, 58, 0.26);
  backdrop-filter: blur(28px);
  transform: translate(-50%, 0);
  transform-origin: 50% 100%;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#addDialogContent {
  max-height: calc(min(calc(100dvh - var(--nav-height) - 54px), 700px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#addDialogContent::-webkit-scrollbar { display: none; }

#addDialogContent:focus {
  outline: none;
}

.add-dialog[open] {
  animation: add-sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.add-dialog.is-dragging {
  transition: none;
  user-select: none;
}

.add-dialog-backdrop {
  position: fixed;
  z-index: 45;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(32, 51, 63, 0.22);
  cursor: default;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 160ms ease;
}

.add-dialog-backdrop[hidden] {
  display: none;
}

body.add-dialog-open {
  overflow: hidden;
}

body.add-dialog-open .bottom-nav {
  z-index: 65;
}

.modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.modal-heading h2 {
  font-size: 23px;
}

.chooser-heading,
.guided-form-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 2px 5px 14px;
}

.chooser-heading span,
.guided-form-heading span {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 720;
}

.chooser-heading h2,
.guided-form-heading h2 {
  font-size: 23px;
  line-height: 1.12;
}

.chooser-pet-context {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.chooser-heading .chooser-pet-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  background: #ffe89a;
  box-shadow: 0 5px 13px rgba(36, 67, 87, 0.11);
}

.chooser-pet-avatar .pet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chooser-heading .chooser-pet-avatar .dog-face,
.chooser-heading .chooser-pet-avatar .dog-eyes,
.chooser-heading .chooser-pet-avatar .dog-muzzle {
  margin-bottom: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.chooser-heading .chooser-pet-name {
  overflow: hidden;
  margin: 0 0 1px;
  color: #397894;
  font-size: 11px;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-close-button,
.guided-back-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 67, 87, 0.065);
  color: var(--ink);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.guided-form-heading {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  text-align: center;
}

.guided-back-button {
  font-size: 31px;
  font-weight: 300;
}

.guided-progress {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0 5px 18px;
}

.guided-progress i {
  height: 4px;
  border-radius: 99px;
  background: rgba(36, 67, 87, 0.1);
  transition: background 180ms ease;
}

.guided-progress i.active {
  background: #58a7d5;
}

.guided-step {
  animation: guided-step-in 180ms ease both;
}

.guided-intro {
  padding: 1px 5px 15px;
}

.guided-intro h3 {
  font-size: 20px;
  line-height: 1.2;
}

.guided-intro p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.guided-fields {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(36, 67, 87, 0.07);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
}

.guided-fields > .vaccine-coverage-selector {
  min-width: 0;
  border-color: rgba(36, 67, 87, 0.09);
  background: rgba(169, 211, 238, 0.075);
}

.guided-reminder-date,
.guided-reminder-date .medication-date-field {
  min-width: 0;
}

.guided-weight-input input {
  height: 58px;
  font-size: 22px;
  font-weight: 800;
}

.guided-delete-button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 0;
  border-radius: 13px;
  background: rgba(207, 111, 98, 0.09);
  color: #ad5549;
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
}

.optional-field-button {
  justify-self: start;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 12px;
  background: rgba(36, 67, 87, 0.065);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
}

.optional-field-button span {
  margin-right: 3px;
  font-size: 15px;
}

.guided-primary-button,
.guided-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.guided-primary-button {
  width: 100%;
  background: #4da7da;
  color: white;
  box-shadow: 0 7px 16px rgba(44, 126, 173, 0.18);
}

.guided-secondary-button {
  background: rgba(36, 67, 87, 0.065);
  color: var(--ink);
}

.guided-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
}

.guided-date-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.optional-label {
  float: right;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
}

.guided-reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 1px;
  color: var(--ink);
}

.guided-reminder-row strong,
.guided-reminder-row small {
  display: block;
}

.guided-reminder-row small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
}

.guided-reminder-row input {
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  margin: 0;
  border: 0;
  border-radius: 99px;
  appearance: none;
  background: radial-gradient(circle at 15px 50%, white 0 11px, transparent 12px), #c8cdd1;
  box-shadow: inset 0 0 0 1px rgba(36, 67, 87, 0.06);
  cursor: pointer;
  transition: background 160ms ease;
}

.guided-reminder-row input:checked {
  background: radial-gradient(circle at 36px 50%, white 0 11px, transparent 12px), #62bd82;
}

.time-field-group {
  display: block;
}

.form-field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
}

.time-picker-trigger,
.date-picker-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 49px;
  padding: 0 13px;
  border: 1px solid rgba(45, 84, 104, 0.18);
  border-radius: 13px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.time-picker-trigger strong,
.date-picker-trigger strong {
  font-size: 13px;
}

.time-picker-clock,
.date-picker-calendar {
  color: #4b9ac6;
  font-size: 20px;
}

.time-picker-chevron {
  color: rgba(36, 67, 87, 0.35);
  font-size: 22px;
}

.time-picker-dialog {
  width: min(calc(100% - 18px), 520px);
  margin: auto auto max(9px, env(safe-area-inset-bottom));
  padding: 9px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  background: rgba(249, 250, 253, 0.99);
  color: var(--ink);
  box-shadow: 0 26px 75px rgba(24, 38, 48, 0.34);
}

.time-picker-dialog[open] {
  animation: sheet-in 210ms ease both;
}

.time-picker-dialog::backdrop {
  background: rgba(25, 40, 50, 0.3);
  backdrop-filter: blur(4px);
}

.wheel-picker-heading {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 4px;
  padding: 0 1px;
  text-align: center;
}

.wheel-picker-heading h2 {
  font-size: 17px;
}

.wheel-picker-heading button {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #4b95bd;
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  text-align: left;
}

.wheel-picker-help {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
}

.time-wheel-picker {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  width: min(100%, 310px);
  height: 220px;
  margin: 8px auto 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%, black 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 24%, black 76%, transparent);
}

.time-wheel-highlight {
  position: absolute;
  z-index: 0;
  top: 88px;
  right: 0;
  left: 0;
  height: 44px;
  border-radius: 10px;
  background: rgba(36, 67, 87, 0.065);
  pointer-events: none;
}

.time-wheel {
  position: relative;
  z-index: 1;
  height: 220px;
  padding: 88px 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.time-wheel::-webkit-scrollbar { display: none; }

.time-wheel button {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(36, 67, 87, 0.42);
  cursor: pointer;
  scroll-snap-align: center;
  font-size: 20px;
  font-weight: 470;
  text-align: center;
  transition: color 120ms ease, font-size 120ms ease;
}

.time-wheel button.selected {
  color: var(--ink);
  font-size: 23px;
  font-weight: 620;
}

.time-wheel-separator {
  position: relative;
  z-index: 2;
  color: var(--ink);
  font-size: 23px;
  text-align: center;
}

.time-picker-done {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: #4da7da;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 820;
}

.date-wheel-picker {
  grid-template-columns: 0.8fr 1fr 1.2fr;
}

.date-wheel.month button {
  font-size: 17px;
}

.date-wheel.year button {
  font-size: 18px;
}

.date-wheel.month button.selected,
.date-wheel.year button.selected {
  font-size: 21px;
}

.date-picker-clear {
  width: 100%;
  min-height: 42px;
  margin: -2px 0 9px;
  border: 0;
  border-radius: 13px;
  background: rgba(36, 67, 87, 0.06);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

@keyframes guided-step-in {
  from { opacity: 0; transform: translateX(10px); }
}

.modal-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(36, 67, 87, 0.07);
  border-radius: 24px;
  background: rgba(223, 229, 235, 0.52);
}

.modal-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 9px 12px 9px 9px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, transform 120ms ease;
}

.modal-option:active { transform: scale(0.985); }

.modal-option .option-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: rgba(169, 211, 238, 0.52);
  font-size: 21px;
  transform: none;
}

.modal-option:nth-child(3n + 2) .option-icon {
  background: rgba(184, 221, 198, 0.58);
}

.modal-option:nth-child(3n + 3) .option-icon {
  background: rgba(255, 218, 180, 0.6);
}

.option-icon .app-glyph {
  width: 24px;
  height: 24px;
}

.modal-option .option-icon .app-glyph {
  width: 22px;
  height: 22px;
}

:is(.record-card, .option-card, .modal-option) .type-visit,
:is(.record-card, .option-card, .modal-option) .type-test {
  background: #e2f2fb;
  color: #287dad;
}

:is(.record-card, .option-card, .modal-option) .type-vaccine {
  background: #dfeff9;
  color: #287dad;
}

:is(.record-card, .option-card, .modal-option) .type-deworming {
  background: #e1f1ed;
  color: #3c7d76;
}

:is(.record-card, .option-card, .modal-option) .type-medication {
  background: #e5eef9;
  color: #386f9a;
}

:is(.record-card, .option-card, .modal-option) .type-weight {
  background: #e8edf3;
  color: #45677b;
}

:is(.record-card, .option-card, .modal-option) .type-document {
  background: #fff2c8;
  color: #8c6f20;
}

:is(.record-card, .option-card, .modal-option) .type-expense {
  background: #ffead9;
  color: #9a6038;
}

:is(.record-card, .option-card, .modal-option) .type-photo {
  background: #f9e5ed;
  color: #a65370;
}

:is(.record-card, .option-card, .modal-option) .type-note {
  background: #ece8f8;
  color: #6c5a96;
}

.record-card .icon-tile.type-visit,
.record-card .icon-tile.type-test,
.option-card .option-icon.type-visit,
.option-card .option-icon.type-test,
.modal-option .option-icon.type-visit,
.modal-option .option-icon.type-test {
  background: #e2f2fb;
  color: #287dad;
}

.record-card .icon-tile.type-vaccine,
.option-card .option-icon.type-vaccine,
.modal-option .option-icon.type-vaccine {
  background: #dfeff9;
  color: #287dad;
}

.record-card .icon-tile.type-deworming,
.option-card .option-icon.type-deworming,
.modal-option .option-icon.type-deworming {
  background: #e1f1ed;
  color: #3c7d76;
}

.record-card .icon-tile.type-medication,
.option-card .option-icon.type-medication,
.modal-option .option-icon.type-medication {
  background: #e5eef9;
  color: #386f9a;
}

.record-card .icon-tile.type-weight,
.option-card .option-icon.type-weight,
.modal-option .option-icon.type-weight {
  background: #e8edf3;
  color: #45677b;
}

.record-card .icon-tile.type-document,
.option-card .option-icon.type-document,
.modal-option .option-icon.type-document {
  background: #fff2c8;
  color: #8c6f20;
}

.record-card .icon-tile.type-expense,
.option-card .option-icon.type-expense,
.modal-option .option-icon.type-expense {
  background: #ffead9;
  color: #9a6038;
}

.record-card .icon-tile.type-photo,
.option-card .option-icon.type-photo,
.modal-option .option-icon.type-photo {
  background: #f9e5ed;
  color: #a65370;
}

.record-card .icon-tile.type-note,
.option-card .option-icon.type-note,
.modal-option .option-icon.type-note {
  background: #ece8f8;
  color: #6c5a96;
}

.modal-option-copy {
  min-width: 0;
}

.modal-option-copy strong,
.modal-option-copy small {
  display: block;
}

.modal-option-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.modal-option-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-option-chevron {
  color: rgba(36, 67, 87, 0.34);
  font-size: 25px;
  font-weight: 350;
}

.modal-back {
  margin-top: -5px;
}

.modal-form {
  display: grid;
  gap: 15px;
}

.modal-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.modal-form-actions .primary-button {
  flex: 1 1 180px;
}

.danger-button {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(177, 77, 68, 0.22);
  border-radius: 13px;
  background: rgba(255, 232, 228, 0.72);
  color: #a34840;
  cursor: pointer;
  font-weight: 780;
}

.danger-button:hover,
.danger-button:focus-visible {
  background: rgba(255, 219, 214, 0.92);
  outline: none;
}

.crop-dialog[open] {
  animation: sheet-in 220ms ease both;
}

.crop-dialog::backdrop {
  background: rgba(25, 40, 50, 0.42);
  backdrop-filter: blur(5px);
}

.crop-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.crop-heading h2 {
  font-size: 22px;
}

.crop-help {
  margin: 8px 0 15px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.crop-viewport {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: #1f2b31;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: grab;
  touch-action: none;
}

.crop-viewport.cover-mode {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.crop-viewport:active {
  cursor: grabbing;
}

#cropImage {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: width, height, left, top;
}

.crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.1%, rgba(255, 255, 255, 0.34) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255, 255, 255, 0.34) 66.6%, transparent 66.9%),
    linear-gradient(to bottom, transparent 33.1%, rgba(255, 255, 255, 0.34) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255, 255, 255, 0.34) 66.6%, transparent 66.9%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  border-radius: inherit;
}

.zoom-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 17px;
}

.zoom-control input {
  height: 28px;
  padding: 0;
  accent-color: var(--blue-deep);
}

.crop-tool-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
}

.crop-tool-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 102px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 740;
}

.crop-tool-row svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crop-tool-row button:active {
  transform: scale(0.97);
}

.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 13px;
}

.photo-action-sheet,
.unsaved-changes-dialog {
  position: fixed;
  z-index: 90;
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100%, 520px);
  max-width: 100%;
  margin: 0;
  padding: 10px 14px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(244, 247, 249, 0.94);
  color: var(--ink);
  box-shadow: 0 -18px 60px rgba(25, 48, 61, 0.2);
  transform: translateX(-50%);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}

.photo-action-sheet[open],
.unsaved-changes-dialog[open] {
  animation: photo-sheet-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.photo-action-sheet::backdrop,
.unsaved-changes-dialog::backdrop {
  background: rgba(22, 40, 50, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes photo-sheet-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 42px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.photo-action-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 2px 14px;
}

.photo-action-heading-copy {
  min-width: 0;
}

.photo-action-heading p {
  margin: 0 0 3px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.photo-action-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.photo-action-thumb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 15px;
  background: var(--yellow-soft);
  box-shadow: 0 7px 16px rgba(36, 67, 87, 0.12);
}

.photo-action-thumb.cover {
  width: 70px;
  border-radius: 10px;
}

.photo-action-thumb .pet-image {
  object-fit: cover;
}

.photo-action-heading > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 17px rgba(31, 58, 72, 0.11);
  font-size: 22px;
  line-height: 1;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.photo-action-options {
  overflow: hidden;
  border: 1px solid rgba(36, 67, 87, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.photo-action-options > :is(button, label) {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 61px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.photo-action-options > :is(button, label) + :is(button, label)::before {
  position: absolute;
  top: 0;
  right: 13px;
  left: 64px;
  height: 1px;
  background: rgba(36, 67, 87, 0.08);
  content: "";
}

.photo-action-options strong {
  font-size: 14px;
  font-weight: 720;
}

.photo-action-options i {
  color: #91a4ae;
  font-size: 21px;
  font-style: normal;
}

.photo-action-options .danger {
  color: #bd5149;
}

.photo-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(169, 211, 238, 0.25);
  color: #277da7;
}

.danger .photo-action-icon {
  background: rgba(240, 116, 103, 0.12);
  color: #bd5149;
}

.photo-action-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-action-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.unsaved-changes-dialog {
  width: min(calc(100% - 20px), 460px);
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 10px 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 22px;
}

.unsaved-changes-copy {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 2px 15px;
}

.unsaved-changes-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(238, 184, 77, 0.18);
  color: #ae7c15;
  font-size: 20px;
  font-weight: 800;
}

.unsaved-changes-copy h2,
.unsaved-changes-copy p {
  margin: 0;
}

.unsaved-changes-copy h2 {
  font-size: 18px;
}

.unsaved-changes-copy p {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.unsaved-changes-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.unsaved-changes-actions button {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(36, 67, 87, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 740;
}

.unsaved-changes-actions .danger {
  background: rgba(244, 221, 218, 0.86);
  color: #ad4f47;
}

@media (max-width: 560px) {
  .cover-photo-editor {
    grid-template-columns: 1fr;
  }

  .cover-photo-preview {
    height: min(42vw, 170px);
  }

  .crop-dialog {
    max-height: calc(100dvh - 18px);
    padding: 16px;
    overflow-y: auto;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.98);
  }
}

@keyframes add-sheet-in {
  from {
    opacity: 0;
    transform: translate(-50%, 34px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.sheet-handle {
  width: 38px;
  height: 5px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: rgba(36, 67, 87, 0.18);
}

.sheet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.sheet-heading h2 {
  font-size: 22px;
}

.pet-list {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

.pet-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.pet-choice.selected {
  border-color: rgba(45, 102, 136, 0.25);
  background: rgba(169, 211, 238, 0.25);
}

.choice-avatar {
  width: 49px;
  height: 49px;
  border-radius: 15px;
}

.pet-choice span {
  display: block;
}

.pet-choice .pet-meta {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
}

.pet-choice .selection-check {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: white;
}

.selection-check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.add-pet-form {
  display: grid;
  gap: 13px;
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.hidden {
  display: none !important;
}

.toast {
  position: fixed;
  z-index: 80;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(244, 249, 252, 0.78);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(35, 53, 62, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.toast.success {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(244, 249, 252, 0.8);
  color: var(--ink);
}

.toast-check {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
}

.simple-check {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}

.toast-check.simple-check {
  color: #31936f;
  font-size: 19px;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.toast.has-action {
  pointer-events: auto;
}

.toast > span:nth-last-child(2) {
  min-width: 0;
  flex: 1;
}

.toast > button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border: 1px solid rgba(49, 77, 92, 0.08);
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  cursor: pointer;
}

.vaccine-disease-detail-actions {
  display: grid;
  gap: 9px;
}

.vaccine-disease-detail-actions .guided-primary-button {
  margin: 0;
}

.vaccine-dismiss-button {
  min-height: 48px;
  border: 1px solid #d6e1e6;
  border-radius: 13px;
  color: #526f7e;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dismissed-vaccine-disclosure {
  overflow: hidden;
  padding: 0;
}

.dismissed-vaccine-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.dismissed-vaccine-disclosure > summary::-webkit-details-marker {
  display: none;
}

.dismissed-vaccine-disclosure > summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dismissed-vaccine-disclosure > summary strong {
  color: #355365;
  font-size: 15px;
}

.dismissed-vaccine-disclosure > summary small {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  color: #687e89;
  background: #e9eef1;
  font-size: 11px;
  font-weight: 750;
}

.dismissed-vaccine-disclosure > summary > i {
  color: #82949e;
  font-style: normal;
  transition: transform 180ms ease;
}

.dismissed-vaccine-disclosure[open] > summary > i {
  transform: rotate(180deg);
}

.dismissed-vaccine-list {
  display: grid;
  gap: 9px;
  padding: 0 12px 12px;
}

.dismissed-vaccine-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dde5e9;
  border-radius: 14px;
  background: #f6f8f9;
}

.dismissed-vaccine-card > button:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #405d6d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dismissed-vaccine-card > button:first-child > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dismissed-vaccine-card strong,
.dismissed-vaccine-card small,
.dismissed-vaccine-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dismissed-vaccine-card small {
  color: #778b96;
  font-size: 11px;
}

.dismissed-vaccine-card em {
  color: #8b99a1;
  font-size: 10px;
  font-style: normal;
}

.dismissed-vaccine-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #718b98;
  background: #e8edef;
}

.reactivate-vaccine-alert {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #cbdce4;
  border-radius: 11px;
  color: #277da7;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 430px) {
  .dismissed-vaccine-card {
    grid-template-columns: 1fr;
  }

  .reactivate-vaccine-alert {
    width: 100%;
  }
}

/* Confirmations stay above the content and clear of iPhone safe areas. */
#addDialog.visit-flow-dialog[open] ~ .toast {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  bottom: auto;
}

@media (max-width: 680px) {
  #addDialog.visit-flow-dialog[open] ~ .toast {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    bottom: auto;
    width: min(calc(100vw - 32px), 420px);
  }
}

@media (min-width: 700px) {
  .app-shell {
    padding-right: 28px;
    padding-left: 28px;
  }

  .topbar {
    min-height: 92px;
  }

  .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 16px;
    align-items: start;
  }

  .coverage-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .vaccine-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vaccine-card-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-grid .section-block {
    margin-top: 0;
  }

  .hero-card {
    min-height: 225px;
  }

  .option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid.two-column,
  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .profile-grid .section-block {
    margin-top: 20px;
  }
}

@media (max-width: 699px) {
  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-form-section {
    padding: 16px;
  }

  .home-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-grid > section:first-child {
    order: 1;
  }

  .home-grid > section:last-child {
    order: 2;
  }

  .hero-card {
    min-height: 164px;
    padding: 16px;
  }

  .hero-copy {
    max-width: calc(100% - 92px);
  }

  .hero-copy h2 {
    margin-bottom: 5px;
    font-size: clamp(20px, 6vw, 25px);
  }

  .hero-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pet-photo {
    right: 12px;
    width: 82px;
    height: 82px;
    border-width: 4px;
    border-radius: 27px;
  }

  .status-pill {
    margin-bottom: 13px;
    padding: 5px 8px;
    font-size: 10px;
  }
}

@media (max-width: 410px) {
  .weight-overview-card {
    padding: 18px;
  }

  .weight-target-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .target-status-icon {
    align-self: start;
  }

  .target-reference {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    padding-left: 0;
    border-left: 0;
  }

  .target-reference strong {
    font-size: 14px;
  }

  .record-date {
    display: none;
  }

  .photo-editor {
    grid-template-columns: 1fr;
  }

  .profile-photo-editor {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .profile-photo-editor .photo-preview {
    width: 80px;
    height: 80px;
    border-radius: 24px;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .medication-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .medication-plan-stat.notification {
    grid-column: 1 / -1;
  }
}

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

@media print {
  @page {
    size: A4 portrait;
    margin: 9mm;
  }

  html,
  body {
    background: white;
  }

  .topbar,
  .bottom-nav,
  .back-button,
  .report-actions,
  .ambient {
    display: none !important;
  }

  .app-shell {
    width: 100%;
    padding: 0;
  }

  .main-content,
  .page,
  .report-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .page-heading {
    display: none;
  }

  .report-sheet {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    font-family: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  .clinical-report-header {
    padding-top: 12px;
  }

  .clinical-section,
  .clinical-demographics,
  .clinical-prevention-grid,
  .clinical-table tr {
    break-inside: avoid;
  }
}

/* Iconografía unificada: Phosphor Light aportada para CalaPet. */
svg.phosphor-icon,
.app-glyph.phosphor-icon,
.nav-item svg.phosphor-icon,
.account-button svg.phosphor-icon,
.pet-switcher svg.phosphor-icon,
.home-cover-name svg.phosphor-icon {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.app-glyph.phosphor-icon {
  display: block;
  overflow: visible;
}

.parasite-icon.mite.phosphor-icon {
  color: #8a624e;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.quick-icon.type-document { color: #6f95ad; }
.quick-icon.type-weight { color: #2d769f; }
.quick-icon.type-deworming { color: #3d88a8; }
.quick-icon.type-medication { color: #557faf; }

.icon-button .app-glyph,
.guided-close-button .app-glyph,
.document-viewer-dialog button .app-glyph,
.vaccine-disease-search .app-glyph,
.document-search .app-glyph {
  width: 18px;
  height: 18px;
}

.health-add-medication > span:first-child .app-glyph,
.secondary-button > span:first-child .phosphor-icon {
  width: 17px;
  height: 17px;
}

.unsaved-changes-icon .phosphor-icon {
  width: 28px;
  height: 28px;
}

.vaccine-photo-empty .app-glyph,
.empty-state .app-glyph {
  width: 34px;
  height: 34px;
}

/* Inicio compacto elegido: hoy, aviso y accesos rápidos. */
.home-page .home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.home-priority-stack {
  display: grid;
  gap: 12px;
}

.home-today-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 132px;
  padding: 21px 22px;
  border: 1px solid rgba(49, 139, 187, 0.22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(211, 239, 253, 0.96), rgba(255, 255, 255, 0.88));
  color: var(--ink);
  box-shadow: 0 13px 28px rgba(46, 113, 149, 0.09);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 170ms ease, border-color 170ms ease;
}

.home-today-card:hover,
.home-today-card:focus-visible {
  border-color: rgba(49, 139, 187, 0.38);
  box-shadow: 0 17px 34px rgba(46, 113, 149, 0.14);
  outline: none;
  transform: translateY(-2px);
}

.home-today-card:active {
  transform: scale(0.988);
}

.home-today-kicker {
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.home-today-card > strong {
  color: var(--ink);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.home-today-meta {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 760;
}

.home-today-meta i {
  display: inline-block;
  margin-left: 3px;
  font-style: normal;
  transition: transform 160ms ease;
}

.home-today-card:hover .home-today-meta i {
  transform: translateX(3px);
}

.home-today-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-today-row > span,
.home-today-row > time {
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.home-today-row > strong,
.home-today-row > h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(23px, 4vw, 31px);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.home-today-row > b,
.home-today-row > small {
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.home-today-row > b i {
  font-style: normal;
  transition: transform 160ms ease;
}

.home-today-card:hover .home-today-row > b i {
  display: inline-block;
  transform: translateX(3px);
}

.home-today-card.is-empty {
  min-height: 112px;
  box-shadow: none;
  cursor: default;
  opacity: 0.78;
}

.home-priority-alert {
  padding: 16px;
  border: 1px solid rgba(199, 96, 82, 0.24);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 235, 231, 0.94), rgba(255, 255, 255, 0.86));
  box-shadow: 0 10px 24px rgba(87, 67, 62, 0.07);
}

.home-priority-alert-copy {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.home-priority-alert-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #bd5b4f;
  box-shadow: 0 5px 13px rgba(86, 64, 59, 0.07);
}

.home-priority-alert-icon .app-glyph {
  width: 25px;
  height: 25px;
}

.home-priority-alert h3 {
  margin: 0;
  font-size: 18px;
}

.home-priority-alert time {
  display: block;
  margin-top: 4px;
  color: #8d625c;
  font-size: 12px;
  font-weight: 700;
}

.home-priority-alert-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.home-priority-alert-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(75, 98, 109, 0.09);
  color: #637985;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: transform 150ms ease, filter 150ms ease;
}

.home-priority-alert-actions button.primary {
  background: #cb685a;
  color: white;
  box-shadow: 0 7px 16px rgba(174, 75, 62, 0.16);
}

.home-priority-alert-actions button:active {
  transform: scale(0.975);
}

.home-quick-heading {
  margin-bottom: 10px;
}

.home-quick-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.home-quick-grid .quick-card {
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 94px;
  padding: 11px 7px;
  border-radius: 10px;
  text-align: center;
}

.home-quick-grid .quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(212, 236, 249, 0.72);
  font-size: 21px;
}

.home-quick-grid .quick-icon .app-glyph,
.home-quick-grid .modern-scale-icon svg {
  width: 23px;
  height: 23px;
}

.home-quick-grid .quick-card strong {
  align-self: auto;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.home-quick-grid .quick-card > span:last-child:not(.quick-icon) {
  display: none;
}

.home-quick-grid .quick-alert-badge {
  top: 8px;
  right: 8px;
}

/* El estado de vacunación conserva el carrusel y añade el selector del concepto 11. */
.vaccine-status-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 11px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(220, 231, 236, 0.82);
}

.vaccine-status-tab {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.vaccine-status-tab strong {
  font-size: 17px;
}

.vaccine-status-tab span {
  font-size: 10px;
  font-weight: 750;
}

.vaccine-status-tab.active {
  background: rgba(255, 255, 255, 0.94);
  color: #ad5549;
  box-shadow: 0 4px 12px rgba(43, 72, 87, 0.09);
}

.vaccine-status-tab:nth-child(2).active {
  color: #927019;
}

.vaccine-status-tab:nth-child(3).active {
  color: #438c61;
}

.vaccine-status-tab:active {
  transform: scale(0.98);
}

.vaccine-status-slide {
  border-radius: 10px;
}

.home-alert-dialog .unsaved-changes-copy {
  padding-top: 8px;
}

@media (min-width: 700px) {
  .home-priority-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
  }

  .home-priority-alert-actions {
    margin-top: 0;
  }
}

@media (max-width: 699px) {
  .home-page {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .home-page > :not(.home-cover-card) {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }

  .home-cover-card {
    width: auto;
    margin-right: -18px;
    margin-left: -18px;
    min-height: clamp(210px, 28svh, 250px);
  }

  .home-cover-copy {
    bottom: 24px;
  }

  .home-cover-action {
    margin-top: 12px;
  }

  .home-today-card {
    min-height: 126px;
    padding: 19px 17px;
  }

  .home-today-card > strong {
    font-size: clamp(23px, 6.4vw, 28px);
  }

  .home-today-row > strong,
  .home-today-row > h2 {
    font-size: clamp(21px, 6.2vw, 27px);
  }

  .home-today-row > b,
  .home-today-row > small {
    font-size: 11px;
  }

  .home-quick-grid {
    display: flex;
    gap: 8px;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .home-quick-grid::-webkit-scrollbar {
    display: none;
  }

  .home-quick-grid .quick-card {
    flex: 0 0 88px;
    scroll-snap-align: start;
  }
}

/* Capa final: evita que los estilos históricos recuperen gradientes y apilados antiguos. */
.home-today-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid rgba(49, 77, 92, 0.11);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 20px rgba(41, 62, 72, 0.055);
  text-align: left;
}

.home-today-card:hover,
.home-today-card:focus-visible {
  border-color: rgba(37, 123, 167, 0.26);
  box-shadow: 0 11px 26px rgba(41, 74, 91, 0.09);
}

.home-today-card.is-empty {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  min-height: 82px;
}

.home-priority-alert {
  border: 1px solid rgba(49, 77, 92, 0.11);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 20px rgba(41, 62, 72, 0.055);
}

.home-priority-alert-copy {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.home-priority-alert-icon {
  background: #f8efed;
  color: #b9584c;
  box-shadow: none;
}

.home-priority-alert time {
  color: #a05b52;
}

.home-priority-alert-actions {
  justify-content: flex-start;
  margin-left: 61px;
}

.home-priority-alert-actions button {
  min-height: 42px;
  background: #f0f3f5;
  color: #536d7a;
}

.home-priority-alert-actions button.primary {
  background: #277da8;
  color: #fff;
  box-shadow: 0 5px 13px rgba(39, 125, 168, 0.16);
}

.home-quick-grid .quick-card {
  border-color: rgba(49, 77, 92, 0.09);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 15px rgba(41, 62, 72, 0.045);
}

.home-quick-grid .quick-icon {
  background: #f0f4f6;
}

@media (min-width: 700px) {
  .home-priority-alert-actions {
    justify-content: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 699px) {
  .home-today-card {
    min-height: 88px;
    padding: 13px 14px;
  }

  .home-page .home-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 8px;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    overflow: clip;
    scroll-snap-type: none;
    touch-action: pan-y;
  }

  .home-page .home-quick-grid .quick-card {
    flex: none;
    width: auto;
    min-width: 0;
    min-height: 88px;
    scroll-snap-align: none;
  }
}

/* Vacunas v90: acción prioritaria, resumen y protección por enfermedad. */
.vaccines-page .vaccine-priority-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 12px 14px;
  border: 1px solid rgba(43, 70, 84, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(35, 58, 70, 0.05);
}

.vaccines-page .vaccine-priority-row.overdue {
  border-color: rgba(185, 93, 81, 0.2);
}

.vaccines-page .vaccine-priority-row.upcoming {
  border-color: rgba(173, 136, 42, 0.2);
}

.vaccines-page .vaccine-priority-row .vaccine-date-tile {
  width: 50px;
  height: 56px;
  border-color: rgba(185, 93, 81, 0.09);
  background: #faf0ee;
  color: #a74f45;
}

.vaccines-page .vaccine-priority-row.upcoming .vaccine-date-tile {
  border-color: rgba(173, 136, 42, 0.1);
  background: #faf5e4;
  color: #8e6d1c;
}

.vaccines-page .vaccine-priority-symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8f4ec;
  color: #438b5e;
  font-size: 17px;
  font-weight: 800;
}

.vaccines-page .vaccine-priority-row > div {
  min-width: 0;
}

.vaccines-page .vaccine-priority-row > div > strong {
  display: block;
  overflow: hidden;
  color: #29495b;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.vaccines-page .vaccine-priority-row > div > span {
  display: block;
  margin-top: 3px;
  color: #718690;
  font-size: 10px;
}

.vaccines-page .vaccine-priority-row .text-button {
  min-height: 36px;
  padding: 0 9px;
  border-radius: 9px;
  background: transparent;
  color: #287da8;
  font-size: 11px;
  font-weight: 760;
}

.vaccines-page .vaccine-priority-row .text-button:hover {
  background: #edf4f7;
}

.vaccines-page .vaccine-state-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.vaccines-page .vaccine-state-summary > button {
  display: grid;
  place-content: center;
  min-width: 0;
  min-height: 70px;
  padding: 10px 6px;
  border: 1px solid rgba(43, 70, 84, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 5px 15px rgba(35, 58, 70, 0.04);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 140ms ease;
}

.vaccines-page .vaccine-state-summary > button:hover {
  border-color: rgba(39, 125, 168, 0.18);
}

.vaccines-page .vaccine-state-summary > button:active {
  transform: scale(0.975);
}

.vaccines-page .vaccine-state-summary > button.active {
  border-color: rgba(39, 125, 168, 0.22);
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 76, 96, 0.09), inset 0 -3px 0 #3f91ba;
}

.vaccines-page .vaccine-state-summary strong {
  color: #607985;
  font-size: 21px;
  font-weight: 690;
  line-height: 1;
}

.vaccines-page .vaccine-state-summary span {
  margin-top: 6px;
  color: #728792;
  font-size: 9px;
}

.vaccines-page .vaccine-state-summary .overdue strong {
  color: #ad574c;
}

.vaccines-page .vaccine-state-summary .upcoming strong {
  color: #96721d;
}

.vaccines-page .vaccine-state-summary .current strong {
  color: #438b5e;
}

.vaccines-page .vaccine-disease-section {
  margin-top: 12px;
}

.vaccines-page .vaccine-disease-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid rgba(43, 70, 84, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 4px 13px rgba(35, 58, 70, 0.035);
}

.vaccines-page .vaccine-disease-search > span {
  display: grid;
  place-items: center;
  width: 19px;
  color: #7a909a;
}

.vaccines-page .vaccine-disease-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.vaccines-page .vaccine-disease-search input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #29495b;
  font: inherit;
  font-size: 12px;
}

.vaccines-page .vaccine-disease-search input::placeholder {
  color: #84969f;
}

.vaccines-page .vaccine-disease-search button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf2f4;
  color: #718690;
  cursor: pointer;
  font-size: 17px;
}

.vaccines-page .vaccine-disease-search button.hidden {
  display: none;
}

.vaccines-page .vaccine-disease-list {
  overflow: hidden;
  border: 1px solid rgba(43, 70, 84, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(35, 58, 70, 0.05);
}

.vaccines-page .vaccine-disease-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(43, 70, 84, 0.085);
}

.vaccines-page .vaccine-disease-row.has-date {
  grid-template-columns: 50px minmax(0, 1fr) auto;
}

.vaccines-page .vaccine-disease-row .vaccine-date-tile {
  width: 50px;
  height: 54px;
  border-color: rgba(185, 93, 81, 0.1);
  background: #faf0ee;
  color: #a74f45;
}

.vaccines-page .vaccine-disease-row.upcoming .vaccine-date-tile {
  border-color: rgba(173, 136, 42, 0.1);
  background: #faf5e4;
  color: #8e6d1c;
}

.vaccines-page .vaccine-disease-row:last-child {
  border-bottom: 0;
}

.vaccines-page .vaccine-disease-state {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eaf1f4;
  color: #6f8d9b;
  font-size: 14px;
  font-weight: 800;
}

.vaccines-page .vaccine-disease-row.overdue .vaccine-disease-state {
  background: #f8e9e6;
  color: #ad574c;
}

.vaccines-page .vaccine-disease-row.upcoming .vaccine-disease-state {
  background: #f8f1dc;
  color: #96721d;
}

.vaccines-page .vaccine-disease-row.current .vaccine-disease-state {
  background: #e8f4ec;
  color: #438b5e;
}

.vaccines-page .vaccine-disease-row > div {
  min-width: 0;
}

.vaccines-page .vaccine-disease-row > div > strong {
  display: block;
  overflow: hidden;
  color: #29495b;
  font-size: 14px;
  font-weight: 710;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vaccines-page .vaccine-disease-row > div > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #748893;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vaccines-page .vaccine-disease-row > small {
  max-width: 118px;
  color: #5f7885;
  font-size: 9px;
  font-weight: 680;
  line-height: 1.35;
  text-align: right;
}

.vaccines-page .vaccine-disease-row.overdue > small {
  color: #a5544a;
}

.vaccines-page .vaccine-disease-row .text-button {
  min-height: 36px;
  padding: 0 7px;
  border-radius: 8px;
  background: transparent;
  color: #287da8;
  font-size: 10px;
  font-weight: 760;
}

.vaccines-page .vaccine-disease-row .text-button:hover {
  background: #edf4f7;
}

.vaccines-page .vaccine-disease-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 15px;
  text-align: center;
}

.vaccines-page .vaccine-disease-empty strong {
  font-size: 13px;
}

.vaccines-page .vaccine-disease-empty span {
  color: #748893;
  font-size: 10px;
}

@media (max-width: 430px) {
  .vaccines-page .vaccine-priority-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 11px;
  }

  .vaccines-page .vaccine-priority-row > div > strong {
    font-size: 13px;
  }

  .vaccines-page .vaccine-priority-row .text-button {
    padding: 0 5px;
    font-size: 10px;
  }

  .vaccines-page .vaccine-state-summary {
    gap: 7px;
  }

  .vaccines-page .vaccine-state-summary > button {
    min-height: 66px;
  }

  .vaccines-page .vaccine-disease-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(64px, auto);
    gap: 10px;
    min-height: 70px;
    padding: 9px 12px;
  }

  .vaccines-page .vaccine-disease-row.has-date {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .vaccines-page .vaccine-disease-row .vaccine-date-tile {
    width: 48px;
    height: 52px;
  }

  .vaccines-page .vaccine-disease-state {
    width: 34px;
    height: 34px;
  }

  .vaccines-page .vaccine-disease-row > div > strong {
    font-size: 13px;
  }

  .vaccines-page .vaccine-disease-row > small {
    max-width: 92px;
    font-size: 8px;
  }
}

/* Capa final del selector: ninguna franja de color ni destello táctil de Safari. */
.vaccines-page .vaccine-state-summary {
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(43, 70, 84, 0.07);
  border-radius: 12px;
  background: #e8edef;
  box-shadow: inset 0 1px 2px rgba(36, 58, 69, 0.035);
}

.vaccines-page .vaccine-state-summary > button,
.vaccines-page .vaccine-state-summary > button:hover,
.vaccines-page .vaccine-state-summary > button:active {
  min-height: 64px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  opacity: 0.68;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}

.vaccines-page .vaccine-state-summary > button.active,
.vaccines-page .vaccine-state-summary > button.active:hover,
.vaccines-page .vaccine-state-summary > button.active:active {
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(35, 57, 68, 0.12), 0 1px 2px rgba(35, 57, 68, 0.06);
  opacity: 1;
  transform: none;
}

.vaccines-page .vaccine-state-summary > button:active {
  opacity: 0.88;
  transform: scale(0.985);
}

.vaccines-page .vaccine-state-summary > button.active:active {
  opacity: 1;
  transform: scale(0.985);
}

.vaccines-page .vaccine-state-summary > button.active span {
  color: #344f5e;
  font-weight: 720;
}

@media (max-width: 430px) {
  .vaccines-page .vaccine-state-summary {
    gap: 3px;
  }

  .vaccines-page .vaccine-state-summary > button {
    min-height: 62px;
  }
}

/* Portada: una sola capa de contraste. Evita el doble velo de foto duplicada + blur. */
.home-cover-blur {
  display: none !important;
}

.home-cover-card::after {
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 24, 32, 0.76) 0%,
    rgba(9, 24, 32, 0.64) 20%,
    rgba(9, 24, 32, 0.43) 39%,
    rgba(9, 24, 32, 0.18) 58%,
    rgba(9, 24, 32, 0.04) 72%,
    transparent 84%
  );
  opacity: 1;
}

.home-cover-copy {
  text-shadow: 0 1px 2px rgba(5, 17, 24, 0.24);
}

.home-cover-card.is-adjusting::after {
  opacity: 0;
}

@media (max-width: 699px) {
  .home-cover-card::after {
    background: linear-gradient(
      90deg,
      rgba(9, 24, 32, 0.78) 0%,
      rgba(9, 24, 32, 0.65) 28%,
      rgba(9, 24, 32, 0.38) 52%,
      rgba(9, 24, 32, 0.12) 72%,
      transparent 88%
    );
  }
}

/* Portada v98: progressive backdrop blur, sin velo oscuro ni imagen duplicada. */
.home-cover-card::after {
  display: none !important;
  background: none !important;
}

.home-cover-card::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  content: "";
  background: rgba(255, 255, 255, 0.001);
  -webkit-backdrop-filter: blur(17px) saturate(0.92);
  backdrop-filter: blur(17px) saturate(0.92);
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 20%,
    rgba(0, 0, 0, 0.88) 32%,
    rgba(0, 0, 0, 0.52) 48%,
    rgba(0, 0, 0, 0.16) 63%,
    transparent 76%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 20%,
    rgba(0, 0, 0, 0.88) 32%,
    rgba(0, 0, 0, 0.52) 48%,
    rgba(0, 0, 0, 0.16) 63%,
    transparent 76%
  );
  pointer-events: none;
  transition: opacity 180ms ease;
}

.home-cover-copy {
  text-shadow: none;
}

.home-cover-card.is-adjusting::before,
.home-cover-card.without-photo::before {
  opacity: 0;
}

@media (max-width: 699px) {
  .home-cover-card::before {
    -webkit-backdrop-filter: blur(14px) saturate(0.94);
    backdrop-filter: blur(14px) saturate(0.94);
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 26%,
      rgba(0, 0, 0, 0.78) 42%,
      rgba(0, 0, 0, 0.34) 60%,
      transparent 82%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 26%,
      rgba(0, 0, 0, 0.78) 42%,
      rgba(0, 0, 0, 0.34) 60%,
      transparent 82%
    );
  }
}

/* Fichas de salud: consulta primero y edición puntual de cada dato. */
.add-dialog.record-detail-dialog,
.add-dialog.record-field-dialog {
  width: min(620px, calc(100vw - 24px));
}

.record-detail-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 18px;
}

.record-detail-heading-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e6f3fa;
  color: #247ba5;
}

.record-detail-heading-icon svg {
  width: 29px;
  height: 29px;
}

.record-detail-heading > div > span,
.record-field-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.record-detail-heading h2 {
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-detail-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.record-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 69px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.record-detail-row:last-child {
  border-bottom: 0;
}

.record-detail-row:active {
  background: rgba(63, 126, 160, 0.055);
}

.record-detail-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.record-detail-row small {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 16px;
}

.record-detail-row strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 650;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-detail-row.is-empty strong {
  color: #80919b;
  font-weight: 550;
}

.record-detail-row i,
.vaccine-disease-chevron {
  color: #8da0ab;
  font-size: 25px;
  font-style: normal;
  font-weight: 450;
}

.record-detail-hint {
  margin: 12px 4px 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.record-field-form {
  display: grid;
  gap: 22px;
  padding-top: 10px;
}

.record-field-form > .guided-primary-button {
  margin-top: 4px;
}

.vaccine-disease-detail-status {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}

.vaccine-disease-detail-status > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #edf3f6;
  color: #54798c;
  font-size: 18px;
  font-weight: 750;
}

.vaccine-disease-detail-status.overdue > span {
  background: #fbe9e6;
  color: #b2554b;
}

.vaccine-disease-detail-status.upcoming > span {
  background: #fff5d9;
  color: #9e750e;
}

.vaccine-disease-detail-status.current > span {
  background: #e7f4eb;
  color: #2f8a59;
}

.vaccine-disease-detail-status div {
  display: grid;
  gap: 4px;
}

.vaccine-disease-detail-status strong {
  font-size: 17px;
  line-height: 22px;
}

.vaccine-disease-detail-status small,
.record-detail-copy {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.record-detail-copy p {
  margin: 14px 2px 20px;
}

/* Menú Añadir: acciones ligeras que nacen del botón de la barra. */
.add-dialog.quick-add-menu {
  top: auto;
  right: max(12px, calc((100vw - 440px) / 2));
  bottom: calc(82px + max(12px, env(safe-area-inset-bottom)));
  left: auto;
  width: min(260px, calc(100vw - 24px));
  max-height: calc(100dvh - 112px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.add-dialog.quick-add-menu[open] { animation: none; }

/* Safari dibuja un contorno azul alrededor del dialog al enfocarlo
   programáticamente. Los controles internos conservan su foco visible. */
.add-dialog.quick-add-menu:focus,
.add-dialog.quick-add-menu:focus-visible {
  outline: none;
}

.add-dialog.quick-add-menu #addDialogContent {
  max-height: calc(100dvh - 112px);
  overflow: visible;
}

.quick-add-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.quick-add-option {
  display: grid;
  grid-template-columns: minmax(0, auto) 48px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  animation: quick-add-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc((6 - var(--quick-index)) * 14ms);
}

.quick-add-label {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background: rgba(250, 251, 252, 0.88);
  box-shadow: 0 8px 24px rgba(33, 56, 69, 0.13);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  font-size: 15px;
  font-weight: 650;
  line-height: 20px;
  white-space: nowrap;
}

.quick-add-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: rgba(239, 247, 251, 0.96);
  color: #287dad;
  box-shadow: 0 8px 24px rgba(33, 56, 69, 0.16);
}

.quick-add-icon .app-glyph { width: 24px; height: 24px; }
.quick-add-icon.type-deworming { background: #e7f3f0; color: #3c7d76; }
.quick-add-icon.type-medication { background: #e9f0f8; color: #386f9a; }
.quick-add-icon.type-weight { background: #edf1f5; color: #45677b; }
.quick-add-icon.type-document { background: #fff5d7; color: #8c6f20; }
.quick-add-icon.type-expense { background: #fff0e4; color: #9a6038; }
.quick-add-icon.type-photo { background: #faeaf0; color: #9b5871; }
.quick-add-option:active { transform: scale(0.97); }

@keyframes quick-add-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
}

/* Ficha informativa independiente de la acción Añadir. */
.add-dialog.information-dialog {
  top: 50%;
  bottom: auto;
  width: min(calc(100% - 28px), 420px);
  max-height: calc(100dvh - 120px);
  padding: 18px;
  border-radius: 22px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.add-dialog.information-dialog[open] {
  animation: information-dialog-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.information-dialog-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}

.information-dialog-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e5f2fa;
  color: #287dad;
}

.information-dialog-icon .app-glyph { width: 24px; height: 24px; }
.information-dialog-heading > div { min-width: 0; }
.information-dialog-heading span:not(.information-dialog-icon) { color: var(--ink-soft); font-size: 13px; line-height: 18px; }
.information-dialog-heading h2 { margin: 1px 0 0; font-size: 22px; line-height: 28px; }

@keyframes information-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.96); }
}

/* Selector preciso de peso con gesto vertical, igual que fecha y hora. */
.weight-wheel-field {
  padding: 12px 14px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.weight-wheel-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.weight-wheel-summary strong { color: #1779aa; font-size: 17px; }
.weight-wheel-picker { grid-template-columns: minmax(0, 1.25fr) 20px minmax(0, .8fr) 42px; width: min(100%, 300px); height: 198px; margin-bottom: 0; }
.weight-wheel-picker .time-wheel { height: 198px; padding: 77px 0; }
.weight-wheel-picker .time-wheel-highlight { top: 77px; }
.weight-wheel-separator,
.weight-wheel-unit { position: relative; z-index: 2; font-size: 21px; font-weight: 550; }
.weight-wheel-unit { color: var(--ink-soft); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .quick-add-option,
  .add-dialog.information-dialog[open] { animation: none; }
}

/* Flujos guiados más limpios: el cierre vive en la barra inferior. */
.guided-dialog .guided-form-heading {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 10px;
  text-align: center;
}

.guided-dialog .guided-progress {
  margin-bottom: 12px;
}

body.information-dialog-open .bottom-nav > .nav-add {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
}

/* Paso de pauta de medicación: misma información, menos recorrido vertical. */
.guided-form[data-record-type="medication"] [data-wizard-step="2"] .guided-intro {
  padding-bottom: 8px;
}

.guided-form[data-record-type="medication"] [data-wizard-step="2"] .guided-review-card {
  gap: 10px;
  margin: 0 8px 8px;
  padding: 9px 11px;
}

.guided-form[data-record-type="medication"] [data-wizard-step="2"] .guided-review-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.guided-form[data-record-type="medication"] [data-wizard-step="2"] .guided-review-icon .app-glyph {
  width: 23px;
  height: 23px;
}

.medication-schedule-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 11px;
}

.medication-schedule-fields > label:first-child,
.medication-schedule-fields > .custom-frequency-field,
.medication-schedule-fields > .medication-duration-field,
.medication-schedule-fields > .guided-reminder-row,
.medication-schedule-fields > .optional-field-button,
.medication-schedule-fields > .optional-notes-field {
  grid-column: 1 / -1;
}

.medication-schedule-fields .time-picker-trigger,
.medication-schedule-fields .date-picker-trigger {
  min-height: 44px;
  padding: 8px 9px;
}

.medication-schedule-fields .medication-duration-modes label {
  min-height: 38px;
  padding: 6px 10px;
}

.medication-schedule-fields .medication-duration-days > button,
.medication-schedule-fields .medication-duration-days > label {
  min-height: 42px;
}

/* Selección múltiple propia: una sola casilla, sin el control nativo duplicado. */
.vaccine-coverage-selector input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1.5px solid #aebdc5;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
}

.vaccine-coverage-selector input[type="checkbox"]::after {
  position: absolute;
  top: 1px;
  left: 5px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  opacity: 0;
  transform: rotate(45deg) scale(0.75);
  transition: opacity 120ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vaccine-coverage-selector input[type="checkbox"]:checked {
  border-color: #2f8fbd;
  background: #2f8fbd;
}

.vaccine-coverage-selector input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.vaccine-coverage-selector input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 143, 189, 0.18);
}

/* Los flujos de alta sustituyen temporalmente la navegación principal. */
body.guided-flow-open .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transition: none;
}

/* A floating add flow is its own interaction layer. The page below must never
   receive a tap while the dialog is open. */
body.guided-flow-open #appShell {
  pointer-events: none;
  user-select: none;
}

.bottom-nav {
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 180ms;
}

.add-dialog.guided-dialog {
  bottom: max(8px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - max(16px, env(safe-area-inset-bottom)));
}

.add-dialog.guided-dialog #addDialogContent {
  max-height: calc(100dvh - max(34px, env(safe-area-inset-bottom) + 18px));
}

/* Editar un dato desde su ficha no cambia de tamaño ni deja visible la barra. */
.add-dialog.inline-record-field-dialog {
  top: 50%;
  bottom: auto;
  width: min(calc(100% - 28px), 420px);
  height: var(--record-dialog-height, auto);
  max-height: calc(100dvh - 120px);
  transform: translate(-50%, -50%);
}

.add-dialog.inline-record-field-dialog #addDialogContent {
  max-height: calc(100dvh - 156px);
}

.guided-dialog .guided-actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  margin-right: -2px;
  margin-left: -2px;
  padding: 10px 2px 2px;
  background: linear-gradient(to bottom, rgba(248, 249, 252, 0), rgba(248, 249, 252, 0.96) 25%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Perfil guiado: progreso -> grupos -> formulario breve -> resumen. */
.add-dialog.information-dialog.profile-setup-dialog {
  top: 50%;
  bottom: auto;
  width: min(calc(100% - 28px), 460px);
  height: min(650px, calc(100dvh - 72px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(210, 222, 228, 0.95);
  border-radius: 10px;
  background: #f7f9fb;
  transform: translate(-50%, -50%);
}

.profile-setup-dialog #addDialogContent,
.profile-setup-dialog .add-dialog-content {
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.profile-setup-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.profile-setup-sheet-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  margin: 0;
  padding: 16px 18px 13px;
  border-bottom: 1px solid #e1e8ec;
  background: rgba(255, 255, 255, 0.92);
}

.profile-setup-group-stage .profile-setup-sheet-head {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.profile-setup-sheet-head > div > span {
  display: block;
  color: #718792;
  font-size: 12px;
  line-height: 16px;
}

.profile-setup-sheet-head h2 {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 28px;
}

.profile-setup-back {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #edf2f5;
  color: var(--ink);
  cursor: pointer;
}

.profile-setup-back .app-glyph { width: 20px; height: 20px; }

.profile-setup-progress-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 18px 18px 10px;
  padding: 13px;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: #fff;
}

.profile-setup-sheet-ring {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--blue) var(--profile-progress), #dbe6eb 0);
}

.profile-setup-sheet-ring i {
  position: absolute;
  inset: 6px;
  width: auto;
  height: auto;
  border-radius: 50% !important;
  background: #fff;
}

.profile-setup-sheet-ring b {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
}

.profile-setup-progress-card strong,
.profile-setup-progress-card small { display: block; }
.profile-setup-progress-card strong { color: var(--ink); font-size: 15px; line-height: 20px; }
.profile-setup-progress-card small { margin-top: 3px; color: var(--ink-soft); font-size: 12px; line-height: 17px; }

.profile-setup-group-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 4px 18px 16px;
  overflow-y: auto;
}

.profile-setup-group {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 70px;
  padding: 11px 13px;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-setup-group:active { transform: scale(0.985); background: #f4f7f8; }
.profile-setup-group-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #e5f2f9;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 800;
}
.profile-setup-group-icon .app-glyph { width: 19px; height: 19px; }
.profile-setup-group strong,
.profile-setup-group small { display: block; }
.profile-setup-group strong { font-size: 14px; line-height: 19px; }
.profile-setup-group small { margin-top: 3px; overflow: hidden; color: var(--ink-soft); font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.profile-setup-group > b { color: #718792; font-size: 11px; font-weight: 700; }
.profile-setup-group > i { display: grid; color: #91a3ac; }
.profile-setup-group > i .app-glyph { width: 15px; height: 15px; }
.profile-setup-group.is-complete .profile-setup-group-icon { background: #e6f4ec; color: #3d9868; }
.profile-setup-group.is-complete > b { color: #3d9868; }
.profile-setup-group:disabled { cursor: default; opacity: 0.82; }
.profile-setup-group:disabled:active { transform: none; background: #fff; }

.profile-setup-group-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.profile-setup-fields {
  display: grid;
  gap: 13px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.profile-setup-autosave {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 9px 18px 0;
  color: #718792;
  font-size: 11px;
  font-weight: 650;
}
.profile-setup-autosave span,
.profile-setup-autosave .app-glyph { width: 15px; height: 15px; }
.profile-setup-autosave.is-saved { color: #358a5d; }

/* La regla global de radios de 10 px no debe convertir los progresos en cuadrados. */
.profile-setup-ring,
.profile-setup-ring i,
.profile-setup-sheet-ring,
.profile-setup-sheet-ring i {
  border-radius: 50% !important;
}

#addDialog .profile-setup-sheet-ring,
#addDialog .profile-setup-sheet-ring i,
#content .profile-setup-ring,
#content .profile-setup-ring i {
  border-radius: 50% !important;
}

.profile-setup-fields label {
  display: grid;
  gap: 7px;
  color: #496574;
  font-size: 13px;
  font-weight: 700;
}

.profile-setup-fields input,
.profile-setup-fields select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #d5e0e6;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}

.profile-setup-fields input:focus,
.profile-setup-fields select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76, 166, 214, 0.12); }
.profile-setup-weight-input { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; border: 1px solid #d5e0e6; border-radius: 10px; background: #fff; }
.profile-setup-weight-input input { border: 0; }
.profile-setup-weight-input span { color: #718792; font-weight: 700; text-align: center; }

.profile-setup-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e1e8ec;
  background: rgba(247, 249, 251, 0.96);
}
.profile-setup-footer .guided-primary-button { width: 100%; min-height: 50px; border-radius: 10px; }

.profile-setup-complete {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  align-content: center;
  padding: 28px;
  text-align: center;
}
.profile-setup-complete > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: #e6f4ec; color: #3d9868; }
.profile-setup-complete .app-glyph { width: 30px; height: 30px; }
.profile-setup-complete h3 { margin: 16px 0 5px; font-size: 23px; }
.profile-setup-complete p { margin: 0; color: var(--ink-soft); }

@media (max-width: 600px) {
  .add-dialog.information-dialog.profile-setup-dialog {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(720px, calc(100dvh - 18px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 10px 10px 0 0;
    transform: translateX(-50%);
  }
  .profile-setup-sheet-head { padding-top: 20px; }
  .profile-setup-group-list { padding-right: 14px; padding-left: 14px; }
  .profile-setup-progress-card { margin-right: 14px; margin-left: 14px; }
  .profile-setup-fields { padding-right: 14px; padding-left: 14px; }
  .profile-setup-footer { padding-right: 14px; padding-left: 14px; }
}

.guided-dialog .guided-actions.single {
  grid-template-columns: minmax(0, 1fr);
}

.guided-dialog .guided-actions .guided-primary-button,
.guided-dialog .guided-actions .guided-secondary-button {
  margin-top: 0;
}

/* Ajustes globales: lista nativa, separada del perfil de cada mascota. */
.app-shell.settings-mode .topbar {
  display: none;
}

.app-shell.settings-mode {
  width: 100%;
  max-width: none;
  padding: 0;
  background: #f6f8f9;
}

.settings-page {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
}

.settings-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 54px;
  margin: 0 -18px 18px;
  padding: 0 18px 8px;
  border-bottom: 1px solid rgba(36, 67, 87, 0.09);
  background: rgba(246, 248, 249, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.settings-header > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.settings-header > button .app-glyph { width: 24px; height: 24px; }

.settings-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.settings-account-summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding: 4px 0;
}

.settings-account-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #dff0f8;
  color: #1e739c;
  font-size: 17px;
  font-weight: 750;
}

.settings-account-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-account-summary strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account-summary > div > span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.settings-account-summary .settings-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account-summary > button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 18px;
  background: #e5f1f7;
  color: #1d739d;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.settings-section {
  margin-top: 23px;
}

.settings-section h2 {
  margin: 0 0 8px 4px;
  color: #70838e;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-list {
  overflow: hidden;
  border: 1px solid rgba(36, 67, 87, 0.075);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.settings-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid rgba(36, 67, 87, 0.075);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.settings-row:last-child { border-bottom: 0; }
.settings-row:active { background: rgba(68, 128, 157, 0.055); }

.settings-row-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #294c5f;
}

.settings-row-icon .app-glyph { width: 21px; height: 21px; }

.settings-row-label {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.settings-row-value {
  color: #81919a;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.settings-row-value.upcoming {
  color: #9b8a61;
  font-size: 12px;
}

.settings-row-chevron {
  display: grid;
  place-items: center;
  color: #8a9aa2;
}

.settings-row-chevron .app-glyph { width: 16px; height: 16px; }

.settings-version {
  margin: 24px 0 0;
  color: #95a2a9;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

@media (min-width: 700px) {
  .settings-page {
    padding-top: 26px;
  }

  .settings-header {
    border-radius: 10px 10px 0 0;
  }
}

.vaccines-page .vaccine-disease-row {
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.vaccines-page .vaccine-disease-row:active {
  background: rgba(63, 126, 160, 0.045);
}

.vaccines-page .vaccine-disease-row > small {
  white-space: nowrap;
}

@media (max-width: 699px) {
  .add-dialog.record-detail-dialog,
  .add-dialog.record-field-dialog {
    width: calc(100vw - 16px);
  }

  .record-detail-heading {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    padding-bottom: 15px;
  }

  .record-detail-heading-icon {
    width: 44px;
    height: 44px;
  }

  .record-detail-heading h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .record-detail-row {
    min-height: 67px;
    padding: 12px 14px;
  }

  .record-detail-row strong {
    font-size: 16px;
    line-height: 21px;
  }

  .vaccines-page .vaccine-disease-row {
    grid-template-columns: 32px minmax(0, 1fr) auto 14px;
    gap: 9px;
  }
}

/* Vacunas administradas v100: historial nativo agrupado por meses. */
.vaccines-page .vaccine-administered-native {
  display: grid;
  gap: 22px;
}

.vaccines-page .vaccine-history-month {
  min-width: 0;
}

.vaccines-page .vaccine-history-month-title {
  margin: 0 0 9px 3px;
  color: #687f8b;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.vaccines-page .vaccine-history-native-group {
  overflow: hidden;
  border: 1px solid rgba(43, 70, 84, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 7px 20px rgba(35, 58, 70, 0.045);
}

.vaccines-page .vaccine-history-native-group .swipe-record-shell {
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid rgba(43, 70, 84, 0.09);
}

.vaccines-page .vaccine-history-native-group .swipe-record-shell:last-child {
  border-bottom: 0;
}

.vaccines-page .vaccine-history-native-group .administered-vaccine-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  min-height: 112px;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.vaccines-page .vaccine-history-native-group .administered-vaccine-card:focus-visible {
  border: 0;
  background: #f9fbfc;
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .vaccines-page .vaccine-history-native-group .administered-vaccine-card:hover {
    border: 0;
    background: #f9fbfc;
    box-shadow: none;
    transform: none;
  }
}

.vaccines-page .vaccine-history-native-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f3ec;
  color: #38865a;
}

.vaccines-page .vaccine-history-native-icon svg {
  width: 22px;
  height: 22px;
}

.vaccines-page .vaccine-history-native-body {
  min-width: 0;
}

.vaccines-page .vaccine-history-native-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.vaccines-page .vaccine-history-native-top h3 {
  min-width: 0;
  margin: 1px 0 0;
  color: #29495b;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.vaccines-page .vaccine-history-native-top time {
  flex: 0 0 auto;
  color: #627b87;
  font-size: 9px;
  font-weight: 760;
  white-space: nowrap;
}

.vaccines-page .vaccine-history-native-body > p {
  margin: 4px 0 0;
  color: #748893;
  font-size: 10px;
  line-height: 1.45;
}

.vaccines-page .vaccine-history-native-body .vaccine-coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(43, 70, 84, 0.08);
}

.vaccines-page .vaccine-history-native-body .vaccine-coverage-chips > span {
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: #e9f1f4;
  color: #527382;
  font-size: 8px;
  font-weight: 690;
}

.vaccines-page .vaccine-history-native-group .swipe-record-shell.selected .administered-vaccine-card {
  background: #edf5f8;
  box-shadow: inset 0 0 0 1px rgba(39, 125, 168, 0.13);
}

.vaccines-page .vaccine-history-native-group .swipe-delete-action {
  border-radius: 0;
}

@media (max-width: 430px) {
  .vaccines-page .vaccine-history-native-group .administered-vaccine-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 12px;
  }

  .vaccines-page .vaccine-history-native-icon {
    width: 38px;
    height: 38px;
  }

  .vaccines-page .vaccine-history-native-top h3 {
    font-size: 14px;
  }
}

/* Estado de la pauta v101: una fecha por grupo, enfermedades independientes. */
.vaccines-page .vaccine-disease-list.grouped-by-date {
  display: grid;
  gap: 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vaccines-page .vaccine-disease-date-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 3px 8px;
  color: #687f8a;
  font-size: 10px;
  font-weight: 790;
  letter-spacing: 0.045em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vaccines-page .vaccine-disease-date-heading::after {
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: rgba(43, 70, 84, 0.12);
  content: "";
}

.vaccines-page .vaccine-disease-date-group.overdue .vaccine-disease-date-heading {
  color: #a5544a;
}

.vaccines-page .vaccine-disease-date-group.upcoming .vaccine-disease-date-heading {
  color: #85691f;
}

.vaccines-page .vaccine-disease-date-group.current .vaccine-disease-date-heading {
  color: #43845b;
}

.vaccines-page .vaccine-disease-date-list {
  overflow: hidden;
  border: 1px solid rgba(43, 70, 84, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(35, 58, 70, 0.045);
}

.vaccines-page .vaccine-disease-date-list .vaccine-disease-row {
  grid-template-columns: 36px minmax(0, 1fr) minmax(72px, auto);
}

.vaccines-page .vaccine-disease-date-list .vaccine-disease-row:last-child {
  border-bottom: 0;
}

@media (max-width: 430px) {
  .vaccines-page .vaccine-disease-list.grouped-by-date {
    gap: 16px;
  }

  .vaccines-page .vaccine-disease-date-heading {
    font-size: 9px;
  }

  .vaccines-page .vaccine-disease-date-list .vaccine-disease-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(64px, auto);
  }
}

/* Jerarquía de inicio v103: fecha completa y estado pendiente sin saltos. */
.home-today-panel > h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.home-priority-status,
.home-priority-status time {
  white-space: nowrap;
}

.home-priority-status time {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
}

@media (max-width: 699px) {
  .home-today-panel > h2 {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Escala tipográfica móvil inspirada en los roles de texto de iOS. */
:root {
  --ios-large-title: 34px;
  --ios-title-1: 28px;
  --ios-title-2: 22px;
  --ios-title-3: 20px;
  --ios-headline: 17px;
  --ios-body: 17px;
  --ios-callout: 16px;
  --ios-subheadline: 15px;
  --ios-footnote: 13px;
  --ios-caption: 12px;
  --ios-caption-2: 11px;
}

@media (max-width: 699px) {
  .home-today-panel > h2 {
    font-size: var(--ios-title-2);
    line-height: 28px;
  }

  .home-today-copy strong,
  .home-priority-alert h3 {
    font-size: var(--ios-headline);
    line-height: 22px;
  }

  .home-today-copy small,
  .home-priority-status {
    font-size: var(--ios-footnote);
    line-height: 18px;
  }

  .home-today-time time {
    font-size: var(--ios-subheadline);
    line-height: 20px;
  }

  .vaccines-page .vaccine-disease-date-heading,
  .vaccines-page .vaccine-history-month-title {
    font-size: var(--ios-footnote);
    line-height: 18px;
  }

  .vaccines-page .vaccine-disease-row > div > strong,
  .vaccines-page .vaccine-history-native-top h3 {
    overflow: visible;
    font-size: var(--ios-callout);
    line-height: 21px;
    text-overflow: clip;
    white-space: normal;
  }

  .vaccines-page .vaccine-disease-row > div > span,
  .vaccines-page .vaccine-history-native-body > p,
  .vaccines-page .vaccine-disease-row .text-button {
    font-size: var(--ios-footnote);
    line-height: 18px;
  }

  .vaccines-page .vaccine-disease-row > div > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .vaccines-page .vaccine-history-native-top time,
  .vaccines-page .vaccine-disease-row > small {
    font-size: var(--ios-caption);
    line-height: 16px;
  }

  .vaccines-page .vaccine-history-native-body .vaccine-coverage-chips > span {
    padding: 6px 8px;
    font-size: var(--ios-caption);
    line-height: 16px;
  }

  .vaccines-page .vaccine-disease-date-list .vaccine-disease-row {
    min-height: 78px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Portada v99: blur radial localizado en la esquina inferior izquierda. */
.home-cover-card::before {
  -webkit-backdrop-filter: blur(10px) saturate(0.96);
  backdrop-filter: blur(10px) saturate(0.96);
  -webkit-mask-image: radial-gradient(
    ellipse 46% 84% at 0% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.94) 24%,
    rgba(0, 0, 0, 0.68) 45%,
    rgba(0, 0, 0, 0.32) 63%,
    rgba(0, 0, 0, 0.08) 76%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 46% 84% at 0% 100%,
    #000 0%,
    rgba(0, 0, 0, 0.94) 24%,
    rgba(0, 0, 0, 0.68) 45%,
    rgba(0, 0, 0, 0.32) 63%,
    rgba(0, 0, 0, 0.08) 76%,
    transparent 86%
  );
}

@media (max-width: 699px) {
  .home-cover-card::before {
    -webkit-backdrop-filter: blur(8px) saturate(0.97);
    backdrop-filter: blur(8px) saturate(0.97);
    -webkit-mask-image: radial-gradient(
      ellipse 72% 78% at 0% 100%,
      #000 0%,
      rgba(0, 0, 0, 0.9) 22%,
      rgba(0, 0, 0, 0.58) 44%,
      rgba(0, 0, 0, 0.24) 64%,
      rgba(0, 0, 0, 0.06) 76%,
      transparent 86%
    );
    mask-image: radial-gradient(
      ellipse 72% 78% at 0% 100%,
      #000 0%,
      rgba(0, 0, 0, 0.9) 22%,
      rgba(0, 0, 0, 0.58) 44%,
      rgba(0, 0, 0, 0.24) 64%,
      rgba(0, 0, 0, 0.06) 76%,
      transparent 86%
    );
  }
}

/* Ajuste final de las filas pulsables de vacunación. */
.vaccines-page .vaccine-disease-date-list .vaccine-disease-row {
  grid-template-columns: 36px minmax(0, 1fr) auto 16px;
}

.vaccines-page .vaccine-disease-chevron {
  display: block;
  align-self: center;
  justify-self: end;
  color: #8da0ab;
  font-size: 24px;
  font-style: normal;
  line-height: 1;
}

@media (max-width: 699px) {
  .vaccines-page .vaccine-disease-date-list .vaccine-disease-row {
    grid-template-columns: 34px minmax(0, 1fr) auto 14px;
    gap: 9px;
  }
}

/* Perfil v109: recupera el pasaporte compacto elegido en la propuesta 12. */
.profile-page {
  padding-bottom: calc(var(--nav-height) + 72px);
}

.profile-page-heading {
  align-items: center;
  margin-bottom: 16px;
}

.profile-page-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.03em;
}

.profile-page-heading .secondary-button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(45, 72, 86, 0.055);
}

.profile-passport-card {
  overflow: hidden;
  border: 1px solid rgba(45, 84, 104, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 26px rgba(44, 75, 91, 0.075);
}

.profile-passport-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.profile-passport-avatar {
  display: block;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: #e8f3f8;
  box-shadow: 0 7px 17px rgba(41, 77, 95, 0.1);
}

.profile-passport-avatar img,
.profile-passport-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-passport-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.025em;
}

.profile-passport-head p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 19px;
}

.profile-passport-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.profile-passport-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 15px 14px;
  border-right: 1px solid var(--line);
}

.profile-passport-facts > div:last-child {
  border-right: 0;
}

.profile-passport-facts span {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 15px;
}

.profile-passport-facts strong {
  font-size: 14px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.profile-info-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 23px;
}

.profile-info-section h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.profile-info-list {
  padding: 2px 15px;
  overflow: hidden;
  border: 1px solid rgba(45, 84, 104, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 7px 18px rgba(44, 75, 91, 0.05);
}

.profile-info-list .info-row {
  min-height: 51px;
}

.profile-info-list .info-row span {
  font-size: 13px;
  line-height: 18px;
}

.profile-info-list .info-row strong {
  font-size: 13px;
  line-height: 18px;
}

.profile-action-list {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(45, 84, 104, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
}

.profile-action-list > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 65px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.profile-action-list > button:last-child {
  border-bottom: 0;
}

.profile-action-list > button:active {
  background: rgba(53, 123, 158, 0.05);
}

.profile-action-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e5f2f8;
  color: #287da7;
}

.profile-action-icon svg {
  width: 21px;
  height: 21px;
}

.profile-action-list > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.profile-action-list strong {
  font-size: 14px;
  line-height: 19px;
}

.profile-action-list small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 16px;
}

.profile-action-list i {
  color: #8ca0aa;
  font-size: 24px;
  font-style: normal;
}

@media (max-width: 699px) {
  .profile-page-heading {
    margin-bottom: 14px;
  }

  .profile-page-heading h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .profile-passport-head {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }

  .profile-passport-avatar {
    width: 68px;
    height: 68px;
    border-radius: 21px;
  }

  .profile-passport-head h2 {
    font-size: 22px;
    line-height: 27px;
  }

  .profile-passport-facts > div {
    padding: 11px 12px 12px;
  }

  .profile-passport-facts strong {
    font-size: 13px;
    line-height: 18px;
  }

  .profile-info-sections {
    grid-template-columns: 1fr;
    gap: 21px;
    margin-top: 21px;
  }

  .profile-info-section h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .profile-action-list {
    margin-top: 21px;
  }

  .home-cover-greeting {
    margin-bottom: 2px;
    font-size: 18px;
  }
}

.crop-flip-symbol {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.crop-flip-symbol .app-glyph {
  width: 15px;
  height: 15px;
}

.back-button .app-glyph,
.guided-back-button .app-glyph,
.onboarding-back .app-glyph,
.row-chevron .app-glyph,
.time-picker-chevron .app-glyph,
.modal-option-chevron .app-glyph,
.vaccine-disease-chevron .app-glyph,
.health-medication-chevron .app-glyph,
.expense-record-chevron .app-glyph,
.home-priority-alert-chevron .app-glyph,
.record-detail-row i .app-glyph,
.profile-action-list i .app-glyph,
.photo-action-options i .app-glyph {
  width: 16px;
  height: 16px;
}
/* Connected veterinary visits and history views */
.history-view-tabs {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  border-bottom: 1px solid var(--line, #dce6eb);
  margin: 4px 0 20px;
}

/* Flecha compartida para las filas que abren una ficha de los accesos rápidos. */
.module-row-chevron,
.weight-page .edit-record-label.module-row-chevron,
.vaccines-page .vaccine-disease-chevron.module-row-chevron {
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: end;
  color: #8da0aa;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.module-row-chevron .app-glyph,
.weight-page .edit-record-label.module-row-chevron .app-glyph,
.vaccines-page .vaccine-disease-chevron.module-row-chevron .app-glyph {
  width: 16px;
  height: 16px;
}

.document-more-button.module-row-chevron {
  width: 32px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 620px) {
  .documents-page .document-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .documents-page .document-more-button.module-row-chevron {
    display: inline-grid;
  }
}

.history-view-tabs button {
  position: relative;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: #758995;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.history-view-tabs button.active { color: #183b4f; }
.history-view-tabs button.active::after {
  content: "";
  position: absolute;
  left: 27%;
  right: 27%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #183b4f;
}

.history-calendar-placeholder {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 22px;
  border: 1px solid #dfe8ed;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.history-calendar-placeholder > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #3a91b6;
  background: #e6f3f8;
}
.history-calendar-placeholder svg { width: 27px; height: 27px; fill: currentColor; }
.history-calendar-placeholder h2 { margin: 16px 0 5px; font-size: 22px; }
.history-calendar-placeholder p { margin: 0; max-width: 360px; color: #697f8c; }
.history-calendar-placeholder small { margin-top: 10px; color: #91a2ac; }

.history-calendar-panel {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 18px 18px 8px;
  border: 1px solid #dfe8ed;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(32,67,83,.05);
}

.history-calendar-nav {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: center;
  margin-bottom: 10px;
}

.history-calendar-nav strong {
  color: #183b4f;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.history-calendar-nav > button:not(.history-calendar-period-button) {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #607985;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}

.history-calendar-nav > button:not(.history-calendar-period-button):hover { background: #edf4f7; }
.history-calendar-nav > button:not(.history-calendar-period-button):active { transform: scale(.92); }
.history-calendar-nav .app-glyph { width: 19px; height: 19px; }

.history-calendar-period-button {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #183b4f;
  font: inherit;
  cursor: pointer;
}

.history-calendar-period-button:hover { background: #edf4f7; }
.history-calendar-period-button .app-glyph { width: 13px; height: 13px; color: #78909b; }

.history-calendar-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 10px;
  background: #edf2f4;
}

.history-calendar-mode-switch button {
  min-height: 38px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f838e;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.history-calendar-mode-switch button.is-selected {
  background: #fff;
  color: #183b4f;
  box-shadow: 0 1px 4px rgba(31,58,72,.1);
}

.history-calendar-picker {
  margin: -2px 0 14px;
  padding: 12px;
  border: 1px solid #dfe8ed;
  border-radius: 10px;
  background: #f8fbfc;
  animation: calendarPickerIn .18s ease both;
}

@keyframes calendarPickerIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.history-calendar-picker-year {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin-bottom: 8px;
  text-align: center;
}

.history-calendar-picker-year button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #607985;
}

.history-calendar-picker-year .app-glyph { width: 17px; height: 17px; }
.history-calendar-picker-months { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.history-calendar-picker-months button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: #526d7b;
  font: inherit;
  font-size: 13px;
  text-transform: capitalize;
}
.history-calendar-picker-months button.is-selected { border-color: #183b4f; color: #183b4f; font-weight: 700; }

.history-calendar-activity-strip {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 1px -8px 2px;
  padding: 2px 8px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.history-calendar-activity-strip::-webkit-scrollbar { display: none; }

.history-calendar-activity-year {
  flex: 0 0 auto;
  min-width: 0;
}

.history-calendar-activity-year + .history-calendar-activity-year {
  padding-left: 17px;
  border-left: 1px solid #dfe7eb;
}

.history-calendar-activity-year h3 {
  position: sticky;
  left: 3px;
  z-index: 2;
  width: max-content;
  margin: 0 0 7px 3px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .9);
  color: #647b88;
  font-size: 12px;
  font-weight: 750;
  line-height: 18px;
  letter-spacing: .04em;
}

.history-calendar-activity-year > div {
  display: flex;
  gap: 9px;
}

.history-calendar-activity-date {
  display: grid;
  flex: 0 0 72px;
  min-height: 82px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 7px 6px;
  border: 1px solid #dce7eb;
  border-radius: 10px;
  background: #f4f8f9;
  color: #52707d;
  font: inherit;
  scroll-snap-align: start;
  cursor: pointer;
}

.history-calendar-activity-date small { font-size: 10px; font-weight: 750; }
.history-calendar-activity-date strong { color: #21495d; font-size: 23px; line-height: 27px; }
.history-calendar-activity-date span { font-size: 10px; font-weight: 650; }
.history-calendar-activity-date.is-selected { border-color: #2b778f; background: #e4f2f5; color: #256d83; }
.history-calendar-activity-date.is-selected strong { color: #17536a; }
.history-calendar-activity-date.is-past:not(.is-selected) {
  border-color: #e3e8eb;
  background: #f1f3f4;
  color: #929fa6;
}
.history-calendar-activity-date.is-past:not(.is-selected) strong { color: #778891; }

.history-calendar-week,
.history-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  text-align: center;
}

.history-calendar-week span {
  padding: 8px 0;
  color: #91a1aa;
  font-size: 11px;
  font-weight: 700;
}

.history-calendar-day {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 50px;
  place-items: center;
  padding: 0 0 7px;
  border: 0;
  background: transparent;
  color: #294b5d;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.history-calendar-day > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.history-calendar-day:hover > span { background: #edf4f7; }
.history-calendar-day:active > span { transform: scale(.9); }
.history-calendar-day.is-outside { color: #b7c2c8; }
.history-calendar-day.is-today > span { box-shadow: inset 0 0 0 1.5px #77aec5; font-weight: 700; }
.history-calendar-day.is-selected > span { background: #183b4f; color: white; box-shadow: none; font-weight: 700; }

.history-calendar-markers {
  position: absolute;
  bottom: 5px;
  left: 50%;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
}

.history-calendar-markers > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4da7cf;
}

.history-calendar-markers .tone-green,
.history-calendar-agenda-color.tone-green { background: #45a973; }
.history-calendar-markers .tone-orange,
.history-calendar-agenda-color.tone-orange { background: #cb7b24; }
.history-calendar-markers .tone-lavender,
.history-calendar-agenda-color.tone-lavender { background: #7969cf; }
.history-calendar-markers .tone-purple,
.history-calendar-agenda-color.tone-purple { background: #686fc7; }
.history-calendar-markers .tone-teal,
.history-calendar-agenda-color.tone-teal { background: #1598a6; }
.history-calendar-markers .tone-slate,
.history-calendar-agenda-color.tone-slate { background: #81939d; }

.history-calendar-agenda {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e1e9ed;
}

.history-calendar-agenda h2 {
  margin: 0 0 8px;
  color: #183b4f;
  font-size: 18px;
  font-weight: 700;
}

.history-calendar-agenda-row {
  display: grid;
  grid-template-columns: 5px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: #183b4f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.history-calendar-agenda-row + .history-calendar-agenda-row { border-top: 1px solid rgba(35,63,80,.09); }
.history-calendar-agenda-row:active { opacity: .65; }
.history-calendar-agenda-color { align-self: stretch; border-radius: 4px; background: #4da7cf; }
.history-calendar-agenda-row strong { display: block; font-size: 14px; line-height: 19px; }
.history-calendar-agenda-row small { display: block; margin-top: 3px; color: #728792; font-size: 12px; line-height: 17px; }
.history-calendar-agenda-row time { color: #617883; font-size: 12px; }
.history-calendar-agenda-row b { display: grid; color: #91a3ac; }
.history-calendar-agenda-row b .app-glyph { width: 16px; height: 16px; }
.history-calendar-empty { margin: 0; padding: 18px 0 22px; color: #82949e; font-size: 13px; }

@media (max-width: 520px) {
  .history-calendar-panel { padding: 13px 10px 6px; }
  .history-calendar-day { min-height: 47px; }
  .history-calendar-day > span { width: 34px; height: 34px; }
  .history-calendar-agenda { margin-top: 12px; padding: 14px 5px 0; }
}

.history-episode-card {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: #183b4f;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(32,67,83,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.history-episode-card:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(32,67,83,.08); }
.history-episode-card:active { transform: scale(.992); }
.history-episode-date { display: block; padding: 13px 14px 0; color: #718792; font-size: 12px; font-weight: 700; }
.history-episode-heading { display: grid; grid-template-columns: 42px 1fr 20px; align-items: center; gap: 11px; padding: 10px 14px 14px; }
.history-episode-heading > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: white; background: #439bbd; }
.history-episode-heading > i svg { width: 23px; height: 23px; fill: currentColor; }
.history-episode-heading > span { min-width: 0; }
.history-episode-heading strong, .history-episode-heading small { display: block; }
.history-episode-heading strong { font-size: 16px; }
.history-episode-heading small { margin-top: 3px; color: #6e838f; font-size: 12px; line-height: 1.35; }
.history-episode-heading em { display: block; margin-top: 3px; overflow: hidden; color: #5f7682; font-size: 12px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.history-episode-heading > b { color: #91a5af; }
.history-episode-heading > b svg { width: 17px; height: 17px; fill: currentColor; }
.history-episode-items { display: block; border-top: 1px solid #e3eaee; }
.history-episode-item { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 58px; padding: 9px 14px; border-bottom: 1px solid #e8eef1; }
.history-episode-item:last-child { border-bottom: 0; }
.history-episode-item > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #2392bd; }
.history-episode-item > i.type-deworming { background: #3ca56c; }
.history-episode-item > i.type-vaccine { background: #7167d0; }
.history-episode-item > i.type-expense { background: #bd7828; }
.history-episode-item > i.type-document { background: #6672ce; }
.history-episode-item > i.type-note { background: #718795; }
.history-episode-item > i svg { width: 18px; height: 18px; fill: currentColor; }
.history-episode-item > span { min-width: 0; }
.history-episode-item strong, .history-episode-item small { display: block; }
.history-episode-item strong { font-size: 13px; }
.history-episode-item small { margin-top: 2px; color: #718590; font-size: 11px; line-height: 1.35; }

.visit-flow-heading, .visit-item-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.visit-flow-heading > span:first-child, .visit-item-heading > span {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e4f2f8;
  color: #278bb5;
}
.visit-flow-heading svg, .visit-item-heading svg { width: 24px; height: 24px; fill: currentColor; }
.visit-flow-heading div span, .visit-item-heading div span { color: #748894; font-size: 12px; }
.visit-flow-heading h2, .visit-item-heading h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.5px; }
.visit-item-heading > button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #edf2f4; color: #35576a; display: grid; place-items: center; }
.visit-item-heading > button svg { width: 19px; height: 19px; fill: currentColor; }

.visit-flow-form, .visit-item-form { padding-bottom: 78px; }
.visit-date-row, .visit-two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visit-flow-form label, .visit-item-form > label, .visit-two-fields label { display: grid; gap: 7px; color: #536e7c; font-size: 12px; font-weight: 700; }
.visit-flow-form label i, .visit-item-form label i { color: #98a8b0; font-style: normal; font-weight: 500; }
.visit-flow-form input, .visit-flow-form textarea, .visit-item-form input, .visit-item-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dbe5ea;
  border-radius: 10px;
  background: #fff;
  color: #183b4f;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
}
.visit-flow-form textarea, .visit-item-form textarea { min-height: 82px; resize: vertical; }
.visit-flow-section-heading { display: flex; justify-content: space-between; margin: 22px 0 9px; }
.visit-flow-section-heading > div { display: flex; align-items: baseline; gap: 9px; }
.visit-flow-section-heading h3 { margin: 0; font-size: 18px; }
.visit-flow-section-heading span { color: #3ca06a; font-size: 11px; font-weight: 700; }
.visit-empty-state { padding: 18px; border: 1px dashed #cbd9df; border-radius: 10px; text-align: center; color: #738792; }
.visit-empty-state strong, .visit-empty-state span { display: block; }
.visit-empty-state strong { color: #385a6c; font-size: 13px; }
.visit-empty-state span { margin-top: 4px; font-size: 11px; }
.visit-draft-list { overflow: hidden; border: 1px solid #dce6eb; border-radius: 10px; background: #fff; }
.visit-draft-item { display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 10px; min-height: 59px; padding: 9px 10px; border-bottom: 1px solid #e5ecef; }
.visit-draft-item:last-child { border-bottom: 0; }
.visit-draft-item-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #248fba; border-radius: 10px; }
.visit-draft-item-icon.type-deworming { background: #3ca56c; }.visit-draft-item-icon.type-vaccine { background: #7167d0; }.visit-draft-item-icon.type-expense { background: #bd7828; }.visit-draft-item-icon.type-document { background: #6672ce; }.visit-draft-item-icon.type-note { background: #718795; }
.visit-draft-item-icon svg { width: 19px; height: 19px; fill: currentColor; }
.visit-draft-item strong, .visit-draft-item small { display: block; }.visit-draft-item strong { font-size: 13px; }.visit-draft-item small { margin-top: 2px; color: #718590; font-size: 11px; }
.visit-draft-item > button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #8a9ba4; display: grid; place-items: center; }
.visit-draft-item > button svg { width: 16px; height: 16px; fill: currentColor; }
.visit-add-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.visit-add-grid button { display: flex; align-items: center; gap: 6px; min-height: 39px; padding: 7px 10px; border: 1px solid #d7e3e8; border-radius: 999px; background: #fff; color: #284d61; font: inherit; font-size: 11px; font-weight: 700; }
.visit-add-grid button span { width: 22px; height: 22px; display: grid; place-items: center; color: #278db8; }
.visit-add-grid button span.type-deworming { color: #3b9f69; }.visit-add-grid button span.type-vaccine { color: #7167d0; }.visit-add-grid button span.type-expense { color: #b87628; }.visit-add-grid button span.type-document { color: #6672ce; }.visit-add-grid button span.type-note { color: #718795; }
.visit-add-grid svg { width: 16px; height: 16px; fill: currentColor; }
.visit-notes-field { margin-top: 4px; }
.visit-coverage { margin: 0; padding: 0; border: 0; }
.visit-coverage legend { margin-bottom: 9px; color: #536e7c; font-size: 12px; font-weight: 700; }
.visit-coverage > div { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-coverage label { position: relative; display: block; }
.visit-coverage input { position: absolute; opacity: 0; pointer-events: none; }
.visit-coverage span { display: block; min-height: 38px; padding: 9px 12px; border: 1px solid #d7e3e8; border-radius: 999px; background: #fff; color: #526e7d; font-size: 12px; font-weight: 600; }
.visit-coverage input:checked + span { border-color: #278db8; color: #176d92; box-shadow: inset 0 0 0 1px #278db8; }
.visit-item-form { display: grid; gap: 15px; }
.visit-item-form .unit-input { display: flex; align-items: center; }
.visit-item-form .unit-input input { border-radius: 10px 0 0 10px; }
.visit-item-form .unit-input span { align-self: stretch; display: grid; place-items: center; padding: 0 14px; border: 1px solid #dbe5ea; border-left: 0; border-radius: 0 10px 10px 0; background: #eef4f7; }
.visit-flow-dialog .guided-sticky-actions { z-index: 3; }
.visit-flow-dialog .guided-primary-button:disabled { opacity: .42; cursor: not-allowed; }

.visit-episode-context { display: grid; gap: 9px; margin: -2px 2px 15px; padding-bottom: 14px; border-bottom: 1px solid #e2e9ed; }
.visit-episode-context p { display: grid; grid-template-columns: minmax(118px,.42fr) minmax(0,1fr); gap: 12px; margin: 0; font-size: 13px; line-height: 1.45; }
.visit-episode-context span { color: #7b8f99; }
.visit-episode-context strong { color: #29495b; font-weight: 600; }
.visit-episode-detail-list { overflow: hidden; border: 1px solid #dce6eb; border-radius: 10px; background: #fff; }
.visit-episode-detail-list .history-episode-item { min-height: 64px; }
.visit-episode-detail-item { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 11px; width: 100%; min-height: 74px; padding: 11px 14px; border: 0; border-bottom: 1px solid #e3eaee; background: transparent; color: #183b4f; text-align: left; font: inherit; cursor: pointer; }
.visit-episode-detail-item:last-child { border-bottom: 0; }
.visit-episode-detail-item > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #2392bd; }
.visit-episode-detail-item > i.type-deworming { background: #3ca56c; }.visit-episode-detail-item > i.type-vaccine { background: #7167d0; }.visit-episode-detail-item > i.type-expense { background: #bd7828; }.visit-episode-detail-item > i.type-document { background: #6672ce; }.visit-episode-detail-item > i.type-note { background: #718795; }
.visit-episode-detail-item > i svg { width: 21px; height: 21px; fill: currentColor; }
.visit-episode-detail-item > span { min-width: 0; }
.visit-episode-detail-item strong, .visit-episode-detail-item small { display: block; }
.visit-episode-detail-item strong { font-size: 15px; }
.visit-episode-detail-item small { margin-top: 3px; color: #708590; font-size: 12px; line-height: 1.35; }
.visit-episode-detail-item > b { color: #97a9b2; }
.visit-episode-detail-item > b svg { width: 16px; height: 16px; fill: currentColor; }
.visit-episode-detail-item:active { background: #f2f6f8; }

.visit-episode-danger-zone {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e2e9ed;
}

.visit-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #bd4d45;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.visit-delete-button:hover,
.visit-delete-button:focus-visible {
  background: #fcecea;
  outline: none;
}

.visit-delete-button:active {
  transform: scale(.98);
}

.visit-delete-button span,
.visit-delete-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Un solo visor para cualquier registro abierto desde calendario o visita. */
.unified-record-dialog .unified-record-heading {
  margin-bottom: 18px;
}

.unified-record-heading .information-dialog-icon {
  border-radius: 10px;
  background: #e5f2fa;
  color: #248fba;
}

.unified-record-heading .information-dialog-icon.type-vaccine { background: #efedff; color: #7167d0; }
.unified-record-heading .information-dialog-icon.type-deworming { background: #e8f6ee; color: #3ca56c; }
.unified-record-heading .information-dialog-icon.type-expense { background: #fff1e3; color: #bd7828; }
.unified-record-heading .information-dialog-icon.type-document { background: #eeeffd; color: #6672ce; }
.unified-record-heading .information-dialog-icon.type-weight { background: #e5f5f5; color: #238f99; }
.unified-record-heading .information-dialog-icon.type-note,
.unified-record-heading .information-dialog-icon.type-photo { background: #edf2f4; color: #718795; }

.unified-record-heading .information-dialog-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.unified-record-detail-list {
  border-color: #dce6eb;
  background: #fff;
}

.unified-record-value-row.is-static {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
}

.unified-record-value-row.is-static:active {
  background: transparent;
}

.unified-record-dialog .saved-inline-edit-form {
  border-bottom: 1px solid #dce6eb;
  background: #f4f9fb;
}

.unified-record-dialog .saved-inline-reminder {
  margin-top: 4px;
}

.unified-record-preview {
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #eaf0f3;
  aspect-ratio: 16 / 9;
}

.unified-record-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unified-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #e2e9ed;
}

.unified-record-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #267da3;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.unified-record-edit-button:hover,
.unified-record-edit-button:focus-visible {
  background: #edf6fa;
  outline: none;
}

.unified-record-edit-button:active { transform: scale(.98); }
.unified-record-edit-button svg { width: 18px; height: 18px; fill: currentColor; }

.unified-record-delete-button {
  margin: 0;
}

@media (max-width: 680px) {
  .history-page .page-heading { align-items: flex-start; }
  .history-page .page-heading .secondary-button { font-size: 12px; padding-inline: 10px; }
  .history-view-tabs { margin-top: -2px; }
  .visit-date-row, .visit-two-fields { grid-template-columns: 1fr; }
  .visit-flow-heading h2, .visit-item-heading h2 { font-size: 21px; }
  .visit-add-grid { gap: 7px; }
}

/* Visual parity with the approved veterinary-visit concept */
.visit-flow-dialog #addDialogContent { padding-top: 22px; }
.visit-flow-dialog #addDialogContent:has(.visit-child-back-button) { position: relative; padding-top: 22px; }
.visit-child-back-button { position: absolute; z-index: 12; top: 15px; left: 15px; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: rgba(235,242,245,.92); color: #285368; font: inherit; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.visit-child-back-button span { display: grid; place-items: center; }
.visit-child-back-button svg { width: 18px; height: 18px; fill: currentColor; }
.visit-child-back-button strong { font-size: 12px; font-weight: 700; }
.visit-child-back-button:active { transform: scale(.97); background: #e1ebef; }
.visit-flow-heading { margin: 0 0 4px; }
.visit-flow-heading > div > span { font-size: 12px; font-weight: 600; }
.visit-flow-heading h2 { margin-top: 3px; font-size: 26px; }
.visit-context-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 0; }
.visit-date-control { position: relative; display: inline-flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 7px !important; min-height: 40px; color: #617987 !important; font-weight: 600 !important; cursor: pointer; }
.visit-date-control { padding: 0; border: 0; background: transparent; font: inherit; text-align: left; }
.visit-date-control > span { width: 24px; height: 24px; display: grid; place-items: center; color: #3292b9; }
.visit-date-control svg { width: 17px; height: 17px; fill: currentColor; }
.visit-date-control strong { color: #617987; font-size: 12px; }
.visit-context-row > button { min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: #267da3; font: inherit; font-size: 12px; font-weight: 700; }
.visit-reason-field { margin-top: 11px; }
.visit-reason-field > span { display: flex; align-items: baseline; justify-content: space-between; }
.visit-reason-field > span i { color: #91a2aa; font-size: 11px; }
.visit-clinic-field { margin: 7px 0 0; padding: 12px; border-radius: 10px; background: #eef4f7; }
.visit-clinic-editor {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #dce7ec;
  border-radius: 10px;
  background: #eef4f7;
}

.visit-clinic-editor .visit-clinic-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.visit-clinic-editor .visit-clinic-field > span {
  color: #58717e;
  font-size: 12px;
  font-weight: 700;
}

.visit-clinic-editor .visit-clinic-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #d4e0e6;
  border-radius: 10px;
  background: #fff;
  color: #183b4f;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.visit-clinic-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 9px;
}

.visit-clinic-editor-actions button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #667d89;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.visit-clinic-editor-actions button:last-child {
  background: #dceef6;
  color: #1f789f;
}

.visit-clinic-summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #dce7ec;
  border-radius: 10px;
  background: #f7fafb;
  color: #183b4f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.visit-clinic-summary > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #e3f2f8;
  color: #278bb5;
}

.visit-clinic-summary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.visit-clinic-summary small,
.visit-clinic-summary strong {
  display: block;
}

.visit-clinic-summary small {
  margin-bottom: 2px;
  color: #718691;
  font-size: 10px;
  font-weight: 600;
}

.visit-clinic-summary strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visit-clinic-summary > i {
  display: grid;
  place-items: center;
  color: #78909c;
}
.visit-flow-section-heading { margin-top: 22px; }
.visit-flow-section-heading h3 { font-size: 21px; letter-spacing: -.35px; }
.visit-draft-list { box-shadow: 0 7px 20px rgba(35,69,85,.05); }
.visit-draft-item { min-height: 66px; padding: 10px 12px; }
.visit-draft-item-icon { width: 40px; height: 40px; }
.visit-draft-item strong { font-size: 14px; }
.visit-add-grid { margin: 13px 0 11px; }
.visit-add-grid button { min-height: 38px; padding: 7px 11px; border-color: #d4e0e6; background: rgba(255,255,255,.9); font-size: 11px; box-shadow: 0 2px 7px rgba(32,65,80,.025); }
.visit-notes-disclosure { margin-top: 4px; border-radius: 10px; background: #edf3f6; }
.visit-notes-disclosure summary { display: grid; grid-template-columns: 25px 1fr 17px; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; color: #35596b; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; }
.visit-notes-disclosure summary::-webkit-details-marker { display: none; }
.visit-notes-disclosure summary > svg { width: 17px; height: 17px; fill: currentColor; }
.visit-notes-disclosure[open] summary > svg:last-child { transform: rotate(90deg); }
.visit-notes-disclosure .visit-notes-field { padding: 0 10px 10px; }
.visit-notes-disclosure textarea { background: #fff; }
.visit-flow-dialog .guided-sticky-actions { position: sticky; z-index: 9; bottom: -1px; margin: 16px -2px -2px; padding: 12px 2px 2px; background: linear-gradient(to bottom, rgba(248,249,252,0), rgba(248,249,252,.98) 28%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.visit-flow-dialog .guided-sticky-actions .guided-primary-button { min-height: 50px; margin: 0; border-radius: 10px; background: #193f53; color: #fff; box-shadow: none; font-weight: 700; }
.visit-flow-dialog .guided-sticky-actions .guided-primary-button:active { transform: scale(.99); background: #123647; }

.history-connected-timeline { position: relative; padding: 0; }
.history-connected-timeline::before { display: none; content: none; }
.history-month-group { margin: 24px 0 28px; }
.history-month-group:first-child { margin-top: 16px; }
.history-month-group > h2 { margin: 0 0 13px 2px; color: #6d8390; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.history-month-line { position: relative; padding-left: 21px; }
.history-month-line::before { content: ""; position: absolute; top: 8px; bottom: 5px; left: 6px; width: 1px; background: #bfd0d8; }
.history-day-group { position: relative; margin-bottom: 17px; }
.history-day-marker { min-height: 21px; display: flex; align-items: center; margin-bottom: 7px; }
.history-day-marker i { position: absolute; left: -21px; width: 13px; height: 13px; border: 3px solid #f1f6f8; border-radius: 50%; background: #6b9db3; box-shadow: 0 0 0 1px #b9cbd3; }
.history-day-marker time { color: #6d8390; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.history-day-records { display: grid; gap: 9px; }
.history-day-records .history-episode-card, .history-day-records .record-card { margin: 0; }
.history-day-records .record-card { border: 1px solid #dce6eb; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(32,67,83,.045); }
.history-day-records .record-date { display: none; }
.history-day-records .history-episode-card { box-shadow: 0 7px 20px rgba(32,67,83,.055); }
.history-day-records .history-episode-heading { padding-top: 13px; }
.timeline-image-preview { overflow: hidden; padding: 0; background: #dfe8ec; }
.timeline-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-day-records .record-card:has(.timeline-image-preview) .icon-tile { width: 54px; height: 54px; border-radius: 10px; }
.history-day-records .record-card-with-preview {
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: 10px;
  background: #fff;
}

.timeline-featured-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dfe8ec;
}

.timeline-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}

.record-card-with-preview:hover .timeline-featured-image img {
  transform: scale(1.015);
}

.timeline-featured-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 14px;
}

.timeline-featured-copy > span:first-child {
  min-width: 0;
}

.timeline-featured-copy strong {
  color: #183b4f;
  font-size: 15px;
}

.timeline-featured-copy p {
  white-space: normal;
}

.timeline-photo-count {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(20, 39, 49, 0.64);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* Photo-journal layout: compact in Home, featured in History. */
.home-page .record-list .record-card-with-preview {
  display: grid;
  grid-template-areas: "copy image";
  grid-template-columns: minmax(0, 1fr) clamp(118px, 17vw, 170px);
  align-items: stretch;
  min-height: 122px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.home-page .record-list .record-card-with-preview .timeline-featured-image {
  grid-area: image;
  width: 100%;
  height: 122px;
  min-height: 122px;
  aspect-ratio: auto;
}

.home-page .record-list .record-card-with-preview .timeline-featured-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 18px 20px;
  text-align: left;
}

.home-page .record-list .record-card-with-preview .timeline-featured-copy > span:first-child {
  order: 2;
}

.home-page .record-list .record-card-with-preview .record-date {
  order: 1;
  display: block;
  padding: 0;
  color: #2d6688;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.045em;
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-page .record-list .timeline-photo-count {
  display: none;
}

.history-day-records .record-card-with-preview .record-date {
  display: block;
  padding-top: 2px;
}
.history-episode-item > i.has-preview, .visit-episode-detail-item > i.has-preview { overflow: hidden; padding: 0; background: #dfe8ec; }
.history-episode-item > i.has-preview img, .visit-episode-detail-item > i.has-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 680px) {
  .home-page .record-list .record-card-with-preview {
    display: grid;
    grid-template-areas: "copy image";
    grid-template-columns: minmax(0, 1fr) 106px;
    min-height: 106px;
  }

  .home-page .record-list .record-card-with-preview .timeline-featured-image {
    height: 106px;
    min-height: 106px;
    aspect-ratio: auto;
  }

  .home-page .record-list .record-card-with-preview .timeline-featured-copy {
    padding: 14px;
  }

  .visit-flow-dialog #addDialogContent { padding-inline: 14px; }
  .visit-flow-heading h2 { font-size: 24px; }
  .visit-context-row { align-items: flex-start; }
  .visit-date-control strong { max-width: 195px; line-height: 1.35; }
  .visit-add-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit-add-grid button { justify-content: center; min-width: 0; padding-inline: 7px; }
  .history-month-line { padding-left: 19px; }
  .history-day-marker i { left: -19px; }
}

/* Visit header: the date belongs to the visit card, not to the timeline rail. */
.history-day-marker {
  min-height: 13px;
}

.history-day-marker time {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.history-day-records .record-date {
  display: block;
}

.history-day-records .history-episode-heading {
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  gap: 14px;
  min-height: 84px;
  padding: 14px 16px;
}

.history-day-records .history-episode-heading > i {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  color: #238cba;
  background: #e5f3f9;
}

.history-day-records .history-episode-heading > i svg {
  width: 27px;
  height: 27px;
}

.history-day-records .history-episode-heading small {
  margin: 0 0 3px;
  color: #708590;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.history-day-records .history-episode-heading strong {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

@media (max-width: 680px) {
  .history-day-records .history-episode-heading {
    grid-template-columns: 52px minmax(0, 1fr) 16px;
    gap: 12px;
    min-height: 78px;
    padding: 12px;
  }

  .history-day-records .history-episode-heading > i {
    width: 52px;
    height: 52px;
  }

  .history-day-records .history-episode-heading strong {
    font-size: 18px;
  }

  .timeline-featured-image {
    aspect-ratio: 4 / 3;
  }
}

/* Final confirmation shown after saving a linked veterinary visit. */
.visit-result-screen {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 6px 2px 2px;
}

.visit-result-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 0 3px;
  color: #718691;
  font-size: 13px;
}

.visit-result-kicker strong {
  color: #183b4f;
  font-size: 15px;
}

.visit-result-card {
  padding: 30px 18px 18px;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  text-align: center;
  box-shadow: 0 10px 26px rgba(32, 67, 83, .055);
}

.visit-result-check {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e5f5ec;
  color: #38a56d;
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.visit-result-check svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.visit-result-card > h2 {
  margin: 0;
  color: #12384d;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.visit-result-card > p:not(.visit-result-explanation) {
  margin: 4px 0 20px;
  color: #718691;
  font-size: 13px;
}

.visit-result-summary {
  overflow: hidden;
  border: 1px solid #dce6eb;
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.visit-result-visit {
  display: grid;
  gap: 3px;
  padding: 14px;
  border-bottom: 1px solid #e3eaee;
}

.visit-result-visit small {
  color: #647d8a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
}

.visit-result-visit strong {
  color: #173b50;
  font-size: 16px;
}

.visit-result-visit > span { color: #657d89; font-size: 12px; line-height: 1.4; }

.visit-result-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 14px;
  border-bottom: 1px solid #e3eaee;
}

.visit-result-item:last-child {
  border-bottom: 0;
}

.visit-result-item .visit-draft-item-icon {
  width: 38px;
  height: 38px;
}

.visit-result-item strong,
.visit-result-item small {
  display: block;
}

.visit-result-item strong {
  color: #173b50;
  font-size: 14px;
}

.visit-result-item small {
  margin-top: 2px;
  color: #738995;
  font-size: 12px;
}

.visit-result-explanation {
  margin: 13px 4px 0;
  padding: 0;
  background: transparent;
  color: #597381;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.visit-result-explanation strong {
  color: #183b4f;
}

.visit-result-actions {
  margin-top: 14px !important;
}

@media (max-width: 680px) {
  .visit-result-screen {
    padding-top: 2px;
  }

  .visit-result-card {
    padding: 24px 12px 12px;
  }

  .visit-result-card > h2 {
    font-size: 22px;
  }
}

@media (max-width: 699px) {
  .home-page .home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-page .home-quick-grid .quick-card {
    min-height: 106px;
    padding: 13px 10px;
    gap: 9px;
  }

  .home-page .home-quick-grid .quick-icon {
    width: 42px;
    height: 42px;
  }

  .home-page .home-quick-grid .quick-icon .app-glyph,
  .home-page .home-quick-grid .modern-scale-icon svg {
    width: 24px;
    height: 24px;
  }

  .home-page .home-quick-grid .quick-card strong {
    font-size: 13px;
    line-height: 1.2;
  }
}

/* Final cascade for the September onboarding and photo treatment. */
.onboarding-story-page,
.onboarding-notifications-page {
  width: min(100%, 520px);
  padding: max(22px, env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
}

.onboarding-access-page {
  width: 100%;
  max-width: 600px;
  padding: 0;
}

.record-card-with-preview,
.home-page .record-list .record-card-with-preview,
.history-day-records .record-card-with-preview {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #203843;
  text-align: left;
}

.record-card-with-preview .timeline-featured-image,
.home-page .record-list .record-card-with-preview .timeline-featured-image,
.history-day-records .record-card-with-preview .timeline-featured-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 8.3;
}

.record-card-with-preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 34% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(12, 29, 37, .84));
  pointer-events: none;
}

.record-card-with-preview .timeline-featured-copy,
.home-page .record-list .record-card-with-preview .timeline-featured-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  color: #fff;
  text-align: left;
}

.record-card-with-preview .timeline-featured-copy > span:first-child,
.home-page .record-list .record-card-with-preview .timeline-featured-copy > span:first-child { order: 1; }
.record-card-with-preview .timeline-featured-copy strong { color: #fff; font-size: 17px; line-height: 1.25; text-shadow: 0 1px 7px rgba(0,0,0,.25); }
.record-card-with-preview .timeline-featured-copy p { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 12px; }
.record-card-with-preview .record-date,
.home-page .record-list .record-card-with-preview .record-date,
.history-day-records .record-card-with-preview .record-date { order: 2; display: block; padding: 0; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.timeline-photo-count { display: none; }

@media (max-width: 680px) {
  .onboarding-story-page,
  .onboarding-notifications-page { padding-right: 18px; padding-left: 18px; }
  .home-page .record-list .record-card-with-preview .timeline-featured-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .history-day-records .record-card-with-preview .timeline-featured-image { aspect-ratio: 4 / 3; }
.record-card-with-preview .timeline-featured-copy,
  .home-page .record-list .record-card-with-preview .timeline-featured-copy { padding: 14px; }
}

/* Keep the approved add sheet above every later responsive override. */
.add-dialog.unified-add-dialog {
  position: fixed;
  z-index: 230;
  inset: 50% auto auto 50%;
  width: min(680px, calc(100vw - 32px));
  height: auto;
  max-height: min(820px, calc(100dvh - 32px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 18px;
}
.add-dialog.unified-add-dialog .modal-content,
#addDialog.unified-add-dialog #addDialogContent { max-height: min(720px, calc(100dvh - 32px)); overflow-x: hidden; overflow-y: auto; padding: 0 24px 24px; }
.add-dialog.unified-add-dialog .modal-content { width: 100%; box-sizing: border-box; }
.add-dialog.unified-add-dialog[open] { animation: unified-add-dialog-in 220ms cubic-bezier(.22, 1, .36, 1) both; }
.add-dialog.unified-add-dialog .unified-add-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  margin: 0 0 18px;
  padding: 12px 16px 12px 24px;
  box-sizing: border-box;
  text-align: left;
}
.add-dialog.unified-add-dialog .unified-add-heading h2 { margin: 0; text-align: left; }
.add-dialog.unified-add-dialog .unified-add-heading .guided-close-button {
  grid-column: 2;
  grid-row: 1;
  width: 42px;
  height: 42px;
  justify-self: end;
}
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-step { display: block !important; }
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form [data-wizard-step="1"] > .guided-actions { display: none !important; }
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-intro,
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form [data-guided-review],
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .weight-review-card { display: none !important; }
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-step {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-step + .guided-step { margin-top: 2px; }
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: static;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
}
.add-dialog.guided-dialog.unified-add-dialog .unified-add-form .guided-actions .guided-primary-button {
  grid-column: 1;
  width: 100%;
  min-height: 56px;
}
.add-dialog.unified-add-dialog .unified-simple-add-form { display: grid; gap: 16px; }
.add-dialog.unified-add-dialog .unified-simple-add-form > .guided-primary-button { width: 100%; min-height: 56px; margin-top: 4px; border-radius: 13px; }
@keyframes unified-add-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 680px) {
  @keyframes unified-add-dialog-in {
    from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }
}
@media (max-width: 680px) {
  .add-dialog.unified-add-dialog {
    inset: calc(env(safe-area-inset-top, 0px) + 8px) auto calc(env(safe-area-inset-bottom, 0px) + 8px) 50%;
    width: calc(100vw - 20px);
    height: auto;
    max-height: none;
    border-radius: 16px;
    transform: translateX(-50%);
  }
  .add-dialog.unified-add-dialog .modal-content,
  #addDialog.unified-add-dialog #addDialogContent {
    height: 100%;
    max-height: none;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .add-dialog.unified-add-dialog .unified-add-heading {
    position: sticky;
    z-index: 20;
    top: 0;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-left: 18px;
    border-bottom: 1px solid rgba(49, 77, 92, 0.08);
    background: rgba(248, 250, 251, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

/* Una misma familia visual para añadir, confirmar, consultar y editar. */
.add-dialog.unified-add-dialog .unified-add-heading:has(.unified-form-type-icon) {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 12px;
}
.add-dialog.unified-add-dialog .unified-add-heading:has(.unified-form-type-icon) h2 {
  grid-column: 2;
  grid-row: 1;
}
.add-dialog.unified-add-dialog .unified-add-heading:has(.unified-form-type-icon) .guided-close-button {
  grid-column: 3;
}
.unified-form-type-icon {
  display: grid !important;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 !important;
  border-radius: 12px;
  color: #278eb8 !important;
  background: #e7f5fa;
}
.unified-form-type-icon svg { width: 23px; height: 23px; fill: currentColor; }
.unified-form-type-icon.type-vaccine { color: #7167d0 !important; background: #efedff; }
.unified-form-type-icon.type-deworming { color: #3ca56c !important; background: #e8f6ee; }
.unified-form-type-icon.type-expense { color: #bd7828 !important; background: #fff1e3; }
.unified-form-type-icon.type-document { color: #6672ce !important; background: #eeeffd; }
.unified-form-type-icon.type-weight { color: #238f99 !important; background: #e5f5f5; }

.add-dialog.unified-record-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  border-radius: 18px;
}
.add-dialog:focus,
.add-dialog:focus-visible { outline: none; }
.add-dialog .guided-close-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 165, 209, .14);
}
#addDialog.unified-record-dialog #addDialogContent {
  max-height: min(720px, calc(100dvh - 32px));
  padding: 18px 24px 24px;
}
.unified-record-dialog .unified-record-heading {
  min-height: 54px;
  margin: 0 0 18px;
}

/* El contenido nuevo entra dentro del mismo cuadro, sin salto ni sheet desde abajo. */
.save-confirmation-dialog .confirmation-heading,
.save-confirmation-dialog .record-save-confirmation {
  animation: saved-panel-in 300ms cubic-bezier(.22, 1, .36, 1) both;
}
.save-confirmation-dialog .confirmation-heading {
  grid-template-columns: minmax(0, 1fr) 42px;
}
.save-confirmation-dialog .confirmation-heading .guided-close-button { grid-column: 2; }
@keyframes saved-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Confirmación: mascota → check → mascota, con el tipo como insignia estable. */
.save-avatar-animation {
  overflow: visible;
  isolation: isolate;
}
.save-pet-photo {
  visibility: visible;
  opacity: 1;
  animation: save-avatar-cycle 2.25s cubic-bezier(.4, 0, .2, 1) both;
}
.save-success-layer {
  z-index: 3;
  opacity: 0;
  transform: scale(.78);
  animation: save-success-cycle 2.25s cubic-bezier(.22, 1, .36, 1) both;
}
.save-success-layer .save-drawn-check path {
  animation: save-check-cycle 2.25s cubic-bezier(.4, 0, .2, 1) both;
}
.save-record-type-badge {
  position: absolute;
  z-index: 5;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid #f8f9fc;
  border-radius: 11px;
  color: #238f99;
  background: #e5f5f5;
  box-shadow: 0 6px 16px rgba(26, 58, 74, .18);
  opacity: 0;
  transform: scale(.72);
  animation: save-type-badge-in 2.25s cubic-bezier(.22, 1, .36, 1) both;
}
.save-record-type-badge svg { width: 17px; height: 17px; fill: currentColor; }
.save-record-type-badge.type-medication { color: #386f9a; background: #e9f0f8; }
.save-record-type-badge.type-vaccine { color: #7167d0; background: #efedff; }
.save-record-type-badge.type-deworming { color: #3ca56c; background: #e8f6ee; }
.save-record-type-badge.type-expense { color: #bd7828; background: #fff1e3; }
.save-record-type-badge.type-document { color: #6672ce; background: #eeeffd; }
.save-record-type-badge.type-photo { color: #9b5871; background: #faeaf0; }

@keyframes save-avatar-cycle {
  0%, 36% { opacity: 1; transform: scale(1); }
  46%, 68% { opacity: 0; transform: scale(.84); }
  80%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes save-success-cycle {
  0%, 38% { opacity: 0; transform: scale(.78); }
  49%, 67% { opacity: 1; transform: scale(1); }
  77%, 100% { opacity: 0; transform: scale(.82); }
}
@keyframes save-check-cycle {
  0%, 44% { stroke-dashoffset: 48; }
  57%, 100% { stroke-dashoffset: 0; }
}
@keyframes save-type-badge-in {
  0%, 75% { opacity: 0; transform: scale(.72); }
  88%, 100% { opacity: 1; transform: scale(1); }
}
.record-save-confirmation.is-settled .save-pet-photo { visibility: visible; opacity: 1; transform: none; animation: none; }
.record-save-confirmation.is-settled .save-success-layer { opacity: 0; transform: scale(.82); animation: none; }
.record-save-confirmation.is-settled .save-record-type-badge { opacity: 1; transform: none; animation: none; }

@media (max-width: 680px) {
  .add-dialog.unified-record-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
  #addDialog.unified-record-dialog #addDialogContent { max-height: calc(100dvh - 20px); padding: 14px 16px 18px; }
  .add-dialog.unified-add-dialog .unified-add-heading:has(.unified-form-type-icon) { gap: 10px; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .save-confirmation-dialog .confirmation-heading,
  .save-confirmation-dialog .record-save-confirmation { animation: none; }
  .save-pet-photo { visibility: visible; opacity: 1; transform: none; animation: none; }
  .save-success-layer { opacity: 0; animation: none; }
  .save-record-type-badge { opacity: 1; transform: none; animation: none; }
}

/* Portada v366: degradado compatible con WebView sin desenfocar la fotografía. */
.home-cover-card::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  content: "";
  background:
    linear-gradient(to bottom, rgba(8, 22, 30, 0.18) 0%, transparent 18%),
    linear-gradient(to top, rgba(8, 22, 30, 0.58) 0%, rgba(8, 22, 30, 0.24) 30%, transparent 60%),
    radial-gradient(ellipse 72% 78% at 0% 100%, rgba(8, 22, 30, 0.28) 0%, transparent 74%);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;
}

.home-cover-card.without-photo::before,
.home-cover-card.is-adjusting::before {
  opacity: 0;
}

@media (max-width: 699px) {
  .home-cover-card::before {
    background:
      linear-gradient(to bottom, rgba(8, 22, 30, 0.2) 0%, transparent 20%),
      linear-gradient(to top, rgba(8, 22, 30, 0.64) 0%, rgba(8, 22, 30, 0.28) 32%, transparent 62%),
      radial-gradient(ellipse 94% 76% at 0% 100%, rgba(8, 22, 30, 0.3) 0%, transparent 76%);
  }
}

/* Alta v364: todas las opciones y el botón principal caben en una pantalla móvil. */
.personalize-page.first-setup {
  padding-top: 8px;
  padding-bottom: 22px;
}

.personalize-page.first-setup .personalize-intro {
  margin-bottom: 13px;
}

.personalize-page.first-setup .personalize-intro h1 {
  margin-top: 2px;
}

.personalize-page.first-setup .module-preferences-form {
  gap: 10px;
}

.personalize-page.first-setup .module-choice {
  min-height: 82px;
  gap: 5px;
  padding: 8px 6px;
}

.personalize-page.first-setup .module-choice-icon {
  width: 35px;
  height: 35px;
}

.personalize-page.first-setup .module-choice-icon .app-glyph {
  width: 20px;
  height: 20px;
}

.module-choice-copy small {
  display: block;
  margin-top: 3px;
  color: #8a9aa2;
  font-size: 11px;
  font-weight: 450;
  line-height: 1.15;
}

.module-choice.is-unavailable {
  border-color: rgba(72, 91, 101, 0.08);
  background: rgba(231, 235, 237, 0.68);
  color: #82929a;
  cursor: default;
}

.module-choice.is-unavailable .module-choice-icon {
  background: rgba(255, 255, 255, 0.58);
  color: #96a3a9;
  box-shadow: none;
}

.module-choice.is-unavailable:active {
  transform: none;
}

.personalize-page.first-setup .module-save-button {
  position: static;
  min-height: 50px;
  margin-top: 2px;
}

/* Ajustes derivados de la prueba real. */
.profile-page-heading .profile-edit-button {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.profile-page-heading .profile-edit-button .app-glyph {
  width: 19px;
  height: 19px;
}

.deworming-page .administered-vaccine-list > .empty-state {
  width: 100%;
  min-height: 190px;
  margin-inline: auto;
}

.visit-date-control {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #dbe5ea;
  border-radius: 10px;
  background: #fff;
}

.visit-date-control strong {
  color: #284d61;
  font-size: 14px;
  font-weight: 600;
}

.visit-coverage span,
.visit-add-grid button {
  line-height: 1.35;
  white-space: normal;
}

.profile-choice-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-choice-field legend {
  margin-bottom: 7px;
  color: #536e7c;
  font-size: 13px;
  font-weight: 600;
}

.profile-choice-field > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-choice-field label {
  position: relative;
  display: flex;
  min-height: 44px;
  flex: 1 1 108px;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #dbe5ea;
  border-radius: 10px;
  background: #fff;
  color: #536e7c;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.profile-choice-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-choice-field label:has(input:checked) {
  border-color: #5da9c7;
  background: #edf7fa;
  color: #205c75;
  box-shadow: inset 0 0 0 1px rgba(39, 141, 184, 0.28);
}

.profile-choice-field label > span {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 620px) {
  .personalize-page.first-setup .module-choice-grid {
    gap: 7px;
  }
}

/* Scroll handoff: keep controls below the iPhone status area. */
.topbar.home-collapsible,
.topbar.home-collapsible.is-condensed {
  clip-path: none;
  filter: none;
  animation: none;
  transform: translate(-50%, 0);
  will-change: opacity;
  transition: opacity 150ms ease, visibility 150ms;
}
.topbar.home-collapsible::before {
  content: none;
}
.home-header-condensed .home-inline-notification {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 699px) {
  .topbar.home-collapsible {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  .weight-page .weight-chart { width: 100%; min-width: 0; }
  .weight-page .chart-grid text,
  .weight-page .chart-date { font-size: 12px; font-weight: 400; }
  .weight-page .target-line text { font-size: 10px; font-weight: 400; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar.home-collapsible { transition: none; }
}

/* Avisos y Eventos comparten una única agenda por mascota. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.67);
  color: var(--ink);
  box-shadow: 0 3px 11px rgba(63, 83, 94, 0.05);
  backdrop-filter: blur(16px) saturate(1.2);
  cursor: pointer;
}

.notification-button .phosphor-icon {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.app-shell:not(.home-mode) .topbar .notification-button {
  display: none;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #f3f6f8;
  border-radius: 10px;
  background: #d45f55;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notification-badge[hidden] {
  display: none !important;
}

.home-cover-tools {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
}

.home-cover-tools .home-cover-adjust-trigger {
  position: static;
}

.home-cover-notification {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(35, 57, 68, 0.46);
  color: #fff;
  box-shadow: none;
}

.home-cover-notification .notification-badge {
  border-color: rgba(35, 57, 68, 0.82);
}

.home-cover-photo-button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: initial;
  -webkit-tap-highlight-color: transparent;
}

.home-cover-photo-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -6px;
}

.home-now-heading {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-now-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.home-today-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.home-today-title time {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}

.home-inline-notification.notification-button {
  width: 40px;
  height: 40px;
  border-color: rgba(49, 77, 92, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 4px 14px rgba(42, 70, 84, 0.08);
}

.home-inline-notification .notification-badge {
  top: -3px;
  right: -3px;
  border-color: #f3f6f8;
}

.home-deferred-care {
  overflow: hidden;
  border: 1px solid rgba(49, 77, 92, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.home-deferred-care > summary {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: #5f7783;
  cursor: pointer;
  list-style: none;
}

.home-deferred-care > summary::-webkit-details-marker { display: none; }
.home-deferred-care > summary strong { color: var(--ink); font-size: 13px; font-weight: 680; }
.home-deferred-care > summary small { color: var(--blue-deep); font-size: 12px; font-weight: 700; }
.home-deferred-care > summary > i { font-style: normal; transition: transform 180ms ease; }
.home-deferred-care[open] > summary > i { transform: rotate(180deg); }

.home-deferred-list {
  border-top: 1px solid rgba(49, 77, 92, 0.08);
}

.home-deferred-item {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
}

.home-deferred-item + .home-deferred-item { border-top: 1px solid rgba(49, 77, 92, 0.07); }
.home-deferred-item > span { display: grid; min-width: 0; gap: 2px; }
.home-deferred-item > span strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-deferred-item > span small { color: var(--ink-soft); font-size: 11px; }
.home-deferred-item button { padding: 7px 10px; border: 0; border-radius: 9px; background: #e7f3f8; color: var(--blue-deep); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }

.home-priority-queue-count {
  display: block;
  margin-top: 5px;
  color: #718690;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.home-deferred-care > summary > i .app-glyph {
  width: 13px;
  height: 13px;
}

@media (max-width: 699px) {
  .home-cover-card {
    min-height: calc(clamp(205px, 25svh, 240px) + env(safe-area-inset-top, 0px));
    border-radius: 0 0 10px 10px;
  }

  .home-cover-copy {
    bottom: 22px;
  }
}

.notifications-page,
.history-page {
  max-width: 700px;
  margin: 0 auto;
}

.app-shell.notifications-mode {
  padding-top: calc(max(8px, env(safe-area-inset-top)) + 10px);
}

.app-shell.notifications-mode .topbar {
  display: none;
}

.app-shell.search-mode {
  padding-top: calc(max(8px, env(safe-area-inset-top)) + 10px);
}

.app-shell.search-mode .topbar { display: none; }

.notifications-heading {
  align-items: baseline;
  margin-bottom: 18px;
}

.notifications-heading h1 {
  font-size: clamp(25px, 5.8vw, 32px);
  line-height: 1.1;
}

.notifications-heading .text-button {
  flex: 0 0 auto;
  padding-block: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.notification-history-link { margin: 34px 0 0; color: var(--ink-soft); font-size: 12px; text-align: center; }
.notification-history-link button,
.notification-history-back { display: block; margin: 5px auto 0; border: 0; background: transparent; color: #2785aa; font: inherit; font-weight: 700; cursor: pointer; }
.notification-history-back { margin-top: 30px; }

.global-search-page { max-width: 700px; margin: 0 auto; }
.global-search-page > h1 { margin: 0 0 18px; font-size: clamp(27px, 6vw, 34px); }
.global-search-field { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; min-height: 50px; padding: 0 11px 0 14px; border: 1px solid rgba(49, 77, 92, 0.11); border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 5px 18px rgba(39, 68, 82, 0.06); }
.global-search-field > span { color: #6f8793; }
.global-search-field .app-glyph { width: 19px; height: 19px; }
.global-search-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 400; }
.global-search-field input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.global-search-field input::placeholder { color: #8a9aa2; font-weight: 400; opacity: 1; }
.global-search-field button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #edf2f4; color: #738892; }
.global-search-field button.hidden { visibility: hidden; }
.global-search-field button .app-glyph { width: 14px; height: 14px; }
.global-search-pets { display: flex; gap: 8px; margin: 14px 0 28px; overflow-x: auto; scrollbar-width: none; }
.global-search-pets::-webkit-scrollbar { display: none; }
.global-search-pets button { display: flex; flex: 0 0 auto; min-height: 34px; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid rgba(49,77,92,.09); border-radius: 17px; background: #fff; color: #657b86; font: inherit; font-size: 11px; font-weight: 700; }
.global-search-pets button.active { border-color: #278fba; background: #e8f5fa; color: #176f96; }
.global-search-pets i { display: grid; width: 22px; height: 22px; place-items: center; overflow: hidden; border-radius: 50%; font-style: normal; }
.global-search-pets i > :is(.pet-image,.pet-avatar-placeholder) { width: 100%; height: 100%; border-radius: 50%; }
.global-search-pets i > .pet-image { object-fit: cover; }
.global-search-pets i .app-glyph { width: 13px; height: 13px; }
.global-search-results-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.global-search-results-head h2 { margin: 0; font-size: 16px; }
.global-search-results-head span { color: var(--ink-soft); font-size: 12px; }
.global-search-date-groups { display: grid; gap: 20px; }
.global-search-date-group > h3 { margin: 0 4px 8px; color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.global-search-results { overflow: hidden; border: 1px solid rgba(49,77,92,.1); border-radius: 12px; background: rgba(255,255,255,.9); }
.global-search-result { display: grid; width: 100%; min-height: 76px; grid-template-columns: 42px minmax(0,1fr) 14px; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-bottom: 1px solid rgba(49,77,92,.09); background: transparent; color: var(--ink); font: inherit; text-align: left; }
.global-search-result:last-child { border-bottom: 0; }
.global-search-result-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: #e9f5fa; color: #2589b3; }
.global-search-result-icon.type-vaccine { background:#f1eef8;color:#7664a5 }.global-search-result-icon.type-deworming{background:#eaf6f0;color:#438e6b}.global-search-result-icon.type-expense{background:#fff1e8;color:#b87546}.global-search-result-icon.type-document{background:#eef0fb;color:#655ec0}
.global-search-result-icon .app-glyph { width: 22px; height: 22px; }
.global-search-result-copy { display: grid; min-width: 0; gap: 2px; }
.global-search-result-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy small { color: var(--ink-soft); font-size: 10px; }
.global-search-result-copy span { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #55717e; font-size: 10px; font-weight: 700; }
.global-search-result-copy i { display: grid; width: 18px; height: 18px; place-items: center; overflow: hidden; border-radius: 50%; font-style: normal; }
.global-search-result-copy i > :is(.pet-image,.pet-avatar-placeholder) { width:100%;height:100%;border-radius:50% }.global-search-result-copy i>.pet-image{object-fit:cover}.global-search-result-copy i .app-glyph{width:11px;height:11px}
.global-search-result time { color: #718792; font-size: 10px; white-space: nowrap; }
.global-search-result > b { color: #aab7bd; }.global-search-result > b .app-glyph{width:14px;height:14px}
.global-search-empty { display:grid;justify-items:center;padding:52px 20px;color:var(--ink-soft);text-align:center }.global-search-empty>span .app-glyph{width:34px;height:34px}.global-search-empty h2{margin:12px 0 4px;font-size:17px}.global-search-empty p{margin:0;font-size:12px}

.notification-pet-filters {
  display: flex;
  gap: 10px;
  margin: 0 -4px 30px;
  padding: 4px 4px 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.notification-pet-filters::-webkit-scrollbar { display: none; }

.notification-pet-filter {
  display: grid;
  flex: 0 0 68px;
  justify-items: center;
  gap: 7px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

.notification-pet-filter strong {
  max-width: 68px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-filter-avatar {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #e8f1f5;
  box-shadow: 0 0 0 3px transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.notification-filter-avatar > :is(.pet-image, .pet-avatar-placeholder) {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.notification-filter-avatar > .pet-image { object-fit: cover; }
.notification-filter-avatar > .pet-avatar-placeholder { display: grid; place-items: center; }
.notification-filter-avatar > .pet-avatar-placeholder .app-glyph { width: 27px; height: 27px; }

.notification-filter-all {
  background: #e6f4fa;
  color: #2589b3;
}

.notification-filter-all > .app-glyph { width: 27px; height: 27px; }

.notification-filter-avatar > i {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #f3f6f8;
  border-radius: 10px;
  background: #d45f55;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.notification-pet-filter.active { color: var(--ink); }
.notification-pet-filter.active .notification-filter-avatar {
  border-color: #fff;
  box-shadow: 0 0 0 2px #2996c2;
  transform: translateY(-1px);
}

.notification-category-groups { display: grid; gap: 28px; }
.notification-category-groups .notification-group + .notification-group { margin-top: 0; }

.notification-category-heading {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  color: var(--ink-soft);
}

.notification-category-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.notification-category-heading span { font-size: 12px; }

.notification-group + .notification-group {
  margin-top: 30px;
}

.notification-group > h2,
.home-now-panel > h2,
.home-next-panel > h2,
.history-agenda-section > h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.notification-list {
  overflow: hidden;
  border: 1px solid rgba(49, 77, 92, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}

.notification-swipe-shell {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.notification-swipe-shell + .notification-swipe-shell {
  border-top: 1px solid rgba(49, 77, 92, 0.09);
}

.notification-row-actions {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  width: 146px;
  grid-template-columns: repeat(2, 73px);
  pointer-events: none;
}

.notification-swipe-shell.actions-revealed .notification-row-actions { pointer-events: auto; }

.notification-row-actions button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 6px;
  border: 0;
  background: #6f8793;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.notification-row-actions button.danger { background: #d45f55; }
.notification-row-actions .app-glyph { width: 20px; height: 20px; }

.notification-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 14px;
  border: 0;
  z-index: 1;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}

.notification-swipe-shell.actions-revealed .notification-row { transform: translateX(-146px); }
.notification-swipe-shell.is-swiping .notification-row { transition: none; }

.notification-row + .notification-row {
  border-top: 1px solid rgba(49, 77, 92, 0.09);
}

.notification-row.is-unread::before {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d45f55;
  box-shadow: 0 0 0 3px rgba(212, 95, 85, 0.1);
  content: "";
}

.notification-row-icon,
.history-agenda-icon,
.home-next-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 10px;
  background: #e9f5fa;
  color: #2589b3;
}

.notification-row-icon.type-vaccine,
.history-agenda-icon.type-vaccine,
.home-next-icon.type-vaccine { background: #f1eef8; color: #7664a5; }
.notification-row-icon.type-deworming,
.history-agenda-icon.type-deworming,
.home-next-icon.type-deworming { background: #eaf6f0; color: #438e6b; }
.notification-row-icon .app-glyph,
.history-agenda-icon .app-glyph,
.home-next-icon .app-glyph { width: 24px; height: 24px; }

.notification-row.with-pet { grid-template-columns: 46px minmax(0, 1fr) auto 16px; }

.notification-row-identity {
  display: flex;
  width: max-content;
  align-items: center;
}

.notification-row.with-pet .notification-row-icon,
.notification-row.with-pet .notification-row-pet-photo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
}

.notification-row.with-pet .notification-row-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 10px;
  box-shadow: none;
}

.notification-row-pet-photo {
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-left: -10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e8f1f5;
  box-shadow: 0 2px 8px rgba(32, 61, 76, 0.16);
  font-style: normal;
}

.notification-row-pet-photo > :is(.pet-image, .pet-avatar-placeholder) {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.notification-row-pet-photo > .pet-image { object-fit: cover; }
.notification-row-pet-photo .pet-avatar-placeholder { display: grid; place-items: center; }
.notification-row-pet-photo .app-glyph { width: 21px; height: 21px; }

.notification-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.notification-row-copy strong { font-size: 15px; }
.notification-row-copy small,
.notification-row-copy time { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.notification-row-copy time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #357b99;
  font-weight: 700;
}
.notification-row-pet-name {
  color: #365766;
  font-size: 10px;
  font-weight: 800;
}
.notification-row-copy time span { color: #357b99; }
.notification-row-pet-context {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: #526f7d;
  font-size: 10px;
}
.notification-row-pet-context i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #e8f1f5;
  box-shadow: 0 0 0 1px rgba(49, 77, 92, 0.1);
  font-style: normal;
}
.notification-row-pet-context i > :is(.pet-image, .pet-avatar-placeholder) { width: 100%; height: 100%; border-radius: 50%; }
.notification-row-pet-context i > .pet-image { object-fit: cover; }
.notification-row-pet-context i .app-glyph { width: 12px; height: 12px; }
.notification-row-pet-context b { font-weight: 700; }
.notification-row-when {
  display: grid;
  min-width: 54px;
  justify-items: end;
  gap: 2px;
  padding-right: 2px;
  text-align: right;
}
.notification-row-when strong { color: var(--ink-soft); font-size: 10px; font-weight: 600; }
.notification-row-when small { color: var(--ink-soft); font-size: 10px; }
.notification-row-when.is-medication-time strong { color: #2b7f9f; font-size: 14px; font-weight: 750; }
.notification-row-when.is-secondary-date { align-self: start; padding-top: 4px; }
.notification-row-when .notification-row-result { color: #4b9873; font-weight: 700; }
.notification-row-state { color: #a4574e; font-size: 11px; font-weight: 750; white-space: nowrap; }
.notification-row-state.is-complete { color: #438e6b; }
.notification-row-state.is-dismissed { color: var(--ink-soft); }
.notification-row-chevron .app-glyph { width: 15px; height: 15px; }

.notifications-empty {
  display: grid;
  justify-items: center;
  padding: 62px 24px;
  color: var(--ink-soft);
  text-align: center;
}

.notifications-empty > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: #e9f5fa;
  color: #2589b3;
}
.notifications-empty .app-glyph { width: 29px; height: 29px; }
.notifications-empty h2 { margin: 16px 0 6px; color: var(--ink); font-size: 20px; }
.notifications-empty p { max-width: 360px; margin: 0; line-height: 1.55; }

.home-now-panel,
.home-next-panel {
  display: grid;
}

.home-now-empty,
.home-next-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid rgba(49, 77, 92, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.home-now-empty > span:first-child,
.home-next-empty > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e9f6f0;
  color: #3f966d;
  font-size: 20px;
}

.home-now-empty > span:last-child,
.home-next-empty > span:last-child { display: grid; gap: 3px; }
.home-now-empty small,
.home-next-empty small { color: var(--ink-soft); }

.home-next-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid rgba(49, 77, 92, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.home-next-card > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.home-next-card small { color: var(--ink-soft); line-height: 1.4; }
.home-next-card time { color: #287ea5; font-size: 12px; font-weight: 750; white-space: nowrap; }
.home-next-card > i .app-glyph { width: 15px; height: 15px; }

.history-view-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.history-agenda-view {
  display: grid;
  gap: 32px;
}

.history-agenda-day + .history-agenda-day { margin-top: 18px; }
.history-agenda-day > h3 {
  margin: 0 0 8px 4px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.history-agenda-day > div {
  overflow: hidden;
  border: 1px solid rgba(49, 77, 92, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}

.history-agenda-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 13px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.history-agenda-row + .history-agenda-row { border-top: 1px solid rgba(49, 77, 92, 0.09); }
.history-agenda-copy { display: grid; min-width: 0; gap: 4px; }
.history-agenda-copy small { color: var(--ink-soft); line-height: 1.4; }
.history-agenda-row time { color: #287ea5; font-size: 12px; font-weight: 750; }
.history-agenda-row > i .app-glyph { width: 15px; height: 15px; }
.history-agenda-empty { margin: 0; padding: 18px; border-radius: 10px; background: rgba(255,255,255,.7); color: var(--ink-soft); }

@media (max-width: 520px) {
  .history-agenda-row,
  .home-next-card { grid-template-columns: 42px minmax(0, 1fr) 14px; gap: 10px; }
  .notification-row,
  .notification-row.with-pet { grid-template-columns: 42px minmax(0, 1fr) auto 14px; gap: 10px; }
  .notification-row.with-pet .notification-row-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .notification-row-icon,
  .history-agenda-icon,
  .home-next-icon { width: 42px; height: 42px; }
  .notification-row-chevron { grid-column: 4; grid-row: 1; }
  .history-agenda-row time,
  .home-next-card time { grid-column: 2; }
  .history-agenda-row > i,
  .home-next-card > i { grid-column: 3; grid-row: 1 / span 2; }
}

/* Final medication editor layout: one compact visual surface, no wizard residue. */
#addDialog.unified-add-dialog .visual-medication-form > input[name="durationMode"],
#addDialog.unified-add-dialog .visual-medication-form .duration-choice-row > input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#addDialog.unified-add-dialog .visual-medication-form {
  display: grid;
  gap: 0;
  padding: 0 10px 10px;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-medication-row {
  grid-template-columns: 175px minmax(0, 1fr);
  min-height: 96px;
  padding: 16px 20px;
}

#addDialog.unified-add-dialog .visual-medication-form .dose-choice-row { min-height: 96px; }
#addDialog.unified-add-dialog .visual-medication-form .dose-choice-row { position: relative; z-index: 8; }

#addDialog.unified-add-dialog .visual-medication-form .visual-dose-controls {
  display: grid;
  grid-template-columns: minmax(118px, .85fr) minmax(250px, 2fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-dose-unit select {
  width: 100%;
  min-height: 56px;
  padding: 0 34px 0 13px;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #294b5d;
  background-color: #fff;
  font-size: 14px;
  font-weight: 600;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-dose-unit { display: block; min-width: 0; }

.medication-dose-unit-picker { position: relative; min-width: 0; }
#addDialog .medication-dose-unit-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.medication-dose-unit-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 0 12px 0 14px;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #294b5d;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.medication-dose-unit-trigger i { display: grid; color: #607c8b; transition: transform 150ms ease; }
.medication-dose-unit-trigger i svg { width: 16px; height: 16px; }
.medication-dose-unit-trigger[aria-expanded="true"] { border-color: #48a9ce; box-shadow: 0 0 0 3px rgba(34,151,197,.12); }
.medication-dose-unit-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.medication-dose-unit-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  width: max(184px, 100%);
  max-height: 286px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #dbe5ea;
  border-radius: 14px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 16px 38px rgba(25,61,80,.2);
}
.medication-dose-unit-options.hidden { display: none; }
.medication-dose-unit-options > button {
  display: block;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: #294b5d;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.medication-dose-unit-options > button:hover,
.medication-dose-unit-options > button:focus-visible { outline: 0; background: #edf7fb; }
.medication-dose-unit-options > button[aria-selected="true"] { color: #1389b7; background: #e7f5fb; font-weight: 700; }

.adaptive-dose-control { min-width: 0; }

.adaptive-dose-control .visual-custom-field {
  grid-column: auto;
  margin: 10px 0 0;
}

.adaptive-dose-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #294b5d;
  background: #fff;
  cursor: pointer;
}

.adaptive-dose-trigger strong {
  color: #1489b8;
  font-size: 18px;
  font-weight: 650;
  text-align: center;
}

.adaptive-dose-trigger i { display: grid; width: 18px; height: 18px; color: #78909d; }
.adaptive-dose-trigger i svg { width: 18px; height: 18px; }
.adaptive-dose-trigger:focus-visible { outline: 3px solid rgba(21,155,210,.18); outline-offset: 2px; }

.inline-dose-picker {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid #dce7ec;
  border-radius: 15px;
  background: #f7fbfd;
  box-shadow: 0 10px 28px rgba(26, 67, 87, .08);
}

.inline-dose-picker.hidden { display: none; }

.inline-dose-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #607887;
  font-size: 12px;
  font-weight: 620;
}

.inline-dose-picker-heading button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 7px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #607887;
  background: #eaf1f4;
  cursor: pointer;
}

.inline-dose-picker-heading svg { width: 16px; height: 16px; }
.inline-dose-picker .dose-wheel-picker { height: 176px; margin: 0 auto 8px; }
.inline-dose-picker .time-wheel { height: 176px; padding: 66px 0; }
.inline-dose-picker .time-wheel-highlight { top: 66px; }

.inline-dose-picker-done {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: #199bd0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.dose-wheel-picker {
  grid-template-columns: minmax(0, 1fr) 72px;
  width: min(100%, 270px);
}

.dose-wheel-picker.has-decimals {
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, .72fr) 72px;
  width: min(100%, 330px);
}

.dose-wheel-unit {
  position: relative;
  z-index: 2;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.record-field-form .adaptive-medication-dose {
  grid-template-columns: minmax(128px, .9fr) minmax(170px, 1.1fr);
  margin-top: 8px;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-time-control .medication-time-field {
  width: min(210px, 100%);
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days > button {
  position: relative !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid #cfdae0 !important;
  border-radius: 50% !important;
  color: #1698cb !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days > button::before,
#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days > button:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #1698cb;
  transform: translate(-50%, -50%);
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days > button:last-child::after {
  width: 2px;
  height: 16px;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days > label {
  position: static !important;
  display: grid !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-items: center !important;
  gap: 3px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control input[name="durationDays"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control strong,
#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control strong [data-medication-duration-number],
#addDialog.unified-add-dialog .visual-medication-form .visual-duration-control strong [data-medication-duration-unit] {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#addDialog.unified-add-dialog .visual-medication-form .guided-actions {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#addDialog.unified-add-dialog .visual-medication-form .guided-actions .guided-primary-button {
  width: 100% !important;
  min-height: 60px !important;
  border-radius: 13px !important;
  background: #184c61 !important;
}

@media (max-width: 600px) {
  #addDialog.unified-add-dialog .visual-medication-form { padding: 0 0 8px; }
  #addDialog.unified-add-dialog .visual-medication-form .visual-medication-row {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 16px;
  }
  #addDialog.unified-add-dialog .visual-medication-form .visual-dose-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }
  #addDialog.unified-add-dialog .visual-medication-form .visual-dose-unit,
  #addDialog.unified-add-dialog .visual-medication-form .medication-dose-unit-trigger,
  #addDialog.unified-add-dialog .visual-medication-form .dose-choice-group {
    width: 100%;
  }
  #addDialog.unified-add-dialog .visual-medication-form .dose-choice-group {
    gap: 8px;
  }
  #addDialog.unified-add-dialog .visual-medication-form .dose-choice-group span {
    min-height: 54px;
  }
  .record-field-form .adaptive-medication-dose { grid-template-columns: 1fr; }
  .saved-inline-dose { grid-template-columns: 1fr; }
  #addDialog.unified-add-dialog .visual-medication-form .visual-duration-control.medication-duration-days { grid-column: 1; }
}

/* Selecciones inline consistentes: compactas, legibles y sin controles nativos gigantes. */
.saved-inline-checks label {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 9px 11px;
  cursor: pointer;
}

.saved-inline-checks input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.saved-inline-checks label::before {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #aebcc4;
  border-radius: 7px;
  color: #fff;
  background: #fff;
  content: "";
  font-size: 14px;
  font-weight: 800;
}

.saved-inline-checks label:has(input:checked) {
  border-color: #62b4d8;
  background: #eef8fc;
}

.saved-inline-checks label:has(input:checked)::before {
  border-color: #2f9ac8;
  background: #2f9ac8;
  content: "✓";
}

.saved-inline-checks label > span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #35596b;
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 600px) {
  .saved-inline-checks:not(.compact) { grid-template-columns: 1fr; }
  .saved-inline-checks.compact { gap: 8px; }
}

/* Frecuencia y duración: selectores únicos para alta y edición. */
.medication-frequency-select {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid #d2dce2;
  border-radius: 13px;
  color: #24485c;
  background: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.medication-duration-editor {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.medication-duration-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.medication-duration-mode label {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.medication-duration-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.medication-duration-mode span {
  display: grid;
  min-height: 48px;
  padding: 8px 12px;
  place-items: center;
  border: 1px solid #d4dfe5;
  border-radius: 12px;
  color: #55717f;
  background: #fff;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.medication-duration-mode input:checked + span {
  border-color: #48a9d2;
  color: #187fac;
  background: #eaf7fc;
  box-shadow: inset 0 0 0 1px rgba(72, 169, 210, .08);
}

.medication-duration-date {
  display: grid;
  gap: 6px;
}

.medication-duration-date.hidden {
  display: none;
}

.medication-duration-date > small {
  padding: 0 3px;
  color: #66808e;
  font-size: 12px;
}

.saved-inline-edit-form .medication-duration-editor,
.record-field-form .medication-duration-editor {
  padding: 0;
}

.saved-confirmation-actions > button,
.saved-confirmation-actions .guided-primary-button,
.saved-confirmation-actions .saved-close-button {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box;
}

/* Transición continua entre el formulario y su confirmación. */
#addDialogContent.is-transitioning-to-confirmation {
  pointer-events: none;
  animation: confirmation-form-out 180ms cubic-bezier(.4, 0, 1, 1) both;
}

.save-confirmation-dialog .confirmation-heading {
  animation: confirmation-header-in 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.save-confirmation-dialog .record-save-confirmation {
  animation: confirmation-panel-in 380ms cubic-bezier(.22, 1, .36, 1) both;
}

.record-save-confirmation > .saved-pet-name,
.record-save-confirmation > h2,
.record-save-confirmation > .saved-record-summary,
.record-save-confirmation > .saved-confirmation-actions,
.record-save-confirmation > .guided-primary-button {
  opacity: 0;
  transform: translateY(8px);
  animation: confirmation-copy-in 380ms cubic-bezier(.22, 1, .36, 1) both;
}

.record-save-confirmation > .saved-pet-name { animation-delay: 90ms; }
.record-save-confirmation > h2 { animation-delay: 130ms; }
.record-save-confirmation > .saved-record-summary { animation-delay: 190ms; }
.record-save-confirmation > .saved-confirmation-actions,
.record-save-confirmation > .guided-primary-button { animation-delay: 250ms; }

/* Primero se confirma la acción y después queda visible la mascota. */
.save-pet-photo {
  visibility: visible;
  opacity: 0;
  transform: scale(.8);
  animation: save-photo-after-check 2.05s cubic-bezier(.22, 1, .36, 1) both;
}

.save-success-layer {
  opacity: 0;
  transform: scale(.8);
  animation: save-check-before-photo 2.05s cubic-bezier(.22, 1, .36, 1) both;
}

.save-success-layer .save-drawn-check path {
  animation: save-check-draw-first 2.05s cubic-bezier(.4, 0, .2, 1) both;
}

.save-record-type-badge {
  animation: save-badge-after-photo 2.05s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes confirmation-form-out {
  to { opacity: 0; transform: translateY(-7px) scale(.992); }
}

@keyframes confirmation-header-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes confirmation-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes confirmation-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes save-check-before-photo {
  0% { opacity: 1; transform: scale(.8); }
  12%, 54% { opacity: 1; transform: scale(1); }
  68%, 100% { opacity: 0; transform: scale(.82); }
}

@keyframes save-check-draw-first {
  0%, 10% { stroke-dashoffset: 48; }
  36%, 100% { stroke-dashoffset: 0; }
}

@keyframes save-photo-after-check {
  0%, 55% { opacity: 0; transform: scale(.8); }
  72% { opacity: 1; transform: scale(1.035); }
  84%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes save-badge-after-photo {
  0%, 55% { opacity: 0; transform: scale(.8); }
  72% { opacity: 1; transform: scale(1.035); }
  84%, 100% { opacity: 1; transform: scale(1); }
}

.record-save-confirmation.is-settled .save-pet-photo {
  visibility: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

.record-save-confirmation.is-settled .save-success-layer {
  opacity: 0;
  transform: scale(.82);
  animation: none;
}

.record-save-confirmation.is-settled .save-record-type-badge {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #addDialogContent.is-transitioning-to-confirmation,
  .save-confirmation-dialog .confirmation-heading,
  .save-confirmation-dialog .record-save-confirmation,
  .record-save-confirmation > .saved-pet-name,
  .record-save-confirmation > h2,
  .record-save-confirmation > .saved-record-summary,
  .record-save-confirmation > .saved-confirmation-actions,
  .record-save-confirmation > .guided-primary-button {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .save-pet-photo { visibility: visible; opacity: 1; transform: none; animation: none; }
  .save-success-layer { opacity: 0; animation: none; }
  .save-record-type-badge { opacity: 1; transform: none; animation: none; }
}
/* Citas previstas y visitas realizadas */
.appointments-entry {
  display: flex; align-items: center; gap: 13px; width: 100%; margin: 18px 0 20px;
  padding: 16px 18px; border: 1px solid #e0e8ec; border-radius: 16px;
  background: #fff; color: #25495b; text-align: left; font: inherit; font-size: 16px; cursor: pointer;
}
.appointments-entry > span:first-child { display: grid; place-items: center; width: 35px; height: 35px; color: #318aab; background: #e9f4f8; border-radius: 10px; }
.appointments-entry > span:first-child .app-glyph { width: 20px; height: 20px; }
.appointments-entry > span:nth-child(2) { flex: 1; }
.appointments-entry > i .app-glyph { width: 16px; height: 16px; }
.visits-page .page-heading { align-items: end; }
.visits-back { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 10px; padding: 0; border: 0; background: none; color: #538093; font: inherit; font-size: 14px; cursor: pointer; }
.visits-back .app-glyph { width: 15px; height: 15px; }
.visits-add { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 13px; background: #e3f1f6; color: #2f87a8; cursor: pointer; }
.visits-add .app-glyph { width: 22px; height: 22px; }
.visits-tabs { display: flex; gap: 7px; margin: 22px 0 14px; padding: 5px; background: #e8eff2; border-radius: 14px; }
.visits-tabs button { flex: 1; padding: 10px 5px; border: 0; border-radius: 10px; background: transparent; color: #5d7380; font: inherit; font-size: 14px; cursor: pointer; }
.visits-tabs button.active { background: #fff; color: #25495b; box-shadow: 0 2px 8px rgba(32, 64, 81, .08); }
.visit-list { overflow: hidden; border: 1px solid #e0e8ec; border-radius: 17px; background: #fff; }
.visit-list-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px; border: 0; background: transparent; color: #274659; text-align: left; font: inherit; cursor: pointer; }
.visit-list-row + .visit-list-row { border-top: 1px solid #eaf0f2; }
.visit-list-date { display: grid; min-width: 86px; gap: 3px; color: #2d7897; font-size: 13px; }
.visit-list-date strong, .visit-list-copy strong { font-weight: 600; }
.visit-list-date small, .visit-list-copy small { color: #6a808b; font-size: 13px; }
.visit-list-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.visit-list-copy strong { font-size: 16px; line-height: 1.35; }
.visit-list-overdue { color: #a45a51 !important; }
.visit-list-row > i .app-glyph { width: 16px; height: 16px; color: #8ca0aa; }
.visits-empty { margin: 34px 0; color: #718793; text-align: center; font-size: 15px; }
.visits-secondary-add { display: block; margin: 20px auto; padding: 10px 15px; border: 1px solid #d9e5ea; border-radius: 11px; background: #fff; color: #2d7897; font: inherit; font-size: 14px; cursor: pointer; }
.appointment-form { display: grid; gap: 18px; padding: 20px 2px 28px; }
.appointment-form label, .visit-next-appointment label, .visit-time-field { display: grid; gap: 7px; color: #4d6978; font-size: 14px; font-weight: 500; }
.appointment-form label small, .visit-next-appointment h3 small, .visit-time-field small { display: inline; color: #8295a0; font-size: 13px; font-weight: 400; }
.appointment-form input, .appointment-form select, .appointment-form textarea, .visit-next-appointment input, .visit-next-appointment select, .visit-time-field input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #d9e3e7; border-radius: 11px; background: #fff; color: #254659; font: inherit; font-size: 16px; }
.appointment-form textarea { min-height: 90px; resize: vertical; }
.appointment-form-date { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, .55fr); gap: 12px; }
.appointment-form .guided-primary-button { min-height: 49px; margin-top: 6px; }
.appointment-detail-actions { display: grid; gap: 9px; padding: 18px 0 6px; }
.appointment-detail-actions button { min-height: 47px; border: 1px solid #dce5e9; border-radius: 11px; background: #fff; color: #356b83; font: inherit; font-size: 15px; cursor: pointer; }
.appointment-detail-actions .appointment-primary-action { border-color: #2d86a9; background: #2d86a9; color: #fff; }
.appointment-confirm-question { margin: 20px 0 0; color: #274659; font-size: 16px; }
.visit-time-field { margin: 10px 0 16px; }
.visit-next-appointment { margin: 24px 0 0; padding: 18px; border: 1px solid #e1e9ec; border-radius: 14px; background: #fff; }
.visit-next-appointment h3 { margin: 0 0 13px; color: #274659; font-size: 16px; font-weight: 600; }
.visit-next-appointment > label { margin-top: 13px; }
@media (max-width: 550px) {
  .visit-list-row { gap: 12px; padding: 16px 13px; }
  .visit-list-date { min-width: 77px; }
  .appointment-form-date { grid-template-columns: minmax(0, 1fr) minmax(100px, .58fr); }
}