/* Portal de clientes — S1: solo la portada. El sistema visual completo llega
   en P3.S2 con el mockup v2 aprobado (claro, cálido, phone-first). El acento
   real lo inyecta el boot por inquilino como --pt-accent. */

:root {
  --pt-bg:#FDFBF7; --pt-card:#FFFFFF; --pt-line:#E3DDD2;
  --pt-ink:#3E3A33; --pt-dim:#8A8272; --pt-faint:#B0A895;
  --pt-accent:#0E5FA8; --pt-ok:#1F9E6B;
  --pt-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--pt-bg); color:var(--pt-ink);
  font:400 16px/1.5 var(--pt-sans); -webkit-font-smoothing:antialiased; }
.pt-boot { display:grid; place-items:center; min-height:100vh; color:var(--pt-faint); }

.pt-wrap { max-width:420px; margin:0 auto; padding:24px 18px; }
.pt-card { background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:14px; padding:18px; }
.pt-brand { display:flex; align-items:center; gap:10px; font-weight:500;
  font-size:17px; margin-bottom:18px; }
.pt-brand .sq { width:30px; height:30px; border-radius:8px; background:var(--pt-accent);
  color:#fff; display:grid; place-items:center; font-weight:500; }

label { display:block; font-size:13px; color:var(--pt-dim); margin:0 0 5px; }
input { width:100%; height:44px; padding:0 13px; background:var(--pt-card);
  border:1px solid var(--pt-line); border-radius:10px; font:400 16px var(--pt-sans);
  color:var(--pt-ink); }
input:focus { outline:2px solid var(--pt-accent); outline-offset:1px; border-color:transparent; }

.pt-btn { width:100%; height:46px; border:0; border-radius:10px;
  background:var(--pt-accent); color:var(--pt-on-accent); font:500 16px var(--pt-sans);
  cursor:pointer; }
.pt-btn:disabled { opacity:.6; }
.pt-err { background:#FBEDEB; border:1px solid #EFC7C0; color:#8A3324;
  border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:12px; }
.pt-note { font-size:13px; color:var(--pt-dim); text-align:center; margin-top:14px; }
.pt-stack { display:flex; flex-direction:column; gap:12px; }

/* ---- S2: la app (mockup v2) ---- */
:root { --pt-on-accent:#FFFFFF; }
.pt-app { max-width:480px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; }
.pt-head { background:var(--pt-accent); color:var(--pt-on-accent);
  padding:14px 16px 12px; display:flex; align-items:center; gap:9px; }
.pt-head .sq { width:26px; height:26px; border-radius:7px; background:#fff;
  color:var(--pt-accent); display:grid; place-items:center; font-weight:500; }
.pt-head-name { font-weight:500; font-size:16px; }
.pt-body { flex:1; padding:14px 14px 84px; }
.pt-nav { position:fixed; bottom:0; left:0; right:0; background:var(--pt-card);
  border-top:1px solid var(--pt-line); display:flex; max-width:480px;
  margin:0 auto; }
.pt-tab { flex:1; text-align:center; padding:9px 0 10px; color:var(--pt-dim);
  text-decoration:none; font-size:11px; }
.pt-tab.on { color:var(--pt-accent); font-weight:500; }
.pt-tab-ic { display:block; font-size:17px; line-height:1.15; }

.pt-addr { margin-bottom:12px; position:relative; }
.pt-addr-cap { font-size:11px; letter-spacing:.05em; color:var(--pt-dim);
  font-weight:500; margin-bottom:4px; }
.pt-addr-cap2 { font-size:12px; color:var(--pt-dim); margin-bottom:4px; }
.pt-addr-body { font-size:14px; line-height:1.5; }
.pt-code { color:var(--pt-accent); font-weight:500; margin-left:6px; }
.pt-copy { position:absolute; top:14px; right:14px; color:var(--pt-accent);
  font-size:13px; font-weight:500; cursor:pointer; }
.pt-since { font-size:13px; color:var(--pt-accent); font-weight:500;
  margin:0 2px 10px; }
.pt-filter { width:100%; height:42px; border:1px solid var(--pt-line);
  border-radius:10px; background:var(--pt-card); font:400 15px var(--pt-sans);
  color:var(--pt-ink); padding:0 10px; margin-bottom:12px; }

.pt-pkg { display:block; background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:14px; padding:13px 14px; margin-bottom:10px;
  text-decoration:none; color:var(--pt-ink); }
.pt-pkg.ready { background:var(--pt-accent); border-color:var(--pt-accent);
  color:var(--pt-on-accent); }
.pt-pkg.done { opacity:.62; }
.pt-pkg-top { display:flex; justify-content:space-between; align-items:baseline; }
.pt-pkg-status { font-size:16px; font-weight:500; }
.pt-pkg-time { font-size:12px; opacity:.75; }
.pt-pkg-sub { font-size:13px; opacity:.8; margin-top:3px; }
.pt-wa { display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  background:#fff; color:var(--pt-accent); border-radius:8px; padding:6px 10px;
  font-size:13px; font-weight:500; text-decoration:none; }

.pt-empty { text-align:center; padding:26px 18px; }
.pt-empty-t { font-size:16px; font-weight:500; margin-bottom:5px; }
.pt-empty-h { font-size:13.5px; color:var(--pt-dim); margin-bottom:14px; }

.pt-title { font-size:19px; font-weight:500; margin:2px 0 4px; }
.pt-help { font-size:13.5px; color:var(--pt-dim); margin-bottom:12px; }
.pt-lbl { display:block; font-size:13px; color:var(--pt-dim); margin:12px 0 5px; }
.pt-input-hero { border:2px solid var(--pt-accent); border-radius:14px;
  background:var(--pt-card); padding:10px 12px; }
.pt-input-hero input { border:0; outline:none; height:34px; padding:0;
  font-family:ui-monospace,Consolas,monospace; font-size:15px; width:100%; }
.pt-chiprow { display:flex; justify-content:flex-end; margin-top:4px; }
.pt-paste { color:var(--pt-accent); font-size:13.5px; font-weight:500; cursor:pointer; }
.pt-note-in { margin-bottom:2px; }
.pt-warn { background:#FBF3E2; border:1px solid #EAD9AE; color:#7A5E1E;
  border-radius:10px; padding:9px 11px; font-size:13px; margin:10px 0; line-height:1.5; }
.pt-ok { background:#E9F5EE; border:1px solid #BFE3CE; color:#1F6B47;
  border-radius:10px; padding:10px 12px; font-size:14px; margin:12px 0; }
.pt-chip { display:inline-block; background:#fff; border-radius:6px;
  padding:2px 8px; font-size:12px; margin-top:6px; }
.pt-btn-dim { background:var(--pt-line); color:var(--pt-ink); margin-top:16px; }
.pt-powered { text-align:center; color:var(--pt-faint); font-size:11.5px; margin-top:22px; }

.pt-back { display:inline-block; color:var(--pt-dim); text-decoration:none;
  font-size:14px; margin-bottom:10px; }
.pt-detail-head { text-align:center; margin:6px 0 16px; }
.pt-detail-status { font-size:21px; font-weight:500; color:var(--pt-accent); }
.pt-detail-hint { font-size:13px; color:var(--pt-dim); margin-top:3px; }
.pt-tl { margin:0 4px 14px; }
.pt-tl-row { display:grid; grid-template-columns:18px 1fr; gap:0 10px; }
.pt-tl-dot { width:12px; height:12px; border-radius:50%; background:var(--pt-line);
  margin-top:3px; justify-self:center; }
.pt-tl-row.hit .pt-tl-dot { background:var(--pt-ok); }
.pt-tl-row.now .pt-tl-dot { background:var(--pt-accent);
  outline:3px solid color-mix(in srgb, var(--pt-accent) 18%, white); }
.pt-tl-row + .pt-tl-row { margin-top:0; }
.pt-tl-txt { padding-bottom:16px; border-left:0; }
.pt-tl-name { font-size:14.5px; font-weight:500; }
.pt-tl-row:not(.hit) .pt-tl-name { color:var(--pt-faint); font-weight:400; }
.pt-tl-row.now .pt-tl-name { color:var(--pt-accent); }
.pt-tl-sub { font-size:12.5px; color:var(--pt-dim); }
.pt-meta { font-size:13px; color:var(--pt-dim); line-height:1.7; }
.pt-meta code { font-family:ui-monospace,Consolas,monospace; font-size:12.5px; }

/* ---- v3: las correcciones del 16 ago (D31-D36) ---- */
.pt-addr-block { position:relative; background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:10px; padding:8px 10px; margin-top:8px; }
.pt-addr-method { font-size:10.5px; color:var(--pt-accent); font-weight:500;
  letter-spacing:.04em; margin-bottom:3px; }
.pt-addr-lines { font-family:ui-monospace,Consolas,monospace; font-size:12.5px;
  line-height:1.55; white-space:pre-line; color:var(--pt-ink); }
.pt-addr-block .pt-copy { top:8px; right:10px; }

.pt-paychip { display:inline-block; border-radius:7px; padding:3px 9px;
  font-size:12px; font-weight:500; margin-top:7px; }
.pt-paychip.due { background:#FBF3E2; border:1px solid #EAD9AE; color:#7A5E1E; }
.pt-paychip.paid { background:#E9F5EE; border:1px solid #BFE3CE; color:#1F6B47; }
.pt-paychip.onacc { background:#fff; border-color:#fff; }

.pt-btnrow { display:flex; gap:7px; margin-top:9px; }
.pt-btnrow .pt-wa { margin-top:0; flex:1; justify-content:center; }

.pt-arc-head { display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--pt-line); margin-top:12px; padding:10px 4px 8px;
  color:var(--pt-dim); font-size:14px; font-weight:500; cursor:pointer; }

.pt-tl-col { display:flex; flex-direction:column; align-items:center; }
.pt-tl-ic { width:24px; height:24px; border-radius:7px; background:#EDE8DF;
  display:grid; place-items:center; font-size:13px; }
.pt-tl-row.hit .pt-tl-ic { background:#E9F5EE; }
.pt-tl-row.now .pt-tl-ic { background:var(--pt-accent);
  outline:3px solid color-mix(in srgb, var(--pt-accent) 18%, white); }
.pt-tl-ic.face { border-radius:50%; border:2px dashed var(--pt-faint); background:var(--pt-card); }
.pt-tl-face { width:26px; height:26px; border-radius:50%; object-fit:cover;
  border:2px solid var(--pt-accent); }
.pt-tl-line { width:2px; flex:1; background:var(--pt-line); min-height:10px; }
.pt-tl-row.hit .pt-tl-line { background:var(--pt-ok); }
.pt-tl-arrow { font-size:9px; color:var(--pt-faint); line-height:.7; }
.pt-tl-row.hit .pt-tl-arrow { color:var(--pt-ok); }
.pt-tl .pt-tl-row { grid-template-columns:26px 1fr; }

.pt-prof { display:flex; align-items:center; gap:12px; margin:6px 0 14px; }
.pt-prof-face { width:52px; height:52px; border-radius:50%; background:#E8F0F9;
  display:grid; place-items:center; font-size:24px; position:relative; cursor:pointer; flex:none; }
.pt-prof-face img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.pt-prof-cam { position:absolute; bottom:-2px; right:-2px; width:20px; height:20px;
  border-radius:50%; background:var(--pt-accent); display:grid; place-items:center;
  font-size:10px; }
.pt-prof-name { font-size:14.5px; font-weight:500; }
.pt-prof-hint { font-size:12px; color:var(--pt-dim); }

/* v4 (16 ago): identidad en el encabezado + botones bajo la dirección */
.pt-head { position:relative; }
.pt-head-me { position:absolute; right:14px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--pt-on-accent); }
.pt-head-me-name { font-size:12.5px; font-weight:500; opacity:.92; }
.pt-head-face { width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.75); display:grid; place-items:center; }
.pt-head-face-empty { background:rgba(255,255,255,.22); font-size:14px; }
.pt-btnrow-addr { margin-top:10px; }
.pt-wa-solid { background:var(--pt-accent); color:var(--pt-on-accent); }
.pt-rates { background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:10px; padding:8px 12px; font-size:13.5px; line-height:1.9; }
.pt-rates b { float:right; font-weight:500; }
.pt-rates-cat { font-size:11px; color:var(--pt-dim); letter-spacing:.04em;
  font-weight:500; margin:12px 0 5px; }

/* v5: la barra de chevrones (GO 16 ago) */
.pt-act { border-radius:10px; padding:9px 12px; text-align:center;
  font-size:13.5px; font-weight:500; background:#F3EFE7; color:var(--pt-dim);
  margin-bottom:14px; }
.pt-act.go { background:color-mix(in srgb, var(--pt-accent) 12%, white);
  color:var(--pt-accent); }
.pt-chev { display:flex; gap:2px; margin-bottom:6px; }
.pt-chev-seg { flex:1; height:26px; display:grid; place-items:center;
  font-size:13px; color:#fff;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.pt-chev-seg.first { border-radius:7px 0 0 7px; }
.pt-chev-seg.last { clip-path:none; border-radius:0 7px 7px 0; }
.pt-chev-seg.done { background:var(--pt-ok); }
.pt-chev-seg.now { background:var(--pt-accent); flex:1.35; font-size:14px;
  outline:2px solid color-mix(in srgb, var(--pt-accent) 20%, white); }
.pt-chev-seg.todo { background:#EDE8DF; color:var(--pt-faint); }
.pt-chev-face { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.pt-chev-lbl { display:flex; gap:2px; margin-bottom:16px; }
.pt-chev-lbl span { flex:1; text-align:center; font-size:9.5px; color:var(--pt-dim); }
.pt-chev-lbl span.now { flex:1.35; color:var(--pt-accent); font-weight:600; }
.pt-rec-cap { font-size:11px; color:var(--pt-dim); letter-spacing:.05em;
  font-weight:500; margin-bottom:7px; }
.pt-rec { border-left:2px solid var(--pt-ok); padding-left:11px;
  display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.pt-rec-t { font-size:14px; font-weight:500; }
.pt-rec-s { font-size:12px; color:var(--pt-dim); }
.pt-btn-a { display:block; text-align:center; text-decoration:none;
  line-height:46px; box-sizing:border-box; }
.sq-img { object-fit:cover; background:#fff; }

/* D33 v2: banderas SVG propias (los emoji de bandera en Windows son letras) */
.pt-langs { background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:10px; overflow:hidden; }
.pt-lang { display:flex; align-items:center; gap:10px; padding:10px 12px;
  font-size:14.5px; cursor:pointer; }
.pt-lang + .pt-lang { border-top:1px solid var(--pt-line); }
.pt-lang.on { background:color-mix(in srgb, var(--pt-accent) 10%, white);
  color:var(--pt-accent); font-weight:500; }
.pt-lang b { margin-left:auto; font-weight:500; }

/* Preferencias de correo (044) — la misma tabla que el enlace del correo, y el
   único lugar donde algo se vuelve a ENCENDER. Las filas obligatorias se pintan
   y no se esconden: quien acaba de apagarlo todo tiene que ver qué le sigue
   llegando y por qué, en vez de descubrirlo cuando llegue. */
.pt-prefs { background:var(--pt-card); border:1px solid var(--pt-line);
  border-radius:10px; overflow:hidden; }
.pt-pref { display:flex; align-items:flex-start; gap:10px; padding:11px 12px;
  border-bottom:1px solid var(--pt-line); font-size:13.5px; }
.pt-pref:last-child { border-bottom:0; }
.pt-pref input { width:16px; height:16px; margin:1px 0 0; flex:none;
  accent-color:var(--pt-accent); cursor:pointer; }
.pt-pref.locked { background:color-mix(in srgb, var(--pt-line) 30%, transparent); }
.pt-pref-always { flex:none; margin-top:1px; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pt-dim);
  border:1px solid var(--pt-line); border-radius:99px; padding:1px 7px;
  background:var(--pt-card); }