/* Autor: Andrés Muñoz G. - WebyApp
 * Fecha: 15-09-2026
 * Descripción: Implementación runtime del Design System oficial de WebyApp Nexo.
 * Último modificador: Andrés Muñoz G. - WebyApp
 * Fecha actualización: 16-09-2026
 * Descripción de actualización: Integra avatares conversacionales y superficies administrativas de canales WhatsApp. */

:root {
  color: var(--color-ink-black);
  background: var(--surface-canvas);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.64;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--surface-canvas); }
a { color: var(--color-cyan-edge); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-cyan-signal); outline-offset: 2px; }

.app-shell { width: min(100% - 32px, var(--page-max-width)); margin-inline: auto; }
.app-header { border-bottom: 1px solid var(--color-stone-border); background: var(--surface-card); }
.shell-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--spacing-16); }
.brand-lockup { display: grid; gap: 2px; min-width: 0; color: var(--color-ink-black); text-decoration: none; }
.brand { font-size: 15px; font-weight: var(--font-weight-medium); letter-spacing: .004em; }
.brand-descriptor { color: var(--color-warm-gray); font-size: 12px; line-height: 1.33; }
.shell-account { min-width: 0; }
.user-identity { display: grid; justify-items: end; gap: var(--spacing-4); }
.user-email { max-width: 140px; overflow: hidden; color: var(--color-warm-gray); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.role-badge, .status-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: var(--radius-tags); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1.33; }
.role-badge { border: 1px solid var(--color-stone-border); padding: 4px var(--spacing-8); color: var(--color-ink-black); background: var(--surface-card); }
.shell-navigation-wrap { border-top: 1px solid var(--color-stone-border); }
.primary-navigation { display: flex; align-items: center; min-height: 48px; gap: var(--spacing-4); }
.navigation-item, .navigation-sign-out { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: var(--spacing-8) var(--spacing-12); color: var(--color-warm-gray); background: transparent; font: inherit; font-size: 14px; font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; }
.navigation-item:hover, .navigation-sign-out:hover { color: var(--color-ink-black); }
.navigation-item.is-active { border-bottom-color: var(--color-cyan-signal); color: var(--color-ink-black); }
.primary-navigation form { margin: 0 0 0 auto; }
.navigation-sign-out { color: var(--color-ink-black); }
.tenant-context { max-width: 176px; overflow: hidden; color: var(--color-warm-gray); text-overflow: ellipsis; white-space: nowrap; }

.page-content { padding-block: var(--spacing-32) var(--spacing-64); }
.admin-page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--spacing-24); margin-bottom: var(--spacing-32); }
.form-page-header { max-width: 720px; }
.page-kicker { margin: 0; color: var(--color-warm-gray); font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: .025em; text-transform: uppercase; }
h1, h2 { color: var(--color-ink-black); font-family: "Inter Tight", var(--font-inter); font-weight: var(--font-weight-regular); }
h1 { margin: var(--spacing-4) 0 0; font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
h2 { margin: 0; font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
.page-description { max-width: 600px; margin: var(--spacing-12) 0 0; color: var(--color-warm-gray); font-size: 16px; line-height: var(--leading-body-lg); letter-spacing: var(--tracking-body-lg); }
.page-actions, .form-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

.content-card, .foundation-panel, .collection-panel, .auth-panel { border: 1px solid var(--color-stone-border); border-radius: var(--radius-cards); padding: var(--card-padding); background: var(--surface-card); box-shadow: var(--shadow-md); }
.auth-panel { max-width: 480px; margin: var(--spacing-48) auto; }
.technical-panel { margin-top: var(--spacing-16); border-top: 1px solid var(--color-stone-border); padding: var(--spacing-24) 0 0; }
.client-directory { padding: 0; overflow: hidden; }
.directory-heading { display: grid; gap: var(--spacing-8); padding: var(--card-padding); border-bottom: 1px solid var(--color-stone-border); }
.directory-heading p, .form-section-heading p { max-width: 620px; margin: 0; color: var(--color-warm-gray); line-height: 1.64; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-buttons); padding: var(--spacing-8) var(--spacing-16); font: inherit; font-size: 14px; font-weight: var(--font-weight-medium); line-height: 1.33; text-decoration: none; cursor: pointer; }
.button-primary { border-color: var(--color-cyan-edge); color: var(--color-pure-white); background: var(--color-cyan-signal); }
.button-primary:hover { border-color: var(--color-cyan-edge); background: var(--color-cyan-edge); }
.button-secondary { border-color: var(--color-stone-border); color: var(--color-ink-black); background: transparent; }
.button-secondary:hover { background: var(--color-pure-white); }
.button:disabled { border-color: var(--color-stone-muted); color: var(--color-ash-gray); background: var(--surface-canvas); cursor: not-allowed; }

.tenant-collection { margin: 0; padding: 0; list-style: none; }
.tenant-card { border-bottom: 1px solid var(--color-stone-border); }
.tenant-card:last-child { border-bottom: 0; }
.tenant-card-link { display: grid; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-24); color: var(--color-ink-black); text-decoration: none; }
.tenant-card-link:hover { background: var(--surface-canvas); }
.tenant-card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.tenant-card-name { overflow-wrap: anywhere; font-size: 16px; font-weight: var(--font-weight-medium); }
.tenant-card-detail, .tenant-card-meta { color: var(--color-warm-gray); font-size: 13px; overflow-wrap: anywhere; }
.tenant-card-meta { color: var(--color-ash-gray); font-size: 12px; }
.status-badge { padding: 4px var(--spacing-8); white-space: nowrap; }
.status-active { border: 1px solid var(--color-sky-wash); color: var(--color-cyan-edge); background: var(--surface-card); }
.status-inactive { border: 1px solid var(--color-stone-muted); color: var(--color-warm-gray); background: var(--surface-canvas); }
.empty-state { display: grid; justify-items: start; gap: var(--spacing-12); padding: var(--spacing-40) var(--card-padding); }
.empty-state p:not(.page-kicker) { max-width: 440px; margin: 0; color: var(--color-warm-gray); font-size: 16px; line-height: var(--leading-body-lg); }
.pagination { display: flex; justify-content: space-between; gap: var(--spacing-8); padding: var(--spacing-16) var(--card-padding); border-top: 1px solid var(--color-stone-border); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-16); color: var(--color-warm-gray); font-size: 12px; }
.breadcrumb a { color: var(--color-warm-gray); }
.breadcrumb [aria-current="page"] { overflow-wrap: anywhere; color: var(--color-ink-black); }
.client-profile-card { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--spacing-24); margin-bottom: var(--spacing-24); border: 1px solid var(--color-stone-border); border-radius: var(--radius-cards); padding: var(--card-padding); background: var(--surface-card); box-shadow: var(--shadow-md); }
.title-with-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); }
.client-details-panel { display: grid; gap: var(--spacing-24); }
.section-heading-with-action { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--spacing-16); }
.section-description { max-width: 560px; margin: var(--spacing-8) 0 0; color: var(--color-warm-gray); }
.channel-collection { display: grid; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.channel-card-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-12); border: 1px solid var(--color-stone-border); border-radius: var(--radius-inputs); padding: var(--spacing-12) var(--spacing-16); color: var(--color-ink-black); text-decoration: none; }
.channel-card-link:hover { background: var(--surface-canvas); }
.channel-card-link span:first-child { display: grid; min-width: 0; gap: var(--spacing-4); overflow-wrap: anywhere; }
.channel-card-link small { color: var(--color-warm-gray); font-size: 12px; }
.client-details, .context-list { display: grid; gap: var(--spacing-16); margin: 0; }
.client-details div, .context-list div { border-top: 1px solid var(--color-stone-border); padding-top: var(--spacing-12); }
.client-details dt, .context-list dt { color: var(--color-warm-gray); font-size: 12px; }
.client-details dd, .context-list dd { margin: var(--spacing-4) 0 0; color: var(--color-ink-black); font-size: 14px; line-height: 1.64; }
.technical-value { overflow-wrap: anywhere; color: var(--color-warm-gray) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; }

.form-panel { max-width: 720px; }
.client-form, .auth-form { display: grid; gap: var(--spacing-24); }
.auth-form { margin-top: var(--spacing-24); }
.required-legend { margin: 0; color: var(--color-warm-gray); font-size: 13px; }
.required-mark { color: var(--color-semantic-error); font-weight: var(--font-weight-medium); }
.form-section { display: grid; gap: var(--spacing-16); padding-top: var(--spacing-24); border-top: 1px solid var(--color-stone-border); }
.form-section-heading { display: grid; gap: var(--spacing-8); }
.form-section-heading h2 { font-size: 20px; }
.field { display: grid; gap: var(--spacing-8); }
.field label { color: var(--color-ink-black); font-size: 14px; font-weight: var(--font-weight-medium); }
.field-optional { display: block; margin-top: 2px; color: var(--color-ash-gray); font-size: 12px; font-weight: var(--font-weight-regular); }
.field input, .field select { width: 100%; min-height: 44px; border: 1px solid var(--color-stone-muted); border-radius: var(--radius-inputs); padding: var(--spacing-8) var(--spacing-12); color: var(--color-ink-black); background: var(--surface-card); font: inherit; }
.field input::placeholder { color: var(--color-warm-gray); }
.field input:focus, .field select:focus { border-color: var(--color-cyan-signal); outline: 2px solid var(--color-cyan-signal); outline-offset: 0; }
.field input:disabled, .field select:disabled { border-color: var(--color-stone-muted); color: var(--color-ash-gray); background: var(--surface-canvas); }
.field-with-error input, .field-with-error select { border-color: var(--color-semantic-error); }
.field-error { margin: 0; color: var(--color-semantic-error); font-size: 13px; line-height: 1.53; }
.field-help { margin: 0; color: var(--color-warm-gray); font-size: 13px; line-height: 1.53; }
.form-errors { border: 1px solid var(--color-semantic-error); border-radius: var(--radius-inputs); padding: var(--spacing-12) var(--spacing-16); background: var(--surface-card); }
.form-errors p { margin: 0; color: var(--color-ink-black); font-weight: var(--font-weight-medium); }
.form-errors ul { margin: var(--spacing-8) 0 0; padding-left: 20px; color: var(--color-warm-gray); }
.flash { margin: 0 0 var(--spacing-24); border-radius: var(--radius-inputs); padding: var(--spacing-12) var(--spacing-16); }
.flash-alert { border: 1px solid var(--color-semantic-error); color: var(--color-ink-black); background: var(--surface-card); }
.flash-notice { border: 1px solid var(--color-sky-wash); color: var(--color-ink-black); background: var(--surface-card); }
.secondary-copy { margin: var(--spacing-16) 0 0; color: var(--color-warm-gray); font-size: 16px; line-height: var(--leading-body-lg); }
.workspace-hero { max-width: 720px; margin-bottom: var(--spacing-32); }
.workspace-context-card { max-width: 720px; }
.workspace-list { display: grid; gap: var(--spacing-8); max-width: 720px; padding: var(--spacing-8); }
.workspace-option { display: flex; align-items: center; justify-content: space-between; min-height: 64px; width: 100%; gap: var(--spacing-16); border: 1px solid transparent; border-radius: var(--radius-inputs); padding: var(--spacing-12) var(--spacing-16); color: var(--color-ink-black); background: var(--surface-card); font: inherit; text-align: left; cursor: pointer; }
.workspace-option:hover { border-color: var(--color-stone-border); background: var(--surface-canvas); }
.workspace-option-name { min-width: 0; overflow-wrap: anywhere; font-size: 16px; font-weight: var(--font-weight-medium); }
.workspace-option-role { flex: none; color: var(--color-warm-gray); font-size: 13px; }
.workspace-unavailable { max-width: 720px; }
.contact-directory { padding: 0; overflow: hidden; }
.contact-search { display: flex; gap: var(--spacing-8); padding: var(--spacing-16); border-bottom: 1px solid var(--color-stone-border); }
.contact-search input { min-width: 0; flex: 1; min-height: 44px; border: 1px solid var(--color-stone-muted); border-radius: var(--radius-inputs); padding: var(--spacing-8) var(--spacing-12); color: var(--color-ink-black); background: var(--surface-card); font: inherit; }
.contact-search input:focus { border-color: var(--color-cyan-signal); outline: 2px solid var(--color-cyan-signal); outline-offset: 0; }
.contact-collection { margin: 0; padding: 0; list-style: none; }
.contact-card { border-bottom: 1px solid var(--color-stone-border); }
.contact-card:last-child { border-bottom: 0; }
.contact-card-link { display: grid; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-24); color: var(--color-ink-black); text-decoration: none; }
.contact-card-link:hover { background: var(--surface-canvas); }
.contact-card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.contact-card-name { overflow-wrap: anywhere; font-size: 16px; font-weight: var(--font-weight-medium); }
.contact-card-detail, .contact-card-meta { overflow-wrap: anywhere; color: var(--color-warm-gray); font-size: 13px; }
.contact-card-meta { color: var(--color-ash-gray); font-size: 12px; }
.contact-company-panel { margin-top: var(--spacing-24); }
.conversation-directory { padding: 0; overflow: hidden; }
.conversation-collection, .message-list { margin: 0; padding: 0; list-style: none; }
.conversation-card { border-bottom: 1px solid var(--color-stone-border); }
.conversation-card:last-child { border-bottom: 0; }
.conversation-card-link { display: grid; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-24); color: var(--color-ink-black); text-decoration: none; }
.conversation-card-link:hover { background: var(--surface-canvas); }
.conversation-card-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-8); }
.conversation-card-name { overflow-wrap: anywhere; font-size: 16px; font-weight: var(--font-weight-medium); }
.conversation-card-detail, .conversation-card-preview, .conversation-card-meta { overflow-wrap: anywhere; color: var(--color-warm-gray); font-size: 13px; }
.conversation-card-preview { color: var(--color-ink-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-card-meta { color: var(--color-ash-gray); font-size: 12px; }
.handoff-badge { display: inline-flex; width: fit-content; border: 1px solid var(--color-semantic-attention); border-radius: var(--radius-tags); padding: 4px var(--spacing-8); color: var(--color-semantic-attention); background: var(--surface-card); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1.33; white-space: nowrap; }
.conversation-profile-card { align-items: start; }
.conversation-context { display: grid; gap: var(--spacing-8); margin: 0; color: var(--color-warm-gray); font-size: 13px; }
.conversation-context div { display: grid; gap: var(--spacing-4); }
.conversation-context dt { color: var(--color-ash-gray); font-size: 12px; }
.conversation-context dd { margin: 0; color: var(--color-ink-black); }
.message-history { max-width: 880px; padding: var(--spacing-16); }
.message-list { display: grid; gap: var(--spacing-12); }
.message-row { display: flex; align-items: center; gap: var(--spacing-12); }
.message-row-inbound { justify-content: flex-start; }
.message-row-outbound { justify-content: flex-end; }
.message-avatar { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-tags); color: var(--color-cyan-edge); background: var(--color-sky-wash); font-size: 12px; font-weight: var(--font-weight-semibold); line-height: 1; }
.message-entry { min-width: 0; width: min(100%, 620px); border: 1px solid var(--color-stone-border); border-radius: var(--radius-cards); padding: var(--spacing-12) var(--spacing-16); background: var(--surface-card); }
.message-row-outbound .message-entry { background: var(--surface-canvas); }
.message-row-outbound .message-entry-agent { border-color: var(--color-cyan-edge); background: var(--color-sky-wash); }
.message-entry-system { border-style: dashed; }
.message-sender, .message-content, .message-time { margin: 0; }
.message-sender { color: var(--color-warm-gray); font-size: 12px; font-weight: var(--font-weight-medium); }
.message-entry-agent .message-sender { color: var(--color-cyan-edge); }
.message-content { margin-top: var(--spacing-4); color: var(--color-ink-black); overflow-wrap: anywhere; white-space: pre-wrap; }
.message-time { margin-top: var(--spacing-8); color: var(--color-ash-gray); font-size: 12px; }
.message-empty-state { padding: var(--spacing-24) var(--spacing-8); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
  .page-content { padding-top: var(--spacing-48); }
  .client-details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-32); }
  .form-section { grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); column-gap: var(--spacing-32); }
  .form-section-heading { grid-column: 1; }
  .form-section > .field { grid-column: 2; }
}

@media (min-width: 800px) {
  .tenant-card-link { grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr) auto; align-items: center; gap: var(--spacing-24); padding-block: var(--spacing-16); }
  .tenant-card-heading { display: contents; }
  .tenant-card-name { grid-column: 1; grid-row: 1; }
  .status-badge { grid-column: 2; grid-row: 1; }
  .tenant-card-detail { grid-column: 1; grid-row: 2; }
  .tenant-card-meta { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
  .contact-card-link { grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr) minmax(180px, .7fr); align-items: center; gap: var(--spacing-24); }
  .contact-card-heading { display: contents; }
  .contact-card-name { grid-column: 1; grid-row: 1; }
  .contact-card-heading .status-badge { grid-column: 2; grid-row: 1; }
  .contact-card-detail { grid-column: 1; grid-row: 2; }
  .contact-card-meta { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
  .conversation-card-link { grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr) minmax(180px, .8fr); align-items: center; gap: var(--spacing-24); }
  .conversation-card-heading { display: contents; }
  .conversation-card-name { grid-column: 1; grid-row: 1; }
  .conversation-card-heading .handoff-badge { grid-column: 2; grid-row: 1; }
  .conversation-card-detail { grid-column: 1; grid-row: 2; }
  .conversation-card-preview { grid-column: 2; grid-row: 2; }
  .conversation-card-meta { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
}