/* ============================================================
   Portal del cliente — marco de app móvil (maqueta_portal_cliente,
   maqueta_reportar_pago). Presentación sobre los tokens de wp-base.css.
   ============================================================ */
:root{
  --app-radius:14px; --app-radius-sm:9px;
  --app-shadow:0 1px 2px rgba(42,47,58,.05), 0 10px 30px rgba(42,47,58,.08);
  --app-shadow-sm:0 1px 2px rgba(42,47,58,.05);
}
body.wp-app{ background:var(--wp-brand-light); font-size:15px; line-height:1.55; }
body.wp-app .wp-topbar, body.wp-app .wp-footer{ display:none; }
body.wp-app .wp-main{ max-width:none; padding:0; }
body.wp-app h1, body.wp-app h2, body.wp-app h3{ font-weight:600; }

/* marco de app (móvil primero, centrado en escritorio) */
.app{ max-width:440px; margin:0 auto; min-height:100vh; background:var(--wp-paper);
  box-shadow:0 0 60px rgba(42,47,58,.12); position:relative; padding-bottom:78px; }

/* topbar de la app */
.app-top{ position:sticky; top:0; z-index:10; background:rgba(221,226,232,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--wp-line-soft); padding:16px 18px 12px; }
.app-top .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* barra de marca del cliente (portal/_base.html): logo y avatar del mismo tamaño */
.app-brandbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 0; }
.app-brandbar .round.av{ width:34px; height:34px; padding:0; border:none; background:none; }
.app-brandbar .wp-brand-name b{ font-size:.98rem; }
.app-top .mark{ font-family:var(--wp-display); font-weight:600; font-size:17px; letter-spacing:.02em; color:var(--wp-ink); text-decoration:none; }
.app-top .round{ width:38px; height:38px; border-radius:50%; background:var(--wp-surface); border:1px solid var(--wp-line-soft);
  display:flex; align-items:center; justify-content:center; color:var(--wp-ink-soft); font-size:19px; text-decoration:none; flex:none; }
.app-top .greet{ margin-top:4px; }
.app-top .hi{ font-size:13px; color:var(--wp-ink-mute); letter-spacing:.02em; }
.app-top h1{ font-family:var(--wp-display); font-size:24px; margin:2px 0 0; }
.app-top.compact{ padding:14px 16px; display:flex; align-items:center; gap:12px; }
.app-top.compact .round{ width:36px; height:36px; font-size:18px; }
.app-top.compact h1{ font-size:18px; margin:0; }
.app-top.compact .sub{ font-size:12px; color:var(--wp-ink-mute); }

.wrap{ padding:18px; }
/* Inicio: los enlaces de las tarjetas se elevan al pasar (solo aquí; la pantalla de
   avances usa la misma tarjeta y se deja como está). */
.home .link-box, .home .pay-cta, .home .ab-ok, .home .order-title{ transition:transform var(--wp-t-fast) var(--wp-ease), box-shadow var(--wp-t-fast) var(--wp-ease),
  border-color var(--wp-t-fast) var(--wp-ease), background-color var(--wp-t-fast) var(--wp-ease), color var(--wp-t-fast) var(--wp-ease); }
.home .link-box:hover, .home .pay-cta:hover, .home .ab-ok:hover{ transform:translateY(-1px); }
.home .link-box:active, .home .pay-cta:active, .home .ab-ok:active{ transform:translateY(0) scale(.985); }
.sec-h{ display:flex; align-items:baseline; justify-content:space-between; margin:4px 2px 12px; }
.sec-h h2{ font-family:var(--wp-display); font-size:16px; margin:0; }
.sec-h a{ font-size:12.5px; color:var(--wp-accent); text-decoration:none; }
.lbl-sec{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--wp-ink-mute); margin:4px 2px 9px; }
body.wp-app .wp-messages{ margin-bottom:14px; }

/* píldoras */
.pill{ font-size:11px; font-weight:500; padding:3px 10px; border-radius:999px; white-space:nowrap; background:var(--wp-surface-2); color:var(--wp-ink-soft); }
.pill.prog{ background:var(--wp-pend-bg); color:var(--wp-pend-fg); }
.pill.done{ background:var(--wp-yes-bg); color:var(--wp-yes-fg); }
.pill.wait{ background:var(--wp-no-bg); color:var(--wp-no-fg); }

/* tarjeta de pedido */
.order{ background:var(--wp-surface); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius);
  box-shadow:var(--app-shadow); overflow:hidden; margin-bottom:16px; }
.order-head{ padding:16px 16px 12px; border-bottom:1px solid var(--wp-surface-2); }
.order-head .top2{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.order-title{ font-family:var(--wp-display); font-weight:600; font-size:18px; line-height:1.2; color:var(--wp-ink); }
a.order-title{ text-decoration:none; }
.order-meta{ font-size:12.5px; color:var(--wp-ink-mute); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.order-meta i{ font-size:13px; }

/* trabajos con etapas */
.jobs{ padding:6px 16px 4px; }
.job{ padding:12px 0; border-bottom:1px solid var(--wp-surface-2); }
.job:last-child{ border-bottom:none; }
.job-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.job-name{ display:flex; align-items:center; gap:9px; font-weight:500; font-size:14.5px; }
.job-name .ic{ width:30px; height:30px; border-radius:8px; flex:none; background:var(--wp-surface-2); color:var(--wp-accent);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.job-stage{ font-size:12px; color:var(--wp-ink-soft); }
.job-stage b{ color:var(--wp-ink); font-weight:600; }
.job-stage.done b{ color:var(--wp-yes-fg); }
.job-stage.wait b{ color:var(--wp-no-fg); }
.job-stage.mute b{ color:var(--wp-ink-mute); font-weight:500; }
.steps{ display:flex; gap:5px; align-items:center; }
.step{ flex:1; height:5px; border-radius:3px; background:var(--wp-surface-2); }
.step.done{ background:var(--wp-accent); }
.step.now{ background:var(--wp-pend-fg); }
.stage-labels{ display:flex; justify-content:space-between; gap:4px; margin-top:6px; font-size:10.5px; color:var(--wp-ink-mute); }
.stage-labels span{ flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-labels span:first-child{ text-align:left; } .stage-labels span:last-child{ text-align:right; }
.no-stages{ font-size:12px; color:var(--wp-ink-mute); }

/* pago 70/30 */
.pay{ margin:4px 16px 0; padding:14px 0 16px; }
.pay-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pay-h .lbl{ font-size:12.5px; color:var(--wp-ink-soft); display:flex; align-items:center; gap:7px; }
.pay-h .lbl i{ color:var(--wp-accent); font-size:15px; }
.pay-h .total{ font-family:var(--wp-display); font-weight:600; font-size:15px; }
.hitos{ display:flex; gap:10px; }
.hito{ flex:1; border:1px solid var(--wp-line-soft); border-radius:var(--app-radius-sm); padding:10px 11px; background:var(--wp-surface-2); }
.hito .k{ font-size:11px; color:var(--wp-ink-mute); }
.hito .v{ font-family:var(--wp-display); font-weight:600; font-size:15px; margin:2px 0 6px; }
.hito .st{ font-size:11px; font-weight:500; display:inline-flex; align-items:center; gap:5px; color:var(--wp-ink-mute); }
.hito .st i{ font-size:13px; }
.hito.ok{ border-color:#cde0cf; } .hito.ok .st{ color:var(--wp-yes-fg); }
.hito.due .st{ color:var(--wp-pend-fg); }
.hito.review .st{ color:var(--wp-accent); }
.hito.rejected .st{ color:var(--wp-no-fg); }
.pay-cta{ margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; font:inherit; font-weight:600; font-size:14.5px; color:#fff; background:var(--wp-accent);
  border:none; border-radius:var(--app-radius-sm); cursor:pointer; text-decoration:none; }
.pay-cta:hover{ background:var(--wp-accent-deep); color:#fff; }
.pay-note{ margin-top:10px; font-size:12px; color:var(--wp-ink-mute); display:flex; gap:6px; align-items:flex-start; }
.pay-note i{ color:var(--wp-accent); flex:none; margin-top:2px; }

/* línea de tiempo */
.feed{ background:var(--wp-surface-2); border-top:1px solid var(--wp-line-soft); padding:13px 16px; }
.feed-h{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--wp-ink-mute); margin-bottom:9px; }
.ev{ display:flex; gap:10px; font-size:12.5px; color:var(--wp-ink-soft); margin-bottom:8px; }
.ev:last-child{ margin-bottom:0; }
.ev .d{ width:22px; height:22px; border-radius:50%; flex:none; background:var(--wp-surface); border:1px solid var(--wp-line-soft);
  display:flex; align-items:center; justify-content:center; color:var(--wp-accent); font-size:12px; }
.ev b{ color:var(--wp-ink); font-weight:500; }
.ev .t{ color:var(--wp-ink-mute); font-size:11px; }
.feed-more{ display:block; margin-top:8px; font-size:12px; color:var(--wp-accent); text-decoration:none; }

/* tarjeta de acción */
.cta-card{ background:var(--wp-surface); border:1px dashed var(--wp-line); border-radius:var(--app-radius); padding:18px;
  text-align:center; box-shadow:var(--app-shadow-sm); margin-bottom:16px; }
.cta-card .ic{ width:44px; height:44px; border-radius:12px; margin:0 auto 10px; background:var(--wp-surface-2); color:var(--wp-accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.cta-card h3{ font-family:var(--wp-display); font-size:16px; margin:0 0 4px; }
.cta-card p{ margin:0 0 13px; font-size:13px; color:var(--wp-ink-soft); }
.cta-card .btn{ display:inline-block; font:inherit; font-weight:600; font-size:14px; color:#fff; background:var(--wp-accent);
  border:none; border-radius:var(--app-radius-sm); padding:11px 20px; cursor:pointer; text-decoration:none; }
.cta-card .btn:hover{ background:var(--wp-accent-deep); color:#fff; }
.cta-card.recibido{ border-style:solid; }
.cta-card .problema{ text-align:left; margin-top:4px; }
.cta-card .problema summary{ text-align:center; cursor:pointer; font-size:13px; color:var(--wp-accent); padding:6px; }
.cta-card .problema label{ display:block; font-size:13px; color:var(--wp-ink-soft); margin:8px 0 6px; }
.cta-card .problema textarea{ width:100%; font:inherit; font-size:var(--wp-fs-input, 16px); padding:10px 12px; border:1px solid var(--wp-line);
  border-radius:var(--app-radius-sm); background:var(--wp-surface); color:var(--wp-ink); margin-bottom:10px; }
.cta-card .problema textarea:focus{ outline:none; border-color:var(--wp-accent); box-shadow:0 0 0 3px rgba(58,74,102,.12); }

/* fila compacta (pedidos anteriores, pagos) */
.past{ display:flex; align-items:center; gap:12px; background:var(--wp-surface); border:1px solid var(--wp-line-soft);
  border-radius:var(--app-radius-sm); padding:12px 14px; margin-bottom:10px; box-shadow:var(--app-shadow-sm); text-decoration:none; color:inherit; }
.past .th{ width:40px; height:40px; border-radius:8px; flex:none; background:var(--wp-brand-light); color:var(--wp-accent);
  display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid var(--wp-line-soft); }
.past .b{ flex:1; min-width:0; }
.past .b .n{ font-weight:500; font-size:14px; color:var(--wp-ink); }
.past .b .m{ font-size:12px; color:var(--wp-ink-mute); }
.past i.go{ color:var(--wp-ink-mute); font-size:16px; }

/* cuenta */
.acct{ background:var(--wp-surface); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius); box-shadow:var(--app-shadow); overflow:hidden; margin-bottom:16px; }
.acct .line{ display:flex; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--wp-surface-2); font-size:13.5px; }
.acct .line:last-child{ border-bottom:none; }
.acct .line .k{ color:var(--wp-ink-mute); }
.acct .line .v{ font-weight:500; color:var(--wp-ink); text-align:right; word-break:break-word; }
/* Perfil: foto centrada, nombre y rol debajo, botones en fila; una sola columna
   ordenada en el teléfono y centrada en PC (ver staff.css). */
.acct-profile{ background:var(--wp-surface); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius); box-shadow:var(--app-shadow);
  padding:24px 18px 18px; margin-bottom:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.acct-avatar{ margin-bottom:4px; }
.acct-name{ font-family:var(--wp-display); font-weight:600; font-size:20px; margin:0; line-height:1.2; }
.acct-sub{ font-size:13px; color:var(--wp-ink-mute); }
.avatar-form{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0 0; }
.avatar-form input[type="file"]{ display:none; }
.avatar-form .wp-btn{ cursor:pointer; }
.acct-profile .wp-hint{ margin-top:2px; }
.acct-actions{ display:grid; gap:10px; }
.acct-actions .wp-btn{ width:100%; }

/* barra inferior */
.app-nav{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:440px;
  background:var(--wp-surface); border-top:1px solid var(--wp-line-soft); display:flex; padding:8px 6px 10px; z-index:20; }
.app-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  color:var(--wp-ink-mute); font-size:10.5px; }
.app-nav a i{ font-size:22px; }
.app-nav a.on{ color:var(--wp-accent); }

/* ---- Reportar pago ---- */
.hitos-pick{ display:flex; gap:11px; margin-bottom:20px; }
.hitos-pick input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
.hitos-pick label.hito{ background:var(--wp-surface); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius);
  padding:13px; cursor:pointer; position:relative; box-shadow:var(--app-shadow); display:block; }
.hitos-pick label.hito .v{ font-size:19px; margin:3px 0 5px; }
.hitos-pick label.hito .radio{ position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--wp-line); display:flex; align-items:center; justify-content:center; }
.hitos-pick input:checked + label.hito{ border-color:var(--wp-accent); box-shadow:0 0 0 3px rgba(58,74,102,.10), var(--app-shadow); }
.hitos-pick input:checked + label.hito .radio{ border-color:var(--wp-accent); background:var(--wp-accent); }
.hitos-pick input:checked + label.hito .radio::after{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.hitos-pick input:focus-visible + label.hito{ outline:2px solid var(--wp-accent); outline-offset:2px; }
.hitos-pick .hito.locked{ opacity:.6; cursor:default; }

.bank{ background:var(--wp-surface-2); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius); padding:14px 15px; margin-bottom:12px; }
.bank .h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; margin-bottom:6px; }
.bank .h i{ color:var(--wp-accent); font-size:17px; }
.bank .line{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; }
.bank .line .k{ color:var(--wp-ink-mute); flex:none; }
.bank .line .v{ font-weight:500; color:var(--wp-ink); text-align:right; white-space:pre-line; }
.bank .copy{ color:var(--wp-accent); font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  background:none; border:none; font-family:inherit; padding:0; margin-left:6px; }
.bank-group{ margin-bottom:20px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:500; color:var(--wp-ink-soft); margin-bottom:6px; }
.field label .opt{ color:var(--wp-ink-mute); font-weight:400; }
.field input, .field select, .field textarea{ width:100%; padding:12px 13px; font:inherit; font-size:var(--wp-fs-input); color:var(--wp-ink);
  transition:border-color var(--wp-t-fast) var(--wp-ease), box-shadow var(--wp-t-fast) var(--wp-ease);
  background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--app-radius-sm); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--wp-accent); box-shadow:0 0 0 3px rgba(58,74,102,.12); }
.field .hint{ margin-top:6px; font-size:12px; color:var(--wp-ink-mute); }
.field .err{ margin-top:6px; font-size:12px; color:var(--wp-no-fg); }
.amount-wrap{ position:relative; }
.amount-wrap .cur{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--wp-ink-mute); font-weight:500; }
.amount-wrap input{ padding-left:32px; font-family:var(--wp-display); font-weight:600; font-size:17px; }
.amount-wrap.bs .cur{ font-size:12px; } .amount-wrap.bs input{ padding-left:38px; }
.amount-ro{ padding:12px 13px; border:1px solid var(--wp-line-soft); border-radius:var(--app-radius-sm); background:var(--wp-surface-2);
  font-family:var(--wp-display); font-weight:600; font-size:17px; }
.form-err{ display:flex; gap:8px; align-items:flex-start; background:var(--wp-no-bg); border:1px solid #e3c9c9; color:var(--wp-no-fg);
  border-radius:var(--app-radius-sm); padding:11px 13px; margin-bottom:16px; font-size:13px; }

.drop{ display:flex; align-items:center; gap:13px; padding:15px; border:1.5px dashed var(--wp-line);
  border-radius:var(--app-radius); background:var(--wp-surface); cursor:pointer; position:relative; }
.drop input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.drop .ic{ width:44px; height:44px; border-radius:11px; flex:none; background:var(--wp-surface-2); color:var(--wp-accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.drop .t{ font-size:13.5px; min-width:0; } .drop .t b{ display:block; color:var(--wp-ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drop .t span{ color:var(--wp-ink-mute); font-size:12px; }

.submit{ margin-top:22px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px; font:inherit; font-weight:600; font-size:15.5px; color:#fff; background:var(--wp-accent);
  border:none; border-radius:var(--app-radius-sm); cursor:pointer; }
.submit:hover{ background:var(--wp-accent-deep); }
.submit i{ transition:transform var(--wp-t-fast) var(--wp-ease); }
.submit:hover i{ transform:translateX(2px); }
.note{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:12px; color:var(--wp-ink-mute); }
.note i{ color:var(--wp-accent); font-size:15px; flex:none; margin-top:1px; }
.is-hidden{ display:none !important; }

/* ---- Aprobación del cliente en una etapa ---- */
.job-stage.pend b{ color:var(--wp-pend-fg); }
.approve-box{ margin-top:10px; background:var(--wp-pend-bg); border:1px solid #e0d6b8; border-radius:var(--app-radius-sm); padding:12px 13px; }
.approve-box .ab-h{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:var(--wp-pend-fg); margin-bottom:6px; }
.approve-box .ab-h i{ font-size:17px; }
.approve-box .ab-p{ margin:0 0 10px; font-size:13px; color:var(--wp-ink-soft); }
.approve-box .ab-m{ margin:0; font-size:12px; color:var(--wp-ink-mute); }
.approve-box .ab-form{ margin:0; }
.approve-box .ab-ok{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; font:inherit; font-weight:600;
  font-size:14px; color:#fff; background:var(--wp-yes-fg); border:none; border-radius:var(--app-radius-sm); cursor:pointer; }
.approve-box .ab-ok:hover{ filter:brightness(1.05); }
.approve-box .ab-changes{ margin-top:8px; }
.approve-box .ab-changes summary{ list-style:none; cursor:pointer; font-size:13px; color:var(--wp-accent); display:inline-flex; align-items:center; gap:5px; }
.approve-box .ab-changes summary::-webkit-details-marker{ display:none; }
.approve-box .ab-changes form{ margin-top:8px; display:grid; gap:8px; }
.approve-box textarea{ width:100%; font:inherit; font-size:var(--wp-fs-input-sm); padding:9px 10px; border:1px solid var(--wp-line); border-radius:var(--app-radius-sm); background:var(--wp-surface); resize:vertical; }
.approve-box textarea:focus{ outline:none; border-color:var(--wp-accent); box-shadow:0 0 0 3px rgba(58,74,102,.12); }
.approve-box .ab-send{ padding:10px; font:inherit; font-weight:600; font-size:13.5px; color:var(--wp-ink); background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--app-radius-sm); cursor:pointer; }
.approve-box .ab-send:hover{ border-color:var(--wp-accent); color:var(--wp-accent); }

/* ---- 4b · presupuesto / contrato en la tarjeta ---- */
.approve-box.link-box{ display:block; text-decoration:none; margin:10px 16px 0; background:var(--wp-brand-light); border-color:var(--wp-line); }
.approve-box.link-box .ab-h{ color:var(--wp-accent); }
.approve-box.link-box .ab-p{ margin-bottom:0; }
.approve-box.muted-box{ margin:10px 16px 0; background:var(--wp-surface-2); border-color:var(--wp-line-soft); }
.approve-box.muted-box .ab-h{ color:var(--wp-ink-soft); }

.job-eta{ margin-top:8px; font-size:12.5px; color:var(--wp-ink-soft); display:flex; align-items:center; gap:6px; }
.job-eta i{ color:var(--wp-accent); }

.ab-prueba{ display:flex; flex-direction:column; gap:6px; margin:10px 0; text-decoration:none; color:var(--wp-accent); font-size:13px; }
.ab-prueba img{ width:100%; max-height:320px; object-fit:contain; background:var(--wp-surface-2); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius-sm); }
.ab-pdf{ display:flex; align-items:center; justify-content:center; height:90px; background:var(--wp-surface-2); border-radius:var(--app-radius-sm); font-size:38px; }

/* Cambios del cliente */
.ab-rondas{ font-size:12.5px; color:var(--wp-ink-soft); margin:6px 0; }
.cambios-card{ background:var(--wp-surface); border:1px solid var(--wp-line-soft); border-radius:var(--app-radius); padding:16px; margin:16px 0; box-shadow:var(--app-shadow-sm); }
.cambios-card h3{ font-family:var(--wp-display); font-size:16px; margin:0 0 10px; display:flex; gap:7px; align-items:center; }
.cr{ border-top:1px solid var(--wp-line-soft); padding:10px 0; }
.cr-h{ font-size:14px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cr-st{ font-size:11px; padding:2px 8px; border-radius:999px; background:var(--wp-surface-2); color:var(--wp-ink-soft); margin-left:auto; }
.cr.cotizado .cr-st{ background:var(--wp-pend-bg); color:var(--wp-pend-fg); } .cr.aceptado .cr-st{ background:var(--wp-yes-bg); color:var(--wp-yes-fg); }
.cr-d{ margin:4px 0; font-size:13px; color:var(--wp-ink-soft); }
.cr-resp{ font-size:13.5px; background:var(--wp-surface-2); border-radius:var(--app-radius-sm); padding:10px 12px; margin:6px 0; }
.cr-btns{ display:flex; gap:8px; flex-wrap:wrap; } .cr-btns form{ margin:0; }
.cambios-card .btn{ font:inherit; font-weight:600; font-size:14px; color:#fff; background:var(--wp-accent); border:none; border-radius:var(--app-radius-sm); padding:10px 18px; cursor:pointer; }
.cambios-card .btn-sec{ font:inherit; font-size:14px; color:var(--wp-ink-soft); background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--app-radius-sm); padding:10px 18px; cursor:pointer; }
.cr-corte{ font-size:13px; color:var(--wp-ink-soft); display:flex; gap:6px; align-items:flex-start; margin:10px 0 0; }
.cr-nuevo summary{ cursor:pointer; color:var(--wp-accent); font-size:14px; padding:8px 0; }
.cr-nuevo form{ display:flex; flex-direction:column; gap:6px; }
.cr-nuevo label{ font-size:13px; color:var(--wp-ink-soft); margin-top:4px; } .cr-nuevo .opt{ color:var(--wp-ink-mute); }
.cr-nuevo select, .cr-nuevo input, .cr-nuevo textarea{ font:inherit; font-size:var(--wp-fs-input, 16px); padding:10px 12px; border:1px solid var(--wp-line); border-radius:var(--app-radius-sm); background:var(--wp-surface); color:var(--wp-ink); width:100%; }
.cr-nota{ font-size:12px; color:var(--wp-ink-mute); margin:4px 0; }

.fase-h{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--wp-ink-mute); margin:12px 2px 6px; }

/* Detalle del pedido: historial plegado, pago secundario y dos columnas en computadora */
details.feed > summary{ cursor:pointer; list-style:none; margin-bottom:0; }
details.feed > summary::-webkit-details-marker{ display:none; }
details.feed > summary::after{ content:" ▾"; }
details.feed[open] > summary{ margin-bottom:9px; }
.pay-adelantar{ display:block; margin-top:10px; font-size:13px; color:var(--wp-accent); text-align:center; }
.detalle{ display:flex; flex-direction:column; gap:16px; }
.detalle-main, .detalle-side{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.detalle-side:empty{ display:none; }
@media (min-width:900px){
  body.wp-app--ancho .app, body.wp-app--ancho .app-nav{ max-width:1040px; }
  .detalle{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:start; }
  .detalle-side > *{ margin-top:0 !important; }
}

/* Aviso en el detalle del pedido cuando quien mira es la planner del evento */
.pl-aviso{ display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border-radius:16px; background:#E7EBF1; color:var(--wp-ink); font-size:14px; line-height:1.5; }
.pl-aviso i{ font-size:20px; color:var(--wp-accent); flex:none; margin-top:1px; }