/* ============================================================
   YellowBlock — Plataforma (app) · Dirección Brillo
   Reutiliza tokens .dir-c de theme.css. Todo bajo .pf
   ============================================================ */
.pf { font-family: var(--font-ui); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased;
  height: 100%; width: 100%; display: flex; flex-direction: column; }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf ::selection { background: var(--yb-yellow); color: #1C1A17; }
.pf ::-webkit-scrollbar { width: 10px; height: 10px; }
.pf ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--page); }
.pf h1,.pf h2,.pf h3,.pf h4 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; font-weight: 700; }
.pf p { margin: 0; }

/* buttons (app-scoped) */
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui);
  font-weight: 600; font-size: 14px; border: none; cursor: pointer; border-radius: 12px; padding: 11px 17px;
  transition: transform .12s, box-shadow .2s, background .18s, border-color .18s; white-space: nowrap; text-decoration: none; }
.pf-btn:active { transform: translateY(1px); }
.pf-btn-yellow { background: var(--yb-yellow); color: #1C1A17; box-shadow: 0 1px 2px rgba(230,161,0,.25), 0 6px 18px rgba(255,200,61,.3); }
.pf-btn-yellow:hover { background: #FFD15C; }
.pf-btn-dark { background: #1C1A17; color: #fff; }
.pf-btn-dark:hover { background: #2c2820; }
.pf-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.pf-btn-ghost:hover { background: var(--surface-2); }
.pf-btn-soft { background: var(--surface-2); color: var(--ink); }
.pf-btn-soft:hover { background: var(--line); }
.pf-btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 13px; }
.pf-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.pf-btn:disabled { opacity: .5; cursor: not-allowed; }

.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.pf-divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.pf-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pf-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--yb-yellow-deep); }
.pf-muted { color: var(--muted); }

/* ---------- AUTH ---------- */
.pf-auth { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.pf-auth-aside { background: linear-gradient(150deg, #1C1A17 0%, #2a2620 55%, #3a3326 100%); color: #fff; padding: 56px 56px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.pf-auth-aside .glow { position: absolute; top: -120px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,61,.28), transparent 65%); }
.pf-auth-main { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.pf-auth-form { width: 100%; max-width: 392px; }
.pf-field { margin-bottom: 15px; }
.pf-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.pf-input { width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 14px;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: var(--surface); transition: border-color .15s, box-shadow .15s; outline: none; }
.pf-input:focus { border-color: var(--yb-yellow-deep); box-shadow: 0 0 0 3px rgba(255,200,61,.25); }
.pf-input::placeholder { color: var(--faint); }
.pf-oauth { width: 100%; height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: background .15s; }
.pf-oauth:hover { background: var(--surface-2); }
.pf-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--faint); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pf-or::before, .pf-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- APP SHELL ---------- */
.pf-app { flex: 1; display: flex; min-height: 0; }
.pf-side { width: 256px; flex: 0 0 256px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 14px; }
.pf-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pf-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 11px; font-size: 14px; font-weight: 500;
  color: var(--muted); cursor: pointer; transition: background .14s, color .14s; border: 1px solid transparent; }
.pf-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.pf-nav-item.on { background: var(--surface-2); color: var(--ink); font-weight: 700; border-color: var(--line); box-shadow: var(--shadow); }
.pf-nav-item.on .pf-nav-ico { color: var(--yb-yellow-deep); }
.pf-nav-ico { color: var(--faint); display: flex; }
.pf-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 16px 13px 7px; }
.pf-nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-red); color: #fff; display: flex; align-items: center; justify-content: center; }

.pf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pf-top { height: 64px; flex: 0 0 64px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 16px; padding: 0 28px; z-index: 5; }
.pf-body { flex: 1; overflow-y: auto; }
.pf-page { max-width: 1080px; margin: 0 auto; padding: 30px 28px 60px; }
.pf-page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.pf-page-head h1 { font-size: 28px; }
.pf-search { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 11px; background: var(--surface-2);
  border: 1px solid var(--line); width: 280px; color: var(--faint); font-size: 14px; white-space: nowrap; overflow: hidden; }
.pf-search svg { flex: 0 0 auto; }
.pf-icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); display: flex;
  align-items: center; justify-content: center; cursor: pointer; position: relative; color: var(--ink); }
.pf-icon-btn:hover { background: var(--surface-2); }
.pf-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 4px; background: var(--c-red); border: 2px solid var(--surface); }

/* property switcher */
.pf-switch { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; transition: border-color .15s; }
.pf-switch:hover { border-color: var(--line-strong); }

/* ---------- DASHBOARD / property cards ---------- */
.pf-grid { display: grid; gap: 18px; }
.pf-prop-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px;
  cursor: pointer; transition: transform .14s, box-shadow .2s, border-color .18s; }
.pf-prop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.pf-thumb { height: 120px; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.pf-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.pf-stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; }
.pf-stat .l { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---------- empty state ---------- */
.pf-empty { text-align: center; padding: 70px 20px; max-width: 460px; margin: 0 auto; }
.pf-empty .ico { width: 72px; height: 72px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; color: var(--yb-yellow-deep); }

/* ---------- wizard / stepper ---------- */
.pf-steps { display: flex; align-items: center; gap: 0; margin-bottom: 30px; }
.pf-step { display: flex; align-items: center; gap: 10px; }
.pf-step .n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  background: var(--surface-2); color: var(--faint); border: 1px solid var(--line); flex: 0 0 auto; transition: all .2s; }
.pf-step.on .n { background: #1C1A17; color: var(--yb-yellow); border-color: #1C1A17; }
.pf-step.done .n { background: var(--c-emerald); color: #fff; border-color: var(--c-emerald); }
.pf-step .t { font-size: 13.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.pf-step.on .t, .pf-step.done .t { color: var(--ink); }
.pf-step-bar { flex: 1; height: 2px; background: var(--line); margin: 0 14px; min-width: 24px; border-radius: 2px; }
.pf-step-bar.done { background: var(--c-emerald); }

/* dropzone */
.pf-drop { border: 2px dashed var(--line-strong); border-radius: 18px; padding: 38px 24px; text-align: center; background: var(--surface-2);
  transition: border-color .18s, background .18s; cursor: pointer; }
.pf-drop:hover { border-color: var(--yb-yellow-deep); background: #FFFCF3; }

.pf-doc-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

/* radio service select */
.pf-select-card { border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface); position: relative; }
.pf-select-card:hover { border-color: var(--line-strong); }
.pf-select-card.on { border-color: var(--yb-yellow); background: #FFFCF3; box-shadow: 0 0 0 3px rgba(255,200,61,.18); }
.pf-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.pf-select-card.on .pf-radio { border-color: var(--yb-yellow-deep); background: var(--yb-yellow-deep); }

/* progress bar */
.pf-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pf-bar > div { height: 100%; border-radius: 4px; transition: width .5s ease; }

/* checkout summary */
.pf-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font-size: 14px; }

/* AI assistant */
.pf-chat { display: flex; flex-direction: column; gap: 16px; }
.pf-msg { max-width: 78%; padding: 13px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.pf-msg.ai { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; box-shadow: var(--shadow); }
.pf-msg.me { background: #1C1A17; color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.pf-suggest { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; text-align: left; }
.pf-suggest:hover { border-color: var(--yb-yellow); background: #FFFCF3; }

/* modal */
.pf-overlay { position: absolute; inset: 0; background: rgba(28,26,23,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px; animation: pfFade .18s ease; }
.pf-modal { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; padding: 0; overflow: hidden; animation: pfPop .2s ease; }
@keyframes pfFade { from { opacity: 0; } }
@keyframes pfPop { from { opacity: 0; transform: scale(.96) translateY(8px); } }

/* toast */
.pf-toast { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1C1A17; color: #fff; padding: 13px 20px;
  border-radius: 13px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); z-index: 70; animation: pfToast .3s ease; }
@keyframes pfToast { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes pfPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,200,61,.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(255,200,61,0); } }
@keyframes pfReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pf-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(28,26,23,.3); border-top-color: #1C1A17; display: inline-block; animation: pfSpin .7s linear infinite; }
@keyframes pfSpin { to { transform: rotate(360deg); } }
.pf-typing { display: inline-flex; gap: 4px; }
.pf-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: pfBounce 1.2s ease-in-out infinite; }
.pf-typing span:nth-child(2) { animation-delay: .2s; } .pf-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pfBounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---- location / GPS picker ---- */
.pf-map { position: relative; height: 248px; border-radius: 16px; overflow: hidden; cursor: crosshair; user-select: none; border: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(40,40,30,.055) 33px 35px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(40,40,30,.055) 43px 45px),
    #E9ECE4; }
.pf-map-park { position: absolute; border-radius: 12px; background: #CFE0BE; }
.pf-map-ave { position: absolute; background: #FBFBF6; box-shadow: 0 0 0 1px rgba(40,40,30,.06); }
.pf-map-block { position: absolute; border-radius: 4px; background: rgba(255,255,255,.45); }
.pf-pin { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 3; transition: left .12s ease, top .12s ease; }
.pf-pin-dot { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--c-red); transform: rotate(-45deg); box-shadow: 0 6px 12px rgba(220,38,38,.4);
  display: flex; align-items: center; justify-content: center; border: 2.5px solid #fff; }
.pf-pin-dot > * { transform: rotate(45deg); }
.pf-pin-shadow { position: absolute; left: 50%; bottom: -4px; width: 16px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.22); transform: translateX(-50%); filter: blur(1px); }
.pf-ping { position: absolute; left: 50%; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c-red); transform: translate(-50%,-50%); animation: pfPing 1.8s ease-out infinite; z-index: 2; pointer-events: none; }
@keyframes pfPing { 0% { transform: translate(-50%,-50%) scale(.5); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }
.pf-gps-btn { position: absolute; top: 12px; right: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 9px 13px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow); transition: background .15s; white-space: nowrap; }
.pf-gps-btn:hover { background: var(--surface-2); }
.pf-coord { position: absolute; bottom: 12px; left: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; background: rgba(28,26,23,.82);
  backdrop-filter: blur(4px); color: #fff; border-radius: 10px; padding: 7px 11px; font-size: 12px; font-weight: 600; }
.pf-suggest-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 6px; box-shadow: var(--shadow-lg); background: var(--surface); }
.pf-suggest-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.pf-suggest-item:last-child { border-bottom: none; }
.pf-suggest-item:hover { background: var(--surface-2); }

@media (max-width: 820px) {
  .pf-auth { grid-template-columns: 1fr; }
  .pf-auth-aside { display: none; }
  .pf-side { display: none; }
  .pf-stat-row { grid-template-columns: repeat(2, 1fr); }
}