/* ---------------------------------------------------------------
   Kafot · hoja de estilos
   Dos capas: "heredado" es lo que había, "sistema" es el diseño nuevo.
   Al estar declarada después, la capa sistema manda sin necesidad de
   !important y sin tener que borrar lo viejo de golpe.
   --------------------------------------------------------------- */
@layer heredado, sistema;

@layer heredado {
:root {
  --forest: #4d6b50;
  --moss: #7d9a71;
  --paper: #f7f2e8;
  --paper-strong: #fffaf0;
  --earth: #b8865b;
  --stone: #6d6d6d;
  --found: #f4a261;
  --lost: #e76f51;
  --ink: #24352a;
  --line: rgba(77, 107, 80, 0.18);
  --shadow: 0 16px 38px rgba(54, 62, 45, 0.12);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(244, 162, 97, 0.16), transparent 34rem),
    linear-gradient(180deg, #fbf6ec 0%, var(--paper) 46%, #edf4e8 100%);
}

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

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
  padding-bottom: 84px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(77, 107, 80, 0.1);
  background: rgba(247, 242, 232, 0.88);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(77, 107, 80, 0.18);
}

.brand strong {
  display: block;
  line-height: 1.05;
}

.brand span {
  display: block;
  color: var(--stone);
  font-size: 0.73rem;
}

.page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 74vh;
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: 22px;
  border-radius: 0 0 32px 32px;
  color: #fffdf5;
  background:
    linear-gradient(160deg, rgba(36, 53, 42, 0.28), rgba(36, 53, 42, 0.08)),
    linear-gradient(145deg, #4d6b50 0%, #7d9a71 58%, #b8865b 100%);
  box-shadow: var(--shadow);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  left: -8%;
  right: -8%;
  bottom: -5px;
  height: 38%;
  background:
    radial-gradient(120% 95% at 18% 100%, #f7f2e8 0 41%, transparent 42%),
    radial-gradient(110% 90% at 58% 100%, #fff8e6 0 46%, transparent 47%),
    radial-gradient(95% 80% at 92% 100%, #e8ead6 0 48%, transparent 49%);
}

.hero::after {
  inset: 0;
  opacity: 0.2;
  background-image:
    radial-gradient(circle, #fffaf0 0 3px, transparent 4px),
    radial-gradient(ellipse, #fffaf0 0 8px, transparent 9px);
  background-position: 24px 72px, 85% 34%;
  background-size: 88px 88px, 160px 160px;
}

.hero-content,
.hero-actions,
.hero-stats {
  position: relative;
  z-index: 1;
}

.hero-logo {
  width: 112px;
  height: 112px;
  border: 6px solid rgba(255, 250, 240, 0.42);
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(22, 34, 25, 0.24);
}

.hero h1 {
  margin: 18px 0 4px;
  max-width: 760px;
  font-size: clamp(2.2rem, 9vw, 5.3rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 253, 245, 0.9);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

.hero-animals {
  position: absolute;
  right: 18px;
  bottom: 18%;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: 8px;
  opacity: 0.92;
}

.animal-shape {
  position: relative;
  width: 76px;
  height: 54px;
  border-radius: 45% 55% 42% 44%;
  background: #fffaf0;
  box-shadow: 0 10px 24px rgba(36, 53, 42, 0.16);
}

.animal-shape::before,
.animal-shape::after {
  content: "";
  position: absolute;
  background: #fffaf0;
}

.animal-shape::before {
  width: 32px;
  height: 34px;
  right: -14px;
  top: 8px;
  border-radius: 45% 55% 50% 48%;
}

.animal-shape::after {
  width: 32px;
  height: 7px;
  left: -24px;
  top: 12px;
  border-radius: 99px;
  transform: rotate(-26deg);
}

.animal-shape.cat {
  width: 58px;
  height: 48px;
  background: #24352a;
}

.animal-shape.cat::before {
  right: -8px;
  top: 2px;
  width: 28px;
  height: 34px;
  background: #24352a;
  clip-path: polygon(0 22%, 22% 0, 47% 26%, 76% 0, 100% 30%, 100% 100%, 0 100%);
}

.animal-shape.cat::after {
  background: #24352a;
  transform: rotate(35deg);
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

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

.stat-card,
.feature-button,
.card,
.form-panel,
.admin-panel,
.profile-hero,
.report-card {
  border: 1px solid var(--line);
  background: rgba(255, 250, 240, 0.9);
  box-shadow: var(--shadow);
}

.stat-card {
  min-height: 84px;
  padding: 13px;
  border-radius: var(--radius);
}

.stat-card strong {
  display: block;
  color: var(--forest);
  font-size: 1.55rem;
  line-height: 1;
}

.stat-card span {
  display: block;
  margin-top: 5px;
  color: var(--stone);
  font-size: 0.78rem;
}

.feature-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--forest);
  font-weight: 700;
}

.feature-button.primary {
  border-color: rgba(255, 250, 240, 0.34);
  color: #fffaf0;
  background: rgba(36, 53, 42, 0.2);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 14px;
}

.section-head h2,
.form-panel h2,
.admin-panel h2 {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 2.3rem);
  line-height: 1.08;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--stone);
}

.grid {
  display: grid;
  gap: 14px;
}

.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}

.card,
.report-card {
  overflow: hidden;
  border-radius: var(--radius);
}

.card-photo,
.profile-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e9e0ce;
}

.card-body {
  padding: 14px;
}

.card h3,
.report-card h3 {
  margin: 0 0 7px;
  font-size: 1.1rem;
}

.muted {
  color: var(--stone);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--forest);
  background: rgba(125, 154, 113, 0.16);
  font-size: 0.76rem;
  font-weight: 700;
}

.tag.lost {
  color: #9e3324;
  background: rgba(231, 111, 81, 0.18);
}

.tag.found {
  color: #8b520c;
  background: rgba(244, 162, 97, 0.24);
}

.tag.community {
  color: #5a3b21;
  background: rgba(184, 134, 91, 0.18);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  color: #fffaf0;
  background: var(--forest);
  font-weight: 700;
}

.btn.secondary {
  color: var(--forest);
  background: rgba(77, 107, 80, 0.12);
}

.btn.earth {
  background: var(--earth);
}

.btn.alert {
  background: var(--lost);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.icon-btn {
  width: 44px;
  padding: 0;
  color: var(--forest);
  background: rgba(77, 107, 80, 0.12);
}

.form-panel,
.admin-panel,
.profile-hero {
  padding: 18px;
  border-radius: 24px;
}

.form-grid {
  display: grid;
  gap: 13px;
}

.field {
  display: grid;
  gap: 7px;
}

.form-grid > .full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--forest);
  font-size: 0.86rem;
  font-weight: 700;
}

.field-note {
  margin: -4px 0 2px;
  color: var(--stone);
  font-size: 0.82rem;
  line-height: 1.45;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(77, 107, 80, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  outline: 0;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(125, 154, 113, 0.2);
}

.upload-preview {
  display: grid;
  place-items: center;
  min-height: 170px;
  overflow: hidden;
  border: 1px dashed rgba(77, 107, 80, 0.38);
  border-radius: 18px;
  background: rgba(125, 154, 113, 0.12);
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.profile-hero {
  overflow: hidden;
  padding: 0;
}

.profile-content {
  padding: 16px;
}

.profile-content h1 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1;
}

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

.info-item {
  min-height: 74px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(77, 107, 80, 0.08);
}

.info-item span {
  display: block;
  color: var(--stone);
  font-size: 0.76rem;
}

.info-item strong {
  display: block;
  margin-top: 4px;
}

.bottom-nav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 66px;
  padding: 7px;
  border: 1px solid rgba(77, 107, 80, 0.16);
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.93);
  box-shadow: 0 18px 48px rgba(36, 53, 42, 0.18);
  backdrop-filter: blur(16px);
}

.nav-item {
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  color: var(--stone);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
}

.nav-item.active {
  color: #fffaf0;
  background: var(--forest);
}

.admin-layout {
  display: grid;
  gap: 16px;
}

.admin-menu {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.admin-menu button {
  flex: 0 0 auto;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-access {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--forest);
  background: #fffaf0;
  font-weight: 750;
}

.type-help {
  margin-top: -4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(125, 154, 113, 0.1);
}

.privacy-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(77, 107, 80, .2);
  border-radius: 18px;
  color: var(--forest);
  background: rgba(125, 154, 113, .11);
}

.privacy-notice > svg { flex: 0 0 auto; }
.privacy-notice p { margin: 4px 0 0; color: #536456; font-size: .8rem; line-height: 1.5; }
.privacy-notice.compact { padding: 12px 14px; }

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--forest);
  font-size: 0.78rem;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 94px;
  z-index: 50;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 16px;
  color: #fffaf0;
  background: var(--forest);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: 180ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  color: var(--stone);
  text-align: center;
}

@media (min-width: 720px) {
  .app-shell {
    padding-bottom: 0;
  }

  .topbar {
    padding-inline: 30px;
  }

  .page {
    padding: 30px;
  }

  .hero {
    min-height: 690px;
    padding: 42px;
    border-radius: 32px;
  }

  .hero-actions,
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-animals {
    right: 10%;
    bottom: 20%;
    transform: scale(1.35);
  }

  .form-grid,
  .filters,
  .info-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .field.full,
  .form-actions,
  .profile-content .btn-row {
    grid-column: 1 / -1;
  }

  .profile-hero {
    display: grid;
    grid-template-columns: 44% 1fr;
    align-items: stretch;
  }

  .profile-photo {
    height: 100%;
    aspect-ratio: auto;
  }

  .bottom-nav {
    top: 14px;
    right: 30px;
    bottom: auto;
    left: auto;
    width: 470px;
  }

  .admin-layout {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }

  .admin-menu {
    position: sticky;
    top: 92px;
    display: grid;
    overflow: visible;
  }
}

@media (max-width: 390px) {
  .hero-actions,
  .hero-stats,
  .filters,
  .info-list {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 18px;
  }
}

/* Granada con Patas visual refresh */
.hero-v2 {
  min-height: 650px;
  padding: 26px 20px 22px;
  color: var(--forest);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.96) 0%, rgba(247, 242, 232, 0.9) 42%, rgba(125, 154, 113, 0.72) 100%),
    #f7f2e8;
}

.hero-v2::before {
  height: 34%;
  background:
    radial-gradient(110% 90% at 10% 100%, rgba(77, 107, 80, 0.26) 0 36%, transparent 37%),
    radial-gradient(105% 88% at 52% 100%, rgba(125, 154, 113, 0.28) 0 48%, transparent 49%),
    radial-gradient(96% 74% at 100% 100%, rgba(184, 134, 91, 0.18) 0 45%, transparent 46%);
}

.hero-v2::after {
  opacity: 0.1;
  background-image: radial-gradient(circle, var(--forest) 0 3px, transparent 4px);
}

.hero-v2 .hero-content {
  display: grid;
  justify-items: center;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hero-v2 .hero-logo {
  width: 96px;
  height: 96px;
  border-color: rgba(77, 107, 80, 0.16);
  box-shadow: 0 14px 30px rgba(77, 107, 80, 0.18);
}

.hero-v2 h1 {
  margin-top: 14px;
  color: var(--forest);
  font-size: clamp(2.25rem, 9vw, 4.8rem);
}

.hero-v2 p {
  color: var(--forest);
  font-weight: 600;
}

.hero-v2 .hero-content > span {
  display: block;
  max-width: 500px;
  margin-top: 12px;
  color: #405c45;
  font-size: 0.92rem;
  line-height: 1.55;
}

.hero-landscape {
  position: absolute;
  inset: auto 0 185px;
  z-index: 0;
  height: 185px;
  overflow: hidden;
  pointer-events: none;
}

.hill,
.tree,
.church {
  position: absolute;
  display: block;
}

.hill {
  bottom: 0;
  border-radius: 50% 50% 0 0;
}

.hill-one {
  left: -12%;
  width: 74%;
  height: 132px;
  background: rgba(77, 107, 80, 0.2);
}

.hill-two {
  right: -16%;
  width: 78%;
  height: 154px;
  background: rgba(125, 154, 113, 0.28);
}

.church {
  left: 51%;
  bottom: 18px;
  width: 34px;
  height: 94px;
  background: #fffaf0;
  border: 1px solid rgba(77, 107, 80, 0.24);
  border-radius: 12px 12px 4px 4px;
  box-shadow: 0 16px 30px rgba(77, 107, 80, 0.13);
}

.church::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -34px;
  width: 20px;
  height: 36px;
  background: linear-gradient(145deg, #b8865b 0 48%, #fffaf0 49%);
  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);
}

.church::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 16px;
  width: 10px;
  height: 22px;
  border-radius: 8px 8px 0 0;
  background: var(--forest);
  opacity: 0.75;
}

.tree {
  bottom: 0;
  width: 54px;
  height: 112px;
  background: linear-gradient(90deg, transparent 45%, #7b5f3d 46% 53%, transparent 54%);
}

.tree::before,
.tree::after {
  content: "";
  position: absolute;
  border-radius: 999px 999px 999px 0;
  background: rgba(77, 107, 80, 0.84);
}

.tree::before {
  left: 4px;
  top: 18px;
  width: 42px;
  height: 72px;
  transform: rotate(-28deg);
}

.tree::after {
  right: 0;
  top: 42px;
  width: 36px;
  height: 58px;
  transform: rotate(32deg);
}

.tree-one {
  left: 7%;
}

.tree-two {
  right: 9%;
  transform: scale(0.86);
}

.hero-v2 .hero-animals {
  right: 12%;
  bottom: 31%;
  transform: scale(1.05);
}

.hero-v2 .animal-shape {
  background: #d9a766;
}

.hero-v2 .animal-shape::before,
.hero-v2 .animal-shape::after {
  background: #d9a766;
}

.hero-v2 .animal-shape.cat,
.hero-v2 .animal-shape.cat::before,
.hero-v2 .animal-shape.cat::after {
  background: #f0c27c;
}

.hero-v2 .hero-actions {
  margin-top: 0;
  gap: 12px;
}

.hero-v2 .hero-stats {
  margin-top: 12px;
}

.hero-v2 .feature-button {
  min-height: 92px;
  flex-direction: column;
  border-radius: 14px;
  color: var(--forest);
  background: rgba(255, 250, 240, 0.9);
  text-align: center;
  box-shadow: 0 12px 28px rgba(36, 53, 42, 0.12);
}

.hero-v2 .feature-button.primary {
  color: #fffaf0;
  background: var(--forest);
}

.hero-v2 .feature-button.alert-tile {
  color: #fffaf0;
  background: var(--found);
}

.hero-v2 .stat-card {
  min-height: 86px;
  background: rgba(255, 250, 240, 0.84);
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.feature-strip div {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--forest);
  background: rgba(255, 250, 240, 0.82);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.feature-strip svg {
  width: 30px;
  height: 30px;
}

.app-screen {
  max-width: 760px;
}

.screen-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.15;
  text-align: center;
}

.screen-head p {
  margin: 3px 0 0;
  color: var(--stone);
  font-size: 0.74rem;
  text-align: center;
}

.filter-panel {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.76);
  box-shadow: var(--shadow);
}

.result-summary {
  margin: 18px 0 12px;
  color: var(--forest);
  font-weight: 700;
}

.result-list,
.report-list {
  display: grid;
  gap: 12px;
}

.result-card,
.report-card.compact {
  display: grid;
  grid-template-columns: 96px 1fr 44px;
  align-items: center;
  gap: 12px;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.9);
  box-shadow: var(--shadow);
}

.result-photo,
.report-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
  background: #e9e0ce;
}

.result-info {
  min-width: 0;
}

.result-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.result-title h3 {
  margin: 0;
  font-size: 1rem;
}

.result-info p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
  color: var(--stone);
  font-size: 0.78rem;
}

.result-info .tags {
  margin: 6px 0;
}

.result-open {
  background: rgba(77, 107, 80, 0.1);
}

.profile-page {
  max-width: 660px;
  padding-top: 12px;
}

.profile-v2 {
  display: block;
  border-radius: 24px;
}

.profile-media {
  position: relative;
}

.profile-v2 .profile-photo {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  border-radius: 24px 24px 0 0;
}

.profile-back {
  position: absolute;
  top: 14px;
  left: 14px;
  color: #fffaf0;
  background: rgba(36, 53, 42, 0.58);
}

.photo-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fffaf0;
  background: rgba(36, 53, 42, 0.6);
  font-size: 0.76rem;
  font-weight: 700;
}

.profile-v2 .profile-content {
  padding: 20px;
}

.profile-v2 h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(2rem, 10vw, 3.4rem);
}

.profile-v2 .info-list {
  grid-template-columns: 1fr;
}

.profile-v2 .info-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  column-gap: 8px;
  min-height: 50px;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
}

.profile-v2 .info-item svg {
  grid-row: span 2;
  color: var(--earth);
}

.profile-note {
  color: #3f4b40;
  line-height: 1.55;
}

.profile-actions .btn {
  width: 100%;
}

.outline-alert {
  color: var(--lost);
  border: 1px solid var(--lost);
  background: transparent;
}

.public-url {
  word-break: break-word;
  font-size: 0.75rem;
}

.report-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(77, 107, 80, 0.08);
}

.report-tabs button {
  padding: 10px 8px;
  border: 0;
  border-radius: 12px;
  color: var(--stone);
  background: transparent;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
}

.report-tabs .active {
  color: #fffaf0;
  background: var(--forest);
}

.report-device-note { display: flex; align-items: center; gap: 7px; margin: -4px 0 14px; }

.search-intents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.intent-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--forest);
  background: #fffaf0;
  text-align: left;
}

.intent-card > svg { flex: 0 0 auto; }
.intent-card span { display: grid; gap: 2px; }
.intent-card small { color: var(--stone); line-height: 1.3; }
.intent-card.active { color: #fffaf0; border-color: var(--forest); background: var(--forest); }
.intent-card.active small { color: rgba(255, 250, 240, .78); }
.search-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; color: #67521e; background: #fff1bf; font-size: .84rem; }
.search-note svg { flex: 0 0 auto; }

.admin-primary-actions { margin-top: 10px; }
.edit-photo-field { display: grid; gap: 10px; }
.current-photo { position: relative; width: 144px; }
.current-photo img { width: 144px; height: 144px; border-radius: 20px; object-fit: cover; }
.current-photo span { position: absolute; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 999px; color: #fffaf0; background: rgba(36, 53, 42, .75); font-size: .66rem; }

.report-card.compact {
  grid-template-columns: 76px 1fr 44px;
  min-height: 96px;
}

.report-thumb {
  width: 76px;
  height: 76px;
}

.report-card.compact h3 {
  margin: 0;
  font-size: 0.94rem;
}

.report-card.compact .tags {
  margin: 0 0 4px;
}

.report-form-panel {
  margin-top: 18px;
}

.admin-page {
  max-width: 1180px;
}

.admin-menu-v2 {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--forest), #2f4b35);
  box-shadow: var(--shadow);
}

.admin-menu-v2 img {
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #fffaf0;
}

.admin-menu-v2 .btn.secondary {
  color: #fffaf0;
  background: transparent;
}

.admin-menu-v2 .btn {
  justify-content: flex-start;
}

.admin-menu-v2 .btn:not(.secondary) {
  color: var(--forest);
  background: #fffaf0;
}

.admin-panel {
  background: rgba(255, 250, 240, 0.86);
}

.admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-heading p { margin: 5px 0 0; }
.eyebrow { color: var(--earth); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-stats { margin-top: 14px; }
.admin-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.admin-alert,
.admin-success,
.admin-guide {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 18px;
}

.admin-alert { color: #7a351f; background: #fff0e8; }
.admin-alert p { margin: 2px 0 0; }
.admin-success { color: var(--forest); background: rgba(125, 154, 113, .14); }
.admin-guide { display: grid; color: var(--forest); background: rgba(231, 184, 74, .17); }

.admin-animal-list { display: grid; gap: 14px; }
.admin-animal-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fffaf0; }
.admin-animal-card > img { width: 112px; height: 112px; border-radius: 18px; object-fit: cover; }
.admin-animal-main { min-width: 0; }
.admin-animal-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-animal-title h3 { margin: 0; color: var(--forest); font-size: 1.18rem; }
.admin-animal-title p { margin: 3px 0 0; color: var(--stone); font-size: .84rem; }
.approval-pill { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: #6b5530; background: #fff0c9; font-size: .7rem; font-weight: 800; }
.approval-pill.aprobado { color: var(--forest); background: #deeedb; }
.approval-pill.rechazado { color: #8b321f; background: #ffe0d9; }
.admin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.admin-fields label, .admin-more-grid label { display: grid; gap: 5px; color: var(--stone); font-size: .75rem; font-weight: 700; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.status-actions .btn { min-height: 40px; padding: 8px 11px; }
.admin-more { margin-top: 11px; border-top: 1px solid var(--line); }
.admin-more summary { padding: 11px 0 2px; color: var(--forest); cursor: pointer; font-weight: 750; }
.admin-more-grid { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: end; gap: 12px; padding-top: 11px; }
.admin-more-grid > div { display: grid; gap: 3px; }
.checkbox-line { display: flex !important; align-items: center; padding-bottom: 11px; }
.admin-card-actions { margin-top: 12px; }
.btn.subtle { margin-left: auto; }

.manada-hub {
  margin-top: 34px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 250, 240, .7);
}

.manada-hub .section-head { margin-top: 0; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: #fffaf0;
  text-align: left;
}
.hub-card.is-live, .hub-card.store-card { box-shadow: 0 10px 24px rgba(54, 62, 45, .08); }
.hub-card.is-live:hover, .hub-card.store-card:hover { transform: translateY(-2px); border-color: var(--moss); }
.hub-card > span:nth-child(2) { display: grid; gap: 3px; }
.hub-card small { color: var(--earth); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hub-card strong { color: var(--forest); line-height: 1.15; }
.hub-card em { color: var(--stone); font-size: .78rem; font-style: normal; line-height: 1.35; }
.hub-card.is-next { opacity: .78; }
.hub-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; }
.hub-icon.coral { color: #9b3f2b; background: #ffe0d7; }
.hub-icon.mustard { color: #806119; background: #fff0b7; }
.hub-icon.green { color: #355a3b; background: #dfefdc; }
.hub-icon.blue { color: #275e65; background: #d9f0ef; }
.public-priority-actions { max-width: 620px; }

@media (max-width: 719px) {
  .search-intents { grid-template-columns: 1fr; }
  .manada-hub { padding: 17px; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { min-height: 98px; }
}

@media (max-width: 719px) {
  .admin-access { padding: 0 9px; justify-content: center; font-size: .75rem; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-heading .btn { width: 100%; }
  .admin-animal-card { grid-template-columns: 72px 1fr; padding: 11px; gap: 11px; }
  .admin-animal-card > img { width: 72px; height: 72px; border-radius: 15px; }
  .admin-animal-title { align-items: flex-start; }
  .approval-pill { font-size: .62rem; }
  .admin-fields { grid-template-columns: 1fr; }
  .status-actions { grid-column: 1 / -1; }
  .status-actions .btn { flex: 1 1 100%; }
  .admin-more { grid-column: 1 / -1; }
  .admin-more-grid { grid-template-columns: 1fr; }
  .admin-card-actions .btn { width: 100%; }
  .btn.subtle { margin-left: 0; }
}

@media (min-width: 720px) {
  .hero-v2 .hero-actions.public-priority-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-v2 {
    min-height: 720px;
  }

  .hero-v2 .hero-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .result-card {
    grid-template-columns: 126px 1fr 48px;
  }

  .result-photo {
    width: 126px;
    height: 112px;
  }

  .profile-v2 {
    display: grid;
    grid-template-columns: 44% 1fr;
  }

  .profile-v2 .profile-photo {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 24px 0 0 24px;
  }
}

@media (max-width: 430px) {
  .topbar {
    padding: 10px 14px;
  }

  .brand strong {
    font-size: 0.92rem;
  }

  .hero-v2 {
    min-height: 665px;
    padding-inline: 16px;
  }

  .hero-v2 .hero-actions,
  .hero-v2 .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-v2 .feature-button {
    min-height: 88px;
  }

  .hero-v2 .hero-animals {
    right: 7%;
    bottom: 34%;
    transform: scale(0.92);
  }

  .hero-landscape {
    bottom: 190px;
  }

  .screen-head {
    grid-template-columns: 44px 1fr 74px;
  }

  .screen-head .btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.74rem;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    min-height: 72px;
    padding: 8px;
  }

  .nav-center {
    position: relative;
    transform: translateY(-18px);
    width: 64px;
    height: 64px;
    justify-self: center;
    border-radius: 999px;
    color: #fffaf0;
    background: var(--forest);
    box-shadow: 0 14px 30px rgba(77, 107, 80, 0.28);
  }

  .nav-center span {
    display: none;
  }
}

/* Carné virtual e imprimible */
.auth-page{max-width:650px}.auth-card{position:relative}.auth-card>.icon-btn{margin-bottom:14px}.text-button{margin-top:18px;padding:8px;border:0;background:transparent;color:var(--forest);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.carnet-page{max-width:980px}.carnet-toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px}.pet-carnet{overflow:hidden;border:1px solid #d9ddcf;border-radius:28px;background:#fff;box-shadow:0 18px 45px rgba(50,70,53,.14)}.carnet-head{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:16px;padding:24px 28px;background:linear-gradient(135deg,#4d6b50,#76906f);color:#fff}.carnet-head img{width:70px;height:70px;object-fit:contain;border-radius:18px;background:#f7f2e8}.carnet-head small{font-weight:800;letter-spacing:.18em}.carnet-head h1{margin:2px 0;font-size:1.65rem}.carnet-head p{margin:0;opacity:.86}.carnet-status{padding:8px 12px;border-radius:999px;background:#f4c978;color:#314735;font-size:.76rem;font-weight:800}.carnet-main{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;padding:28px}.carnet-photo{width:220px;height:220px;object-fit:cover;border-radius:24px}.carnet-label,.carnet-data span,.carnet-notes span,.carnet-foot span{margin:0;color:#667069;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.carnet-identity h2{margin:4px 0;font-size:2.5rem;color:#314735}.carnet-identity>p:not(.carnet-label){color:#667069}.carnet-code{display:inline-block;margin-top:12px;padding:9px 12px;border-radius:10px;background:#f7f2e8;color:#4d6b50;font-size:.82rem}.carnet-data{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 28px;background:#dfe4d8;border:1px solid #dfe4d8;border-radius:18px;overflow:hidden}.carnet-data div{min-height:90px;padding:16px;background:#fbfcf8}.carnet-data strong,.carnet-data span{display:block}.carnet-data strong{margin-top:7px;color:#314735;font-size:.92rem}.carnet-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:26px 28px}.carnet-notes div{padding:18px;border-radius:16px;background:#f7f2e8}.carnet-notes p{margin:7px 0 0;color:#4d5c50;line-height:1.5}.carnet-foot{padding:22px 28px;background:#edf2e8}.carnet-foot strong{display:block;margin-top:5px;color:#314735;overflow-wrap:anywhere}.carnet-foot p{margin:16px 0 0;color:#667069;font-size:.72rem;line-height:1.5}
@media(max-width:700px){.carnet-toolbar{flex-direction:column}.carnet-main{grid-template-columns:1fr;text-align:center}.carnet-photo{margin:auto}.carnet-data{grid-template-columns:1fr 1fr;margin:0 16px}.carnet-notes{grid-template-columns:1fr;padding:20px 16px}.carnet-head{grid-template-columns:58px 1fr}.carnet-head img{width:56px;height:56px}.carnet-status{grid-column:1/-1;justify-self:start}.carnet-head h1{font-size:1.25rem}.carnet-identity h2{font-size:2rem}}
@media print{@page{size:A4;margin:12mm}body{background:#fff}.topbar,.bottom-nav,.no-print,.toast{display:none!important}.app-shell,.page,.carnet-page{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}.pet-carnet{box-shadow:none;border:1px solid #aaa;break-inside:avoid}.carnet-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}.carnet-data{grid-template-columns:repeat(4,1fr)}.carnet-main{grid-template-columns:180px 1fr}.carnet-photo{width:180px;height:180px}}

/* Adopción responsable y compatibilidad */
.adoption-page{max-width:980px}.adoption-page>.privacy-notice{margin-bottom:20px}.adoption-intro,.adoption-application{margin-top:20px}.match-results{margin-top:26px}.adoption-match-card{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:18px;padding:14px}.adoption-match-card .report-thumb{width:130px;height:130px;border-radius:18px;object-fit:cover}.adoption-match-card .card-body{min-width:0}.adoption-match-card .card-body p{margin:8px 0;color:#4d5c50;line-height:1.5}.adoption-match-card .card-body small{display:block;color:#9a583f}.adoption-application{scroll-margin-top:88px}.consent-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:12px;padding:16px;border-radius:14px;background:#f7f2e8}.consent-check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}.consent-check span{font-weight:500;line-height:1.5}.success-state{text-align:center;padding:34px 18px;color:#314735}.success-state h3{font-size:1.45rem;margin:12px 0 6px}.success-state p{max-width:560px;margin:auto;line-height:1.6}
@media(max-width:700px){.adoption-match-card{grid-template-columns:86px 1fr}.adoption-match-card .report-thumb{width:86px;height:100px}.adoption-match-card>.btn{grid-column:1/-1;width:100%}.adoption-page .section-head{align-items:flex-start}.adoption-page .section-head>.btn{width:auto}}

/* Mi Manada y apadrinamiento */
.sponsor-btn{background:#f4c978!important;color:#314735!important}.sponsor-note{margin:12px 0 0;padding:13px 15px;border-radius:14px;background:#fff4d8;color:#5f543d;font-size:.82rem;line-height:1.5}.my-manada-page{max-width:980px}.my-manada-hero{display:flex;align-items:center;gap:20px;margin:18px 0 22px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#edf2e8,#fff8e8);border:1px solid #dfe4d8}.my-manada-hero h1{margin:4px 0 8px;color:#314735;font-size:clamp(1.6rem,4vw,2.4rem)}.my-manada-hero p{margin:0;line-height:1.6}.manada-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.protector-card{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:center;margin:22px 0;padding:26px;border-radius:24px;background:#4d6b50;color:#fff}.protector-card h2{margin:4px 0 8px;font-size:1.8rem}.protector-card p{line-height:1.6}.protector-card .eyebrow{color:#f4c978}.protector-card ul{margin:0;padding-left:20px;line-height:1.8}.protector-card>.btn{grid-column:1/-1;justify-self:start;background:#f4c978;color:#314735}
@media(max-width:760px){.manada-actions-grid{grid-template-columns:1fr}.protector-card{grid-template-columns:1fr}.my-manada-hero{align-items:flex-start;padding:22px}.protector-card>.btn{width:100%}}

/* Historias de animales comunitarios */
.community-intro{margin:18px 0;padding:18px 20px;border-radius:18px;background:#edf2e8;color:#4d5c50;line-height:1.6}.community-intro p{margin:0}.community-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.community-profile-card{overflow:hidden;border:1px solid #dfe4d8;border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(49,71,53,.08)}.community-photo-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#edf2e8}.community-photo-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.community-profile-card:hover .community-photo-wrap img{transform:scale(1.035)}.adopt-me-badge{position:absolute;left:12px;bottom:12px;padding:7px 11px;border-radius:999px;background:#f4c978;color:#314735;font-size:.74rem;font-weight:800;box-shadow:0 5px 16px rgba(49,71,53,.18)}.community-card-body{padding:16px}.community-card-body h3{margin:0;color:#314735;font-size:1.3rem}.community-card-body p{margin:5px 0;color:#667069}.community-card-body small{display:block;min-height:20px;margin-bottom:13px;color:#9a6848;font-weight:700}.community-card-body .btn{width:100%}.adoptable-tag{background:#f4c978!important;color:#314735!important}.sponsored-tag{background:#dcebdd!important;color:#315d3c!important}
@media(max-width:820px){.community-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.community-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.community-card-body{padding:12px}.community-card-body h3{font-size:1.05rem}.community-card-body p{font-size:.78rem}.community-card-body small{font-size:.7rem}.community-card-body .btn{padding:9px 8px;font-size:.76rem}.adopt-me-badge{left:8px;bottom:8px;padding:5px 8px}}

.member-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.member-access-grid .form-panel{margin:0}.member-dashboard{margin:20px 0}.my-pets-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.member-add-pet{margin-top:16px}.upgrade-note{margin-top:16px;padding:18px;border:1px solid #ead49a;border-radius:16px;background:#fff5da;color:#5f543d}.upgrade-note p{margin:5px 0 0}.full.btn{width:100%}
@media(max-width:720px){.member-access-grid,.my-pets-grid{grid-template-columns:1fr}.member-access-grid .form-grid{grid-template-columns:1fr}}

/* Tenencia responsable */
.care-page{max-width:1040px;scroll-behavior:smooth}.care-hero{margin:18px 0 22px;padding:30px;border-radius:26px;background:linear-gradient(135deg,#fff4d8,#edf2e8)}.care-hero h1{max-width:720px;margin:5px 0 10px;color:#314735;font-size:clamp(1.8rem,4vw,2.8rem)}.care-hero p{max-width:760px;line-height:1.65}.care-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.care-topic{display:block;padding:18px;border:1px solid #dfe4d8;border-radius:20px;background:#fff;color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.care-topic.active{border-color:#abc3a7;background:#f6faf2}.care-topic:hover,.care-topic:focus-visible{transform:translateY(-2px);border-color:#6f9673;box-shadow:0 10px 24px rgba(49,71,53,.1);outline:none}.care-topic small{display:block;margin-top:12px;color:#9a6848;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.care-topic h3{margin:5px 0;color:#314735}.care-topic p{margin:0;color:#667069;line-height:1.5}.care-topic-link{display:flex;align-items:center;gap:6px;margin-top:14px;color:#4d6b50;font-size:.82rem;font-weight:800}.care-topic-link svg{width:15px;height:15px}.care-guide{margin:24px 0;padding:28px;border:1px solid #dfe4d8;border-radius:26px;background:#fff;scroll-margin-top:18px}.care-guide-head{max-width:760px}.care-guide-head h2{margin:5px 0 8px;color:#314735;font-size:1.8rem}.care-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.care-pillars section{padding:17px;border-radius:16px;background:#f7f2e8}.care-pillars strong{color:#314735}.care-pillars p{margin:7px 0 0;color:#5b675e;line-height:1.55}.care-sources{margin:20px 0 0;color:#667069;font-size:.78rem}.care-sources a{color:#4d6b50;font-weight:700}.care-upgrade{grid-template-columns:1fr auto}.care-upgrade>.btn{grid-column:auto}
.care-library{display:grid;gap:12px;margin:24px 0}.care-detail{overflow:hidden;border:1px solid #dfe4d8;border-radius:20px;background:#fff;scroll-margin-top:18px}.care-detail:target{border-color:#6f9673;box-shadow:0 0 0 4px rgba(111,150,115,.13)}.care-detail summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px;cursor:pointer;list-style:none}.care-detail summary::-webkit-details-marker{display:none}.care-detail summary>span:nth-child(2){display:grid;gap:2px}.care-detail summary small{color:#9a6848;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.care-detail summary strong{color:#314735;font-size:1.08rem}.care-detail summary em{color:#667069;font-size:.88rem;font-style:normal}.care-detail summary>svg{color:#4d6b50;transition:transform .2s ease}.care-detail[open] summary>svg{transform:rotate(180deg)}.care-detail-body{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 18px 18px}.care-detail-body section{padding:16px;border-radius:16px;background:#f7f2e8}.care-detail-body strong{color:#314735}.care-detail-body p{margin:7px 0 0;color:#5b675e;line-height:1.58}.care-detail-body .care-warning{background:#fff1df;border:1px solid #e9c48d}.care-detail-body>.care-sources{grid-column:1/-1;margin:4px 2px 0}.emergency-detail{border-color:#dfb371}
@media(max-width:760px){.care-topic-grid{grid-template-columns:repeat(2,1fr)}.care-pillars,.care-detail-body{grid-template-columns:1fr}.care-upgrade{grid-template-columns:1fr}.care-upgrade>.btn{grid-column:1;width:100%}}@media(max-width:480px){.care-topic-grid{grid-template-columns:1fr}.care-hero,.care-guide{padding:21px}.care-detail summary{grid-template-columns:auto 1fr;padding:15px}.care-detail summary>svg{display:none}.care-detail-body{padding:0 15px 15px}}

/* Pagos manuales, membresías y transparencia */
.admin-payment-form{margin:22px 0}.membership-list article>div:last-child{display:grid;justify-items:end;gap:9px}.membership-list small,.admin-simple-list small{display:block;margin-top:5px;color:#78827a;font-size:.72rem}.admin-simple-list .btn{margin-top:8px;padding:8px 11px;font-size:.76rem}.home-support-card .btn-row{justify-content:flex-end}.protector-card .btn-row .btn{background:#f4c978;color:#314735}.protector-card .btn-row .btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
@media(max-width:700px){.admin-simple-list article{align-items:flex-start;flex-direction:column}.admin-simple-list article>div:last-child,.membership-list article>div:last-child{width:100%;justify-items:start;text-align:left}.home-support-card .btn-row{justify-content:stretch}.home-support-card .btn-row .btn{width:100%}}

.admin-simple-list{display:grid;gap:10px;margin:12px 0 24px}.admin-simple-list article{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 17px;border:1px solid #dfe4d8;border-radius:15px;background:#fff}.admin-simple-list p,.admin-simple-list span{margin:4px 0 0;color:#667069;font-size:.78rem}.admin-simple-list article>div:last-child{text-align:right}.approval-pill.confirmado{background:#dcebdd;color:#315d3c}.approval-pill.pendiente{background:#fff1ca;color:#715d22}

/* Kafot · presencia mínima dentro de la aplicación.
   Usa la paleta de Granada con Patas, pero se apoya en el coral y el
   mostaza para que la tienda se note más alegre sin salirse del sistema. */
.tienda-page { max-width: 860px; }

.tienda-hero {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 34px 22px 30px;
  border: 1px solid rgba(155, 63, 43, 0.16);
  border-radius: 26px;
  background: linear-gradient(160deg, #ffe0d7 0%, #fff0b7 62%, var(--paper-strong) 100%);
  text-align: center;
}
.tienda-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #9b3f2b;
  color: #fff6f2;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tienda-icono { width: 62px; height: 62px; border-radius: 20px; }
.tienda-hero h1 { margin: 4px 0 0; font-size: 2.1rem; color: #7a2f1e; }
.tienda-bajada { margin: 0; color: #6b4a22; font-weight: 700; }
.tienda-frase {
  max-width: 30rem;
  margin: 8px 0 0;
  color: #4d3a2a;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.5;
}

.tienda-aviso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-strong);
  color: #4d5c50;
}
.tienda-aviso p { margin: 0; line-height: 1.55; }
.tienda-aviso svg { flex: none; color: var(--earth); }

.tienda-adelantos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.tienda-adelanto {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}
.tienda-adelanto strong { display: block; color: var(--ink); }
.tienda-adelanto p { margin: 5px 0 0; color: var(--stone); font-size: 0.9rem; line-height: 1.5; }

.tienda-pie { margin-top: 22px; text-align: center; }
.tienda-pie p { margin: 0 0 12px; color: var(--stone); }
.tienda-pie .btn-row { justify-content: center; flex-wrap: wrap; }

@media (max-width: 720px) {
  .tienda-adelantos { grid-template-columns: 1fr; }
  .tienda-hero { padding: 28px 16px 24px; }
  .tienda-hero h1 { font-size: 1.7rem; }
  /* seis destinos en la barra inferior: el texto necesita algo menos de aire */
  .nav-item { font-size: 0.6rem; }
}

/* Cocina de Mi Manada · recetas caseras con nutrición calculada */
.cocina-page { max-width: 980px; }
.cocina-intro,
.cocina-alerta,
.cocina-ok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: var(--radius);
}
.cocina-intro { border: 1px solid var(--line); background: var(--paper-strong); }
.cocina-intro svg { flex: none; color: var(--forest); }
.cocina-intro p, .cocina-alerta p { margin: 4px 0 0; line-height: 1.5; color: #4d5c50; }
.cocina-alerta { border: 1px solid rgba(155, 63, 43, 0.25); background: #ffe9e2; }
.cocina-alerta svg { flex: none; color: #9b3f2b; }
.cocina-alerta .btn { margin-top: 10px; }
.cocina-ok { align-items: center; padding: 10px 14px; background: #dfefdc; color: #355a3b; font-weight: 600; }

.cocina-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cocina-filtros .full { grid-column: 1 / -1; }
.cocina-cuenta { margin: 10px 0 12px; font-size: 0.85rem; }

.cocina-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cocina-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-strong);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 20px rgba(54, 62, 45, 0.06);
}
.cocina-card:hover { border-color: var(--moss); transform: translateY(-1px); }
.cocina-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.cocina-card small { color: var(--earth); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.68rem; }
.cocina-card strong { font-size: 1.02rem; line-height: 1.25; }
.cocina-card em { color: var(--stone); font-style: normal; font-size: 0.86rem; line-height: 1.4; }
.cocina-card-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cocina-card-datos > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(125, 154, 113, 0.16); color: var(--forest);
  font-size: 0.74rem; font-weight: 700;
}
.cocina-card-datos > .cocina-falta { background: #ffe0d7; color: #9b3f2b; }

.receta-resumen { margin: 6px 0 14px; }
.receta-resumen p { margin: 4px 0; line-height: 1.5; }
.receta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.receta-grid h3 { margin: 0 0 10px; }
.receta-grid h3:not(:first-child) { margin-top: 18px; }
.receta-ingredientes, .receta-pasos { margin: 0; padding-left: 20px; line-height: 1.6; }
.receta-pasos li { margin-bottom: 6px; }
.receta-nutricion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.receta-nutricion div { padding: 10px; border-radius: 14px; background: var(--paper); text-align: center; }
.receta-nutricion strong { display: block; color: var(--forest); }
.receta-nutricion span { color: var(--stone); font-size: 0.74rem; }
.receta-costo { margin: 0; color: var(--forest); font-size: 1.2rem; font-weight: 700; }
.receta-avisos { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); background: #fff0b7; }
.receta-avisos h3 { margin: 0 0 6px; color: #6b4a22; }
.receta-avisos ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.cocina-acceso { margin: 0 0 14px; }
.cocina-candado { margin-top: 14px; }

@media (max-width: 720px) {
  .cocina-filtros { grid-template-columns: 1fr 1fr; }
  .receta-grid { grid-template-columns: 1fr; }
  .receta-nutricion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kafot · catálogo, pedido y panel */
.tienda-hero-compacta { padding: 22px 18px; gap: 6px; }
.tienda-hero-compacta h1 { font-size: 1.7rem; }
.tienda-badge-claro { border: 0; background: #fff6f2; color: #9b3f2b; cursor: pointer; }

.tienda-chips { display: flex; gap: 8px; margin: 14px 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tienda-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-strong); color: var(--ink); font-size: 0.85rem; font-weight: 600;
}
.tienda-chip.activo { border-color: #9b3f2b; background: #9b3f2b; color: #fff6f2; }
.tienda-contador { padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 0.72rem; }
.tienda-chip.activo .tienda-contador { background: rgba(255, 255, 255, 0.25); }

.tienda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 12px; }
.tienda-producto {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong);
  box-shadow: 0 8px 20px rgba(54, 62, 45, 0.06);
}
.tienda-producto.destacado { border-color: #e9b949; }
.tienda-foto {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #ffe0d7, #fff0b7); color: #9b3f2b;
}
.tienda-foto img { width: 100%; height: 100%; object-fit: cover; }
.tienda-destacado {
  position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px; background: #e9b949; color: #3d2b00; font-size: 0.7rem; font-weight: 800;
}
.tienda-producto-cuerpo { display: grid; align-content: start; gap: 6px; padding: 12px 14px 14px; }
.tienda-producto-cuerpo small { color: var(--earth); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.tienda-producto-cuerpo strong { line-height: 1.25; }
.tienda-producto-cuerpo p { margin: 0; color: var(--stone); font-size: 0.84rem; line-height: 1.4; }
.tienda-precios { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 4px 0; }
.tienda-precio { color: var(--ink); font-size: 1.15rem; font-weight: 800; }
.tienda-precios s { color: var(--stone); font-size: 0.85rem; }
.tienda-precio-manada { color: #9b3f2b; font-size: 0.78rem; font-weight: 700; }
.tienda-cantidad { display: inline-flex; align-items: center; gap: 10px; }
.tienda-cantidad span { min-width: 18px; text-align: center; font-weight: 800; }

.tienda-barra-carrito {
  position: sticky; bottom: 92px; z-index: 25; display: flex; width: 100%; justify-content: space-between; align-items: center;
  margin-top: 16px; padding: 14px 18px; border: 0; border-radius: 18px;
  background: #9b3f2b; color: #fff6f2; box-shadow: 0 14px 30px rgba(155, 63, 43, 0.3); font: inherit;
}
.tienda-barra-carrito span { display: inline-flex; align-items: center; gap: 8px; }

.tienda-lineas { margin: 0 0 12px; padding: 0; list-style: none; }
.tienda-lineas li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tienda-lineas small { display: block; color: var(--stone); }
.tienda-total-linea { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.tienda-total { padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.tienda-total-final { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.tienda-envios { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.tienda-envios legend { margin-bottom: 6px; font-weight: 600; }
.tienda-envio {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-strong); cursor: pointer;
}
.tienda-envio.activo { border-color: #9b3f2b; box-shadow: 0 0 0 2px rgba(155, 63, 43, 0.15); }
.tienda-envio small { display: block; color: var(--stone); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.tienda-form-panel summary { cursor: pointer; padding: 4px 0; }
.tienda-form-panel[open] summary { margin-bottom: 12px; }
.tienda-ok { display: block; color: #355a3b; font-weight: 700; }
.tienda-aviso { display: block; color: #9b3f2b; font-weight: 700; }
.tienda-zona-campos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.admin-simple-list select, .admin-simple-list input[data-tienda-guia] {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit;
}

@media (max-width: 720px) {
  .tienda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tienda-producto-cuerpo { padding: 10px; }
  .tienda-producto-cuerpo p { display: none; }
  .tienda-precio { font-size: 1rem; }
  .tienda-barra-carrito { bottom: 96px; }
  .tienda-lineas li { grid-template-columns: 1fr auto; }
  .tienda-lineas li > strong { grid-column: 1 / -1; text-align: right; }
}

/* Kafot · caja para pegar la ficha de Dropi */
.tienda-pegar textarea { min-height: 110px; font-size: 0.9rem; }
.tienda-pegar .btn-row { margin-top: 0.5rem; }
#tienda-pegar-aviso:empty { display: none; }

/* Portada con las mascotas de la casa. La foto va al pie del encabezado, en
   su propia proporción, para que no se recorte a nadie, y debajo de los
   botones para que nada les tape la cara. */
.hero-v2 {
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.hero-v2 .hero-landscape,
.hero-v2 .hero-animals,
.hero-v2::before,
.hero-v2::after {
  display: none;
}

.hero-foto {
  width: auto;
  margin: 20px -22px 0;
  aspect-ratio: 3 / 2;
  background: url("/assets/portada-horizontal.webp") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 12%, #000 30%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 12%, #000 30%);
}

.hero-v2 .hero-content {
  position: relative;
  z-index: 1;
}

@media (min-width: 760px) {
  .hero-foto {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* La portada también asoma en Kafot, como remate del encabezado de la tienda.
   Se usa la versión horizontal y se respeta su proporción, para que salgan los
   cuatro completos. */
.tienda-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.tienda-portada {
  justify-self: stretch;
  width: auto;
  margin: 16px -22px -1px;
  height: auto;
  aspect-ratio: 3 / 2;
  background: url("/assets/portada-horizontal.webp") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 14%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 14%, #000 34%);
}

/* En el catálogo la portada va más bajita, para no empujar los productos. */
.tienda-portada-chica {
  aspect-ratio: auto;
  height: 150px;
  background-position: center 68%;
}

/* Cuánto debe comer: la calculadora de la Cocina */
.cocina-racion {
  margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-strong);
}
.cocina-racion summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.cocina-racion summary strong { display: inline-flex; align-items: center; gap: 8px; }
.cocina-racion .form-grid { margin-top: 12px; }
.cocina-racion-dato {
  display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--paper);
}
.cocina-racion-dato strong { font-size: 1.15rem; color: var(--forest); }
.cocina-racion-dato span { color: var(--stone); font-size: 0.86rem; }
.receta-racion {
  padding: 12px 14px; border-radius: 14px; background: rgba(125, 154, 113, 0.14);
}

/* Calculadora de ración */
.racion-intro {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px;
  padding: 14px 16px; border-radius: var(--radius); background: rgba(125, 154, 113, 0.14); color: var(--ink);
}
.racion-intro p { margin: 4px 0 0; color: var(--stone); font-size: 0.9rem; }
.racion-resultado {
  display: grid; gap: 6px; margin: 14px 0; padding: 18px;
  border-radius: var(--radius); background: var(--forest); color: #f4f7f0;
}
.racion-resultado .eyebrow { color: rgba(244, 247, 240, 0.75); }
.racion-resultado strong { font-size: 1.7rem; }
.racion-resultado p { margin: 0; color: rgba(244, 247, 240, 0.86); font-size: 0.9rem; }
.racion-resultado.vacia { background: var(--paper-strong); color: var(--stone); text-align: center; justify-items: center; }
.racion-gramos {
  display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 12px 14px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.14);
}
.racion-gramos strong { font-size: 1.25rem; }
.racion-avisos { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); }
.racion-avisos h3 { margin: 0 0 8px; }
.racion-avisos ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--stone); font-size: 0.92rem; }
.racion-siguiente { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--paper); }
.care-calculadora {
  display: flex; gap: 12px; align-items: center; width: 100%; margin: 0 0 16px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.care-calculadora em { display: block; margin-top: 2px; color: var(--stone); font-size: 0.88rem; font-style: normal; }
.care-calculadora > span:last-of-type { flex: 1; }

.racion-peso {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px;
  border-radius: var(--radius); background: rgba(125, 154, 113, 0.16);
}
.racion-peso.alerta { background: rgba(244, 162, 97, 0.2); }
.racion-peso p { margin: 4px 0 0; font-size: 0.9rem; }
.racion-peso-nota { color: var(--stone); }

/* Control de peso */
.peso-historial { margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.peso-historial ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.peso-historial li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.peso-historial li span { color: var(--stone); }
.peso-historial em { font-style: normal; font-weight: 700; font-size: 0.85rem; }
.peso-historial em.sube { color: #b0553a; }
.peso-historial em.baja { color: var(--forest); }

/* Encontré un peludito */
.encontre-match {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); margin-bottom: 10px;
}
.encontre-match img { width: 74px; height: 74px; border-radius: 14px; object-fit: cover; }
.encontre-match p { margin: 2px 0 0; font-size: 0.86rem; }
.encontre-puntaje {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  background: rgba(109, 109, 109, 0.16); font-size: 0.76rem; font-weight: 700;
}
.encontre-puntaje.medio { background: rgba(244, 162, 97, 0.28); }
.encontre-puntaje.alto { background: rgba(125, 154, 113, 0.32); color: var(--forest); }
.encontre-siguiente { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius); background: var(--paper); }
.encontre-siguiente h3 { margin: 0 0 6px; }
.encontre-aviso {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 16px 18px;
  border-radius: var(--radius); background: rgba(125, 154, 113, 0.2);
}
.encontre-aviso p { margin: 4px 0 10px; font-size: 0.9rem; }
@media (max-width: 520px) {
  .encontre-match { grid-template-columns: 62px 1fr; }
  .encontre-match img { width: 62px; height: 62px; }
  .encontre-match .btn { grid-column: 1 / -1; }
}

.reporte-mini { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; margin-top: 6px; }
.reporte-detalle { max-width: 320px; font-size: 0.9rem; }
.reporte-detalle .btn { margin-top: 6px; }

/* Lo que no pueden comer */
.peligros-urgencia {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 16px 18px;
  border-radius: var(--radius); background: rgba(231, 111, 81, 0.16); border: 1px solid rgba(231, 111, 81, 0.3);
}
.peligros-urgencia p { margin: 4px 0 0; font-size: 0.92rem; }
.peligros-grupo { margin-bottom: 18px; }
.peligros-grupo h3 { margin: 0 0 10px; }
.peligros-lista { display: grid; gap: 10px; }
.peligro {
  padding: 14px 16px; border: 1px solid var(--line); border-left: 5px solid var(--moss);
  border-radius: 14px; background: var(--paper-strong);
}
.peligro.grave { border-left-color: #e76f51; }
.peligro.cuidado { border-left-color: #f4a261; }
.peligro.gato { border-left-color: var(--earth); }
.peligro p { margin: 6px 0 0; font-size: 0.9rem; color: var(--stone); }
.peligro-especie {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(125, 154, 113, 0.22); font-size: 0.72rem; font-weight: 700;
}
.peligro-senales { display: flex; gap: 6px; align-items: center; color: var(--ink) !important; font-size: 0.86rem !important; }
@media (min-width: 720px) { .peligros-lista { grid-template-columns: 1fr 1fr; } }

/* Cuidados según su raza */
.raza-guia {
  margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-strong);
}
.raza-guia h3 { margin: 0 0 4px; color: var(--forest); }
.raza-resumen { margin: 0 0 12px; color: var(--stone); }
.raza-guia dl { display: grid; gap: 10px; margin: 0; }
.raza-guia dt { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; }
.raza-guia dd { margin: 2px 0 0; color: var(--stone); font-size: 0.92rem; }
@media (min-width: 720px) { .raza-guia dl { grid-template-columns: 1fr 1fr; gap: 12px 20px; } }

.raza-guia.suya { border-color: var(--moss); box-shadow: 0 10px 24px rgba(77, 107, 80, 0.14); }
.perfil-guia {
  display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding: 14px 16px;
  border-radius: var(--radius); background: rgba(125, 154, 113, 0.16);
}
.perfil-guia p { margin: 2px 0 0; color: var(--stone); font-size: 0.88rem; }
.perfil-guia > div { flex: 1; }

.raza-consejos { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.raza-consejos ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 7px; color: var(--stone); font-size: 0.9rem; }

/* El espacio de cada peludito */
.peludito-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 4px; }
.peludito-tabs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper-strong); color: var(--ink); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.peludito-tabs button.activo { background: var(--forest); color: #f4f7f0; border-color: var(--forest); }
.peludito-tabs img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.peludito-proximos { margin-bottom: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--paper-strong); border: 1px solid var(--line); }
.peludito-proximos ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.peludito-proximos li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper);
  border-left: 4px solid var(--moss);
}
.peludito-proximos li strong { text-align: right; font-size: 0.92rem; }
.peludito-proximos li small { grid-column: 1 / -1; color: var(--stone); font-size: 0.8rem; }
.peludito-proximos li.vencido { border-left-color: #e76f51; }
.peludito-proximos li.vencido strong { color: #b0553a; }
.peludito-proximos li.pronto { border-left-color: #f4a261; }
.peludito-proximos li.sin-dato { border-left-color: rgba(109, 109, 109, 0.35); }
.peludito-historial { margin: 14px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--paper); }
.peludito-historial ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.peludito-historial li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 0.9rem; }
.peludito-historial li span { color: var(--stone); }
.peludito-historial li em { grid-column: 2; font-style: normal; color: var(--stone); font-size: 0.85rem; }

.member-espacio { width: 100%; margin-bottom: 10px; }

.salud-foto { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--forest); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.salud-foto img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }

.icon-btn.borrar { justify-self: end; align-self: center; width: 32px; height: 32px; color: var(--stone); background: transparent; border: 0; }
.icon-btn.borrar:hover { color: #b0553a; background: rgba(231, 111, 81, 0.12); }
.peludito-historial li { grid-template-columns: auto 1fr auto; }
.peso-historial li { grid-template-columns: 1fr auto auto auto; }

/* Plan de cachorro */
.plan-cachorro { margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--line); border-left: 5px solid var(--moss); border-radius: var(--radius); background: var(--paper-strong); }
.plan-cachorro.listo { border-left-color: var(--forest); background: rgba(125, 154, 113, 0.12); }
.plan-cachorro h3 { margin: 2px 0 10px; }
.plan-cachorro ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan-cachorro li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; color: var(--stone); }
.plan-cachorro li.hecho { color: var(--ink); }
.plan-cachorro li.hecho span { color: var(--forest); }
.plan-cachorro small { display: block; margin-top: 2px; font-size: 0.84rem; }
.plan-cachorro .field-note { margin-top: 10px; }

/* ---------- Carné de identificación ---------- */
.carne {
  max-width: 560px; margin: 0 auto; padding: 10px;
  border-radius: 26px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(184, 134, 91, 0.55), transparent 60%),
    linear-gradient(145deg, #3d5941 0%, #24352a 45%, #4d6b50 100%);
  box-shadow: 0 22px 44px rgba(36, 53, 42, 0.32);
}
.carne-borde {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 250, 240, 0.28); border-radius: 20px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 250, 240, 0.045) 0 2px, transparent 2px 9px),
    linear-gradient(170deg, #fffaf0 0%, #f7f2e8 62%, #edf4e8 100%);
  color: var(--ink);
}
.carne-borde::after {
  content: ""; position: absolute; right: -60px; bottom: -70px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(125, 154, 113, 0.16), transparent 68%); pointer-events: none;
}
.carne-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: linear-gradient(120deg, #24352a, #4d6b50 70%); color: #f7f2e8;
}
.carne-logo { width: 42px; height: 42px; border-radius: 50%; background: #fffaf0; padding: 3px; }
.carne-marca { flex: 1; display: grid; }
.carne-marca strong { font-size: 1.1rem; letter-spacing: 0.02em; }
.carne-marca span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(247, 242, 232, 0.72); }
.carne-estado {
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 250, 240, 0.16);
  font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.carne-estado.alerta { background: #e76f51; }
.carne-cuerpo { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; }
.carne-foto-marco { position: relative; }
.carne-foto {
  width: 116px; height: 116px; object-fit: cover; border-radius: 18px;
  border: 3px solid #fffaf0; box-shadow: 0 10px 22px rgba(36, 53, 42, 0.22);
}
.carne-nfc {
  position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--earth); color: #fffaf0; font-size: 0.68rem; font-weight: 800; white-space: nowrap;
}
.carne-etiqueta { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone); }
.carne-identidad h1 { margin: 2px 0 2px; font-size: 1.75rem; line-height: 1.1; }
.carne-raza { margin: 0 0 10px; color: var(--stone); font-size: 0.92rem; }
.carne-codigo { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(77, 107, 80, 0.12); }
.carne-codigo span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--stone); }
.carne-codigo strong { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1rem; letter-spacing: 0.04em; }
.carne-responsable { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--stone); font-size: 0.8rem; }
.carne-qr { display: grid; justify-items: center; gap: 6px; }
.carne-qr > div { padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(36, 53, 42, 0.14); }
.carne-qr img, .carne-qr canvas { display: block; }
.carne-qr small { max-width: 132px; text-align: center; color: var(--stone); font-size: 0.7rem; }
.carne-qr-falla { display: block; max-width: 132px; font-size: 0.7rem; word-break: break-all; color: var(--stone); }
.carne-datos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0 18px 4px;
}
.carne-datos div { padding: 10px 8px; border-top: 1px solid rgba(77, 107, 80, 0.16); }
.carne-datos span { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.carne-datos strong { font-size: 0.9rem; }
.carne-notas { display: grid; gap: 10px; padding: 8px 18px 0; }
.carne-notas span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--earth); font-weight: 800; }
.carne-notas p { margin: 2px 0 0; font-size: 0.86rem; color: var(--stone); }
.carne-pie { margin-top: 12px; padding: 14px 18px; background: rgba(77, 107, 80, 0.1); }
.carne-pie span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--earth); font-weight: 800; }
.carne-pie strong { display: block; margin-top: 2px; font-size: 0.88rem; }
.carne-pie p { margin: 8px 0 0; font-size: 0.7rem; color: var(--stone); }
@media (max-width: 620px) {
  .carne-cuerpo { grid-template-columns: auto 1fr; }
  .carne-qr { grid-column: 1 / -1; justify-items: start; }
  .carne-qr small { text-align: left; }
  .carne-datos { grid-template-columns: 1fr 1fr; }
}
@media print {
  .carne { box-shadow: none; }
  .carne-borde { border-color: rgba(36, 53, 42, 0.3); }
}

/* ---------- La medalla ---------- */
.medalla-page { max-width: 560px; margin: 0 auto; }
.medalla-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 18px; border-radius: var(--radius);
  background: linear-gradient(140deg, #4d6b50, #24352a); color: #f7f2e8;
}
.medalla-page.perdido .medalla-hero { background: linear-gradient(140deg, #e76f51, #b0553a); }
.medalla-hero img { width: 104px; height: 104px; border-radius: 20px; object-fit: cover; border: 3px solid rgba(255, 250, 240, 0.85); }
.medalla-hero h1 { margin: 6px 0 2px; font-size: 1.7rem; }
.medalla-hero p { margin: 0; color: rgba(247, 242, 232, 0.86); font-size: 0.9rem; }
.medalla-codigo { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem !important; letter-spacing: 0.04em; margin-top: 6px !important; }
.medalla-chip, .medalla-alarma {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 250, 240, 0.2); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
}
.medalla-alarma { background: #fffaf0; color: #b0553a; }
.medalla-sobre-mi { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--paper-strong); border: 1px solid var(--line); }
.medalla-sobre-mi h2 { margin: 0 0 10px; font-size: 1.1rem; }
.medalla-sobre-mi ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.medalla-sobre-mi li span { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.medalla-sobre-mi p { margin: 10px 0 0; font-size: 0.9rem; color: var(--stone); }
.medalla-cuidado {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px;
  border-radius: var(--radius); background: rgba(244, 162, 97, 0.2); border: 1px solid rgba(244, 162, 97, 0.4);
}
.medalla-cuidado p { margin: 4px 0 0; font-size: 0.9rem; }
.medalla-acciones { display: grid; gap: 10px; margin-top: 16px; }
.medalla-boton {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-radius: 18px;
  color: #fffaf0; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 22px rgba(36, 53, 42, 0.16);
}
.medalla-boton strong { display: block; font-size: 1.02rem; }
.medalla-boton small { display: block; margin-top: 2px; font-size: 0.82rem; color: rgba(255, 250, 240, 0.85); }
.medalla-boton.verde { background: linear-gradient(135deg, #4d6b50, #3d5941); }
.medalla-boton.azul { background: linear-gradient(135deg, #4b7f9b, #2f5d75); }
.medalla-boton.morado { background: linear-gradient(135deg, #7b6bb0, #574a86); }
.medalla-boton.naranja { background: linear-gradient(135deg, #e08b4a, #b8865b); }
.medalla-nota { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--paper); color: var(--stone); font-size: 0.86rem; }
.medalla-pie { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 18px 0 8px; color: var(--stone); font-size: 0.8rem; }

/* Marcar perdido, desde el espacio del peludito */
.btn.grande {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 14px; padding: 16px 18px;
  border-radius: 18px; text-align: left;
}
.btn.grande strong { display: block; font-size: 1.05rem; }
.btn.grande small { display: block; margin-top: 2px; font-size: 0.83rem; opacity: 0.85; }
.btn.grande.alerta { background: linear-gradient(135deg, #e76f51, #b0553a); color: #fffaf0; border: 0; }
.btn.grande.verde { background: var(--forest); color: #f7f2e8; border: 0; width: auto; margin: 0; }
.perdido-aviso {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-bottom: 14px; padding: 16px 18px;
  border-radius: var(--radius); background: rgba(231, 111, 81, 0.16); border: 1px solid rgba(231, 111, 81, 0.35);
}
.perdido-aviso p { margin: 4px 0 0; font-size: 0.9rem; }
.perdido-aviso .btn { grid-column: 1 / -1; justify-self: start; }

}

@layer sistema {
  /* =============================================================
     1 · Tokens
     Un solo lugar para color, espacio, radio, sombra y tipografía.
     ============================================================= */
  :root {
    --verde-900: #1c2a21;
    --verde-800: #24352a;
    --verde-700: #35503a;
    --verde-600: #4d6b50;
    --verde-500: #5f7f62;
    --verde-300: #7d9a71;
    --verde-100: #e4ece0;
    --verde-050: #f1f6ee;
    --tierra-600: #a9784e;
    --tierra-500: #b8865b;
    --tierra-100: #f3e5d6;
    --sol-500: #e39a54;
    --alerta-600: #c2553a;
    --alerta-500: #e76f51;
    --alerta-100: #fbe4dc;
    --exito-600: #3f7d55;
    --exito-100: #dff0e4;

    --fondo: #f8f5ef;
    --fondo-alt: #f1f0e9;
    --superficie: #ffffff;
    --superficie-suave: #fbf9f4;
    --texto: #1f2a22;
    --texto-suave: #55605a;
    --texto-tenue: #7d857f;
    --borde: rgba(31, 42, 34, 0.1);
    --borde-fuerte: rgba(31, 42, 34, 0.18);

    /* Alias de los nombres viejos, para que la capa heredada siga cuadrando */
    --forest: var(--verde-600);
    --moss: var(--verde-300);
    --paper: var(--fondo);
    --paper-strong: var(--superficie);
    --earth: var(--tierra-500);
    --stone: var(--texto-suave);
    --ink: var(--texto);
    --line: var(--borde);
    --found: var(--sol-500);
    --lost: var(--alerta-500);

    /* Espacio: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
    --radius: var(--r-lg);

    /* Sombras discretas a propósito: lo premium no depende de sombras fuertes */
    --sombra-1: 0 1px 2px rgba(31, 42, 34, 0.06);
    --sombra-2: 0 2px 8px rgba(31, 42, 34, 0.07), 0 1px 2px rgba(31, 42, 34, 0.05);
    --sombra-3: 0 12px 28px rgba(31, 42, 34, 0.1);
    --shadow: var(--sombra-2);

    --curva: cubic-bezier(0.2, 0, 0.1, 1);
    --rapido: 140ms;
    --medio: 220ms;

    --texto-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);
    --texto-xl: clamp(1.45rem, 1.2rem + 1.2vw, 1.85rem);
    --texto-lg: 1.2rem;
    --texto-md: 1rem;
    --texto-sm: 0.9rem;
    --texto-xs: 0.8rem;
    --texto-xxs: 0.72rem;
  }

  /* =============================================================
     2 · Base
     ============================================================= */
  body {
    background: var(--fondo);
    color: var(--texto);
    font-size: var(--texto-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
  h1 { font-size: var(--texto-2xl); }
  h2 { font-size: var(--texto-xl); }
  h3 { font-size: var(--texto-lg); letter-spacing: -0.01em; }
  p { line-height: 1.6; }
  small, .muted { color: var(--texto-suave); }

  .eyebrow {
    margin: 0 0 var(--e1);
    color: var(--texto-tenue);
    font-size: var(--texto-xxs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Foco visible y consistente */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: 2px;
  }

  /* El mapa queda por fuera: Leaflet se mueve con transiciones y, si se
     las anulamos, se queda a medio camino y no termina de desplazarse. */
  @media (prefers-reduced-motion: reduce) {
    *:not(.leaflet-container):not(.leaflet-container *) {
      animation-duration: 0.01ms;
      transition-duration: 0.01ms;
    }
  }

  /* =============================================================
     3 · Botones: principal, secundario, discreto, destructivo
     ============================================================= */
  .btn, .icon-btn {
    min-height: 42px;
    padding: 10px var(--e4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--texto-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    background: var(--verde-600);
    color: #fff;
    box-shadow: var(--sombra-1);
    transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
                color var(--rapido) var(--curva), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
  }
  .btn:hover { background: var(--verde-700); }
  .btn:active { transform: translateY(1px); box-shadow: none; }

  .btn.secondary {
    background: var(--superficie);
    border-color: var(--borde-fuerte);
    color: var(--verde-700);
    box-shadow: none;
  }
  .btn.secondary:hover { background: var(--verde-050); border-color: var(--verde-300); }

  .btn.subtle, .btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--verde-700);
    box-shadow: none;
  }
  .btn.subtle:hover, .btn.ghost:hover { background: var(--verde-050); }

  .btn.earth { background: var(--tierra-500); }
  .btn.earth:hover { background: var(--tierra-600); }

  .btn.alert { background: var(--alerta-500); }
  .btn.alert:hover { background: var(--alerta-600); }

  .btn:disabled, .btn[disabled] { opacity: 0.45; box-shadow: none; transform: none; }

  .icon-btn {
    width: 42px;
    padding: 0;
    background: var(--superficie);
    border-color: var(--borde);
    color: var(--verde-700);
    box-shadow: none;
  }
  .icon-btn:hover { background: var(--verde-050); }

  /* =============================================================
     4 · Superficies: un solo lenguaje de tarjeta
     ============================================================= */
  .form-panel, .admin-panel, .card, .stat-card, .hub-card,
  .cocina-card, .tienda-producto, .peludito-proximos, .medalla-sobre-mi,
  .raza-guia, .peligro, .encontre-match, .plan-cachorro {
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
  }

  .form-panel, .admin-panel { padding: var(--e5); }

  .hub-card, .feature-button, .cocina-card, .tienda-producto, .encontre-match {
    transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
  }
  .hub-card:hover, .feature-button:hover, .cocina-card:hover, .tienda-producto:hover, .encontre-match:hover {
    border-color: var(--verde-300);
    box-shadow: var(--sombra-3);
    transform: translateY(-2px);
  }


  /* Los dos accesos de la portada: una acción principal y una de alerta.
     No compiten entre sí y se leen sobre la foto. */
  .hero-v2 .feature-button {
    min-height: 64px;
    padding: var(--e3) var(--e4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--texto-sm);
    font-weight: 600;
    box-shadow: var(--sombra-2);
    transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva), background var(--rapido) var(--curva);
  }
  .hero-v2 .feature-button.primary {
    background: var(--verde-700);
    color: #fff;
  }
  .hero-v2 .feature-button.primary:hover { background: var(--verde-800); }
  .hero-v2 .feature-button.alert-tile {
    background: var(--superficie);
    color: var(--alerta-600);
    border-color: rgba(194, 85, 58, 0.28);
  }
  .hero-v2 .feature-button.alert-tile:hover { background: var(--alerta-100); }
  .hero-v2 .feature-button:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); }

  /* Los accesos del menú lateral del panel y del inicio */
  .feature-button {
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie);
    color: var(--verde-700);
    box-shadow: var(--sombra-1);
  }

  /* La portada del inicio: ocupa todo el ancho aunque el encabezado sea
     una rejilla, y respeta la proporción de la foto. */
  .hero-v2 .hero-foto {
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    min-width: 100%;
  }

  /* =============================================================
     5 · Formularios
     ============================================================= */
  .field > span, .field > label {
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--texto-suave);
  }
  input, select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--e3);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--texto-sm);
    transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
  }
  input:hover, select:hover, textarea:hover { border-color: var(--verde-300); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px var(--verde-100);
  }
  input[type="file"] { padding: var(--e2); }
  textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
  .field-note { margin: var(--e1) 0 0; color: var(--texto-tenue); font-size: var(--texto-xs); line-height: 1.5; }

  /* =============================================================
     6 · Estados: vacío, carga, esqueleto
     ============================================================= */
  .empty {
    display: grid; justify-items: center; gap: var(--e2);
    padding: var(--e6) var(--e5);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-lg);
    background: var(--superficie-suave);
    color: var(--texto-suave);
    text-align: center;
    font-size: var(--texto-sm);
  }
  .empty svg { animation: giro 1.1s linear infinite; }
  @keyframes giro { to { transform: rotate(360deg); } }

  .esqueleto {
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--fondo-alt) 25%, #f7f6f2 37%, var(--fondo-alt) 63%);
    background-size: 400% 100%;
    animation: brillo 1.4s ease infinite;
  }
  @keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

  /* =============================================================
     7 · Navegación
     ============================================================= */
  .topbar {
    border-bottom: 1px solid var(--borde);
    background: rgba(248, 245, 239, 0.86);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .bottom-nav {
    border: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: var(--sombra-3);
  }
  .nav-item { transition: color var(--rapido) var(--curva), background var(--rapido) var(--curva); }

  .screen-head { align-items: center; gap: var(--e3); margin-bottom: var(--e5); }
  .screen-head h2 { font-size: var(--texto-xl); }
  .screen-head p { margin: 2px 0 0; color: var(--texto-suave); font-size: var(--texto-sm); }
}

@layer sistema {
  /* =============================================================
     8 · Ritmo de página
     Una sola columna de contenido, con aire y ancho legible.
     ============================================================= */
  .page {
    width: min(100% - var(--e5), 1080px);
    margin-inline: auto;
    padding-block: var(--e5) var(--e8);
    display: grid;
    gap: var(--e5);
    align-content: start;
  }
  .page > section, .page > article, .page > form, .page > div { margin: 0; }
  .app-shell { padding-bottom: 96px; }

  .section-head { align-items: end; gap: var(--e4); margin-bottom: var(--e4); }
  .section-head h2 { margin: 0; }
  .section-head p { margin: var(--e1) 0 0; color: var(--texto-suave); font-size: var(--texto-sm); }

  /* =============================================================
     9 · Chips y filtros
     ============================================================= */
  .tienda-chip, .cocina-chip, .report-tabs button, .peludito-tabs button {
    min-height: 38px;
    padding: 8px var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
  }
  .tienda-chip:hover, .report-tabs button:hover, .peludito-tabs button:hover {
    border-color: var(--verde-300);
    color: var(--verde-700);
  }
  .tienda-chip.activo, .report-tabs button.active, .peludito-tabs button.activo {
    background: var(--verde-700);
    border-color: var(--verde-700);
    color: #fff;
  }

  .filters, .cocina-filtros {
    display: grid;
    gap: var(--e3);
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie-suave);
  }

  /* =============================================================
     10 · Insignias y estados
     ============================================================= */
  .approval-pill, .tienda-badge, .medalla-chip, .carne-estado, .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: var(--texto-xxs);
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .approval-pill { background: var(--fondo-alt); color: var(--texto-suave); }
  .approval-pill.aprobado { background: var(--exito-100); color: var(--exito-600); }
  .approval-pill.pendiente { background: var(--tierra-100); color: var(--tierra-600); }
  .approval-pill.rechazado { background: var(--alerta-100); color: var(--alerta-600); }

  /* =============================================================
     11 · Avisos: una sola familia visual
     ============================================================= */
  .cocina-alerta, .admin-alert, .privacy-notice, .admin-success, .racion-intro, .peligros-urgencia,
  .medalla-cuidado, .perdido-aviso, .encontre-aviso, .perfil-guia {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie-suave);
    box-shadow: none;
  }
  .cocina-alerta p, .admin-alert p, .privacy-notice p, .racion-intro p,
  .peligros-urgencia p, .medalla-cuidado p, .perdido-aviso p { margin: var(--e1) 0 0; font-size: var(--texto-sm); color: var(--texto-suave); }
  .admin-success { background: var(--exito-100); border-color: rgba(63, 125, 85, 0.24); color: var(--exito-600); }
  .peligros-urgencia, .perdido-aviso { background: var(--alerta-100); border-color: rgba(194, 85, 58, 0.24); }
  .medalla-cuidado { background: var(--tierra-100); border-color: rgba(169, 120, 78, 0.28); }
  .racion-intro, .perfil-guia, .encontre-aviso { background: var(--verde-050); border-color: var(--verde-100); }

  /* =============================================================
     12 · Listas de datos
     ============================================================= */
  .admin-simple-list article, .tienda-lineas li, .peludito-historial li, .peso-historial li {
    border-color: var(--borde);
  }
  .admin-simple-list article {
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie);
  }

  .table-wrap {
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    overflow: auto;
  }
  table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
  thead th {
    position: sticky; top: 0;
    padding: var(--e3) var(--e4);
    background: var(--superficie-suave);
    color: var(--texto-tenue);
    font-size: var(--texto-xxs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--borde);
  }
  tbody td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); vertical-align: top; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr:hover { background: var(--superficie-suave); }

  /* =============================================================
     13 · Tienda
     ============================================================= */
  .tienda-grid { gap: var(--e4); }
  .tienda-producto { overflow: hidden; }
  .tienda-producto .tienda-foto { aspect-ratio: 4 / 3; background: var(--fondo-alt); }
  .tienda-producto-cuerpo { padding: var(--e4); gap: var(--e2); }
  .tienda-producto-cuerpo strong { font-size: var(--texto-md); letter-spacing: -0.01em; }
  .tienda-producto-cuerpo p { font-size: var(--texto-xs); color: var(--texto-suave); }
  .tienda-precio { font-size: var(--texto-lg); letter-spacing: -0.02em; }
  .tienda-precio-manada { color: var(--tierra-600); }
  .tienda-barra-carrito { border-radius: var(--r-md); background: var(--verde-700); box-shadow: var(--sombra-3); }

  /* =============================================================
     14 · Cocina
     ============================================================= */
  .cocina-card { padding: var(--e4); gap: var(--e2); text-align: left; }
  .cocina-card strong { font-size: var(--texto-md); }
  .cocina-cuenta { color: var(--texto-tenue); font-size: var(--texto-sm); }

  /* =============================================================
     15 · Carné y medalla: se respetan, solo se alinean radios
     ============================================================= */
  .medalla-boton { border-radius: var(--r-md); box-shadow: var(--sombra-2); transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); }
  .medalla-boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); }

  /* =============================================================
     16 · Responsive
     ============================================================= */
  @media (max-width: 640px) {
    .page { width: min(100% - var(--e4), 100%); padding-inline: var(--e4); padding-block: var(--e4) var(--e8); gap: var(--e4); }
    .form-panel, .admin-panel { padding: var(--e4); }
    .section-head { flex-direction: column; align-items: flex-start; gap: var(--e2); }
    .btn { width: auto; }
    .btn-row { flex-wrap: wrap; gap: var(--e2); }
    thead th, tbody td { padding: var(--e2) var(--e3); }
  }

  @media (min-width: 900px) {
    .cards-grid, .tienda-grid { gap: var(--e5); }
  }
}

@layer sistema {
  /* =============================================================
     17 · Subir fotos
     El control de archivo por defecto se ve prestado; aquí se viste
     con el mismo lenguaje de los botones.
     ============================================================= */
  input[type="file"] {
    padding: var(--e2);
    border-style: dashed;
    background: var(--superficie-suave);
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    cursor: pointer;
  }
  input[type="file"]::file-selector-button {
    margin-right: var(--e3);
    padding: 8px var(--e3);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-xs);
    background: var(--superficie);
    color: var(--verde-700);
    font-size: var(--texto-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rapido) var(--curva);
  }
  input[type="file"]::file-selector-button:hover { background: var(--verde-050); }

  .upload-preview {
    display: grid; place-items: center; gap: var(--e2);
    min-height: 132px; margin-top: var(--e2);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--r-md);
    background: var(--superficie-suave);
    color: var(--texto-tenue);
    font-size: var(--texto-xs);
    overflow: hidden;
  }
  .upload-preview img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; }

  /* =============================================================
     18 · Sin animación de entrada
     Se probó y molestaba: la aplicación vuelve a pintar la pantalla en
     cada cambio de un formulario, así que la página parpadeaba al
     escribir. Un producto tranquilo vale más que una transición.
     ============================================================= */

  /* =============================================================
     19 · Detalles que se repetían mal
     ============================================================= */
  details.form-panel > summary {
    display: flex; align-items: center; gap: var(--e2);
    padding: var(--e1) 0;
    font-size: var(--texto-md);
    cursor: pointer;
    list-style: none;
  }
  details.form-panel > summary::-webkit-details-marker { display: none; }
  details.form-panel[open] > summary { margin-bottom: var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--borde); }

  .btn-row { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
  .form-grid { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .form-grid .full, .field.full { grid-column: 1 / -1; }
  .field { display: grid; gap: var(--e1); }

  /* La cuadrícula de datos del panel y del inicio */
  .cards-grid { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .stat-card { padding: var(--e4); display: grid; gap: var(--e1); }
  .stat-card strong { font-size: var(--texto-xl); letter-spacing: -0.02em; }
  .stat-card span { color: var(--texto-suave); font-size: var(--texto-xs); }
}

@layer sistema {
  /* Los tres pasos del registro: qué va a pasar, antes de pedir datos */
  .pasos-registro {
    display: grid; gap: var(--e3); margin: 0; padding: var(--e4);
    list-style: none;
    border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie);
  }
  .pasos-registro li { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; }
  .pasos-registro span {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--r-full); background: var(--verde-050); color: var(--verde-700);
    font-size: var(--texto-sm); font-weight: 700;
  }
  .pasos-registro strong { display: block; font-size: var(--texto-sm); }
  .pasos-registro small { color: var(--texto-suave); font-size: var(--texto-xs); }

  .member-access { display: grid; gap: var(--e4); }
  .acceso-volver summary { color: var(--texto-suave); }
  .my-manada-hero { display: flex; gap: var(--e4); align-items: flex-start; padding: var(--e5); border-radius: var(--r-xl); }
  .my-manada-hero h1 { font-size: var(--texto-xl); margin: var(--e1) 0 var(--e2); }
  .my-manada-hero p { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }
}

@layer sistema {
  /* El carné en celular: el código nunca se parte y la foto no aprieta */
  .carne-codigo strong { white-space: nowrap; font-size: clamp(0.82rem, 3.4vw, 1rem); letter-spacing: 0.02em; }

  @media (max-width: 520px) {
    .carne { padding: var(--e2); border-radius: var(--r-xl); }
    .carne-cuerpo { grid-template-columns: auto 1fr; gap: var(--e3); padding: var(--e4); }
    .carne-foto { width: 92px; height: 92px; border-radius: var(--r-md); }
    .carne-identidad h1 { font-size: 1.5rem; }
    .carne-codigo { grid-column: 1 / -1; }
    .carne-responsable { grid-column: 1 / -1; }
    .carne-qr { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: var(--e3); }
    .carne-qr small { max-width: none; text-align: left; }
    .carne-datos { grid-template-columns: 1fr 1fr; padding-inline: var(--e4); }
    .carne-pie { padding: var(--e4); }
  }

  /* La barra de acciones del carné: imprimir es lo principal, volver es discreto */
  .carnet-toolbar { display: flex; gap: var(--e3); align-items: center; }
  .carnet-toolbar .btn.secondary { order: -1; }
  @media (max-width: 520px) {
    .carnet-toolbar { display: grid; grid-template-columns: auto 1fr; }
    .carnet-toolbar .btn.secondary { width: 42px; padding: 0; justify-content: center; }
    .carnet-toolbar .btn.secondary span, .carnet-toolbar .btn.secondary { font-size: 0; }
    .carnet-toolbar .btn.secondary svg { font-size: 1rem; }
  }
}

@layer sistema {
  /* Más aire entre el texto y el borde del botón: se veía apretado */
  .btn {
    min-height: 46px;
    padding: 12px 22px;
    gap: var(--e2);
  }
  .btn.full, .btn[class*="full"] { width: 100%; }
  .btn.grande { padding: var(--e4) var(--e5); }
  .icon-btn { width: 44px; min-height: 44px; padding: 0; }
  .btn svg { flex: none; }
  .medalla-boton { padding: var(--e4) var(--e5); }
  .feature-button { padding: var(--e4); }
  .tienda-chip, .report-tabs button, .peludito-tabs button { padding: 9px var(--e4); }
}

@layer sistema {
  /* Instagram: presente, sin gritar */
  .ig-bloque {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e4) var(--e5);
    border: 1px solid var(--borde); border-radius: var(--r-lg);
    background: var(--superficie); color: var(--texto);
    transition: border-color var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
  }
  .ig-bloque:hover { border-color: var(--verde-300); box-shadow: var(--sombra-3); transform: translateY(-2px); }
  .ig-bloque > span:nth-child(2) { flex: 1; }
  .ig-bloque strong { display: block; font-size: var(--texto-sm); }
  .ig-bloque small { color: var(--texto-suave); font-size: var(--texto-xs); }
  .ig-icono {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
    background: linear-gradient(135deg, #f4a261, #c2553a); color: #fff;
  }
  .ig-linea { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-suave); font-size: var(--texto-xs); }
  .ig-linea:hover { color: var(--verde-700); }
  .medalla-pie { flex-wrap: wrap; justify-content: space-between; gap: var(--e2); }
}

@layer sistema {
  /* Ver un producto por dentro: hoja que sube desde abajo */
  .tienda-producto { position: relative; }
  .tienda-abrir {
    position: absolute; inset: 0; z-index: 1;
    border: 0; border-radius: inherit; background: transparent; cursor: pointer;
  }
  .tienda-producto-cuerpo .btn, .tienda-producto-cuerpo .icon-btn,
  .tienda-producto-cuerpo .tienda-cantidad { position: relative; z-index: 2; }

  .hoja-fondo {
    position: fixed; inset: 0; z-index: 60;
    display: grid; align-items: end; justify-items: center;
    padding: 0;
    background: rgba(31, 42, 34, 0.45);
    backdrop-filter: blur(2px);
    animation: aparece var(--medio) var(--curva) both;
  }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

  .hoja {
    position: relative;
    width: min(100%, 560px);
    max-height: 92dvh;
    overflow: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--superficie);
    box-shadow: 0 -12px 40px rgba(31, 42, 34, 0.24);
    animation: sube var(--medio) var(--curva) both;
  }
  @keyframes sube { from { transform: translateY(24px); } to { transform: none; } }

  .hoja-cerrar { position: absolute; top: var(--e3); right: var(--e3); z-index: 2; background: rgba(255,255,255,0.92); }
  .hoja-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--fondo-alt); }
  .hoja-foto img { width: 100%; height: 100%; object-fit: cover; }
  .hoja-cuerpo { display: grid; gap: var(--e3); padding: var(--e5); }
  .hoja-cuerpo h2 { margin: 0; font-size: var(--texto-xl); }
  .hoja-descripcion { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }
  .hoja-precio { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
  .hoja-precio strong { font-size: 1.6rem; letter-spacing: -0.02em; }
  .hoja-precio s { margin-left: var(--e2); color: var(--texto-tenue); font-size: var(--texto-sm); }
  .hoja-precio small { display: block; color: var(--tierra-600); font-size: var(--texto-xs); font-weight: 600; }
  .hoja-datos { display: grid; gap: var(--e2); margin: 0; padding: var(--e3) 0 0; list-style: none; border-top: 1px solid var(--borde); }
  .hoja-datos li { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texto-suave); font-size: var(--texto-xs); }
  .hoja-acciones { display: flex; gap: var(--e3); align-items: center; justify-content: space-between; }

  @media (min-width: 720px) {
    .hoja-fondo { align-items: center; padding: var(--e5); }
    .hoja { border-radius: var(--r-xl); }
  }
}

@layer sistema {
  /* La foto de la tienda, completa: nadie cortado */
  .tienda-portada-suelta {
    aspect-ratio: 3 / 2;
    height: auto;
    width: 100%;
    margin: 0;
    border-radius: var(--r-lg);
    background: url("/assets/portada-horizontal.webp") center center / cover no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: var(--sombra-1);
  }
  .tienda-aviso-manada { display: flex; justify-content: center; }
  .tienda-aviso-manada:empty { display: none; }
}

@layer sistema {
  /* El verde de la marca se oscurece un punto: se ve más elegante y sube el
     contraste del texto blanco sobre él. */
  :root {
    --forest: var(--verde-700);
  }
  .btn { background: var(--verde-700); }
  .btn:hover { background: var(--verde-800); }
  .btn.secondary { color: var(--verde-800); }
  .btn.secondary:hover { border-color: var(--verde-600); }
  .btn.subtle, .btn.ghost, .icon-btn { color: var(--verde-800); }
  .tienda-chip.activo, .report-tabs button.active, .peludito-tabs button.activo {
    background: var(--verde-800);
    border-color: var(--verde-800);
  }
  .hero-v2 .feature-button.primary { background: var(--verde-800); }
  .hero-v2 .feature-button.primary:hover { background: var(--verde-900); }
  .nav-item.active, .bottom-nav .active { color: var(--verde-800); }
  .tienda-barra-carrito { background: var(--verde-800); }
  .medalla-boton.verde { background: linear-gradient(135deg, var(--verde-700), var(--verde-800)); }
  .racion-resultado { background: var(--verde-800); }
  .carne-head { background: linear-gradient(120deg, var(--verde-900), var(--verde-700) 70%); }
  .medalla-hero { background: linear-gradient(140deg, var(--verde-700), var(--verde-900)); }
  .pasos-registro span { background: var(--verde-050); color: var(--verde-800); }
}

@layer sistema {
  /* El botón activo del menú: fondo verde con el ícono y el texto en crema,
     para que se lea bien encima. */
  .bottom-nav .nav-item.active,
  .bottom-nav .nav-item[aria-current="page"] {
    background: var(--verde-800);
    color: var(--superficie-suave);
  }
  .bottom-nav .nav-item.active svg,
  .bottom-nav .nav-item.active span { color: var(--superficie-suave); }
  .bottom-nav .nav-item.active span { font-weight: 700; }
  .nav-center.active { color: var(--superficie-suave); }
}

@layer sistema {
  /* Las fotos de los proveedores vienen en formatos distintos. Antes se
     recortaban para llenar el cuadro y salían mochas; ahora se ven completas
     sobre fondo blanco, y en grande al abrir el producto. */
  .tienda-producto .tienda-foto {
    aspect-ratio: 1 / 1;
    padding: var(--e2);
    background: #fff;
    border-bottom: 1px solid var(--borde);
  }
  .tienda-producto .tienda-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hoja-foto { aspect-ratio: 4 / 3; padding: var(--e3); background: #fff; }
  .hoja-foto img { object-fit: contain; }
  /* Pista de que se puede abrir */
  .tienda-producto .tienda-foto::after {
    content: "";
    position: absolute; inset: auto var(--e2) var(--e2) auto;
    width: 26px; height: 26px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2335503a' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5M11 8v6M8 11h6'/></svg>") center / 15px no-repeat;
    box-shadow: var(--sombra-1);
    pointer-events: none;
  }
}

@layer sistema {
  /* Tarjetas parejas: la descripción se corta en dos líneas (completa se lee
     al abrir el producto) y el botón queda siempre abajo. */
  .tienda-producto { display: flex; flex-direction: column; }
  .tienda-producto-cuerpo { display: flex; flex-direction: column; gap: var(--e2); flex: 1; }
  .tienda-producto-cuerpo p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tienda-producto-cuerpo .tienda-precios { margin-top: auto; }
  .tienda-producto-cuerpo > .btn,
  .tienda-producto-cuerpo > .tienda-cantidad,
  .tienda-producto-cuerpo > .approval-pill { align-self: stretch; justify-content: center; }
}

@layer sistema {
  /* =============================================================
     20 · Galería del producto
     La foto grande se ve completa, nunca recortada, y debajo van
     las demás en pequeñito para pasar de una a otra.
     ============================================================= */
  /* La columna se fija a lo ancho de la hoja: sin esto, la tira de
     miniaturas estira la cuadrícula y la foto se sale de la pantalla. */
  .hoja-galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  /* Marco fijo y cuadrado: así la hoja no da saltos al pasar de una foto
     acostada a una parada, y ninguna se ve recortada. */
  .hoja-galeria .hoja-foto { position: relative; max-width: 100%; min-height: 0; aspect-ratio: 1 / 1; }
  /* La foto se ancla al marco para que una imagen parada no lo estire. */
  .hoja-galeria .hoja-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: var(--e3);
    object-fit: contain;
  }

  .galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.92);
    color: var(--verde-700);
    box-shadow: var(--sombra-2);
    cursor: pointer;
    transition: background var(--rapido) var(--curva);
  }
  .galeria-flecha:hover { background: #fff; }
  .galeria-flecha.atras { left: var(--e2); }
  .galeria-flecha.adelante { right: var(--e2); }

  .galeria-cuenta {
    position: absolute;
    right: var(--e2);
    bottom: var(--e2);
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: rgba(31, 42, 34, 0.68);
    color: #fff;
    font-size: var(--texto-xxs);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .galeria-miniaturas {
    display: flex;
    min-width: 0;
    gap: var(--e2);
    padding: 0 var(--e3) var(--e1);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .galeria-mini {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 2px;
    border: 1px solid var(--borde);
    border-radius: var(--r-xs);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--rapido) var(--curva);
  }
  .galeria-mini img { width: 100%; height: 100%; object-fit: contain; }
  .galeria-mini:hover { border-color: var(--verde-300); }
  .galeria-mini.activa { border-color: var(--verde-700); box-shadow: 0 0 0 2px var(--verde-100); }

  @media (max-width: 640px) {
    .galeria-flecha { width: 34px; height: 34px; }
    .galeria-mini { width: 48px; height: 48px; }
  }
}

@layer sistema {
  /* =============================================================
     21 · Escuela Kafot
     Un camino de nueve pasos, tarjetas que se pasan de a una y un
     clicker que tiene que responder al instante.
     ============================================================= */
  .escuela-hero {
    padding: var(--e5);
    border: 1px solid var(--verde-100);
    border-radius: var(--r-lg);
    background: var(--verde-050);
  }
  .escuela-hero h1 { margin: 0 0 var(--e2); font-size: var(--texto-xl); }
  .escuela-hero p { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }
  .escuela-marcador {
    display: flex; flex-wrap: wrap; gap: var(--e2);
    margin-top: var(--e4);
  }
  .escuela-marcador span {
    padding: 6px 12px;
    border-radius: var(--r-full);
    background: var(--superficie);
    border: 1px solid var(--borde);
    font-size: var(--texto-xs);
    color: var(--texto-suave);
  }
  .escuela-marcador strong { color: var(--verde-700); font-size: var(--texto-md); }
  .escuela-encurso { color: var(--tierra-600); }

  .care-calculadora.destacada { border-color: var(--verde-300); background: var(--superficie); }

  /* Reglas de la casa */
  .escuela-reglas {
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie-suave);
  }
  .escuela-reglas h3 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e3); font-size: var(--texto-md); }
  .escuela-reglas ul { display: grid; gap: var(--e2); margin: 0; padding-left: var(--e4); }
  .escuela-reglas li { color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.5; }
  .escuela-reglas li strong { color: var(--texto); }
  .escuela-nota { text-align: center; }

  /* Una lección */
  .leccion-puntos { display: flex; justify-content: center; gap: 6px; }
  .leccion-puntos button {
    width: 26px; height: 6px; padding: 0;
    border: 0; border-radius: var(--r-full);
    background: var(--borde);
    cursor: pointer;
    transition: background var(--rapido) var(--curva);
  }
  .leccion-puntos button.visto { background: var(--verde-300); }
  .leccion-puntos button.activo { background: var(--verde-700); }

  .leccion-tarjeta, .leccion-cierre {
    display: grid;
    gap: var(--e3);
    padding: var(--e5);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
  }
  .leccion-tarjeta h3, .leccion-cierre h3 { margin: 0; font-size: var(--texto-lg); }
  .leccion-cierre h3 { display: flex; align-items: center; gap: var(--e2); }
  .leccion-tarjeta p { margin: 0; color: var(--texto-suave); font-size: var(--texto-md); line-height: 1.65; }

  .leccion-foto {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    background: var(--verde-050);
    overflow: hidden;
  }
  .leccion-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .leccion-foto-vacia {
    display: grid;
    justify-items: center;
    gap: var(--e2);
    color: var(--verde-300);
    font-size: var(--texto-xxs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .leccion-practica { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }
  .leccion-senal {
    padding: var(--e3) var(--e4);
    border-radius: var(--r-sm);
    background: var(--verde-050);
    border: 1px solid var(--verde-100);
  }
  .leccion-senal strong { font-size: var(--texto-sm); }
  .leccion-senal p { margin: var(--e1) 0 0; color: var(--texto-suave); font-size: var(--texto-sm); }
  .leccion-errores strong { display: flex; align-items: center; gap: var(--e2); font-size: var(--texto-sm); color: var(--alerta-600); }
  .leccion-errores ul { display: grid; gap: var(--e1); margin: var(--e2) 0 0; padding-left: var(--e4); }
  .leccion-errores li { color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.5; }
  .leccion-acciones { display: grid; gap: var(--e2); margin-top: var(--e2); }

  /* La barra de avance se queda a la vista, por encima del menú de abajo:
     pasar de tarjeta no debería obligar a buscar el botón. */
  .leccion-navegacion {
    position: sticky;
    bottom: 104px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e2);
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: var(--sombra-2);
  }
  .leccion-page { padding-bottom: 96px; }
  .leccion-cuenta { color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 600; }

  /* El clicker */
  .clicker-cambio {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-full);
    background: var(--fondo-alt);
  }
  .clicker-cambio button {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }
  .clicker-cambio button.activo { background: var(--superficie); color: var(--verde-700); box-shadow: var(--sombra-1); }

  .clicker-boton {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--e3);
    width: 100%;
    min-height: 260px;
    padding: var(--e6);
    border: 0;
    border-radius: var(--r-xl);
    background: var(--verde-700);
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--sombra-3);
    transition: transform 90ms var(--curva), background var(--rapido) var(--curva);
  }
  .clicker-boton.silbato { background: var(--tierra-500); }
  .clicker-boton:active { transform: scale(0.985); }
  .clicker-centro {
    display: grid; place-items: center;
    width: 108px; height: 108px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.16);
  }
  .clicker-texto { font-size: var(--texto-md); font-weight: 600; letter-spacing: -0.01em; }
  .clicker-boton.sonando .clicker-centro { animation: clic 320ms var(--curva); }
  @keyframes clic {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 0 46px rgba(255, 255, 255, 0); }
  }

  @media (max-width: 640px) {
    .leccion-tarjeta, .leccion-cierre { padding: var(--e4); }
    .clicker-boton { min-height: 220px; }
  }
}

@layer sistema {
  /* =============================================================
     22 · El camino, como camino
     Nueve paradas que serpentean, unidas por huellitas. La idea es
     que se vea el recorrido completo de un vistazo y dé ganas de
     seguir, no una lista más.
     ============================================================= */
  .camino {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: var(--e5) var(--e3);
    list-style: none;
    border-radius: var(--r-xl);
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(228, 236, 224, 0.75) 0%, rgba(228, 236, 224, 0) 60%),
      linear-gradient(180deg, #fbfaf5 0%, #f4f2e9 100%);
    border: 1px solid var(--borde);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .camino-paso { position: relative; display: flex; padding: var(--e2) 0; }
  .camino-paso.izq { justify-content: flex-start; }
  .camino-paso.der { justify-content: flex-end; }

  /* Las huellitas que unen una parada con la anterior */
  .camino-enlace {
    position: absolute;
    top: -14px;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transform: translateX(-50%) rotate(-24deg);
    pointer-events: none;
  }
  .camino-paso.izq .camino-enlace { transform: translateX(-50%) rotate(24deg); }
  .camino-enlace i {
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--verde-300);
    opacity: 0.45;
  }

  .camino-nodo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: min(100%, 300px);
    padding: var(--e2);
    border: 0;
    border-radius: var(--r-xl);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: transform var(--medio) var(--curva);
  }
  .camino-paso.der .camino-nodo { flex-direction: row-reverse; text-align: right; }
  .camino-nodo:hover { transform: translateY(-2px); }
  .camino-nodo:active { transform: translateY(1px); }

  .camino-circulo {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, #ffffff 0%, #f2efe4 100%);
    color: var(--verde-600);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 6px 0 rgba(31, 42, 34, 0.08),
      0 10px 18px -8px rgba(31, 42, 34, 0.35);
    transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
  }
  .camino-nodo:hover .camino-circulo { box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 0 rgba(31,42,34,0.1), 0 14px 22px -8px rgba(31,42,34,0.4); }
  .camino-nodo:active .camino-circulo { box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 0 rgba(31,42,34,0.12); }
  .camino-circulo b {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-full);
    background: var(--superficie);
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: var(--texto-xxs);
    font-weight: 700;
  }

  .camino-paso.practicando .camino-circulo {
    background: linear-gradient(180deg, #f8e9d8 0%, #efd9bf 100%);
    color: var(--tierra-600);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 0 rgba(169,120,78,0.25), 0 12px 20px -8px rgba(169,120,78,0.45);
  }
  .camino-paso.practicando .camino-circulo b { color: var(--tierra-600); border-color: rgba(169,120,78,0.3); }

  .camino-paso.dominada .camino-circulo {
    background: linear-gradient(180deg, var(--verde-500) 0%, var(--verde-700) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 0 rgba(28,42,33,0.35), 0 12px 22px -8px rgba(28,42,33,0.6);
  }
  .camino-paso.dominada .camino-circulo b { background: var(--verde-700); border-color: rgba(255,255,255,0.35); color: #fff; }
  .camino-paso.dominada + .camino-paso .camino-enlace i { opacity: 0.9; background: var(--verde-500); }

  .camino-cuerpo { display: grid; gap: 2px; min-width: 0; }
  .camino-cuerpo strong { font-size: var(--texto-md); letter-spacing: -0.01em; }
  .camino-cuerpo em { font-style: normal; color: var(--texto-suave); font-size: var(--texto-xs); line-height: 1.4; }
  .camino-datos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; color: var(--texto-tenue); font-size: var(--texto-xxs); }
  .camino-paso.der .camino-datos { justify-content: flex-end; }
  .camino-datos b { color: var(--verde-700); }

  @media (max-width: 420px) {
    .camino { padding: var(--e4) var(--e2); }
    .camino-circulo { width: 62px; height: 62px; }
    .camino-nodo { gap: var(--e2); }
  }

  /* =============================================================
     23 · Relieve
     La app se veía muy plana: todo era blanco sobre blanco. Aquí se
     le da profundidad sin cambiar ni un color de la marca: fondo con
     luz, superficies con un degradado mínimo y sombras que de verdad
     levantan la tarjeta del papel.
     ============================================================= */
  :root {
    --sombra-1: 0 1px 2px rgba(31, 42, 34, 0.06), 0 1px 3px rgba(31, 42, 34, 0.04);
    --sombra-2: 0 2px 4px rgba(31, 42, 34, 0.05), 0 8px 18px -8px rgba(31, 42, 34, 0.22);
    --sombra-3: 0 4px 8px rgba(31, 42, 34, 0.06), 0 18px 36px -12px rgba(31, 42, 34, 0.32);
  }

  /* La luz del fondo va en una capa aparte: con background-attachment
     fixed, algunos celulares se ponen lentos al desplazar. */
  body { background: var(--fondo); }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(90% 55% at 12% 0%, rgba(228, 236, 224, 0.8) 0%, rgba(228, 236, 224, 0) 55%),
      radial-gradient(70% 45% at 100% 8%, rgba(243, 229, 214, 0.7) 0%, rgba(243, 229, 214, 0) 55%);
  }

  .form-panel, .admin-panel, .card, .stat-card, .hub-card, .feature-button,
  .cocina-card, .tienda-producto, .peludito-proximos, .medalla-sobre-mi,
  .raza-guia, .peligro, .encontre-match, .plan-cachorro,
  .leccion-tarjeta, .leccion-cierre, .table-wrap, .admin-simple-list article {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(251, 249, 244, 0.9) 100%);
    box-shadow: var(--sombra-2);
  }

  .hub-card, .feature-button, .cocina-card, .tienda-producto, .encontre-match {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, var(--sombra-2);
  }
  .hub-card:hover, .feature-button:hover, .cocina-card:hover,
  .tienda-producto:hover, .encontre-match:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, var(--sombra-3); }

  /* Los iconos redondos dejan de ser un círculo plano */
  .hub-icon {
    background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.38) 0%, rgba(31, 42, 34, 0.08) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 4px 10px -4px rgba(31, 42, 34, 0.4);
  }

  /* Las tarjetas se despegan del papel */
  .hub-card, .feature-button, .cocina-card, .tienda-producto, .encontre-match, .care-topic {
    border-color: rgba(31, 42, 34, 0.08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 1px 2px rgba(31, 42, 34, 0.04),
      0 12px 26px -12px rgba(31, 42, 34, 0.3);
  }

  /* Botones con volumen: una luz arriba y una sombra que los apoya */
  .btn {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.08) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 2px 6px -1px rgba(31, 42, 34, 0.28);
  }
  .btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 10px -2px rgba(31, 42, 34, 0.32); }
  .btn:active { box-shadow: 0 1px 2px rgba(31, 42, 34, 0.2) inset; }
  .btn.secondary, .btn.subtle, .btn.ghost {
    background-image: linear-gradient(180deg, #ffffff 0%, #f7f5ee 100%);
    box-shadow: 0 1px 2px rgba(31, 42, 34, 0.06);
  }
  .btn.subtle, .btn.ghost { background-image: none; box-shadow: none; }

  .icon-btn {
    background-image: linear-gradient(180deg, #ffffff 0%, #f7f5ee 100%);
    box-shadow: 0 1px 2px rgba(31, 42, 34, 0.07);
  }

  /* Campos hundidos, no dibujados encima */
  input, select, textarea {
    background-image: linear-gradient(180deg, rgba(31, 42, 34, 0.028) 0%, rgba(31, 42, 34, 0) 12px);
  }

  .topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 18px -12px rgba(31, 42, 34, 0.5); }
  .bottom-nav { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -2px 6px rgba(31, 42, 34, 0.04), var(--sombra-3); }

  .escuela-hero, .my-manada-hero, .care-hero {
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.75) 0%, rgba(228, 236, 224, 0.5) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--sombra-1);
  }

  .empty { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(241, 240, 233, 0.6) 100%); }
}

@layer sistema {
  /* =============================================================
     24 · Color
     La app se veía pálida: crema sobre crema. Cada lección de la
     Escuela recibe su propio color y los iconos redondos de toda la
     app pasan de pastel apagado a color lleno. El verde de la marca
     no se toca: sigue mandando en botones y titulares.
     ============================================================= */
  .tono-sol     { --tono: #c8862f; --tono-medio: #f2cf95; --tono-suave: #fdf1dd; --tono-fuerte: #a86d1f; }
  .tono-verde   { --tono: #4d6b50; --tono-medio: #bcd4b8; --tono-suave: #e8f1e4; --tono-fuerte: #35503a; }
  .tono-coral   { --tono: #d95f3f; --tono-medio: #f6b7a3; --tono-suave: #fdeae3; --tono-fuerte: #b64828; }
  .tono-azul    { --tono: #37748a; --tono-medio: #a9cfdb; --tono-suave: #e2f0f4; --tono-fuerte: #275a6c; }
  .tono-lila    { --tono: #74619b; --tono-medio: #c6bada; --tono-suave: #eee9f6; --tono-fuerte: #574780; }
  .tono-ciruela { --tono: #a04f65; --tono-medio: #e0b0bd; --tono-suave: #f8e6ea; --tono-fuerte: #813a4d; }
  .tono-teal    { --tono: #2f8577; --tono-medio: #a4d3c9; --tono-suave: #e0f1ec; --tono-fuerte: #1e6558; }
  .tono-rojo    { --tono: #c2553a; --tono-medio: #f0ae9c; --tono-suave: #fbe6df; --tono-fuerte: #9c3e26; }
  .tono-tierra  { --tono: #a9784e; --tono-medio: #e0c1a0; --tono-suave: #f6ead9; --tono-fuerte: #8a5d37; }

  /* Las paradas del camino, cada una con su color */
  .camino-circulo {
    background: linear-gradient(180deg, #ffffff 0%, var(--tono-suave, #f2efe4) 100%);
    color: var(--tono, var(--verde-600));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 6px 0 var(--tono-medio, rgba(31, 42, 34, 0.12)),
      0 12px 20px -8px rgba(31, 42, 34, 0.35);
  }
  .camino-circulo b { color: var(--tono, var(--texto-tenue)); border-color: var(--tono-medio, var(--borde)); }
  .camino-nodo:hover .camino-circulo {
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 0 var(--tono-medio), 0 16px 24px -8px rgba(31,42,34,0.4);
  }
  .camino-nodo:active .camino-circulo { box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 0 var(--tono-medio); }

  .camino-paso.practicando .camino-circulo,
  .camino-paso.dominada .camino-circulo {
    background: linear-gradient(180deg, var(--tono) 0%, var(--tono-fuerte) 100%);
    color: #fff;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.28) inset,
      0 6px 0 var(--tono-fuerte),
      0 14px 24px -8px rgba(31, 42, 34, 0.45);
  }
  .camino-paso.practicando .camino-circulo b,
  .camino-paso.dominada .camino-circulo b {
    background: var(--tono-fuerte);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
  }
  .camino-paso.dominada .camino-circulo::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: var(--r-full);
    border: 2px solid var(--tono-medio);
  }
  .camino-enlace i { background: var(--tono-medio); opacity: 0.85; }
  .camino-paso.dominada + .camino-paso .camino-enlace i { background: var(--tono-medio); opacity: 1; }
  .camino-cuerpo strong { color: var(--tono-fuerte, var(--texto)); }

  /* La lección se viste del mismo color */
  .leccion-tarjeta, .leccion-cierre {
    border-top: 4px solid var(--tono, var(--verde-600));
  }
  .leccion-foto { background: linear-gradient(160deg, var(--tono-suave, var(--verde-050)) 0%, var(--tono-medio, var(--verde-100)) 140%); }
  .leccion-foto-vacia { color: var(--tono, var(--verde-300)); opacity: 0.75; }
  .leccion-puntos button.visto { background: var(--tono-medio, var(--verde-300)); }
  .leccion-puntos button.activo { background: var(--tono, var(--verde-700)); }
  .leccion-senal { background: var(--tono-suave, var(--verde-050)); border-color: var(--tono-medio, var(--verde-100)); }
  .leccion-page .screen-head h2 { color: var(--tono-fuerte, var(--texto)); }
  .leccion-cierre h3 svg { color: var(--tono); }

  /* =============================================================
     Los iconos redondos: de pastel apagado a color lleno
     ============================================================= */
  .hub-icon { color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 14px -6px rgba(31,42,34,0.55); }
  .hub-icon.coral   { background: linear-gradient(160deg, #ef8461 0%, #cf5334 100%); color: #fff; }
  .hub-icon.mustard { background: linear-gradient(160deg, #e6ae44 0%, #c1861d 100%); color: #fff; }
  .hub-icon.green   { background: linear-gradient(160deg, #5f8f63 0%, #35503a 100%); color: #fff; }
  .hub-icon.blue    { background: linear-gradient(160deg, #4d93a3 0%, #2b6673 100%); color: #fff; }

  /* Un poco de marca en los rótulos */
  .eyebrow { color: var(--verde-600); }

  /* El encabezado de la Escuela, con más vida */
  .escuela-hero {
    background-image:
      radial-gradient(120% 90% at 100% 0%, rgba(227, 154, 84, 0.22) 0%, rgba(227, 154, 84, 0) 55%),
      linear-gradient(160deg, #ffffff 0%, var(--verde-100) 100%);
    border-color: var(--verde-300);
  }
  .escuela-hero h1 { color: var(--verde-800); }
  .escuela-marcador strong { color: var(--verde-700); }
  .escuela-marcador span { border-color: var(--verde-100); }

  /* El camino, sobre un fondo con un poco más de temperatura */
  .camino {
    background:
      radial-gradient(90% 40% at 50% 0%, rgba(228, 236, 224, 0.9) 0%, rgba(228, 236, 224, 0) 60%),
      radial-gradient(70% 40% at 0% 100%, rgba(243, 229, 214, 0.75) 0%, rgba(243, 229, 214, 0) 60%),
      linear-gradient(180deg, #fbfaf5 0%, #f3f1e7 100%);
  }

  /* Botones de acento con el color de su lección */
  .leccion-page .btn:not(.secondary):not(.earth) {
    background-color: var(--tono-fuerte, var(--verde-600));
  }
  .leccion-page .btn:not(.secondary):not(.earth):hover { background-color: var(--tono, var(--verde-700)); }
}

@layer sistema {
  /* =============================================================
     25 · A quién le estoy enseñando
     ============================================================= */
  .escuela-alumnos {
    padding: var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
  }
  .escuela-alumnos-fila {
    display: flex;
    gap: var(--e2);
    margin-bottom: var(--e2);
    padding-bottom: var(--e1);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .escuela-alumno {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: 44px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }
  .escuela-alumno:hover { border-color: var(--verde-300); }
  .escuela-alumno.activo { border-color: var(--verde-700); background: var(--verde-050); color: var(--verde-800); }
  .escuela-alumno-foto {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--fondo-alt);
    color: var(--verde-600);
    overflow: hidden;
  }
  .escuela-alumno-foto img { width: 100%; height: 100%; object-fit: cover; }

  /* =============================================================
     26 · El compromiso
     Tiene que sentirse como una firma, no como unos términos y
     condiciones: por eso ocupa espacio, tiene aire y se lee.
     ============================================================= */
  .compromiso {
    display: grid;
    gap: var(--e4);
    padding: var(--e5);
    border: 1px solid var(--verde-300);
    border-radius: var(--r-lg);
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(227, 154, 84, 0.16) 0%, rgba(227, 154, 84, 0) 55%),
      linear-gradient(165deg, #ffffff 0%, var(--verde-050) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, var(--sombra-2);
  }
  .compromiso-cabeza { display: flex; gap: var(--e3); align-items: flex-start; }
  .compromiso-cabeza h3 { margin: 0 0 var(--e1); font-size: var(--texto-lg); color: var(--verde-800); }
  .compromiso-cabeza p { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }

  .compromiso-lista { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; counter-reset: compromiso; }
  .compromiso-lista li { display: flex; gap: var(--e3); align-items: flex-start; }
  .compromiso-lista li > span {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    background: var(--superficie);
    border: 1px solid var(--verde-100);
    color: var(--verde-600);
    box-shadow: var(--sombra-1);
  }
  .compromiso-lista strong { display: block; font-size: var(--texto-sm); letter-spacing: -0.01em; }
  .compromiso-lista em { font-style: normal; color: var(--texto-suave); font-size: var(--texto-xs); line-height: 1.5; }

  .compromiso-firma {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    padding: var(--e4);
    border: 1px dashed var(--verde-300);
    border-radius: var(--r-md);
    background: var(--superficie);
    cursor: pointer;
  }
  .compromiso-firma input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; accent-color: var(--verde-700); cursor: pointer; }
  .compromiso-firma span { font-size: var(--texto-sm); color: var(--texto-suave); line-height: 1.5; }
  .compromiso-firma strong { color: var(--texto); }
  .compromiso-firma:hover { border-color: var(--verde-600); }

  /* En el carné, discreto pero visible */
  .carne-compromiso {
    display: flex;
    gap: var(--e2);
    align-items: center;
    margin-top: var(--e3);
    padding: var(--e3) var(--e4);
    border-radius: var(--r-sm);
    background: var(--verde-050);
    border: 1px solid var(--verde-100);
    color: var(--verde-700);
  }
  .carne-compromiso strong { display: block; font-size: var(--texto-xs); }
  .carne-compromiso span { color: var(--texto-suave); font-size: var(--texto-xxs); }

  @media (max-width: 640px) {
    .compromiso { padding: var(--e4); }
  }
}

@layer sistema {
  /* =============================================================
     27 · Menos dedo
     Las pantallas largas ahora llevan atajos arriba, y en cualquier
     parte hay un botón para volver al principio. La barra se queda
     pegada abajo del encabezado para que siempre esté a la mano.
     ============================================================= */
  .saltar {
    position: sticky;
    top: 62px;
    z-index: 8;
    display: grid;
    gap: var(--e2);
    margin: 0 calc(var(--e4) * -1);
    padding: var(--e3) var(--e4);
    background: rgba(248, 245, 239, 0.94);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--borde);
  }
  .saltar-rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-tenue);
    font-size: var(--texto-xxs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .saltar-chips {
    display: flex;
    gap: var(--e2);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .saltar-chips button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-full);
    background: var(--superficie);
    color: var(--verde-700);
    font-size: var(--texto-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--sombra-1);
    transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
  }
  .saltar-chips button:hover { background: var(--verde-050); border-color: var(--verde-300); }
  .saltar-chips button:active { transform: translateY(1px); }

  /* Volver arriba: aparece solo cuando ya se bajó bastante */
  .subir {
    position: fixed;
    right: var(--e4);
    bottom: 104px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(150%) blur(10px);
    color: var(--verde-700);
    font-size: var(--texto-xs);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--sombra-3);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
  }
  .subir.visible { opacity: 1; transform: none; pointer-events: auto; }
  .subir:hover { background: #fff; }

  /* Las tarjetas de tema ahora son botones: se igualan a como se veían */
  button.care-topic { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

  /* La guía 01 ya no viene abierta */
  details.care-guide > .care-guide-head { margin-top: var(--e4); }
  details.care-guide[open] > summary { margin-bottom: 0; }

  @media (max-width: 640px) {
    .saltar { top: 58px; margin-inline: calc(var(--e4) * -1); }
    .subir { right: var(--e3); bottom: 100px; padding: 9px 14px; }
  }
}

@layer sistema {
  /* Las guías de raza se abren al tocarlas, como las de cuidado */
  details.raza-guia > summary {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    cursor: pointer;
    list-style: none;
  }
  details.raza-guia > summary::-webkit-details-marker { display: none; }
  details.raza-guia > summary > span:nth-child(2) { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
  details.raza-guia summary small { color: var(--texto-tenue); font-size: var(--texto-xxs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  details.raza-guia summary strong { font-size: var(--texto-md); letter-spacing: -0.01em; }
  details.raza-guia summary em { font-style: normal; color: var(--texto-suave); font-size: var(--texto-xs); line-height: 1.45; }
  details.raza-guia[open] > summary { border-bottom: 1px solid var(--borde); }
  details.raza-guia > dl, details.raza-guia > .raza-consejos { margin: var(--e4); }
  details.raza-guia.suya { border-color: var(--verde-300); }
}

@layer sistema {
  /* Los grupos de alimentos peligrosos, plegables */
  details.peligros-grupo {
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
  }
  details.peligros-grupo > summary {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    cursor: pointer;
    list-style: none;
  }
  details.peligros-grupo > summary::-webkit-details-marker { display: none; }
  details.peligros-grupo > summary > span:nth-child(2) { flex: 1 1 auto; display: grid; gap: 2px; }
  details.peligros-grupo summary strong { font-size: var(--texto-md); }
  details.peligros-grupo summary em { font-style: normal; color: var(--texto-tenue); font-size: var(--texto-xs); }
  details.peligros-grupo[open] > summary { border-bottom: 1px solid var(--borde); }
  details.peligros-grupo > .peligros-lista { padding: var(--e4); }
}

@layer sistema {
  /* Al saltar a una sección, que no quede debajo del encabezado */
  .care-detail, .care-guide, .raza-guia, .peligros-grupo, .camino-paso, .tienda-producto {
    scroll-margin-top: 96px;
  }
}

@layer sistema {
  /* =============================================================
     28 · El carné para compartir
     Lo que se ve en pantalla es la imagen misma, no una muestra.
     ============================================================= */
  .tarjeta-marco {
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
  }
  .tarjeta-marco canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
  }
  .compromiso-acciones { justify-content: center; }
  .carne-compromiso[data-action] { cursor: pointer; }
  .carne-compromiso[data-action]:hover { border-color: var(--verde-300); }
}

@layer sistema {
  /* El clicker, a la mano dentro de la lección */
  .leccion-clicker-grande {
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--tono-medio, var(--verde-100));
    border-radius: var(--r-md);
    background: var(--tono-suave, var(--verde-050));
    color: var(--tono-fuerte, var(--verde-700));
    text-align: left;
    cursor: pointer;
    transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
  }
  .leccion-clicker-grande span { display: grid; gap: 1px; }
  .leccion-clicker-grande strong { font-size: var(--texto-sm); }
  .leccion-clicker-grande em { font-style: normal; color: var(--texto-suave); font-size: var(--texto-xs); }
  .leccion-clicker-grande:active { transform: scale(0.99); }
  .leccion-clicker-grande.sonando { animation: clic-chico 320ms var(--curva); }
  @keyframes clic-chico {
    0% { box-shadow: 0 0 0 0 var(--tono-medio, var(--verde-300)); }
    100% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
  }
}

@layer sistema {
  /* =============================================================
     29 · El mapa
     Fondo casi blanco, marcas con color: lo único que resalta es
     lo que sirve andando con un peludito.
     ============================================================= */
  .mapa-caja {
    position: relative;
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
    overflow: hidden;
  }
  .mapa-lienzo { height: 62vh; min-height: 320px; width: 100%; background: #f4f2ec; }
  .mapa-cargando {
    position: absolute; inset: 0; z-index: 500;
    display: grid; place-content: center; justify-items: center; gap: var(--e2);
    background: rgba(251, 249, 244, 0.82);
    color: var(--texto-suave); font-size: var(--texto-sm);
  }
  .mapa-cargando svg { animation: giro 1.1s linear infinite; }

  .mapa-chips { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .mapa-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .mapa-chip b { color: var(--texto-tenue); font-size: var(--texto-xxs); }
  .mapa-chip.activo b { color: rgba(255, 255, 255, 0.75); }
  .mapa-chip-punto {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: var(--r-full);
    background: var(--cat, var(--verde-600));
    color: #fff;
  }

  /* La marca en el mapa: gota con el ícono de su categoría */
  .mapa-pin-envoltura { background: none; border: 0; }
  .mapa-pin {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50% 50% 50% 6px;
    transform: rotate(45deg);
    background: var(--cat, var(--verde-600));
    color: #fff;
    border: 2.5px solid #fff;
    box-shadow: 0 4px 10px -2px rgba(31, 42, 34, 0.5);
  }
  .mapa-pin > svg { transform: rotate(-45deg); }
  .mapa-pin.sin-publicar { opacity: 0.55; border-style: dashed; }

  .mapa-pin-muestra {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--r-full);
    color: #fff;
    margin-right: 6px;
    vertical-align: middle;
  }
  .mapa-leyenda { display: flex; align-items: center; gap: var(--e2); list-style: none; }
  .escuela-reglas ul:has(.mapa-leyenda) { padding-left: 0; }

  /* La ficha del lugar */
  .mapa-ficha {
    position: relative;
    display: grid;
    gap: var(--e2);
    padding: var(--e5) var(--e4) var(--e4);
    border: 1px solid var(--borde);
    border-top: 4px solid var(--cat, var(--verde-600));
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
  }
  .mapa-ficha h3 { margin: 0; font-size: var(--texto-lg); }
  .mapa-ficha p { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }
  .mapa-ficha-cerrar { position: absolute; top: var(--e2); right: var(--e2); }
  .mapa-datos { display: grid; gap: var(--e1); margin: var(--e2) 0 0; padding: 0; list-style: none; }
  .mapa-datos li { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texto-suave); font-size: var(--texto-xs); }
  .mapa-pendiente { color: var(--tierra-600); }

  /* Leaflet: que no desentone con el resto.
     Las baldosas se destiñen para que el mapa quede casi en blanco y las
     marcas de colores sean lo único que salte a la vista. */
  .leaflet-container { font: inherit; background: #f4f2ec; }
  .leaflet-tile-pane { filter: grayscale(1) brightness(1.08) contrast(0.86) opacity(0.72); }
  .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,0.8); }
  .leaflet-bar a { border-radius: var(--r-xs) !important; }
}

@layer sistema {
  /* Ojo aquí: las marcas de peligro se ven distintas a las de lugares */
  .mapa-capas { margin-bottom: var(--e1); }
  .mapa-capas button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .mapa-pin.peligro {
    border-radius: var(--r-xs);
    border-style: solid;
    animation: latido 2.4s ease-in-out infinite;
  }
  @keyframes latido {
    0%, 100% { box-shadow: 0 4px 10px -2px rgba(31, 42, 34, 0.5), 0 0 0 0 rgba(194, 85, 58, 0.45); }
    50% { box-shadow: 0 4px 10px -2px rgba(31, 42, 34, 0.5), 0 0 0 10px rgba(194, 85, 58, 0); }
  }
  .mapa-ficha.riesgo h3 { font-size: var(--texto-md); line-height: 1.45; }
}

@layer sistema {
  /* =============================================================
     30 · Marcar en el mapa sin atinarle con el dedo
     El pin se queda fijo en el centro y lo que se mueve es el mapa,
     como cuando uno pide un domicilio.
     ============================================================= */
  .mapa-cruz {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 600;
    transform: translate(-50%, -100%);
    pointer-events: none;
    filter: drop-shadow(0 6px 8px rgba(31, 42, 34, 0.35));
  }
  .mapa-cruz .mapa-pin { animation: posarse 420ms var(--curva); }
  @keyframes posarse {
    from { transform: rotate(45deg) translateY(-14px); opacity: 0.4; }
    to { transform: rotate(45deg) translateY(0); opacity: 1; }
  }

  .marcar-pasos { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
  .marcar-pasos li { display: flex; gap: var(--e3); align-items: center; }
  .marcar-pasos li > span {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: var(--r-full);
    background: var(--verde-700);
    color: #fff;
    font-size: var(--texto-xs);
    font-weight: 700;
  }
  .marcar-pasos strong { display: block; font-size: var(--texto-sm); }
  .marcar-pasos small { color: var(--texto-suave); font-size: var(--texto-xs); }

  /* Dónde estoy */
  .mapa-ubicarme {
    position: absolute;
    right: var(--e3);
    bottom: var(--e5);
    z-index: 600;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: #fff;
    color: var(--verde-700);
    cursor: pointer;
    box-shadow: var(--sombra-3);
  }
  .mapa-ubicarme:hover { background: var(--verde-050); }
  .mapa-yo {
    display: block;
    width: 18px; height: 18px;
    border-radius: var(--r-full);
    background: #2f7fd1;
    border: 3px solid #fff;
    box-shadow: 0 0 0 6px rgba(47, 127, 209, 0.22);
  }

  /* Buscador y cambio mapa/lista */
  .mapa-herramientas { display: grid; gap: var(--e2); }
  .mapa-buscador {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: 0 var(--e3);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-full);
    background: var(--superficie);
    color: var(--texto-tenue);
  }
  .mapa-buscador input {
    border: 0;
    background: none;
    min-height: 44px;
    padding: 0;
    box-shadow: none;
  }
  .mapa-buscador input:focus { outline: none; box-shadow: none; }
  .mapa-vista button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

  /* La lista */
  .mapa-lista { display: grid; gap: var(--e2); }
  .mapa-lista-fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    background: var(--superficie);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--sombra-1);
    transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
  }
  .mapa-lista-fila:hover { border-color: var(--verde-300); transform: translateY(-1px); }
  .mapa-lista-fila > span:nth-child(2) { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }
  .mapa-lista-fila strong { font-size: var(--texto-sm); }
  .mapa-lista-fila em { font-style: normal; color: var(--texto-suave); font-size: var(--texto-xs); }

  /* =============================================================
     31 · El municipio y el cruce de perdidos con encontrados
     Kafot acepta peluditos de cualquier parte, así que hay que
     poder decir de dónde es cada uno. Y los resultados se separan:
     lo de aquí arriba, lo de otros pueblos detrás de un pliegue.
     ============================================================= */
  .campo-municipio select { width: 100%; }
  .municipio-otro {
    margin-top: var(--e2);
    width: 100%;
  }
  .municipio-otro.oculto { display: none; }

  /* Los grupos de coincidencias: el del municipio viene abierto y el
     de los demás pueblos cerrado, para que no estorbe. */
  .grupo-coincidencias {
    margin-bottom: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    overflow: hidden;
  }
  .grupo-coincidencias > summary {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .grupo-coincidencias > summary::-webkit-details-marker { display: none; }
  .grupo-coincidencias > summary::after {
    content: "";
    margin-left: auto;
    width: 9px; height: 9px;
    border-right: 2px solid var(--texto-suave);
    border-bottom: 2px solid var(--texto-suave);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--rapido, 0.15s) ease;
  }
  .grupo-coincidencias[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .grupo-coincidencias > summary span {
    padding: 2px 9px;
    border-radius: var(--r-full);
    background: rgba(125, 154, 113, 0.22);
    font-size: var(--texto-xs);
  }
  .grupo-coincidencias .result-list { padding: 0 var(--e3) var(--e3); }
  .grupo-coincidencias .encontre-match:last-child { margin-bottom: 0; }

  /* Un aviso que todavía no ha pasado por moderación. Se muestra
     porque las primeras horas son las que valen, pero se dice. */
  .encontre-crudo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0 6px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: rgba(244, 162, 97, 0.2);
    font-size: var(--texto-xs);
    color: var(--texto-suave);
  }

  /* La barra para escoger de qué municipio se ven los avisos */
  .reportes-lugar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e3);
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
  }
  .reportes-lugar label {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex: 1 1 200px;
    min-width: 0;
  }
  .reportes-lugar label > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
    white-space: nowrap;
  }
  .reportes-lugar select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    background: var(--superficie);
    font: inherit;
    font-size: var(--texto-sm);
  }
  .reportes-lugar .btn { flex: 1 1 100%; justify-content: center; }

  @media (min-width: 560px) {
    .reportes-lugar .btn { flex: 0 0 auto; }
  }

  /* =============================================================
     32 · El panel: números que se pueden tocar
     Las tarjetas del resumen ahora son botones y llevan a la
     lista filtrada. Tienen que verse igual que antes, pero
     responder al dedo.
     ============================================================= */
  .admin-stats .stat-card {
    width: 100%;
    border: 1px solid var(--borde);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rapido, 0.15s) var(--curva, ease),
                box-shadow var(--medio, 0.25s) var(--curva, ease),
                transform var(--medio, 0.25s) var(--curva, ease);
  }
  .admin-stats .stat-card:hover,
  .admin-stats .stat-card:focus-visible {
    border-color: var(--verde-300);
    box-shadow: var(--sombra-3, 0 6px 18px rgba(31, 42, 34, 0.12));
    transform: translateY(-2px);
  }

  /* Las pastillas para filtrar la lista de animales */
  .admin-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-bottom: var(--e4);
  }
  .admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--r-full);
    background: var(--superficie);
    font: inherit;
    font-size: var(--texto-sm);
    color: var(--texto-suave);
    cursor: pointer;
  }
  .admin-chip span {
    padding: 1px 7px;
    border-radius: var(--r-full);
    background: rgba(125, 154, 113, 0.22);
    font-size: var(--texto-xs);
    font-weight: 700;
  }
  .admin-chip:hover { border-color: var(--verde-300); }
  .admin-chip.activo {
    background: var(--verde-600);
    border-color: var(--verde-600);
    color: #fff;
  }
  .admin-chip.activo span { background: rgba(255, 255, 255, 0.25); }

  /* El aviso de los que están perdidos ahora mismo */
  .admin-alert.perdidos-ahora {
    background: rgba(194, 85, 58, 0.12);
    border-color: rgba(194, 85, 58, 0.3);
  }
  .admin-alert .btn-row { margin-top: var(--e2); }
  .admin-guide .btn { margin-top: var(--e2); }

  /* =============================================================
     33 · Las fotos de los peluditos, en 4:5
     Un perro de cuerpo entero es más alto que ancho. En un marco
     apaisado, para que quepa completo hay que alejarse, y entonces
     el animal queda chiquito en medio de un potrero. El 4:5 es el
     formato vertical que usan las redes y es el que le sirve.

     Solo cambian los marcos donde el peludito es el protagonista:
     su ficha, la vitrina de comunitarios y el carné. Las miniaturas
     de las listas siguen pequeñas y cuadradas, que ahí lo que
     importa es reconocerlo de un vistazo, no verlo entero.
     ============================================================= */
  @media (max-width: 719px) {
    .profile-v2 .profile-photo { aspect-ratio: 4 / 5; }
  }

  .community-photo-wrap { aspect-ratio: 4 / 5; }

  .carne-foto {
    width: 116px;
    height: 145px;
    object-fit: cover;
  }

  /* La vista previa del formulario muestra el mismo recorte que va a
     quedar guardado: si no, la sorpresa llega después de subirla. */
  .upload-preview img {
    width: auto;
    height: 250px;
    max-height: 250px;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-sm);
    object-fit: cover;
  }
  .upload-preview .muted {
    display: grid;
    justify-items: center;
    gap: var(--e2);
    padding: var(--e3);
    text-align: center;
    line-height: 1.45;
  }

  @media (max-width: 430px) {
    .carne-foto { width: 96px; height: 120px; }
  }

  /* =============================================================
     34 · El encuadre lo escoge la persona
     La misma foto va en un marco 4:5, en uno cuadrado y en uno
     redondo. En vez de recortarla —y tener que elegir cuál de los
     tres queda bien—, se guarda un punto de interés y cada marco
     centra ahí lo que muestra.
     ============================================================= */

  /* El carné vuelve a ser cuadrado: es una credencial, y una
     credencial se lee mejor con la foto cuadrada. */
  .carne-foto { width: 116px; height: 116px; }
  @media (max-width: 430px) {
    .carne-foto { width: 96px; height: 96px; }
  }

  .encuadre { display: grid; gap: var(--e2); }
  .encuadre > label {
    font-size: var(--texto-sm);
    font-weight: 600;
    color: var(--texto-suave);
  }
  .encuadre-marco {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--superficie-suave);
    cursor: grab;
    /* Que arrastrar mueva la foto y no desplace la página */
    touch-action: none;
    user-select: none;
  }
  .encuadre-marco.moviendo { cursor: grabbing; }
  .encuadre-marco:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 2px; }
  .encuadre-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
  }

  /* Las dos miniaturas: el mismo recorte que va a quedar de verdad en
     el carné y en la tarjeta para compartir. Se mueven con el marco.
     Un recuadro punteado habría sido más simple, pero habría mentido
     con las fotos apaisadas: ahí el carné recorta más ancho, no menos. */
  .encuadre-fila {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    flex-wrap: wrap;
  }
  .encuadre-previas {
    display: flex;
    flex-direction: row;
    gap: var(--e3);
    align-items: flex-start;
  }
  /* En pantalla ancha caben al lado del marco, en columna */
  @media (min-width: 620px) {
    .encuadre-previas { flex-direction: column; }
  }
  .encuadre-previas figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
  .encuadre-previas figcaption {
    font-size: var(--texto-xs);
    color: var(--texto-suave);
  }
  .encuadre-previas img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    background: var(--superficie-suave);
  }
  .previa-cuadro { border-radius: var(--r-sm); }
  .previa-circulo { border-radius: 50%; border: 2px solid var(--naranja, #e39a54); }

  .encuadre .btn { justify-self: start; }

  /* El botón de reencuadrar, encima de la foto de la ficha. Solo lo ve
     quien puede cambiarla: el equipo, o el dueño de ese peludito. */
  .profile-encuadrar {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #fffaf0;
    background: rgba(36, 53, 42, 0.58);
  }
  .profile-encuadrar:hover { background: rgba(36, 53, 42, 0.78); }

  /* El acceso a reencuadrar, dentro del espacio del peludito */
  .peludito-encuadrar {
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    margin-bottom: var(--e3);
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .peludito-encuadrar:hover { border-color: var(--verde-300); }
  .peludito-encuadrar img {
    width: 46px;
    height: 58px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex: 0 0 auto;
  }
  .peludito-encuadrar > span { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
  .peludito-encuadrar small { color: var(--texto-suave); font-size: var(--texto-xs); }

  /* =============================================================
     35 · El cartel de "se busca"
     Va en 4:5, que es el formato que mejor entra en WhatsApp y en
     historias. En pantalla se muestra completo, sin recortar: lo
     que se ve es exactamente lo que se descarga.
     ============================================================= */
  /* El escenario: un fondo con textura para que el cartel se vea
     puesto sobre algo, no flotando en el blanco de la pantalla. */
  .cartel-escenario {
    position: relative;
    margin: 0 calc(var(--e3) * -1) var(--e4);
    padding: var(--e5) var(--e4);
    background:
      radial-gradient(circle at 18% 12%, rgba(227, 154, 84, 0.16), transparent 55%),
      radial-gradient(circle at 82% 88%, rgba(77, 107, 80, 0.16), transparent 55%),
      linear-gradient(160deg, #f4efe3 0%, #e9e2d2 100%);
    overflow: hidden;
  }
  .cartel-escenario::before,
  .cartel-escenario::after {
    content: "";
    position: absolute;
    width: 150px; height: 150px;
    background: no-repeat center/contain
      url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2335503a' fill-opacity='0.07'%3E%3Cellipse cx='50' cy='64' rx='22' ry='19'/%3E%3Cellipse cx='28' cy='38' rx='9' ry='12' transform='rotate(-18 28 38)'/%3E%3Cellipse cx='43' cy='28' rx='8.5' ry='11.5'/%3E%3Cellipse cx='58' cy='28' rx='8.5' ry='11.5'/%3E%3Cellipse cx='73' cy='38' rx='9' ry='12' transform='rotate(18 73 38)'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }
  .cartel-escenario::before { top: -26px; left: -30px; transform: rotate(-16deg); }
  .cartel-escenario::after { bottom: -34px; right: -26px; transform: rotate(22deg); }

  .cartel-marco {
    position: relative;
    max-width: 330px;
    margin: 0 auto;
  }
  .cartel-marco.historia { max-width: 250px; }
  .cartel-marco canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-md);
    box-shadow:
      0 2px 6px rgba(24, 36, 28, 0.10),
      0 18px 40px rgba(24, 36, 28, 0.22);
  }

  /* Escoger el formato: dos tarjetas con la silueta de cada uno */
  .cartel-formatos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
    margin-bottom: var(--e4);
  }
  .cartel-formato {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    background: var(--superficie);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rapido, 0.15s) ease, box-shadow var(--medio, 0.25s) ease;
  }
  .cartel-formato:hover { border-color: var(--verde-300); }
  .cartel-formato.activo {
    border-color: var(--verde-600);
    box-shadow: inset 0 0 0 1px var(--verde-600);
    background: var(--verde-050, #f2f6f0);
  }
  .cartel-formato > span:last-child { display: grid; gap: 1px; min-width: 0; }
  .cartel-formato strong { font-size: var(--texto-sm); }
  .cartel-formato small { color: var(--texto-suave); font-size: var(--texto-xs); }
  .cartel-formato-muestra {
    flex: 0 0 auto;
    border: 2px solid var(--verde-600);
    border-radius: 4px;
    background: rgba(125, 154, 113, 0.22);
  }
  .cartel-formato-muestra.publicacion { width: 26px; height: 32px; }
  .cartel-formato-muestra.historia { width: 20px; height: 36px; }

  /* Los botones, con presencia: es lo que la persona vino a hacer */
  .cartel-acciones {
    display: grid;
    gap: var(--e2);
    margin-bottom: var(--e3);
  }
  .cartel-acciones .btn { width: 100%; justify-content: center; }

  @media (min-width: 560px) {
    .cartel-acciones { grid-template-columns: 1fr 1fr; }
  }

  /* Con treinta y dos guías hace falta separar perros de gatos */
  .guia-especies { margin-bottom: var(--e3); }
  .guia-especies button {
    white-space: nowrap;
    padding-left: var(--e2);
    padding-right: var(--e2);
    font-size: var(--texto-xs);
  }
  .guia-especies span {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: rgba(125, 154, 113, 0.22);
    font-size: var(--texto-xs);
    font-weight: 700;
  }
  .guia-especies .activo span { background: rgba(255, 255, 255, 0.25); }
}