body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; }
.container { max-width: 960px; margin: 0 auto; padding: 1rem; }
nav a { margin-right: .75rem; }

/* Mascotas: copiar look&feel de public/prestadores/mi_ficha.php (scoped) */
body.mm-body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 1.5rem 1rem;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background-image: url('../img/launchpad_bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #3b2c26;
  overflow-x: hidden;
}

body.mm-body::before{
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(165, 115, 85, 0.75),
    rgba(210, 180, 140, 0.65)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 0;
}

body.mm-body > *{
  position: relative;
  z-index: 1;
}

.mm-ui a { color: #A97155; font-weight: 700; text-decoration: none; }
.mm-ui a:hover { text-decoration: underline; }

.mm-wrap { max-width: 860px; margin: 0 auto; }
.mm-card { margin-top: 1rem; padding: 1.2rem; border-radius: 14px; border: 1px solid #eee; background: #fff; overflow-x: hidden; }

.mm-alert { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 12px; font-weight: 800; }
.mm-alert--error { background: #ffe9e9; border: 1px solid #f2b3b3; color: #b00020; }
.mm-alert--ok { background: #eafff1; border: 1px solid #b7e7c7; color: #1f7a4a; }
.mm-alert--warn { background: #fff7e6; border: 1px solid rgba(169,113,85,.35); color:#3b2c26; }

.mm-ui label { display:block; font-weight:700; margin: 0.75rem 0 0.35rem; }
.mm-ui input,
.mm-ui textarea,
.mm-ui select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #e7e0db;
  font: inherit;
  background: #fbf6f1;
  color: #1d1410;
  box-sizing: border-box;
}
.mm-ui input::placeholder, .mm-ui textarea::placeholder { color:#7a6a62; opacity: 1; }
.mm-ui input:focus, .mm-ui textarea:focus, .mm-ui select:focus { outline: none; border-color:#A97155; box-shadow:0 0 0 3px rgba(169,113,85,0.18); background:#fff; }
.mm-ui textarea { min-height: 120px; resize: vertical; }

.mm-row { display:grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 720px){ .mm-row.mm-two { grid-template-columns: 1fr 1fr; } }

.mm-btn { display:inline-flex; align-items:center; justify-content:center; border-radius: 12px; padding: 0.8rem 1rem; border: 0; background: #A97155; color: #fff; font-weight: 800; cursor: pointer; text-decoration:none; }
.mm-btn:hover { background: #8d5f47; text-decoration:none; }
.mm-btn--secondary { background:#ececec; color:#3b2c26; }
.mm-btn--secondary:hover { background:#dedede; }
/* Evitar que el color general de links pise el texto de los botones */
.mm-ui a.mm-btn { color:#fff; text-decoration:none; font-weight:900; }
.mm-ui a.mm-btn:hover { color:#fff; text-decoration:none; }
.mm-ui a.mm-btn.mm-btn--secondary { color:#3b2c26; }
.mm-ui a.mm-btn.mm-btn--secondary:hover { color:#3b2c26; }

.mm-note { font-size: 0.95rem; color:#6b5a53; }

.mm-titlebar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mm-titlebar .mm-badge { background:#ececec; color:#3b2c26; border-radius: 12px; padding: 10px 12px; font-weight:800; }

.mm-modal[aria-hidden="true"] { display: none !important; }
.mm-modal[aria-hidden="false"] { display: flex !important; }

.mm-cardgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mm-item { border: 1px solid #eee; border-radius: 14px; overflow:hidden; background:#fff; }
.mm-item__img { height: 220px; padding: 10px; background:#fbf6f1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mm-item__img img { width:100%; max-width:200px; aspect-ratio: 1 / 1; height:auto; object-fit:cover; display:block; border-radius: 12px; }
.mm-item__body { padding: 12px 12px 14px; }
.mm-item__title { font-weight: 900; font-size: 1.1rem; color:#1d1410; }
.mm-item__meta { margin-top:4px; color:#6b5a53; }

.mm-item__actions { margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; }
.mm-item__actions a { font-weight:800; }

.mm-item--homenaje { border-color: rgba(169,113,85,0.45); background: #fffaf6; position: relative; }
.mm-item--homenaje .mm-item__img img { filter: grayscale(1); opacity: 0.85; }
.mm-item--homenaje .mm-item__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(169,113,85,0.9);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
}
.mm-item--homenaje .mm-item__title { color: #6b3e2c; }
.mm-item__memorial { margin-top: 8px; font-size: 0.92rem; color: #6b5a53; }

.mm-photo-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.mm-photo { border: 1px solid #e7e0db; border-radius: 12px; overflow: hidden; background:#fbf6f1; display:flex; flex-direction:column; align-items:center; }
.mm-photo img { width:100%; max-width:200px; aspect-ratio: 1 / 1; height:auto; object-fit:cover; display:block; border-radius: 12px; }
.mm-photo label { align-self:stretch; }

.mm-thumb-link { display:block; }
.mm-photo label { display:flex; align-items:center; gap:6px; margin: 8px; font-weight: 800; color:#3b2c26; }

.mm-list { display:flex; flex-direction:column; gap:12px; margin-top: 8px; }
.mm-list-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px; border:1px solid #eee; border-radius: 14px; background:#fff; }
.mm-list-item__main { min-width:0; }
.mm-list-item__title { font-weight:900; color:#1d1410; }
.mm-list-item__meta { color:#6b5a53; margin-top:4px; font-size:0.95rem; }
.mm-list-item__actions { display:flex; gap:8px; flex-wrap:wrap; }
.mm-friends-pets { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background:#fbf6f1; border:1px solid #efe4db; }
.mm-friends-pets__title { font-weight: 900; color:#3b2c26; margin-bottom: 6px; }
.mm-friends-pets__list { margin:0; padding-left:18px; color:#5b4a42; }
.mm-friends-pets__list li { margin: 4px 0; }
.mm-friends-pets__form { display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.mm-friends-pets__form input,
.mm-friends-pets__form select { flex: 1 1 160px; min-width: 160px; }
.mm-link { border: 0; background: none; color:#A97155; font-weight:800; cursor:pointer; margin-left:8px; }
.mm-link:hover { text-decoration: underline; }

.mm-vax-action { white-space: nowrap; }

.mm-vax-desktop { display: block; }
.mm-vax-mobile { display: none; }
.mm-vax-card { border: 1px solid rgba(169,113,85,0.22); border-radius: 14px; background: #fff; padding: 12px; }
.mm-vax-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.mm-vax-card__name { font-weight: 1000; color:#1d1410; line-height:1.15; }
.mm-vax-pill { display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-weight: 900; white-space: nowrap; }
.mm-vax-card__meta { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 10px; }
.mm-vax-card__kv { background: rgba(169,113,85,0.06); border: 1px solid rgba(169,113,85,0.14); border-radius: 12px; padding: 10px; }
.mm-vax-k { display:block; font-weight: 900; color:#5A3E36; font-size: 0.9rem; }
.mm-vax-v { display:block; margin-top: 4px; color:#3b2c26; font-weight: 800; }
.mm-vax-card__notes { margin: 10px 0 0; }
.mm-vax-card__actions { margin-top: 12px; display:flex; justify-content:flex-end; }

@media (max-width: 640px){
  .mm-vax-desktop { display: none; }
  .mm-vax-mobile { display: flex; flex-direction: column; gap: 10px; }
  .mm-vax-card__meta { grid-template-columns: 1fr; }
  .mm-vax-card__actions { justify-content: stretch; }
  .mm-vax-card__actions .mm-btn { width: 100%; }
}