/* Peralta Labs — piezas comunes de los paneles (cliente y dueños). "Trazo a pixel", celular primero.
   Depende de /assets/site.css (tokens, .btn, .brand, .small, .meta, .pen, .wrap). */

/* ---------- barra superior del panel ---------- */
.pnl-top{position:sticky;top:0;z-index:20;background:rgba(246,247,249,.94);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule)}
.pnl-top__in{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.pnl-top .brand{margin-right:0;min-height:44px}
.pnl-top__proj{display:none;min-width:0;flex:1 1 auto}
.pnl-top__proj b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-top__you{margin-left:auto;display:flex;align-items:center;gap:10px}
.mono{width:34px;height:34px;flex:none;border-radius:50%;background:var(--pluma-wash);color:var(--pluma);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;
  border:1.5px solid var(--pluma-soft)}
.mono--ink{background:var(--paper-sunk);color:var(--ink-soft);border-color:var(--rule)}
.pnl-top__name{display:none}
.linkish{background:none;border:none;padding:8px 6px;min-height:44px;font:inherit;font-size:15px;font-weight:500;
  color:var(--pluma);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.linkish:hover{color:var(--pluma-hover)}

.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:13px;
  font-weight:600;line-height:1.3;background:var(--pluma-wash);color:var(--pluma);white-space:nowrap}
.pill--calm{background:var(--paper-sunk);color:var(--ink-soft)}
.pill--done{background:#E4F1E6;color:#1E6B34}
.pill--warm{background:#FBEFD9;color:#7A4E06}

/* ---------- estructura ---------- */
.pnl{padding:26px 0 120px}
.pnl-head h1{font-size:clamp(34px,9.4vw,40px);line-height:1.02;max-width:none}
.pnl-head .lead{margin-top:12px}
.facts{margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;
  padding-top:18px;border-top:1px solid var(--rule)}
.fact__k{display:block;font-size:13px;color:var(--meta);font-weight:500}
.fact__v{display:block;margin-top:3px;font-size:17px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}

.pnl-jump{margin:22px -24px 0;padding:0 24px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.pnl-jump::-webkit-scrollbar{display:none}
.pnl-jump a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;
  background:var(--paper-sunk);color:var(--ink-soft);font-size:14px;font-weight:600;text-decoration:none}
.pnl-jump a:hover{background:var(--pluma-wash);color:var(--pluma)}

.sec2{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--rule);scroll-margin-top:84px}
.sec2__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec2__h h2{font-size:clamp(24px,6.4vw,28px);line-height:1.08;max-width:none}
.sec2__h .pen{font-size:20px;transform:rotate(-1.5deg)}
.sec2 > .small,.sec2 > .meta{margin-top:8px;max-width:44em}

/* ---------- el proceso (7 estaciones) ---------- */
.proc{margin:26px 0 0;list-style:none;padding:0 0 0 34px;position:relative}
.proc::before{content:"";position:absolute;left:11px;top:8px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(var(--pluma) 0 var(--pct,0%),var(--rule) var(--pct,0%) 100%)}
.st{position:relative;padding:0 0 30px}
.st:last-child{padding-bottom:0}
.st__dot{position:absolute;left:-34px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--paper);
  border:2px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--graphite)}
.st--done .st__dot{background:var(--pluma);border-color:var(--pluma);color:#fff}
.st--now .st__dot{border-color:var(--pluma);color:var(--pluma);box-shadow:0 0 0 5px var(--pluma-wash)}
.st__t{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.st--now .st__t{color:var(--pluma)}
.st__when{display:block;margin-top:2px;font-size:14px;color:var(--meta);font-variant-numeric:tabular-nums}
.st__note{margin-top:8px;font-size:15px;color:var(--ink-soft);line-height:1.45;max-width:38em}
.st__note b{font-weight:600;color:var(--ink)}
.st--todo .st__t{color:var(--ink-soft)}

.bar{margin:12px 0 0;max-width:380px}
.bar__track{height:8px;border-radius:999px;background:var(--paper-sunk);overflow:hidden}
.bar__fill{display:block;height:100%;border-radius:999px;background:var(--pluma);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar__lab{margin-top:7px;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.bar__lab b{color:var(--pluma);font-weight:600}

/* ---------- avances ---------- */
.feed{margin:24px 0 0;display:grid;gap:28px}
.adv__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adv__top .meta{font-variant-numeric:tabular-nums}
.adv p{margin-top:8px;font-size:16px;color:var(--ink-soft);line-height:1.5;max-width:42em}
.shot{margin:14px 0 0;border:1.8px dashed var(--graphite);border-radius:14px;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;
  font-family:var(--pen);color:var(--pluma);font-size:19px;background:#fff;max-width:520px}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.shot--img{border-style:solid;border-color:var(--rule);padding:0;overflow:hidden}

/* ---------- listas de solicitudes / archivos ---------- */
.rows{margin:22px 0 0;display:grid;gap:0}
.row{padding:18px 0;border-top:1px solid var(--rule);display:flex;gap:14px;align-items:flex-start}
.row:first-child{border-top:none}
.row__b{min-width:0;flex:1 1 auto}
.row__t{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.row__d{margin-top:5px;font-size:15px;color:var(--ink-soft);line-height:1.45;max-width:42em}
.row__m{margin-top:7px;font-size:14px;color:var(--meta);font-variant-numeric:tabular-nums}
.row__r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}

.files{margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.file{display:block;text-decoration:none;color:inherit}
.file__th{aspect-ratio:1/1;border-radius:14px;background:var(--paper-sunk);border:1px solid var(--rule);
  overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--graphite)}
.file__th img{width:100%;height:100%;object-fit:cover}
.file__n{margin-top:8px;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.file__m{font-size:13px;color:var(--meta)}
.file:hover .file__th{border-color:var(--pluma)}

/* ---------- formularios ---------- */
.form{margin:20px 0 0;max-width:560px}
.fld{margin:0 0 18px}
.fld > label{display:block;font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.fld input[type=text],.fld textarea{width:100%;display:block;background:transparent;border:none;
  border-bottom:1.8px solid var(--graphite);border-radius:0;padding:10px 2px;font:inherit;font-size:17px;
  color:var(--ink);min-height:46px}
.fld textarea{min-height:104px;resize:vertical;line-height:1.55;
  background-image:repeating-linear-gradient(var(--paper) 0 26px,var(--rule) 26px 27px);
  background-attachment:local;border:1.8px solid var(--rule);border-radius:12px;padding:8px 12px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--pluma)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--meta)}
.fld input[type=file]{width:100%;min-height:52px;border:1.8px dashed var(--graphite);border-radius:12px;
  padding:14px 14px;font-size:15px;color:var(--ink-soft);background:#fff;cursor:pointer}
.fld input[type=file]:hover{border-color:var(--pluma);background:var(--pluma-wash)}
.fld input[type=file]::file-selector-button{min-height:36px;margin-right:12px;padding:0 14px;border-radius:10px;
  border:1.5px solid #C9CED8;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer}
.fld input[type=file]:hover::file-selector-button{border-color:var(--pluma);color:var(--pluma)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid #C9CED8;background:#fff;
  font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;transition:background-color .18s,border-color .18s,color .18s}
.chip:hover{border-color:var(--pluma);background:var(--pluma-wash)}
.chip[aria-pressed=true]{border-color:var(--pluma);background:var(--pluma-wash);color:var(--pluma);font-weight:600}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:15px;color:var(--ink-soft);
  line-height:1.45;min-height:44px;padding:6px 0}
.check input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--pluma)}
.form__go{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.err{margin-top:10px;font-size:15px;color:#B42318;font-weight:500}
.okline{margin-top:10px;font-size:15px;color:#1E6B34;font-weight:500}

/* ---------- avisos y vacíos ---------- */
.note{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--pluma-wash);
  display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink);max-width:46em}
.note svg{flex:none;margin-top:2px;color:var(--pluma)}
.note--calm{background:var(--paper-sunk)}
.note--warm{background:#FBEFD9}
.note b{font-weight:600}
.empty{margin:22px 0 0;padding:26px 0 0;border-top:1.8px dashed var(--graphite);max-width:44em}
.empty h3{font-size:19px}
.empty p{margin-top:8px;color:var(--ink-soft)}
.empty .btn{margin-top:18px}

/* ---------- caja lateral (suscripción, tu app, mensajes) ---------- */
.side{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--rule);scroll-margin-top:84px}
.side h2{font-size:24px;line-height:1.1;max-width:none}
.kv{margin:18px 0 0;display:grid;gap:14px}
.kv__r{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.kv__k{font-size:15px;color:var(--meta)}
.kv__v{font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.money{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}

/* teléfono chico "tu app" */
.mini{margin:20px auto 0;width:200px}
.mini__f{border-radius:34px;background:var(--ink);padding:7px;
  box-shadow:0 1px 2px rgba(16,20,31,.08),0 18px 44px -18px rgba(16,20,31,.35)}
.mini__s{border-radius:28px;background:#fff;aspect-ratio:200/420;overflow:hidden;position:relative;
  display:flex;flex-direction:column;align-items:center;padding:34px 16px 16px;text-align:center}
.mini__i{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:62px;height:18px;border-radius:99px;
  background:var(--ink)}
.mini__logo{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:24px;overflow:hidden}
.mini__logo img{width:100%;height:100%;object-fit:cover}
.mini__n{margin-top:12px;font-weight:600;font-size:15px;line-height:1.25}
.mini__m{margin-top:4px;font-size:12px;color:var(--meta)}
.mini__bars{margin-top:18px;width:100%;display:grid;gap:8px}
.mini__bars i{display:block;height:9px;border-radius:4px;background:var(--paper-sunk)}
.mini__cap{margin:12px 0 0;text-align:center}
.stores{margin:14px 0 0;display:flex;gap:16px;justify-content:center;color:var(--graphite);font-size:14px;
  font-weight:600}

/* mensajes */
.thread{margin:18px 0 0;display:grid;gap:16px}
.msg{max-width:46em}
.msg__w{display:flex;gap:10px;align-items:center}
.msg__t{margin-top:7px;padding:13px 15px;border-radius:14px;background:#fff;border:1px solid var(--rule);
  font-size:16px;line-height:1.5;color:var(--ink)}
.msg--me{justify-self:end;text-align:right}
.msg--me .msg__w{justify-content:flex-end}
.msg--me .msg__t{background:var(--pluma-wash);border-color:var(--pluma-soft);text-align:left}
.reply{margin:20px 0 0;display:flex;gap:10px;align-items:flex-end}
.reply label{flex:1 1 auto}
.reply input{width:100%;background:transparent;border:none;border-bottom:1.8px solid var(--graphite);
  padding:10px 2px;font:inherit;font-size:17px;min-height:46px}
.reply input:focus{outline:none;border-bottom-color:var(--pluma)}
.iconbtn{flex:none;width:52px;height:52px;border-radius:14px;border:none;background:var(--pluma);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .18s}
.iconbtn:hover{background:var(--pluma-hover)}
.iconbtn[disabled]{background:var(--graphite);cursor:default}

/* barra fija de acción (celular) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 24px calc(12px + env(safe-area-inset-bottom));
  background:rgba(246,247,249,.95);backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
.dock .btn{width:100%}

/* entrada sin sesión */
.gate{padding:40px 0 80px;max-width:540px}
.gate h1{font-size:clamp(36px,10vw,52px);line-height:1}
.gate ul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.gate li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-soft);line-height:1.45}
.gate li svg{flex:none;margin-top:3px;color:var(--pluma)}
.gate .btn{margin-top:30px;width:100%}
.gate__alt{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}

.skel{display:grid;gap:14px;margin-top:28px;max-width:520px}
.skel i{display:block;height:15px;border-radius:6px;background:var(--paper-sunk)}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  .pnl{padding:34px 0 80px}
  .pnl-top__proj{display:block}
  .pnl-top__name{display:block;font-size:15px;font-weight:600}
  .pnl-head h1{font-size:44px}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px}
  .pnl-jump{display:none}
  .pnl-grid{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:0 72px;align-items:start}
  .pnl-grid > .col-b{position:sticky;top:76px}
  .sec2{margin-top:56px}
  .side:first-child{margin-top:0;padding-top:0;border-top:none}
  .files{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dock{display:none}
  .gate{max-width:560px;padding-top:64px}
  .gate .btn{width:auto}
  .mini{margin-left:0}
}

/* ── El grupo de WhatsApp del cliente ────────────────────────────────────────
   Tinta viva y ancho completo: durante las semanas de construcción este es EL canal, y
   tiene que encontrarse sin buscar. Verde de WhatsApp no se usa: el mundo visual de esta
   casa es de una sola tinta, y un botón verde aquí se vería pegado de otro sitio. */
.grupo{display:block;margin:22px 0 0;padding:16px 18px;border-radius:16px;background:var(--pluma);
  color:#fff;text-decoration:none;min-height:44px}
.grupo:hover{background:var(--pluma-hover)}
.grupo__t{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em}
.grupo__s{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:#D8E0FC}

/* ── El identificador de la cuenta del cliente ───────────────────────────────
   Se enseña solo cuando no hay nada ligado, que es justo cuando sirve. Monoespaciada y
   partible: son 28 caracteres sin sentido y en 440px tienen que caber sin desbordar. */
.uidbox{margin:22px 0 0;padding:14px 16px;border-radius:14px;background:var(--paper-sunk);
  display:grid;gap:6px}
.uidbox__k{font-size:13px;font-weight:600;color:var(--meta)}
.uidbox__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--ink);
  overflow-wrap:anywhere;user-select:all}
.uidbox__n{font-size:13px;color:var(--meta);line-height:1.4}
.uidbox .linkish{justify-self:start;font-size:14px;min-height:44px;display:inline-flex;align-items:center}

/* ── Activar la mensualidad ──────────────────────────────────────────────────
   Tinta viva porque es la acción que arranca el proyecto, y las condiciones ARRIBA del
   botón: un cargo que se repite solo cada mes se dice antes de que lo acepten, no después. */
.mens{margin:26px 0 0;padding:22px 20px;border-radius:18px;background:var(--pluma-wash)}
.mens__t{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin:0;color:#1B33B5}
.mens__s{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}
.mens__l{margin:14px 0 0;padding:0 0 0 20px;display:grid;gap:7px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.mens__l b{color:var(--ink)}

/* ── El acuse del apartado ───────────────────────────────────────────────────
   Arriba de todo y en tinta llena: es el primer segundo después de pagar. */
.acuse{margin:0 0 26px;padding:24px 22px;border-radius:20px;background:var(--pluma);color:#fff}
.acuse__t{font-family:var(--display);font-weight:700;font-size:clamp(23px,5.6vw,30px);letter-spacing:-.025em;margin:0;line-height:1.1}
.acuse__s{margin:12px 0 0;font-size:16px;color:#D8E0FC}
.acuse__l{margin:14px 0 0;padding:0 0 0 22px;display:grid;gap:10px;font-size:15px;line-height:1.5;color:#EAEFFF}
.acuse__l b{color:#fff;font-weight:600}
.acuse__n{margin:16px 0 0;font-size:13px;line-height:1.4;color:#B9C7F7}