/* =====================================================================
   Workori / YOYO — Client Portal Polish (override layer)
   ---------------------------------------------------------------------
   Archivo NUEVO. NO TOCA: client.css, base.css, client-mobile.css,
   client.js, index.html. Solo este CSS + el <link> que añadirá
   El Constructor en index.html.

   Foco:
   (1) Arreglar bug del header sticky tapando el botón "Nueva solicitud":
       - .role-section gana padding-top para compensar el .site-header de 71px
       - #clientNewRequestShortcut recibe position:relative + z-index por encima
         del header sticky (z-index 30 → 40 en su scope)
       - scroll-margin-top en anclas del wizard
   (2) Polish visual del panel del cliente:
       - Hero "Mi panel" limpio: saludo + 1 CTA primario "Nueva solicitud"
         (full-width, alto mínimo 96px en tablet) + grid de 3 acciones
         secundarias
       - Asistente wizard con progress segmentado y CTA inferior sticky
       - Tarjetas de trabajo con barra de estado de color a la izquierda
       - Empty states con CTA integrado
   (3) Esencia preservada: paleta --blue/var(--blue), --teal/var(--teal), --ink, --copper,
       --amber. Iconos, HTML, JS intactos.

   Autor: El Artista 🎨 — Diseñador UX/UI Senior — El Equipo
   Fecha: 2026-08-08
   ===================================================================== */

/* =====================================================================
   1. VARIABLES LOCALES (paleta derivada — sin cambiar tokens.css)
   ===================================================================== */

body.role-page {
  /* Acento del cliente (azul primario, derivado de --blue) */
  --cp-blue: var(--blue);
  --cp-blue-light: #1a6ff0;
  --cp-blue-dark: #053fa0;
  --cp-blue-surface: #f3f8ff;
  --cp-blue-soft: rgba(7, 95, 228, 0.08);
  --cp-blue-ring: rgba(7, 95, 228, 0.45);

  /* Acentos secundarios (teal / cobre / ámbar ya en tokens.css) */
  --cp-teal: var(--teal);
  --cp-copper: #c47a4a;
  --cp-amber: #e8a317;

  /* Estados de barra lateral de tarjetas (Insight 2 del brief) */
  --cp-status-active: #1f9d55;   /* verde lima — en curso */
  --cp-status-pending: #e8a317;  /* ámbar — esperando proveedor */
  --cp-status-done: #5b6680;     /* gris — completada */
  --cp-status-issue: #d92b3a;    /* rojo — con problema */

  /* Tipografía */
  --cp-font-display: "Sora", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --cp-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Sombra layered (3 capas, opacidades ≤ 8%) */
  --cp-shadow-sm:
    0 1px 2px rgba(14, 31, 64, 0.04),
    0 4px 8px rgba(14, 31, 64, 0.03);
  --cp-shadow-md:
    0 2px 4px rgba(14, 31, 64, 0.05),
    0 8px 16px rgba(14, 31, 64, 0.06),
    0 14px 28px rgba(7, 95, 228, 0.05);
  --cp-shadow-lg:
    0 2px 6px rgba(14, 31, 64, 0.06),
    0 8px 18px rgba(14, 31, 64, 0.08),
    0 20px 46px rgba(14, 31, 64, 0.07);
  --cp-shadow-primary:
    0 2px 4px rgba(7, 95, 228, 0.15),
    0 8px 16px rgba(7, 95, 228, 0.12),
    0 16px 32px rgba(7, 95, 228, 0.1);
  --cp-shadow-primary-hover:
    0 3px 6px rgba(7, 95, 228, 0.2),
    0 10px 20px rgba(7, 95, 228, 0.16),
    0 20px 38px rgba(7, 95, 228, 0.12);

  /* Radius consistente (Insight 4: radio 12px) */
  --cp-radius-sm: 10px;
  --cp-radius-md: 12px;
  --cp-radius-lg: 14px;
  --cp-radius-xl: 16px;
  --cp-radius-2xl: 20px;
  --cp-radius-pill: 999px;

  /* Transiciones */
  --cp-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cp-transition-fast: 0.18s var(--cp-ease);
  --cp-transition-base: 0.22s var(--cp-ease);
  --cp-transition-slow: 0.28s var(--cp-ease);

  /* Header del sitio mide ~71px (base.css): lo nombramos como variable
     para poder ajustar el padding-top del panel de forma trazable. */
  --cp-header-height: 71px;
  --cp-header-height-tablet: 64px;
}

/* =====================================================================
   2. BUG FIX — HEADER STICKY TAPANDO EL CTA "NUEVA SOLICITUD"
   ---------------------------------------------------------------------
   Causa (verificada con grep en base.css + client.js):
   - .site-header es position: sticky; top: 0; z-index: 30; mide ~71px
   - .role-section tiene padding: 42px 0 64px  →  INSUFICIENTE
     (42 < 71) → el contenido del panel queda debajo del header sticky
   - El botón #clientNewRequestShortcut vive en .client-dashboard-actions,
     justo al inicio del .client-panel-view. Sin espacio compensatorio,
     su top cae dentro del rect del .site-header. Un clic del usuario
     cae en el header (no en el botón) → "el botón no hace nada".

   Solución (override puro, sin tocar HTML/JS):
   1) .role-section gana padding-top: clamp(80px, 12vw, 112px) en vista
      autenticada del cliente. Compensa los 71px del header + un margen
      visual de respiración.
   2) #clientNewRequestShortcut y .client-dashboard-action--primary
      reciben position: relative + z-index: 40 (por encima del header 30).
   3) .client-requests-panel y el ancla del wizard tienen
      scroll-margin-top equivalente.
   ===================================================================== */

/* Vista autenticada (cuando el panel está montado) — header visible */
body.role-page.client-session-active .role-section,
body.role-page:not(.client-auth-gate) .role-section {
  padding-top: clamp(80px, 12vw, 112px);
}

/* El ancla del wizard (#new-request) debe caer debajo del header al scrollear */
.client-wizard-form,
.client-requests-panel,
.client-panel-view {
  scroll-margin-top: calc(var(--cp-header-height) + 16px);
}

/* CTA primario "Nueva solicitud" — por encima del header sticky */
#clientNewRequestShortcut,
.client-dashboard-action--primary,
.client-requests-head .btn,
.client-wizard-actions #clientWizardNext,
.client-wizard-actions #clientSubmitButton {
  position: relative;
  z-index: 5;
}

/* Subir por encima del header (z 30) sin afectar al layout */
#clientNewRequestShortcut {
  z-index: 40;
}

/* FIX BUG "Nueva solicitud" — el header sticky (71px, z 30) tapa el botón
   cuando la SPA navega a #jobs y queda scroll residual. Al adherir la cabecera
   del panel justo debajo del header, el botón queda SIEMPRE visible y clickeable,
   independientemente de la posición de scroll. */
body.role-page.client-session-active .client-requests-head {
  position: sticky;
  top: calc(var(--cp-header-height, 71px) + 8px);
  z-index: 25; /* por debajo del header (30) pero por encima de las tarjetas */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 0 0 12px 12px;
  padding-bottom: 6px;
}
/* El CTA del panel de solicitudes siempre por encima del head sticky interno */
body.role-page.client-session-active .client-requests-head .btn {
  position: relative;
  z-index: 26;
}

/* =====================================================================
   3. FONDO + PROFUNDIDAD — page-level ambient (refinado, sutil)
   ===================================================================== */

body.role-page {
  font-family: var(--cp-font-body);
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(7, 95, 228, 0.05), transparent 55%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 60%, #ffffff 100%);
  background-attachment: fixed;
}

/* El contenedor principal respira por encima del gradiente */
body.role-page .role-main {
  position: relative;
  z-index: 1;
}

/* role-shell: ancho cómodo en tablet, más generoso que los 820px */
body.role-page .role-shell {
  max-width: min(960px, 100% - clamp(24px, 4vw, 48px));
}

/* =====================================================================
   4. TIPOGRAFÍA — display en headings, tracking negativo, line-height 1.5
   ===================================================================== */

body.role-page .role-kicker,
body.role-page h1,
body.role-page h2,
body.role-page h3,
body.role-page .client-wizard-title,
body.role-page .client-dashboard-entry__title,
body.role-page .client-profile-panel__title {
  font-family: var(--cp-font-display);
  letter-spacing: -0.02em;
  color: var(--ink, #08142d);
}

body.role-page h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 750;
  line-height: 1.2;
}

body.role-page h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
}

body.role-page h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 650;
  line-height: 1.3;
}

body.role-page p {
  line-height: 1.55;
}

/* =====================================================================
   5. DASHBOARD "MI PANEL" — Hero limpio + 1 CTA primario + 3 secundarios
   ---------------------------------------------------------------------
   Estructura HTML (verificada en index.html):
     .client-panel-view > .client-dashboard-entry
       > .client-dashboard-entry__head   (título + saludo)
       > .client-dashboard-summary       (3 contadores)
       > .client-dashboard-actions       (4 action cards)
         > #clientNewRequestShortcut     (button — Nueva solicitud)
         > a.client-dashboard-action[href*="messages"]   (Messages)
         > a.client-dashboard-action[href*="payments"]   (Payments)
         > a.client-dashboard-action client-dashboard-action--primary[href*="messages"]
   ===================================================================== */

.client-dashboard-entry {
  display: grid;
  gap: clamp(18px, 2.4vw, 24px);
  padding: 0;
  background: transparent;
}

.client-dashboard-entry__head {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 169, 157, 0.08), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(7, 95, 228, 0.06), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-sm);
}

.client-dashboard-entry__title {
  font-family: var(--cp-font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink, #08142d);
  margin: 0;
}

.client-dashboard-greeting {
  margin: 0;
  font-size: 0.98rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
}

/* --- Resumen (3 contadores) --- */
.client-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 30%, 220px), 1fr));
  gap: 10px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--cp-shadow-sm);
}

.client-dashboard-summary button {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-md);
  background: transparent;
  color: var(--ink, #08142d);
  text-align: left;
  cursor: pointer;
  transition: background var(--cp-transition-fast), border-color var(--cp-transition-fast), transform var(--cp-transition-fast);
}

.client-dashboard-summary button:hover {
  background: var(--cp-blue-soft);
  border-color: rgba(7, 95, 228, 0.18);
}

.client-dashboard-summary button:active {
  transform: scale(0.985);
}

.client-dashboard-summary button:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
}

.client-dashboard-summary strong {
  font-family: var(--cp-font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1;
}

.client-dashboard-summary span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #5b6680);
}

/* --- Acciones: la primaria es "Nueva solicitud" --- */
.client-dashboard-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.6vw, 14px);
}

.client-dashboard-actions {
  grid-auto-rows: min-content;
}

/* En tablet/desktop: 2 columnas (primaria full-width arriba, secundarias
   en grid de 3) — pero mobile-first: por defecto 1 columna. */
@media (min-width: 720px) {
  .client-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .client-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* LA estrella: "Nueva solicitud" — full-width en tablet, alto mínimo 96px */
#clientNewRequestShortcut {
  grid-column: 1 / -1;
  min-height: clamp(96px, 14vh, 128px);
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--cp-blue, var(--blue));
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(135deg, #1a6ff0 0%, var(--blue) 60%, #0868f2 100%);
  color: #ffffff;
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  box-shadow: var(--cp-shadow-primary);
  transition: transform var(--cp-transition-base), box-shadow var(--cp-transition-base), filter var(--cp-transition-base);
  position: relative;
  overflow: hidden;
  /* Halo sutil por encima del gradiente */
  isolation: isolate;
}

#clientNewRequestShortcut::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

#clientNewRequestShortcut > * {
  position: relative;
  z-index: 1;
}

#clientNewRequestShortcut .client-dashboard-action__icon {
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  display: grid;
  place-items: center;
  border-radius: var(--cp-radius-md);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  backdrop-filter: blur(4px);
}

#clientNewRequestShortcut strong {
  display: block;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#clientNewRequestShortcut small {
  display: block;
  margin-top: 4px;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.45;
}

/* Pseudo flecha "→" al final */
#clientNewRequestShortcut::after {
  content: "→";
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-left: auto;
}

#clientNewRequestShortcut:hover {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow-primary-hover);
  filter: brightness(1.04);
}

#clientNewRequestShortcut:active {
  transform: translateY(0);
}

#clientNewRequestShortcut:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 3px;
}

/* Acciones secundarias (Messages, Payments) — más sobrias que el primary */
.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary) {
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-lg);
  background: #ffffff;
  color: var(--ink, #08142d);
  font-family: var(--cp-font-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-shadow: var(--cp-shadow-sm);
  transition: transform var(--cp-transition-fast), border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast), background var(--cp-transition-fast);
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary):hover {
  transform: translateY(-1px);
  border-color: rgba(7, 95, 228, 0.32);
  box-shadow: var(--cp-shadow-md);
  background: var(--cp-blue-surface);
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary):active {
  transform: translateY(0);
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary):focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary) .client-dashboard-action__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--cp-radius-md);
  background: var(--cp-blue-surface);
  color: var(--cp-blue, var(--blue));
  font-size: 1.1rem;
  font-weight: 700;
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary) strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink, #08142d);
  line-height: 1.3;
}

.client-dashboard-action:not(#clientNewRequestShortcut):not(.client-dashboard-action--primary) small {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted, #5b6680);
  line-height: 1.4;
  margin-top: 2px;
}

/* Si en el HTML aparece .client-dashboard-action--primary sobre Messages,
   lo bajamos a "secondary" visualmente — el primary ya está en el CTA
   grande de "Nueva solicitud" (regla de jerarquía del brief Insight 1). */
.client-dashboard-action--primary:not(#clientNewRequestShortcut) {
  background: #ffffff;
  border-color: rgba(220, 230, 244, 0.7);
  color: var(--ink, #08142d);
  box-shadow: var(--cp-shadow-sm);
}

.client-dashboard-action--primary:not(#clientNewRequestShortcut) .client-dashboard-action__icon {
  background: var(--cp-blue-surface);
  color: var(--cp-blue, var(--blue));
}

/* =====================================================================
   6. PROFILE PROMPT BANNER (aside cliente)
   ===================================================================== */

.client-panel-profile-prompt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
  border: 1px solid rgba(232, 163, 23, 0.32);
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(180deg, #fffbeb 0%, #fff7e0 100%);
  box-shadow: var(--cp-shadow-sm);
}

.client-panel-profile-prompt strong {
  display: block;
  font-family: var(--cp-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #7a5b0b;
  margin-bottom: 4px;
}

.client-panel-profile-prompt p {
  margin: 0;
  font-size: 0.9rem;
  color: #7a5b0b;
  line-height: 1.5;
}

.client-panel-profile-prompt .btn {
  white-space: nowrap;
  border-radius: var(--cp-radius-md);
  font-weight: 700;
  min-height: 44px;
}

@media (max-width: 560px) {
  .client-panel-profile-prompt {
    grid-template-columns: 1fr;
  }
  .client-panel-profile-prompt .btn {
    width: 100%;
  }
}

/* =====================================================================
   7. WIZARD "NUEVA SOLICITUD" — progress segmentado + CTA inferior sticky
   ---------------------------------------------------------------------
   Estructura HTML (verificada):
     .client-wizard-form
       .client-wizard-progress
         .client-wizard-progress-track > .client-wizard-progress-fill
         .client-wizard-progress-label
         .client-wizard-flow-note
       section.client-wizard-panel[data-wizard-step]
         .client-wizard-panel-head > .client-wizard-title, .client-wizard-lead
         ...
       .role-form-actions.client-wizard-actions
         #clientWizardBack, #clientWizardNext, #clientSubmitButton
   ===================================================================== */

.client-wizard-form {
  display: grid;
  gap: clamp(18px, 2.4vw, 24px);
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(7, 95, 228, 0.04), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

/* --- Progress bar segmentado --- */
.client-wizard-progress {
  display: grid;
  gap: 10px;
}

.client-wizard-progress-track {
  height: 8px;
  border-radius: var(--cp-radius-pill);
  background: rgba(7, 95, 228, 0.1);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(14, 31, 64, 0.04);
}

.client-wizard-progress-fill {
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue) 0%, #3d8bfd 50%, var(--teal) 100%);
  box-shadow: 0 2px 6px rgba(7, 95, 228, 0.25);
  transition: width 0.4s var(--cp-ease);
}

.client-wizard-progress-label {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #08142d);
  letter-spacing: -0.005em;
}

.client-wizard-progress-label::before {
  content: "●";
  margin-right: 8px;
  color: var(--cp-blue, var(--blue));
}

.client-wizard-flow-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
}

/* --- Wizard panels (steps) --- */
/* Los .client-wizard-panel usan [hidden] (HTML) para ocultar los pasos
   inactivos. Solo animamos y damos estilos al paso visible. */
.client-wizard-panel {
  animation: cpWizardFade 0.32s var(--cp-ease);
}

.client-wizard-panel[hidden] {
  /* Mantener [hidden] funcionando — sin override destructivo */
  animation: none;
}

@keyframes cpWizardFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.client-wizard-panel-head {
  display: grid;
  gap: 6px;
  padding-bottom: clamp(12px, 1.8vw, 16px);
  margin-bottom: clamp(12px, 1.8vw, 16px);
  border-bottom: 1px solid rgba(220, 230, 244, 0.6);
}

.client-wizard-title {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 750;
  letter-spacing: -0.022em;
  color: var(--ink, #08142d);
  line-height: 1.25;
}

.client-wizard-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted, #5b6680);
}

/* --- Acciones del wizard — CTA inferior sticky --- */
.role-form-actions.client-wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: clamp(14px, 1.8vw, 18px) clamp(14px, 1.8vw, 18px);
  margin: clamp(14px, 1.8vw, 18px) calc(clamp(18px, 2.4vw, 24px) * -1) calc(clamp(18px, 2.4vw, 24px) * -1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 24%, #ffffff 100%);
  border-top: 1px solid rgba(220, 230, 244, 0.6);
  border-radius: 0 0 var(--cp-radius-xl) var(--cp-radius-xl);
}

.role-form-actions.client-wizard-actions .btn {
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--cp-radius-md);
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  font-size: 0.98rem;
}

.role-form-actions.client-wizard-actions #clientWizardBack {
  margin-right: auto;
  background: transparent;
  border-color: transparent;
  color: var(--muted, #5b6680);
}

.role-form-actions.client-wizard-actions #clientWizardBack:hover {
  background: var(--cp-blue-soft);
  color: var(--cp-blue, var(--blue));
}

.role-form-actions.client-wizard-actions #clientWizardNext,
.role-form-actions.client-wizard-actions #clientSubmitButton {
  background: linear-gradient(180deg, #1a6ff0 0%, var(--blue) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--cp-shadow-primary);
  flex: 1 1 auto;
  min-width: 180px;
}

.role-form-actions.client-wizard-actions #clientWizardNext:hover,
.role-form-actions.client-wizard-actions #clientSubmitButton:hover {
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-primary-hover);
  filter: brightness(1.04);
}

.role-form-actions.client-wizard-actions .btn:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .role-form-actions.client-wizard-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .role-form-actions.client-wizard-actions #clientWizardBack {
    margin-right: 0;
  }
  .role-form-actions.client-wizard-actions #clientWizardNext,
  .role-form-actions.client-wizard-actions #clientSubmitButton {
    width: 100%;
    min-width: 0;
  }
}

/* =====================================================================
   8. SERVICE TILES (selector service-thumb--tile ya existe)
   ===================================================================== */

.service-thumb--tile {
  box-shadow: 0 8px 20px rgba(0, 169, 157, 0.18), var(--cp-shadow-sm);
  transition: transform var(--cp-transition-base), box-shadow var(--cp-transition-base);
}

.service-thumb--tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 169, 157, 0.24), var(--cp-shadow-md);
}

.service-thumb--tile:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 3px;
  border-radius: var(--cp-radius-md);
}

.client-service-field {
  display: grid;
  gap: clamp(10px, 1.5vw, 14px);
}

.client-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 28%, 168px), 1fr));
  gap: clamp(10px, 1.6vw, 14px);
}

/* =====================================================================
   9. REQUESTS PANEL (Tus solicitudes)
   ===================================================================== */

.client-requests-panel {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

.client-requests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 18px);
  flex-wrap: wrap;
  padding-bottom: clamp(12px, 1.6vw, 16px);
  border-bottom: 1px solid rgba(220, 230, 244, 0.6);
}

.client-requests-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.client-requests-head .role-kicker {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cp-blue, var(--blue));
}

.client-requests-head h2 {
  margin: 0;
  font-family: var(--cp-font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink, #08142d);
  line-height: 1.25;
}

.client-requests-head .btn {
  border-radius: var(--cp-radius-md);
  font-weight: 700;
  min-height: 44px;
  padding: 0 18px;
  background: var(--cp-blue-surface);
  color: var(--cp-blue, var(--blue));
  border-color: rgba(7, 95, 228, 0.28);
  position: relative;
  z-index: 5;
  /* Garantiza que el clic llega aunque haya un sticky encima */
  pointer-events: auto;
}

.client-requests-head .btn:hover {
  background: var(--cp-blue, var(--blue));
  color: #ffffff;
  border-color: var(--cp-blue, var(--blue));
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md);
}

.client-requests-head .btn:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
}

/* --- Filtros (pills) --- */
.client-request-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border-radius: var(--cp-radius-pill);
  background: rgba(220, 230, 244, 0.35);
}

.client-request-filter {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-pill);
  background: transparent;
  color: var(--muted, #5b6680);
  font-family: var(--cp-font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast), border-color var(--cp-transition-fast), transform var(--cp-transition-fast);
}

.client-request-filter:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink, #08142d);
}

.client-request-filter.active {
  background: #ffffff;
  color: var(--cp-blue, var(--blue));
  border-color: rgba(7, 95, 228, 0.28);
  box-shadow: var(--cp-shadow-sm);
}

.client-request-filter:focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
}

/* --- Lista de requests --- */
.client-request-list {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
}

/* Tarjeta de request con barra de estado de color lateral (Insight 2) */
.client-request-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(14px, 2vw, 18px);
  padding-left: clamp(20px, 2.4vw, 26px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-lg);
  background: #ffffff;
  box-shadow: var(--cp-shadow-sm);
  overflow: hidden;
  transition: transform var(--cp-transition-fast), border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}

.client-request-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cp-status-active);
  border-radius: 4px 0 0 4px;
}

.client-request-card[data-status="completed"]::before,
.client-request-card.is-completed::before { background: var(--cp-status-done); }
.client-request-card[data-status="pending"]::before,
.client-request-card.is-pending::before { background: var(--cp-status-pending); }
.client-request-card[data-status="issue"]::before,
.client-request-card.is-issue::before,
.client-request-card[data-status="rejected"]::before { background: var(--cp-status-issue); }
.client-request-card[data-status="paid"]::before,
.client-request-card.is-paid::before { background: var(--cp-teal, var(--teal)); }

/* Barra de estado lateral viva — deriva del stage actual del wizard (puro CSS,
   sin tocar JS). messages.js marca li.is-current en la barra de progreso
   (índice fijo 1..4 = verification/assigned/progress/completed). :has() hace
   que la barra de la tarjeta refleje el estado real. */
.client-request-card:has(.client-work-stage-list li.is-current:nth-of-type(1))::before { background: var(--cp-status-pending); } /* verification — esperando */
.client-request-card:has(.client-work-stage-list li.is-current:nth-of-type(2))::before,
.client-request-card:has(.client-work-stage-list li.is-current:nth-of-type(3))::before { background: var(--cp-status-active); } /* assigned/progress — en curso */
.client-request-card:has(.client-work-stage-list li.is-current:nth-of-type(4))::before { background: var(--cp-status-done); } /* completed */

.client-request-card:hover {
  transform: translateY(-1px);
  border-color: rgba(7, 95, 228, 0.22);
  box-shadow: var(--cp-shadow-md);
}

.client-request-card:focus-within {
  border-color: var(--cp-blue, var(--blue));
  box-shadow: 0 0 0 3px var(--cp-blue-soft), var(--cp-shadow-md);
}

/* Empty state */
.client-request-list:empty + .messages-empty,
#clientRequestEmpty {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.4vw, 24px);
  max-width: 480px;
  border: 1.5px dashed rgba(7, 95, 228, 0.22);
  border-radius: var(--cp-radius-xl);
  background: var(--cp-blue-surface);
  text-align: center;
}

#clientRequestEmpty {
  font-family: var(--cp-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
}

/* CTA del empty state: visible solo cuando el mensaje vacío está activo.
   messages.js usa textContent sobre #clientRequestEmpty (borraría un botón
   interno), así que el CTA va como hermano siguiente y se revela por CSS. */
.client-request-list:empty + .messages-empty:not([hidden]) + .client-request-empty-cta,
#clientRequestEmpty:not([hidden]) + .client-request-empty-cta {
  display: inline-flex !important;
  margin: 0 auto clamp(22px, 3vw, 32px);
  align-items: center;
  gap: 8px;
  max-width: 320px;
}
.client-request-empty-cta {
  justify-content: center;
  min-height: 48px;
  font-weight: 600;
}
.client-request-empty-cta::before {
  content: "+";
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* =====================================================================
   10. AUTH PANEL — bienvenida refinada
   ===================================================================== */

.client-auth-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  margin: 0 auto clamp(18px, 2.4vw, 24px);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(178, 203, 242, 0.72);
  border-radius: var(--cp-radius-2xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 169, 157, 0.11), transparent 44%),
    radial-gradient(circle at 100% 0%, rgba(7, 95, 228, 0.08), transparent 38%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 58%, #fffdf9 100%);
  box-shadow: var(--cp-shadow-md);
}

.client-auth-title {
  font-family: var(--cp-font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--ink, #08142d);
  line-height: 1.2;
  margin: 0;
}

.client-auth-subtitle {
  font-size: 0.95rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
  margin: 0;
}

.client-auth-fields {
  display: grid;
  gap: 12px;
}

.client-auth-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(220, 230, 244, 0.85);
  border-radius: var(--cp-radius-md);
  background: #ffffff;
  font-family: var(--cp-font-body);
  font-size: 1rem;
  transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}

.client-auth-field input:focus-visible {
  outline: none;
  border-color: var(--cp-blue, var(--blue));
  box-shadow: 0 0 0 3px var(--cp-blue-soft);
}

.client-auth-tab {
  border-radius: var(--cp-radius-pill);
  font-weight: 700;
  min-height: 44px;
  padding: 0 18px;
}

.client-auth-tab.is-active {
  background: var(--cp-blue, var(--blue));
  color: #ffffff;
  border-color: var(--cp-blue, var(--blue));
}

.client-auth-google {
  border-radius: var(--cp-radius-md);
  min-height: 52px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.client-auth-google .google-mark {
  background: linear-gradient(135deg, #4285f4, #34a853);
  color: #ffffff;
}

/* =====================================================================
   11. PHOTO DROPZONE — más inviting, focus claro
   ===================================================================== */

.client-photo-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: clamp(22px, 3vw, 32px);
  border: 2px dashed rgba(7, 95, 228, 0.32);
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(180deg, rgba(7, 95, 228, 0.04) 0%, rgba(7, 95, 228, 0.02) 100%);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--cp-transition-base), background var(--cp-transition-base), transform var(--cp-transition-base), box-shadow var(--cp-transition-base);
}

.client-photo-dropzone:hover {
  border-color: var(--cp-blue, var(--blue));
  background: rgba(7, 95, 228, 0.06);
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-sm);
}

.client-photo-dropzone:focus-visible {
  outline: none;
  border-color: var(--cp-blue, var(--blue));
  box-shadow: 0 0 0 3px var(--cp-blue-soft);
}

.client-photo-dropzone-title {
  font-family: var(--cp-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #08142d);
}

.client-photo-dropzone-hint {
  font-size: 0.88rem;
  color: var(--muted, #5b6680);
}

.client-photo-dropzone-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--cp-radius-md);
  background: var(--cp-blue-surface);
  color: var(--cp-blue, var(--blue));
  font-size: 1.6rem;
  font-weight: 700;
}

/* Estado de error del dropzone */
.client-photo-dropzone.is-error,
.client-photo-dropzone[data-error="true"] {
  border-color: var(--cp-status-issue);
  background: rgba(217, 43, 58, 0.04);
}

/* =====================================================================
   12. CLARIFICATION PANEL — bloque con borde teal (ya existe, refinado)
   ===================================================================== */

.client-clarification-panel {
  margin-bottom: 20px;
  padding: clamp(14px, 2vw, 18px);
  border-left: 4px solid var(--cp-teal, var(--teal));
  border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0;
  background: rgba(0, 169, 157, 0.05);
}

.client-clarification-panel__head {
  font-family: var(--cp-font-display);
  font-weight: 700;
  color: var(--cp-teal, var(--teal));
}

.client-clarification-list {
  display: grid;
  gap: 10px;
}

/* =====================================================================
   13. INTAKE PANEL + ESTIMATE CARD + ADDRESS CARD
   ===================================================================== */

.client-intake-panel {
  margin-top: clamp(14px, 2vw, 20px);
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-sm);
}

.client-intake-kicker {
  font-family: var(--cp-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cp-blue, var(--blue));
  margin: 0 0 6px;
}

.client-estimate-card {
  margin: clamp(14px, 2vw, 18px) 0 0;
  padding: clamp(16px, 2.2vw, 20px);
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(135deg, rgba(7, 95, 228, 0.06) 0%, rgba(0, 169, 157, 0.05) 100%);
  border: 1px solid rgba(7, 95, 228, 0.18);
}

.client-estimate-kicker {
  font-family: var(--cp-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cp-blue, var(--blue));
  margin: 0 0 8px;
}

.client-request-address__card {
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-lg);
  background: #ffffff;
  box-shadow: var(--cp-shadow-sm);
}

.client-request-address__line {
  font-family: var(--cp-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #08142d);
}

/* =====================================================================
   14. ACTIVE WORK + REVIEW PANELS (subtle refinement)
   ===================================================================== */

.client-active-work-panel {
  width: 100%;
  margin: 0 auto clamp(14px, 2vw, 20px);
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid rgba(178, 203, 242, 0.72);
  border-radius: var(--cp-radius-xl);
  background: #ffffff;
  box-shadow: var(--cp-shadow-md);
}

.client-active-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.client-active-work-card {
  min-width: 0;
}

/* =====================================================================
   15. PROFILE PANEL — refinado
   ===================================================================== */

.client-profile-panel {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

.client-profile-panel__title {
  font-family: var(--cp-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.022em;
  color: var(--ink, #08142d);
  margin: 0;
}

.client-profile-panel__lead {
  font-size: 0.95rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
  margin: 6px 0 0;
}

.client-profile-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--cp-radius-pill);
  background: rgba(0, 169, 157, 0.12);
  color: var(--cp-teal, var(--teal));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.client-profile-form input,
.client-profile-form textarea,
.client-profile-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(220, 230, 244, 0.85);
  border-radius: var(--cp-radius-md);
  background: #ffffff;
  font-family: var(--cp-font-body);
  font-size: 1rem;
  transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}

.client-profile-form textarea {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
}

.client-profile-form input:focus-visible,
.client-profile-form textarea:focus-visible,
.client-profile-form select:focus-visible {
  outline: none;
  border-color: var(--cp-blue, var(--blue));
  box-shadow: 0 0 0 3px var(--cp-blue-soft);
}

/* =====================================================================
   16. TOAST (Insight 4: toasts efímeros)
   ===================================================================== */

body.role-page .toast {
  border-radius: var(--cp-radius-md);
  background: linear-gradient(135deg, #0f1f3d 0%, #08142d 100%);
  box-shadow: var(--cp-shadow-lg);
  font-family: var(--cp-font-body);
  font-weight: 600;
  color: #ffffff;
}

/* =====================================================================
   17. STATUS BADGES — refinado (radius pill, peso 700)
   ===================================================================== */

body.role-page .status-badge {
  border-radius: var(--cp-radius-pill);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* =====================================================================
   18. CONFIRMATION VIEW — resumen en tarjetas apiladas (Insight 3)
   ===================================================================== */

.role-confirmation {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 169, 157, 0.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

.role-confirmation .role-kicker {
  font-family: var(--cp-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cp-teal, var(--teal));
}

.role-confirmation h2 {
  font-family: var(--cp-font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 750;
  letter-spacing: -0.022em;
  color: var(--ink, #08142d);
  margin: 0;
}

.role-reference {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--cp-radius-md);
  background: var(--cp-blue-surface);
  color: var(--cp-blue, var(--blue));
  font-family: var(--cp-font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.role-reference strong {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   19. PAYMENTS LIST + PAYMENTS SHELL
   ===================================================================== */

.client-payments-shell {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

.client-payments-list {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
}

.client-payments-notice {
  padding: clamp(12px, 1.8vw, 16px);
  border-radius: var(--cp-radius-md);
  background: rgba(232, 163, 23, 0.08);
  border: 1px solid rgba(232, 163, 23, 0.22);
  color: #7a5b0b;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =====================================================================
   20. POLICY NOTICE + TRIAGE NOTICE — bloques de info
   ===================================================================== */

.client-policy-notice,
.client-triage-notice {
  padding: clamp(12px, 1.8vw, 16px);
  border-radius: var(--cp-radius-md);
  background: var(--cp-blue-surface);
  border: 1px solid rgba(7, 95, 228, 0.18);
  color: var(--cp-blue-dark, #053fa0);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =====================================================================
   21. FORM ERROR + FIELD HINT
   ===================================================================== */

body.role-page .form-error {
  border-radius: var(--cp-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 14px;
  background: rgba(217, 43, 58, 0.06);
  border: 1px solid rgba(217, 43, 58, 0.22);
  color: var(--cp-status-issue);
}

body.role-page .field-hint {
  font-size: 0.88rem;
  color: var(--muted, #5b6680);
  line-height: 1.5;
}

body.role-page .field-required::after {
  color: var(--cp-status-issue);
}

/* =====================================================================
   22. REVIEW PANEL — feedback de cliente
   ===================================================================== */

.client-review-panel {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: var(--cp-shadow-md);
}

.client-review-list {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
}

/* =====================================================================
   23. CLIENT HEADER DROPDOWN (profile menu)
   ===================================================================== */

.client-header-dropdown {
  border-radius: var(--cp-radius-lg);
  background: #ffffff;
  box-shadow: var(--cp-shadow-lg);
  border: 1px solid rgba(220, 230, 244, 0.7);
}

.client-header-dropdown__item {
  border-radius: var(--cp-radius-sm);
  font-weight: 600;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}

.client-header-dropdown__item:hover {
  background: var(--cp-blue-soft);
  color: var(--cp-blue, var(--blue));
}

/* =====================================================================
   24. CLIENT DEMO BANNER + DEMO ENTRY
   ===================================================================== */

.client-demo-banner,
.client-demo-entry {
  padding: clamp(12px, 1.8vw, 16px);
  border-radius: var(--cp-radius-md);
  background: linear-gradient(135deg, rgba(7, 95, 228, 0.06), rgba(0, 169, 157, 0.05));
  border: 1px solid rgba(7, 95, 228, 0.18);
}

/* =====================================================================
   25. AI CONSENT (banner de consentimiento AI)
   ===================================================================== */

.client-ai-consent {
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--cp-radius-md);
  background: rgba(196, 122, 74, 0.06);
  border: 1px solid rgba(196, 122, 74, 0.22);
  color: #6b3d1c;
  font-size: 0.9rem;
  line-height: 1.5;
}

.client-ai-consent__link {
  color: var(--cp-blue, var(--blue));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* =====================================================================
   26. COMMUNICATION PREFERENCES + CONFIRM PROFILE PROMPT
   ===================================================================== */

.client-communication-preferences,
.client-confirm-profile-prompt {
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--cp-radius-md);
  background: var(--cp-blue-surface);
  border: 1px solid rgba(7, 95, 228, 0.18);
  font-size: 0.92rem;
  line-height: 1.5;
}

.client-confirm-profile-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* =====================================================================
   27. RESPONSIVE — TABLET (Lenovo TB336FU)
   ===================================================================== */

@media (min-width: 768px) {
  /* Radio del header compensatorio menor en tablet (header compacto) */
  body.role-page.client-session-active .role-section,
  body.role-page:not(.client-auth-gate) .role-section {
    padding-top: clamp(72px, 10vw, 96px);
  }
}

/* =====================================================================
   28. RESPONSIVE — MOBILE
   ===================================================================== */

@media (max-width: 720px) {
  body.role-page.client-session-active .role-section,
  body.role-page:not(.client-auth-gate) .role-section {
    padding-top: clamp(72px, 14vw, 92px);
  }

  .client-dashboard-entry__head {
    padding: 16px;
  }

  .client-dashboard-actions {
    grid-template-columns: 1fr;
  }

  #clientNewRequestShortcut {
    grid-column: 1;
    grid-template-columns: auto 1fr;
    padding: 16px 18px;
    min-height: 88px;
  }

  #clientNewRequestShortcut::after {
    grid-column: 2;
    justify-self: end;
    font-size: 1.4rem;
  }

  .client-requests-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-requests-head .btn {
    width: 100%;
  }

  .client-wizard-form {
    padding: 16px;
  }

  .client-request-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body.role-page.client-session-active .role-section,
  body.role-page:not(.client-auth-gate) .role-section {
    padding-top: clamp(64px, 16vw, 80px);
  }

  .client-dashboard-entry__head {
    padding: 14px;
    border-radius: var(--cp-radius-md);
  }

  .client-requests-panel,
  .client-auth-panel,
  .client-wizard-form,
  .client-active-work-panel,
  .client-profile-panel,
  .client-payments-shell,
  .client-review-panel {
    border-radius: var(--cp-radius-lg);
    padding: 16px;
  }

  .role-form-actions.client-wizard-actions {
    padding: 12px;
    margin: 12px -16px -16px;
  }

  #clientNewRequestShortcut {
    min-height: 80px;
    padding: 14px 16px;
    border-radius: var(--cp-radius-lg);
  }

  .client-wizard-progress-label {
    font-size: 0.84rem;
  }
}

/* =====================================================================
   29. PREFERS-REDUCED-MOTION — Insight 4: solo fade 150ms
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.15s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }

  .client-wizard-panel {
    animation: cpWizardFade 0.15s var(--cp-ease);
  }

  #clientNewRequestShortcut,
  .client-dashboard-action,
  .client-request-card,
  .client-photo-dropzone {
    transition: opacity 0.15s ease;
  }
}

/* =====================================================================
   30. FOCUS RING GLOBAL (accesibilidad)
   ===================================================================== */

body.role-page :focus-visible {
  outline: 2.5px solid var(--cp-blue-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

body.role-page button:focus-visible,
body.role-page a:focus-visible {
  outline-offset: 3px;
}

/* =====================================================================
   31. UTILIDADES — sin display:none destructivo (solo ajustes legítimos)
   ===================================================================== */

/* ---------------------------------------------------------------------
   STEPPER `.flow-steps--client-wizard` — progreso (no botones) + click.
   Override del aspecto "botón" de base.css. Nodos circulares conectados
   por una línea que se rellena al completar cada paso. Estados:
     .active  = paso actual (nodo azul relleno + halo)
     .complete= paso cumplido (nodo verde con check + línea verde)
     .flow-step-locked   = paso NO alcanzado (gris, cursor not-allowed)
     .flow-step-reachable= paso alcanzado y clickeable (hover azul)
   La lógica JS (syncFlowStepReach) marca locked/reachable según el paso
   máximo alcanzado; el click handler valida antes de saltar adelante.
   --------------------------------------------------------------------- */
.flow-steps.flow-steps--client-wizard {
  --cp-step-node: 30px; /* diámetro del nodo — compartido con ::before y ::after */
  display: flex;
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  position: relative;
}

.flow-steps--client-wizard li {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--muted, #5b6680);
  cursor: pointer;
  transition: color 0.3s var(--cp-ease);
  /* SIN z-index aquí: un z-index crearía un stacking context por li y el li
     siguiente (fondo opaco, mismo orden de apilamiento) taparía la línea
     conectora que sobresale hacia él. Sin z-index, el ::after de la línea
     (z-index:1) pinta sobre el fondo de los li hermanos en el contexto del ol. */
}

/* Nodo circular (número del paso) */
.flow-steps--client-wizard li::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: var(--cp-step-node, 30px);
  height: var(--cp-step-node, 30px);
  border-radius: 50%;
  border: 2px solid rgba(91, 102, 128, 0.35);
  background: #ffffff;
  color: var(--muted, #5b6680);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  position: relative;
  z-index: 2;
  transition: all 0.3s var(--cp-ease);
}

/* Línea conectora entre nodos (se rellena al completar) */
.flow-steps--client-wizard li::after {
  content: "";
  position: absolute;
  top: calc(var(--cp-step-node, 30px) / 2 - 1px); /* centro del nodo */
  left: calc(50% + var(--cp-step-node, 30px) / 2 - 12px); /* arranca 12px bajo el borde del círculo previo (lo cubre el círculo z2) */
  width: calc(100% - var(--cp-step-node, 30px) + 24px); /* +24px para que se meta 12px bajo el círculo siguiente */
  height: 3px;
  background: rgba(91, 102, 128, 0.35);
  z-index: 1;
  transition: background 0.4s var(--cp-ease);
}
/* Sin conector tras el último nodo (anulado explícitamente) */
.flow-steps--client-wizard li:last-child::after { content: none; display: none; }

/* --- Paso actual --- */
.flow-steps--client-wizard li.active {
  color: var(--cp-blue, var(--blue));
}
.flow-steps--client-wizard li.active::before {
  border-color: var(--cp-blue, var(--blue));
  background: var(--cp-blue, var(--blue));
  color: #ffffff;
  /* SIN box-shadow difuso: el halo (0 0 0 4px) y el glow (0 2px 8px) se pintan
     sobre la línea conectora (z-index 1 < 2) y crean una "capa" visible que
     rodea al número azul y parece cortar/flotar sobre la línea. El azul sólido
     + número blanco ya destacan el paso; quitar el shadow deja la línea conectar
     limpio bajo el nodo. */
  box-shadow: none;
}
.flow-steps--client-wizard li.active::after {
  background: linear-gradient(90deg, var(--teal) 0%, var(--cp-blue, var(--blue)) 100%);
}

/* --- Paso completado --- */
.flow-steps--client-wizard li.complete {
  color: var(--ink, #08142d);
}
.flow-steps--client-wizard li.complete::before {
  content: "✓";
  border-color: var(--teal);
  background: var(--teal);
  color: #ffffff;
}
.flow-steps--client-wizard li.complete::after {
  background: var(--teal);
}

/* --- Paso bloqueado (no alcanzado): NO clickeable --- */
.flow-steps--client-wizard li.flow-step-locked {
  color: #b6bfd0;
  cursor: not-allowed;
  opacity: 0.72;
}
.flow-steps--client-wizard li.flow-step-locked::before {
  border-color: #e2e8f2;
  background: #f4f7fc;
  color: #b6bfd0;
  box-shadow: none;
}

/* --- Paso alcanzable y clickeable: hover azul --- */
.flow-steps--client-wizard li.flow-step-reachable:not(.active):not(.complete):hover,
.flow-steps--client-wizard li.flow-step-reachable:not(.active):not(.complete):focus-visible {
  color: var(--cp-blue, var(--blue));
}
.flow-steps--client-wizard li.flow-step-reachable:not(.active):not(.complete):hover::before,
.flow-steps--client-wizard li.flow-step-reachable:not(.active):not(.complete):focus-visible::before {
  border-color: var(--cp-blue, var(--blue));
  color: var(--cp-blue, var(--blue));
}

/* En pantallas angostas se mantiene horizontal con nodos más chicos y
   labels reducidos (override del flex-direction:column de base.css). */
@media (max-width: 720px) {
  .flow-steps.flow-steps--client-wizard {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .flow-steps--client-wizard li {
    flex: 1 0 auto;
    font-size: 0.62rem;
  }
  .flow-steps--client-wizard li::before {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
  .flow-steps--client-wizard li::after { top: 12px; }
}


/* El header del sitio en este panel NO debe tener un z-index que tape
   el primer row del panel autenticado. El fix principal es el padding-top
   de .role-section en la sección 2, pero por defensa adicional bajamos
   ligeramente la opacidad del backdrop del header cuando estamos en
   vistas con CTA inferior (wizard), para que el CTA inferior "respire". */
body.role-page.client-show-request-form .site-header {
  background: rgba(255, 255, 255, 0.86);
}

/* Cuando el wizard está abierto, el header sigue siendo accesible
   pero el foco de acción está en el CTA inferior. Reducimos ligeramente
   el contraste del header para reforzar la jerarquía. */
body.role-page.client-show-request-form {
  scroll-padding-top: calc(var(--cp-header-height) + 16px);
}

/* =====================================================================
   INDICADOR DE PROGRESO — SOLO UNO (2026-08-09).
   Decisión del usuario: "o la de arriba o la de abajo, no las dos".
   Nos quedamos con el STEPPER (arriba): muestra los 5 pasos, es el
   indicador principal y sticky bajo el header (71px). Se ELIMINA la
   barra de progreso de abajo (.client-wizard-progress) por redundante.
   Todos los ancestors del stepper tienen overflow:visible (verificado
   por CDP), por lo que position:sticky funciona.
   --------------------------------------------------------------------- */
.flow-steps.flow-steps--client-wizard {
  position: sticky;
  top: calc(var(--cp-header-height, 71px) + 8px);
  z-index: 20;
  padding: 8px 12px 10px;
  margin: 0 0 4px;
  border-radius: var(--cp-radius-xl, 16px);
  background: rgba(250, 252, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(14, 31, 64, 0.10);
}

/* Barra de progreso inferior ELIMINADA (redundante con el stepper) */
.client-wizard-progress {
  display: none;
}

/* =====================================================================
   WIZARD COMO DIAPOSITIVAS (2026-08-09).
   Decisión del usuario: cada paso aparece como una diapositiva al elegir
   la opción, en vez de un desplazamiento continuo. El wizard YA muestra
   un solo panel a la vez (display:none en el resto); el problema era que
   la página se inflaba a ~3110px porque #clientAuthPanel y #clientRoleIntro
   quedaban visibles junto al form. Ocultamos ese contenido residual y
   dejamos que cada paso ocupe su propio espacio como una slide limpia.
   --------------------------------------------------------------------- */
body.client-show-request-form #clientRoleIntro,
body.client-show-request-form #clientAuthPanel {
  display: none !important;
}

/* Form = contenedor de diapositivas: cada panel es una slide */
body.client-show-request-form .client-wizard-form {
  gap: clamp(14px, 2vw, 20px);
}

/* Tarjeta flotante centrada (sin fondo oscuro): ancho cómodo y centrado */
body.client-show-request-form .client-wizard-form {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
body.client-show-request-form .client-wizard-progress,
body.client-show-request-form .flow-steps--client-wizard {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Slide: el panel activo se ve a ancho completo; el inactivo queda oculto */
body.client-show-request-form .client-wizard-panel[data-wizard-step] {
  width: 100%;
}
body.client-show-request-form .client-wizard-panel:not(.is-active):not([hidden]) {
  display: none;
}

/* =====================================================================
   WIZARD MODERNO — capa premium (2026-08-09).
   Diseño de El Artista (El Equipo), corregido a los selectores reales del
   proyecto. Eleva el wizard a tarjeta premium: fondo con gradiente radial
   sutil, sombra multicapa, títulos con más aire, micro-interacción de
   entrada por diapositiva, stepper con gradiente azul→teal, botones con
   sombra y campos con focus-ring. NO reescribe la base; todo se suma.
   --------------------------------------------------------------------- */

/* --- Tarjeta premium: profundidad + gradiente sutil --- */
body.client-show-request-form .client-wizard-form {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(7, 95, 228, 0.045), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0, 169, 157, 0.035), transparent 50%),
    #ffffff;
  border: 1px solid rgba(220, 230, 244, 0.7);
  border-radius: var(--cp-radius-2xl, 16px);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.05),
    0 8px 24px rgba(14, 31, 64, 0.07),
    0 24px 60px rgba(7, 95, 228, 0.06);
}

/* El stepper y la barra comparten el ancho de la tarjeta */
body.client-show-request-form .flow-steps--client-wizard {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Títulos: más jerarquía y aire --- */
body.client-show-request-form .client-wizard-panel-head {
  border-bottom-color: rgba(220, 230, 244, 0.7);
  padding-bottom: clamp(14px, 2vw, 18px);
  margin-bottom: clamp(14px, 2vw, 18px);
}
body.client-show-request-form .client-wizard-title {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.028em;
}
body.client-show-request-form .client-wizard-lead {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: #5b6680;
}

/* --- Micro-interacción por diapositiva: entrada suave --- */
body.client-show-request-form .client-wizard-panel[data-wizard-step] {
  animation: cpWizardPremiumIn 0.34s var(--cp-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}
@keyframes cpWizardPremiumIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
body.client-show-request-form .client-wizard-panel[hidden] {
  animation: none;
}

/* --- Stepper: nodo activo con gradiente azul→teal (sin halo sobre la línea); completo teal --- */
body.client-show-request-form .flow-steps--client-wizard li.active::before {
  background: linear-gradient(135deg, var(--cp-blue, var(--blue)) 0%, var(--cp-teal, var(--teal)) 100%);
  border-color: transparent;
  color: #ffffff;
  /* SIN box-shadow: el halo (0 0 0 4px) + glow (0 4px 12px) se pintan sobre la
     línea conectora (z-index 1 < 2) y crean la "capa" que rodea al número azul
     y parece cortar la línea. Gradiente + número blanco ya destacan el paso. */
  box-shadow: none;
}
body.client-show-request-form .flow-steps--client-wizard li.complete::before {
  background: linear-gradient(135deg, var(--cp-teal-light, #14b8a8) 0%, var(--cp-teal, var(--teal)) 100%);
  border-color: transparent;
  color: #ffffff;
  /* Sin glow para que la línea teal del paso completo conecte limpio. */
  box-shadow: none;
}
/* Accesibilidad de teclado: foco visible también sobre el paso activo/completo
   (la base solo lo cubre para pasos reachable no-activos/no-completos). */
body.client-show-request-form .flow-steps--client-wizard li.active:focus-visible::before,
body.client-show-request-form .flow-steps--client-wizard li.complete:focus-visible::before {
  outline: 3px solid rgba(7, 95, 228, 0.55);
  outline-offset: 3px;
}

/* --- Campos: focus-ring azul, radius cómodo --- */
body.client-show-request-form .client-wizard-form input[type="text"],
body.client-show-request-form .client-wizard-form input[type="email"],
body.client-show-request-form .client-wizard-form input[type="tel"],
body.client-show-request-form .client-wizard-form input[type="date"],
body.client-show-request-form .client-wizard-form select,
body.client-show-request-form .client-wizard-form textarea {
  border-radius: 12px;
  border-color: #cfdae9;
  background: #ffffff;
  transition: border-color 0.2s var(--cp-ease), box-shadow 0.2s var(--cp-ease), background 0.2s var(--cp-ease);
}
body.client-show-request-form .client-wizard-form input[type="text"]:focus,
body.client-show-request-form .client-wizard-form input[type="email"]:focus,
body.client-show-request-form .client-wizard-form input[type="tel"]:focus,
body.client-show-request-form .client-wizard-form input[type="date"]:focus,
body.client-show-request-form .client-wizard-form select:focus,
body.client-show-request-form .client-wizard-form textarea:focus {
  outline: none;
  border-color: var(--cp-blue, var(--blue));
  box-shadow: 0 0 0 3px rgba(7, 95, 228, 0.14), 0 2px 10px rgba(7, 95, 228, 0.08);
  background: #ffffff;
}

/* --- Botones de navegación --- */
body.client-show-request-form .client-wizard-actions #clientWizardNext,
body.client-show-request-form .client-wizard-actions #clientSubmitButton {
  background: linear-gradient(135deg, var(--cp-blue-light, #1a6ff0) 0%, var(--cp-blue, var(--blue)) 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(7, 95, 228, 0.28);
  transition: transform 0.18s var(--cp-ease), box-shadow 0.18s var(--cp-ease), filter 0.18s var(--cp-ease);
}
body.client-show-request-form .client-wizard-actions #clientWizardNext:hover,
body.client-show-request-form .client-wizard-actions #clientSubmitButton:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(7, 95, 228, 0.34);
  transform: translateY(-1px);
}
body.client-show-request-form .client-wizard-actions #clientWizardNext:active,
body.client-show-request-form .client-wizard-actions #clientSubmitButton:active {
  transform: translateY(0) scale(0.98);
}
body.client-show-request-form .client-wizard-actions #clientWizardBack {
  background: #ffffff;
  border: 1px solid #cfdae9;
  color: var(--cp-blue-dark, #053fa0);
  box-shadow: 0 1px 3px rgba(14, 31, 64, 0.06);
  transition: background 0.18s var(--cp-ease), border-color 0.18s var(--cp-ease);
}
body.client-show-request-form .client-wizard-actions #clientWizardBack:hover {
  background: #eef4ff;
  border-color: #b9cdf2;
}

/* --- Dropzone de fotos: más pulido --- */
body.client-show-request-form .client-photo-dropzone {
  border-radius: 16px;
  border-color: rgba(7, 95, 228, 0.4);
  background: linear-gradient(180deg, rgba(7, 95, 228, 0.05), rgba(7, 95, 228, 0.02));
}
body.client-show-request-form .client-photo-dropzone:hover {
  border-color: var(--cp-teal, var(--teal));
  background: linear-gradient(180deg, rgba(0, 169, 157, 0.07), rgba(7, 95, 228, 0.03));
}
body.client-show-request-form .client-photo-dropzone-icon {
  color: var(--cp-blue, var(--blue));
}

/* --- Móvil: la tarjeta respira sin padding excesivo --- */
@media (max-width: 768px) {
  body.client-show-request-form .client-wizard-form {
    padding: clamp(14px, 4vw, 20px);
    border-radius: var(--cp-radius-xl, 14px);
  }
  body.client-show-request-form .client-wizard-title {
    font-size: clamp(1.2rem, 4.5vw, 1.45rem);
  }
  body.client-show-request-form .client-wizard-actions .btn {
    min-height: 50px;
  }
}

/* --- Reduced motion: sin animaciones, sin transform --- */
@media (prefers-reduced-motion: reduce) {
  body.client-show-request-form .client-wizard-panel[data-wizard-step] {
    animation: none;
  }
  body.client-show-request-form .client-wizard-actions #clientWizardNext:hover,
  body.client-show-request-form .client-wizard-actions #clientSubmitButton:hover {
    transform: none;
  }
}

/* =====================================================================
   FIN — client-polish.css
   ===================================================================== */

/* =====================================================================
   14. ACCESIBILIDAD — respetar prefers-reduced-motion
   --------------------------------------------------------------------- */
/* (Sección eliminada: era un @media prefers-reduced-motion duplicado al
   final que anulaba por cascada el bloque de la Sección 29, que preserva
   intencionalmente el fade cpWizardFade 0.15s en vez de matarlo con 0.01ms.) */