/* ═══════════════════════════════════════════════════════
   CAMINAPP — Design Tokens & Shared Components
   Used across all three portals (pilgrim, operator, admin)
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --amber: #C97B0A;
  --amber-bright: #E89010;
  --amber-light: #F5C36A;
  --amber-bg: #FEF3DF;
  --amber-border: #F0C070;
  --cream: #FAF6EF;
  --parchment: #F4EDE2;
  --s100: #F0EBE4;
  --s200: #E0D5CB;
  --s400: #B8A99A;
  --s600: #8A7E74;
  --s800: #5A4F47;
  --earth: #4A3728;
  --earth-deep: #2A1F15;
  --forest: #2D5C29;
  --forest-light: #EAF0E8;
  --red: #C53030;
  --red-bg: #FCE8E8;
  --red-border: #F0C0C0;
  --orange: #D4620A;
  --green: #2A7C3E;
  --green-bg: #E8F3EC;
  --blue: #1A5FA0;
  --white: #FFFFFF;
  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;
  --sh-sm: 0 1px 3px rgba(42,31,21,.10);
  --sh-md: 0 4px 12px rgba(42,31,21,.14);
  --sh-lg: 0 8px 32px rgba(42,31,21,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-b);
  background: var(--cream);
  color: var(--earth-deep);
  height: 100%;
  overflow: hidden;
}

/* ─── PHONE SHELL (mobile-only app) ─────────────────── */
.screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

/* ─── STATUS BAR ─────────────────────────────────────── */
.status-bar {
  height: 44px;
  padding: 10px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}
.status-time { font-size: 12px; font-weight: 700; color: var(--earth-deep); }
.status-icons { font-size: 13px; color: var(--earth-deep); }
.status-bar.light .status-time,
.status-bar.light .status-icons { color: white; }

/* ─── HOME INDICATOR ─────────────────────────────────── */
.home-ind {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-ind::after {
  content: '';
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(42,31,21,.2);
}

/* ─── BOTTOM NAV (4 items) ───────────────────────────── */
.bot-nav {
  height: 64px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  background: rgba(250,246,239,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--s200);
  flex-shrink: 0;
}
.bot-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: all .15s;
  text-decoration: none;
}
.bot-nav-item .nav-icon { font-size: 20px; }
.bot-nav-item .nav-label { font-size: 12px; font-weight: 500; color: var(--s600); }
.bot-nav-item.active .nav-label { color: var(--amber); font-weight: 700; }
.bot-nav-item.active .nav-icon { filter: drop-shadow(0 0 4px rgba(201,123,10,.5)); }

/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-b);
  font-weight: 600;
  border-radius: var(--r-full);
  transition: all .15s;
}
.btn-primary {
  background: var(--amber);
  color: var(--white);
  padding: 12px 24px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(201,123,10,.35);
}
.btn-primary:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--white);
  color: var(--earth-deep);
  border: 1.5px solid var(--s200);
  padding: 10px 20px;
  font-size: 13px;
}
.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
  padding: 10px 20px;
  font-size: 13px;
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ─── INPUTS ─────────────────────────────────────────── */
.inp {
  background: var(--white);
  border: 1.5px solid var(--s200);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--earth-deep);
  width: 100%;
  transition: border-color .15s;
}
.inp::placeholder { color: var(--s400); }
.inp:focus { outline: none; border-color: var(--amber); }
.inp-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--s600);
  margin-bottom: 5px;
  display: block;
}

/* ─── BED BADGES ─────────────────────────────────────── */
.bed-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); }
.bed-ok    { background: var(--green-bg); color: var(--green); }
.bed-few   { background: #FFF3E4; color: var(--orange); }
.bed-full  { background: var(--red-bg); color: var(--red); }
.bed-na    { background: var(--s100); color: var(--s600); }

/* ─── PILL ───────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-red   { background: var(--red-bg); color: var(--red); }
.pill-stone { background: var(--s100); color: var(--s800); }

/* ─── CONNECTIVITY INDICATOR ─────────────────────────── */
.connectivity { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.conn-online  { background: var(--green); }
.conn-offline { background: var(--red); }

/* ─── SECTION LABEL ──────────────────────────────────── */
.section-lbl {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--s600);
  margin-bottom: 10px;
}

/* ─── AVATAR ─────────────────────────────────────────── */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--amber-bg);
  border: 2px solid var(--amber-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--amber);
  flex-shrink: 0;
  user-select: none;
}

/* ─── PANIC BUTTON ───────────────────────────────────── */
.panic-persistent {
  background: var(--red);
  border-radius: var(--r-md);
  margin: 0 16px 12px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(197,48,48,.3);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.panic-persistent:active { transform: scale(.98); }
.panic-icon { font-size: 24px; flex-shrink: 0; }
.panic-text h4 { font-size: 14px; font-weight: 800; color: var(--white); }
.panic-text p  { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 1px; }
.panic-arrow   { margin-left: auto; color: rgba(255,255,255,.6); font-size: 20px; font-weight: 700; }

/* ─── ONBOARDING ─────────────────────────────────────── */
.ob-bg { flex: 1; display: flex; flex-direction: column; background: var(--cream); overflow: hidden; }
.ob-header { background: var(--earth-deep); padding: 8px 20px 20px; flex-shrink: 0; }
.ob-step-track { display: flex; gap: 4px; align-items: center; margin-bottom: 14px; }
.ob-step-done   { background: var(--amber); flex: 1; height: 4px; border-radius: 2px; }
.ob-step-active { background: var(--amber-bright); flex: 2; height: 4px; border-radius: 2px; }
.ob-step-todo   { background: rgba(255,255,255,.2); flex: 1; height: 4px; border-radius: 2px; }
.ob-hdr-step  { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.ob-hdr-title { font-family: var(--font-d); font-size: 24px; font-weight: 700; color: var(--white); }
.ob-hdr-sub   { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }
.ob-body { flex: 1; overflow-y: auto; padding: 20px 16px; }
.ob-body::-webkit-scrollbar { display: none; }
.ob-footer { padding: 12px 16px 16px; flex-shrink: 0; display: flex; gap: 10px; background: var(--cream); }
.ob-footer .btn { flex: 1; justify-content: center; padding: 14px; }

/* Consent items */
.consent-item { background: var(--white); border: 1.5px solid var(--s200); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: all .15s; }
.consent-item.checked { border-color: var(--green); background: var(--green-bg); }
.consent-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--s400); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 1px; background: var(--white); transition: all .15s; }
.consent-item.checked .consent-check { background: var(--green); border-color: var(--green); color: white; }
.consent-text h4 { font-size: 13px; font-weight: 700; color: var(--earth-deep); }
.consent-text p  { font-size: 13px; color: var(--s600); line-height: 1.5; margin-top: 2px; }

/* Camino picker */
.camino-option { background: var(--white); border: 2px solid var(--s200); border-radius: var(--r-xl); padding: 16px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all .2s; }
.camino-option.selected { border-color: var(--amber); background: var(--amber-bg); }
.camino-option-icon { font-size: 28px; flex-shrink: 0; }
.camino-option-info h4 { font-size: 14px; font-weight: 700; color: var(--earth-deep); }
.camino-option-info p  { font-size: 13px; color: var(--s600); margin-top: 1px; }
.camino-option-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--s200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.camino-option.selected .camino-option-check { background: var(--amber); border-color: var(--amber); color: white; font-size: 12px; }

/* Pueblo list */
.pueblo-item { background: var(--white); border: 1.5px solid var(--s200); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all .15s; }
.pueblo-item.selected { border-color: var(--amber); background: var(--amber-bg); }
.pueblo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s400); flex-shrink: 0; }
.pueblo-item.selected .pueblo-dot { background: var(--amber); }
.pueblo-name { font-size: 13px; font-weight: 600; color: var(--earth-deep); }
.pueblo-sub  { font-size: 13px; color: var(--s600); }

/* Handle field */
.handler-field { position: relative; margin-bottom: 10px; }
.handler-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 700; color: var(--amber); pointer-events: none; }
.handler-inp { width: 100%; background: var(--white); border: 2px solid var(--amber); border-radius: var(--r-md); padding: 13px 14px 13px 32px; font-family: var(--font-b); font-size: 16px; font-weight: 600; color: var(--earth-deep); }
.handler-inp:focus { outline: none; border-color: var(--amber-bright); }
.handler-note { font-size: 13px; color: var(--s600); line-height: 1.5; margin-top: 6px; background: var(--amber-bg); border-radius: var(--r-md); padding: 8px 12px; }

/* ─── REPORT FLOW ────────────────────────────────────── */
.report-bg { flex: 1; display: flex; flex-direction: column; background: var(--cream); overflow: hidden; }
.report-steps { display: flex; align-items: center; gap: 4px; padding: 12px 20px 0; flex-shrink: 0; }
.step-seg { flex: 1; height: 3px; border-radius: 2px; background: var(--s200); }
.step-seg.done   { background: var(--green); }
.step-seg.active { background: var(--amber); }
.report-hdr    { padding: 10px 20px 14px; flex-shrink: 0; }
.report-title  { font-family: var(--font-d); font-size: 24px; font-weight: 700; color: var(--earth-deep); }
.report-sub    { font-size: 13px; color: var(--s600); margin-top: 2px; }
.tipo-group    { margin-bottom: 14px; }
.tipo-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--s600); margin-bottom: 8px; padding: 0 16px; }
.tipo-grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 0 16px; }
.tipo-btn      { background: var(--white); border: 2px solid var(--s200); border-radius: var(--r-lg); padding: 12px 6px; text-align: center; cursor: pointer; transition: all .15s; }
.tipo-btn.sel  { border-color: var(--amber); background: var(--amber-bg); }
.tipo-emoji    { font-size: 26px; display: block; margin-bottom: 4px; }
.tipo-lbl      { font-size: 12px; font-weight: 600; color: var(--earth); line-height: 1.3; }
.rain-picker   { margin: 0 16px 14px; background: var(--white); border: 1px solid var(--s200); border-radius: var(--r-lg); overflow: hidden; display: none; }
.rain-picker.visible { display: block; }
.rain-option   { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--s100); transition: all .1s; }
.rain-option:last-child { border-bottom: none; }
.rain-option.sel { background: var(--amber-bg); }
.rain-option-icon { font-size: 18px; flex-shrink: 0; }
.rain-option-text { font-size: 12px; font-weight: 600; color: var(--earth-deep); }
.loc-strip  { margin: 8px 16px; border-radius: var(--r-md); padding: 10px 14px; display: flex; gap: 10px; align-items: center; }
.loc-gps    { background: var(--green-bg); border: 1px solid #C0D8BC; }
.loc-last   { background: #FFF8E6; border: 1px solid #F0D890; }
.loc-unavail{ background: var(--red-bg); border: 1px solid var(--red-border); }
.loc-icon   { font-size: 18px; flex-shrink: 0; }
.loc-text   { font-size: 12px; line-height: 1.4; }
.loc-text strong { display: block; font-weight: 700; font-size: 13px; margin-bottom: 1px; }
.causa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.causa-btn  { background: var(--white); border: 1.5px solid var(--s200); border-radius: var(--r-md); padding: 10px 6px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--earth-deep); }
.causa-btn.sel { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.report-actions { padding: 10px 16px 4px; display: flex; gap: 8px; flex-shrink: 0; }
.report-actions .btn { flex: 1; justify-content: center; padding: 14px; border-radius: var(--r-md); }

/* ─── ALOJAMIENTOS ───────────────────────────────────── */
.aloj-hdr { padding: 8px 20px 0; background: var(--cream); flex-shrink: 0; }
.aloj-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-top: 8px; }
.aloj-filters::-webkit-scrollbar { display: none; }
.filter-chip { flex-shrink: 0; padding: 7px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; border: 1.5px solid var(--s200); background: var(--white); color: var(--earth-deep); cursor: pointer; transition: all .15s; }
.filter-chip.active { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.aloj-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; }
.aloj-list::-webkit-scrollbar { display: none; }
.aloj-card { background: var(--white); border-radius: var(--r-xl); border: 1px solid var(--s200); box-shadow: var(--sh-sm); margin-bottom: 10px; overflow: hidden; cursor: pointer; transition: all .2s; }
.aloj-img  { height: 76px; display: flex; align-items: center; justify-content: center; font-size: 30px; position: relative; }
.aloj-img-badge { position: absolute; top: 8px; right: 8px; }
.aloj-body { padding: 12px 14px; }
.aloj-top  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.aloj-name { font-size: 14px; font-weight: 700; color: var(--earth-deep); }
.aloj-tipo { font-size: 13px; color: var(--s600); margin-top: 1px; }
.aloj-meta { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.aloj-meta-item { font-size: 13px; color: var(--s600); }
.aloj-services { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.svc-dot { width: 24px; height: 24px; background: var(--s100); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.aloj-actions { display: flex; gap: 6px; margin-top: 10px; }
.aloj-wa-btn { display: flex; align-items: center; gap: 5px; background: #25D366; border: none; border-radius: var(--r-full); padding: 7px 12px; font-size: 13px; font-weight: 700; color: white; cursor: pointer; }
.aloj-call-btn { display: flex; align-items: center; gap: 5px; background: var(--s100); border: none; border-radius: var(--r-full); padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--earth-deep); cursor: pointer; }

/* ─── MI CAMINO ──────────────────────────────────────── */
.mc-stop { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--s200); padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.mc-stop-date { font-size: 12px; font-weight: 700; color: var(--s600); text-transform: uppercase; letter-spacing: .06em; min-width: 36px; }
.mc-stop-dot  { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--s400); flex-shrink: 0; }
.mc-stop-dot.done  { background: var(--green); border-color: var(--green); }
.mc-stop-dot.today { background: var(--amber); border-color: var(--amber); }
.mc-stop-info h4 { font-size: 13px; font-weight: 700; color: var(--earth-deep); }
.mc-stop-info p  { font-size: 13px; color: var(--s600); margin-top: 1px; }

/* ─── INCIDENTES LIST ────────────────────────────────── */
.inc-item { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--s200); padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; }
.inc-tipo-icon { font-size: 22px; flex-shrink: 0; }
.inc-info h4 { font-size: 13px; font-weight: 700; color: var(--earth-deep); }
.inc-info p  { font-size: 13px; color: var(--s600); margin-top: 2px; line-height: 1.4; }
.inc-status-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); }
.inc-status-active   { background: var(--amber-bg); color: var(--amber); }
.inc-status-resolved { background: var(--green-bg); color: var(--green); }

/* ─── PERFIL ─────────────────────────────────────────── */
.perfil-field { background: var(--white); border: 1px solid var(--s200); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 8px; }
.perfil-field-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--s600); margin-bottom: 4px; }
.perfil-field-val { font-size: 14px; font-weight: 600; color: var(--earth-deep); }

/* ─── PANIC MODAL ────────────────────────────────────── */
.panic-overlay { position: fixed; inset: 0; background: rgba(42,31,21,.7); backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: flex-end; z-index: 100; }
.panic-overlay.hidden { display: none; }
.panic-sheet { background: var(--cream); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 20px 16px 32px; border-top: 1px solid var(--s200); }
.panic-sheet-handle { width: 36px; height: 4px; background: var(--s200); border-radius: 2px; margin: 0 auto 16px; }

/* ─── SCROLLABLE CONTENT AREA ───────────────────────── */
.scroll-content { flex: 1; overflow-y: auto; }
.scroll-content::-webkit-scrollbar { display: none; }

/* ─── TOAST ──────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--earth-deep);
  color: white;
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  z-index: 200;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; }

/* ─── LOADING SPINNER ────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── ALERT STRIP ────────────────────────────────────── */
.alert-strip { background: #FFF3E6; border: 1px solid #F0C878; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.alert-text { font-size: 12px; color: var(--earth); line-height: 1.4; }
.alert-text strong { font-weight: 700; color: var(--earth-deep); }

/* ─── MAP ────────────────────────────────────────────── */
.map-cont { flex: 1; position: relative; overflow: hidden; background: #EDE8E0; }
.map-overlay-top { position: absolute; top: 52px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 10; }
.map-chip { background: rgba(250,246,239,.95); border: 1px solid var(--s200); border-radius: var(--r-full); padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--earth-deep); cursor: pointer; transition: all .15s; backdrop-filter: blur(8px); }
.map-chip.active { background: var(--amber); color: var(--white); border-color: var(--amber); }
.map-panic-fab { position: absolute; bottom: 80px; left: 16px; background: var(--red); border-radius: var(--r-full); padding: 10px 16px; display: flex; align-items: center; gap: 7px; cursor: pointer; box-shadow: 0 4px 16px rgba(197,48,48,.5); z-index: 10; }
.map-panic-fab span:first-child { font-size: 16px; }
.map-panic-fab span:last-child  { font-size: 12px; font-weight: 800; color: var(--white); }
.map-report-fab { position: absolute; bottom: 80px; right: 16px; width: 50px; height: 50px; background: var(--earth); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(42,31,21,.4); z-index: 10; }
.map-sheet { background: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid var(--s200); padding: 8px 16px 0; box-shadow: 0 -8px 32px rgba(0,0,0,.1); flex-shrink: 0; }
.map-sheet-handle { width: 36px; height: 4px; background: var(--s200); border-radius: 2px; margin: 0 auto 12px; }
.map-sheet-content { padding-bottom: 8px; }
.map-sheet-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ─── OB FEATURE GRID ────────────────────────────────── */
.ob-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: 16px; }
.ob-feature { background: var(--white); border: 1px solid var(--s200); border-radius: var(--r-lg); padding: 12px; text-align: center; }
.ob-feature-icon { font-size: 24px; margin-bottom: 4px; }
.ob-feature-label { font-size: 13px; font-weight: 600; color: var(--earth); }

/* ─── HERO (HOME) ────────────────────────────────────── */
.p-hero { background: linear-gradient(160deg, var(--earth-deep) 0%, #6B4E32 100%); padding: 8px 20px 20px; flex-shrink: 0; position: relative; overflow: hidden; }
.p-hero::after { content: '→'; position: absolute; right: 12px; bottom: 4px; font-size: 88px; opacity: .04; color: var(--white); font-weight: 900; line-height: 1; }
.p-hero-name   { font-family: var(--font-d); font-size: 26px; font-weight: 700; color: var(--white); line-height: 1.1; }
.p-hero-handle { font-size: 12px; color: var(--amber-light); margin-top: 2px; font-weight: 600; }
.p-hero-camino { margin-top: 14px; background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: 10px 14px; }
.p-hero-camino-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.target-pueblo { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.target-val    { font-size: 13px; font-weight: 600; color: var(--amber-light); }
.target-change { font-size: 12px; color: rgba(255,255,255,.3); text-decoration: underline; cursor: pointer; }

/* ─── QUICK ACTIONS GRID ─────────────────────────────── */
.p-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.p-qa { background: var(--white); border: 1px solid var(--s200); border-radius: var(--r-lg); padding: 14px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; transition: all .15s; text-decoration: none; }
.p-qa:hover  { border-color: var(--amber); }
.p-qa-icon   { font-size: 22px; }
.p-qa-label  { font-size: 12px; font-weight: 600; color: var(--earth-deep); }
.p-qa-sub    { font-size: 12px; color: var(--s600); }

/* ─── CARD (nearby alb on home) ──────────────────────── */
.alb-card { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--s200); padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; cursor: pointer; transition: all .15s; }
.alb-icon  { width: 40px; height: 40px; background: var(--s100); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.alb-info  { flex: 1; min-width: 0; }
.alb-name  { font-size: 13px; font-weight: 700; color: var(--earth-deep); }
.alb-sub   { font-size: 13px; color: var(--s600); margin-top: 1px; }

/* ─── ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.anim-in { animation: fadeIn .25s ease forwards; }

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ─── LEAFLET MAP OVERRIDES ──────────────────────────── */
#map { width: 100%; height: 100%; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--sh-md) !important; }
.leaflet-control-zoom a { background: var(--white) !important; color: var(--earth-deep) !important; border: none !important; }