/* ============================================================================
   We Ötzi · Dashboard de cliente — CSS de página (Design System Bauhaus)
   Requiere /shared/css/ds/tokens.css + /shared/css/ds/components.css antes.
   Regla: cero hex sueltos — todo color sale de var(--token).
   ========================================================================== */

/* ---------- Shell ---------- */
/* --fg/--bg: alias que consume reviews.css (no es nuestro) — mapeados al DS */
/* --client-hero-*: escala del hero del Figma (72 / 52). El paso de 52px no existe
   en la escala tipográfica del DS, así que vive acá como único punto de verdad. */
.client-page{margin:0;min-height:100vh;display:flex;flex-direction:column;--fg:var(--neutral-500);--bg:var(--neutral-100);
  --client-hero-size:var(--display-size);--client-hero-sub-size:52px}
.client-main{flex:1;display:flex;flex-direction:column}
.client-main > .wo-container{width:100%}

/* ---------- Topbar ---------- */
.client-topbar{position:sticky;top:0;z-index:100}
.client-profile-tile{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;flex:none;overflow:hidden;
  background:var(--yellow-300);color:var(--neutral-500);
  font-family:var(--font-display);font-size:16px;text-transform:uppercase;
  border:var(--border-strong-width) solid var(--border-strong);border-radius:var(--radius-none);cursor:pointer;
  transition:transform var(--duration-press),box-shadow var(--duration-press)}
.client-profile-tile:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.client-profile-tile:active{transform:none;box-shadow:none}
.client-profile-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Hero ---------- */
.client-hero{padding:var(--space-12) 0 var(--space-10)}
.client-hero-title{font-family:var(--font-display);font-size:var(--client-hero-size);line-height:var(--display-lh);letter-spacing:var(--h1-track);color:var(--text-heading);margin:0}
.client-hero-sub{font-family:var(--font-display);font-size:var(--client-hero-sub-size);line-height:1.1;color:var(--text-heading);margin:var(--space-2) 0 0}

/* ---------- Encabezado de sección (título + regla) ---------- */
.client-section-head{border-bottom:var(--border-hairline) solid var(--border-strong);padding-bottom:var(--space-4);margin-bottom:var(--space-6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.client-section-link{color:var(--neutral-500);text-decoration:none;white-space:nowrap;font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track)}
.wo-app a.client-section-link:hover{color:var(--black);text-decoration:underline}

/* ---------- Tu actividad ---------- */
.client-activity{padding:var(--space-8) 0}
.client-activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}

/* Feed de actividad (columna izquierda del Figma) */
.client-feed{display:flex;flex-direction:column}
.client-feed-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.client-feed-row:first-child{border-top:var(--border-hairline) solid var(--border-subtle)}
.client-feed-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;background:var(--sand-050);color:var(--neutral-500)}
.client-feed-icon [data-wo-icon]{width:16px;height:16px}
.client-feed-text{flex:1;min-width:0;font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--neutral-500)}
.client-feed-time{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);white-space:nowrap}
.client-feed-empty{padding:var(--space-8) 0;font-size:var(--body-s-size);color:var(--text-muted);border-top:var(--border-hairline) solid var(--border-subtle)}

/* Contadores tipo Figma (filas de color) */
.client-counters{display:flex;flex-direction:column;gap:var(--space-3)}
.client-counter{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;text-align:left;padding:var(--space-5) var(--space-6);min-height:var(--control-h-lg);
  border:0;border-radius:var(--radius-none);font-family:var(--font-body);cursor:pointer;
  transition:transform var(--duration-press),box-shadow var(--duration-press)}
.client-counter:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.client-counter:active{transform:none;box-shadow:none}
.client-counter-label{font-size:var(--body-s-size);font-weight:var(--weight-medium)}
.client-counter-value{font-family:var(--font-mono);font-size:20px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.client-counter--blue{background:var(--blue-300);color:var(--neutral-100)}
.client-counter--yellow{background:var(--yellow-300);color:var(--neutral-500)}
.client-counter--green{background:var(--system-success);color:var(--white)}

/* ---------- Mis cotizaciones (panel que abre el nav) ---------- */
.client-quotations{padding:var(--space-8) 0;scroll-margin-top:96px}
.client-quotations.is-collapsed{display:none}
.client-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:var(--border-strong-width) solid var(--border-strong);margin-bottom:var(--space-6)}
.tab-btn{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);background:transparent;border:0;
  border-bottom:var(--border-rule-width) solid transparent;margin-bottom:calc(-1 * var(--border-strong-width));
  font-family:var(--font-mono);font-size:12px;letter-spacing:var(--meta-m-track);text-transform:uppercase;
  color:var(--neutral-400);cursor:pointer}
.tab-btn:hover{color:var(--neutral-500)}
.tab-btn.active{color:var(--neutral-500);border-bottom-color:var(--accent)}
.jb-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 var(--space-1);
  background:var(--blue-300);color:var(--white);
  font-family:var(--font-mono);font-size:10px;font-weight:var(--weight-bold);border-radius:var(--radius-pill)}

.quotations-list,.jb-requests-list{display:flex;flex-direction:column;gap:var(--space-5)}

/* Card de cotización (markup generado por client-dashboard.js) */
.quotation-card{background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong);transition:transform var(--duration-press),box-shadow var(--duration-press)}
.quotation-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard)}
.quotation-card:active{transform:none;box-shadow:none}
.quotation-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.quotation-id{font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:0.06em;color:var(--text-muted)}
.quotation-status{font-family:var(--font-mono);font-size:10px;font-weight:var(--weight-bold);letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;white-space:nowrap}
.quotation-status.pending,.quotation-status.artist_completed{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.quotation-status.responded,.quotation-status.client_approved,.quotation-status.in_progress{background:var(--status-info-bg);color:var(--status-info-fg)}
.quotation-status.completed{background:var(--status-success-bg);color:var(--status-success-fg)}
.quotation-status.client_rejected{background:var(--status-error-bg);color:var(--status-error-fg)}
/* Estados de solicitudes del Job Board */
.quotation-status.jb-draft,.quotation-status.jb-closed{background:var(--neutral-200);color:var(--neutral-400)}
.quotation-status.jb-open{background:var(--status-success-bg);color:var(--status-success-fg)}
.quotation-status.jb-in_review{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.quotation-status.jb-accepted{background:var(--status-info-bg);color:var(--status-info-fg)}
.quotation-status.jb-expired{background:var(--status-error-bg);color:var(--status-error-fg)}

.quotation-body{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--space-6);flex-wrap:wrap}
.quotation-artist{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.artist-avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;background:var(--yellow-300);color:var(--neutral-500);font-family:var(--font-display);font-size:16px;text-transform:uppercase}
.quotation-artist > img{width:48px;height:48px;object-fit:cover;flex:none;border:var(--border-strong-width) solid var(--border-strong)}
.artist-info h4{font-family:var(--font-display);font-size:17px;color:var(--text-heading);margin:0;line-height:1.2}
.artist-info p{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-faint);margin:var(--space-1) 0 0}
.quotation-details{display:flex;gap:var(--space-8);flex-wrap:wrap}
.detail-item{display:flex;flex-direction:column;gap:var(--space-1)}
.detail-label{font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-m-track);text-transform:uppercase;color:var(--text-faint)}
.detail-value{font-size:var(--body-s-size);color:var(--text-body)}
.quotation-footer{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:var(--border-hairline) solid var(--border-subtle);flex-wrap:wrap}

/* Botón "borrar/rechazar" — ghost con tinta de peligro */
.wo-btn--ghost.btn-borrar{color:var(--text-danger);border-color:var(--red-300)}
.wo-btn--ghost.btn-borrar:hover{background:var(--red-100);border-color:var(--red-400);color:var(--red-500)}

/* Badge de mensajes sin leer */
.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--space-1);background:var(--blue-300);color:var(--white);font-family:var(--font-mono);font-size:10px;font-weight:var(--weight-bold);border-radius:var(--radius-pill)}
.wo-btn .unread-badge{background:var(--yellow-300);color:var(--neutral-500)}

/* ---------- ¿Tenés una idea? ---------- */
.client-idea{padding:var(--space-12) 0;border-top:var(--border-hairline) solid var(--border-strong);margin-top:var(--space-8);display:grid;grid-template-columns:5fr 7fr;gap:var(--space-10);align-items:center}
.client-idea-title{font-family:var(--font-display);font-size:var(--title-md-size);line-height:1.1;color:var(--text-heading);margin:var(--space-3) 0 0}
.client-idea-copy{font-size:var(--body-m-size);line-height:var(--body-m-lh);color:var(--text-muted);margin:var(--space-4) 0 0;max-width:52ch}
.client-idea-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.client-idea-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.client-idea-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--sand-050);color:var(--ink);margin-bottom:var(--space-2)}
.client-idea-card-title{font-family:var(--font-display);font-size:19px;color:var(--text-heading);margin:0}
.client-idea-card-copy{font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--text-muted);margin:0 0 var(--space-3)}
.client-idea-card .wo-btn{margin-top:auto}

/* ---------- Banda Tattoo Globe (superficie inversa) ---------- */
.client-globe{background:var(--surface-inverse);color:var(--text-on-dark);margin-top:var(--space-12)}
.client-globe-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center;padding-top:var(--space-16);padding-bottom:var(--space-16)}
.client-globe-media{aspect-ratio:5/4;background:var(--sand-350)}
.client-globe-glyph{width:96px;height:96px;color:var(--neutral-500);opacity:var(--opacity-muted)}
.client-globe-glyph svg{width:100%;height:100%}
.client-globe-eyebrow{color:var(--text-accent)}
.client-globe-title{font-family:var(--font-display);font-size:var(--title-lg-size);line-height:1.05;color:var(--neutral-100);margin:var(--space-4) 0 0}
.client-globe-text{font-size:var(--body-m-size);line-height:var(--body-m-lh);color:var(--text-on-dark);margin:var(--space-5) 0 var(--space-8);max-width:48ch}

/* ---------- Artistas para vos ---------- */
.client-suggested{padding:var(--space-16) 0 var(--space-12)}
.client-suggested-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.client-suggested-card{display:flex;flex-direction:column;gap:var(--space-2);text-decoration:none;color:inherit}
.wo-app a.client-suggested-card:hover{text-decoration:none;color:inherit}
.client-suggested-media{position:relative;aspect-ratio:139/100;background:var(--surface-media);overflow:hidden}
.client-suggested-media img{width:100%;height:100%;object-fit:cover;display:block}
.client-suggested-ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;color:var(--text-faint)}
.client-suggested-card:hover .client-suggested-media{box-shadow:var(--shadow-hard-sm)}
.client-suggested-badge{position:absolute;top:var(--space-3);left:var(--space-3);display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);
  font-family:var(--font-mono);font-size:var(--meta-s-size);font-weight:var(--weight-bold);letter-spacing:var(--meta-s-track);text-transform:uppercase}
.client-suggested-badge--reco{background:var(--neutral-200);color:var(--neutral-500)}
.client-suggested-badge--guest{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.client-suggested-badge--near{background:var(--status-success-bg);color:var(--status-success-fg)}
.client-suggested-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-2)}
.client-suggested-name{font-family:var(--font-display);font-size:19px;line-height:1.15;color:var(--text-heading);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-suggested-rating{display:inline-flex;align-items:center;gap:var(--space-1);flex:none;font-family:var(--font-mono);font-size:var(--button-s-size);color:var(--neutral-500)}
.client-suggested-rating [data-wo-icon]{width:12px;height:12px}
.client-suggested-place{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted)}
.client-suggested-place [data-wo-icon]{width:12px;height:12px;flex:none}
.client-suggested-styles{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.client-suggested-style{display:inline-flex;align-items:center;padding:2px var(--space-3);background:var(--sand-050);border:var(--border-hairline) solid var(--sand-250);
  font-family:var(--font-mono);font-size:var(--button-s-size);letter-spacing:0.08em;text-transform:uppercase;color:var(--neutral-500)}

/* ---------- Footer ---------- */
.client-footer{border-top:var(--border-hairline) solid var(--border-strong);background:var(--surface-page)}
.client-footer-inner{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-10);padding-top:var(--space-12);padding-bottom:var(--space-8)}
.client-footer-logo{font-family:var(--font-display);font-size:22px;letter-spacing:0.04em;color:var(--text-heading)}
.client-footer-tagline{font-size:var(--body-s-size);color:var(--text-muted);margin:var(--space-3) 0 0;max-width:34ch}
.client-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.client-footer-col a{color:var(--neutral-500);font-size:var(--body-s-size)}
.client-footer-link{padding:0;background:transparent;border:0;font-family:var(--font-body);font-size:var(--body-s-size);color:var(--neutral-500);cursor:pointer;text-align:left}
.client-footer-link:hover{color:var(--black);text-decoration:underline}
.client-footer-legal{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
  border-top:var(--border-hairline) solid var(--border-subtle);padding-top:var(--space-4);padding-bottom:var(--space-4);color:var(--text-faint)}
.client-footer-social{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--neutral-500);text-decoration:none}
.wo-app a.client-footer-social:hover{color:var(--black);text-decoration:none}

/* ---------- Modales ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(36,33,29,var(--opacity-subtle));display:none;align-items:center;justify-content:center;padding:var(--space-6);z-index:1000}
.modal-overlay.active{display:flex}
.modal-content{background:var(--surface-card);border:var(--border-strong-width) solid var(--border-strong);width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:om-fade-in var(--duration-fade) var(--ease-standard)}
.modal-content--wide{max-width:960px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-bottom:var(--border-strong-width) solid var(--border-strong);flex:none}
.modal-title{font-family:var(--font-display);font-size:var(--h3-size);color:var(--text-heading);margin:0}
.modal-close{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-sm);height:var(--control-h-sm);flex:none;background:transparent;border:var(--border-strong-width) solid var(--border-strong);color:var(--neutral-500);cursor:pointer;transition:transform var(--duration-press),box-shadow var(--duration-press)}
.modal-close:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.modal-close:active{transform:none;box-shadow:none}
.modal-body{padding:var(--space-6);overflow-y:auto}

/* Detalle de cotización + chat lado a lado */
.quotation-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:stretch}
.quotation-detail{min-width:0}

/* Secciones del detalle (markup generado) */
.detail-section{margin-bottom:var(--space-6)}
.detail-section-title{font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:var(--meta-lead-track);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.detail-field{display:flex;flex-direction:column;gap:var(--space-1)}
.detail-field label{font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-m-track);text-transform:uppercase;color:var(--text-faint)}
.detail-field span{font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--text-body)}
.detail-link{font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-link)}
.expand-info-btn{background:transparent;border:0;padding:var(--space-2) 0;font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:0.06em;text-transform:uppercase;color:var(--neutral-500);cursor:pointer;border-bottom:var(--border-strong-width) solid var(--neutral-500)}
.expand-info-btn:hover{color:var(--black);border-bottom-color:var(--black)}

/* ---------- Chat (Figma flujo-clientes 23/24) ---------- */
.chat-section{display:flex;flex-direction:column;min-height:420px;border:var(--border-hairline) solid var(--border-strong);background:var(--surface-page)}
.chat-header{padding:var(--space-4) var(--space-5);border-bottom:var(--border-hairline) solid var(--border-subtle);background:var(--surface-card);flex:none}
.chat-header h3{font-family:var(--font-display);font-size:15px;color:var(--text-heading);margin:0;text-transform:uppercase;letter-spacing:0.02em}
.chat-messages{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.chat-empty{margin:auto;text-align:center;color:var(--text-faint)}
.chat-empty p{font-size:var(--body-s-size);margin:0}
.chat-message{position:relative;max-width:82%;padding:var(--space-3) var(--space-4) var(--space-5);font-size:var(--body-s-size);line-height:var(--body-s-lh);word-break:break-word}
.chat-message.client{align-self:flex-end;background:var(--neutral-500);color:var(--neutral-100)}
.chat-message.artist{align-self:flex-start;background:var(--sand-150);color:var(--ink)}
.chat-message .time{position:absolute;right:var(--space-3);bottom:var(--space-1);font-family:var(--font-mono);font-size:9px;letter-spacing:0.04em;opacity:var(--opacity-muted)}
.chat-input-container{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:var(--border-hairline) solid var(--border-subtle);background:var(--surface-card);flex:none}
.chat-input{flex:1;min-height:var(--control-h-md);max-height:120px;resize:none;box-sizing:border-box;
  background:var(--surface-page);border:var(--border-hairline) solid var(--border-strong);border-radius:var(--radius-none);
  padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--neutral-500)}
.chat-input:focus{background:var(--white);border:var(--border-strong-width) solid var(--border-focus);padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);outline:none;box-shadow:none}
.chat-send{flex:none}

/* ---------- Centro de cuenta (form) ---------- */
.edit-profile-form{display:flex;flex-direction:column;padding:var(--space-6);overflow-y:auto}
.form-section{display:flex;flex-direction:column;gap:var(--space-4)}
.form-section-title{margin:0}
.avatar-upload-container{display:flex;align-items:center;gap:var(--space-5)}
.avatar-preview{position:relative;width:88px;height:88px;flex:none;background:var(--sand-250);border:var(--border-strong-width) solid var(--border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden}
.avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-preview-placeholder{font-family:var(--font-display);font-size:28px;color:var(--neutral-500);text-transform:uppercase}
.avatar-upload-input{display:none}
.avatar-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(252,252,252,var(--opacity-subtle))}
.avatar-loading.active{display:flex}
.spinner{width:24px;height:24px;border:3px solid var(--neutral-200);border-top-color:var(--neutral-500);border-radius:var(--radius-circle);animation:om-spin var(--duration-spin) linear infinite}
.form-actions{margin-top:var(--space-8)}

/* ---------- Postulaciones del Job Board (markup generado) ---------- */
.jb-app{border:var(--border-strong-width) solid var(--border-strong);margin-bottom:var(--space-5);background:var(--surface-card)}
.jb-app-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.jb-app-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;background:var(--yellow-300);color:var(--neutral-500);font-family:var(--font-display);font-size:15px;text-transform:uppercase;overflow:hidden}
.jb-app-avatar img{width:100%;height:100%;object-fit:cover}
.jb-app-info{flex:1;min-width:0}
.jb-app-name{font-family:var(--font-display);font-size:15px;color:var(--text-heading)}
.jb-app-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-1)}
.jb-app-body{padding:var(--space-5)}
.jb-app-msg{font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--text-body);margin:0 0 var(--space-3)}
.jb-app-facts{display:flex;gap:var(--space-5);flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.jb-app-link{display:inline-block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-link)}
.jb-app-actions{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:var(--border-hairline) solid var(--border-subtle)}
.jb-app-quote-link{display:block;padding:var(--space-3) var(--space-5);background:var(--status-info-bg);text-align:center}
.jb-app-quote-link a{font-family:var(--font-mono);font-size:var(--meta-m-size);letter-spacing:0.06em;text-transform:uppercase;color:var(--status-info-fg)}
/* Estados de una postulación */
.jb-app-status{font-family:var(--font-mono);font-size:10px;font-weight:var(--weight-bold);letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;white-space:nowrap}
.jb-app-status.st-pending{background:var(--status-warning-bg);color:var(--status-warning-fg)}
.jb-app-status.st-viewed{background:var(--status-info-bg);color:var(--status-info-fg)}
.jb-app-status.st-accepted{background:var(--status-success-bg);color:var(--status-success-fg)}
.jb-app-status.st-rejected{background:var(--status-error-bg);color:var(--status-error-fg)}
.jb-app-status.st-withdrawn{background:var(--neutral-200);color:var(--neutral-400)}
.jb-modal-empty{text-align:center;padding:var(--space-10) var(--space-6);color:var(--text-muted)}
.jb-modal-empty p{margin:0 0 var(--space-2)}
.jb-modal-empty .hint{font-size:var(--body-s-size);color:var(--text-faint)}

/* ---------- Estados de carga / vacío ---------- */
.loading-skeleton{height:150px;background:linear-gradient(90deg,var(--neutral-200) 25%,var(--neutral-100) 37%,var(--neutral-200) 63%);background-size:400% 100%;animation:om-shimmer 1.4s ease infinite}
.loading-skeleton--row{height:var(--control-h-lg);margin-bottom:var(--space-3)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-16) var(--space-6);text-align:center;color:var(--text-muted);border:var(--border-hairline) solid var(--border-subtle);background:var(--surface-card)}
.empty-state [data-wo-icon]{width:34px;height:34px;color:var(--text-faint)}
.empty-state h3{font-family:var(--font-display);font-size:var(--h3-size);color:var(--text-heading);margin:0}
.empty-state p{margin:0;font-size:var(--body-s-size)}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .client-page{--client-hero-size:var(--h1-size);--client-hero-sub-size:var(--title-xl-size)}
}
@media (max-width:1024px){
  .client-idea{grid-template-columns:1fr;gap:var(--space-8)}
  .quotation-modal-body{grid-template-columns:1fr}
  .chat-section{min-height:360px}
  .client-suggested-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .client-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
}
@media (max-width:768px){
  .client-page{--client-hero-size:var(--h2-size);--client-hero-sub-size:var(--h3-size)}
  .client-hero{padding:var(--space-8) 0 var(--space-6)}
  .client-activity-grid{grid-template-columns:1fr}
  .client-idea-cards{grid-template-columns:1fr}
  .client-globe-inner{grid-template-columns:1fr;padding-top:var(--space-10);padding-bottom:var(--space-10)}
  .quotation-body{flex-direction:column;align-items:flex-start}
  .quotation-details{gap:var(--space-6)}
  .detail-grid{grid-template-columns:1fr}
  .modal-overlay{padding:var(--space-2)}
  .modal-content{max-height:96vh}
  .client-suggested{padding:var(--space-10) 0 var(--space-8)}
}
@media (max-width:480px){
  .quotation-footer .wo-btn{flex:1;justify-content:center}
  .chat-message{max-width:94%}
  .avatar-upload-container{flex-direction:column;align-items:flex-start}
  .client-suggested-grid{grid-template-columns:1fr}
  .client-footer-inner{grid-template-columns:1fr;gap:var(--space-6)}
  .client-feed-row{gap:var(--space-3)}
}

/* Rediseno 2026: el tab Solicitudes del dashboard es ahora un <a> a
   /client/requests; el generico `.wo-app a` lo pintaria azul. */
a.tab-btn { color: var(--neutral-400); text-decoration: none; }
a.tab-btn:hover { text-decoration: none; }