/* ============================================================
   PYM360 · MODULE — Vistas misceláneas (Fase 8)
   Capa 3 — refresca clases legacy comunes para que las vistas no
   migradas explícitamente (RRHH, Compras, Repartidor, Documentos,
   Procedimientos, Usuarios, Actividad, Sistema, Bugs, Mi Dashboard,
   Tributario, Empresa, Socios, Facturación, Timeline, Analista,
   Graph) hereden el look v6 sin reescribir cada vista.

   API mantenida: clases .pym360-welcome / .pym360-section / .panel /
   .panel-title se redefinen con tokens del DS v6.
   ============================================================ */

/* ============================================================
   PADDING UNIFICADO en views vacías
   ============================================================ */
#pym-view-usuarios,
#pym-view-actividad,
#pym-view-sistema,
#pym-view-bugs,
#pym-view-mi-dashboard,
#pym-view-repartidor,
#pym-view-tributario,
#pym-view-rrhh,
#pym-view-documentos,
#pym-view-procedimientos{
  padding:var(--pym-space-6) var(--pym-space-8);
  max-width:var(--pym-content-max-w);
  margin:0 auto;
}
@media (max-width:980px){
  #pym-view-usuarios,
  #pym-view-actividad,
  #pym-view-sistema,
  #pym-view-bugs,
  #pym-view-mi-dashboard,
  #pym-view-repartidor,
  #pym-view-tributario,
  #pym-view-rrhh,
  #pym-view-documentos,
  #pym-view-procedimientos{padding:var(--pym-space-4)}
}

/* Las vistas con `style="padding:0 24px 32px"` inline (compras, socios,
   empresa, barrido, timeline, analista, graph, vault, ask) heredan ese
   padding propio porque `style=""` gana al CSS. No las tocamos. */

/* ============================================================
   WELCOME / PAGE HEADER (legacy refresh)
   .pym360-welcome se usaba arriba de cada view como hero.
   Ahora se ve consistente con .cot-header / .vault-header / etc.
   ============================================================ */
.pym360-welcome{
  margin-bottom:var(--pym-space-5);
  padding-bottom:0;
  border-bottom:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--pym-space-4);
  flex-wrap:wrap;
}
.pym360-welcome-title{
  font-size:var(--pym-fs-2xl);
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  margin-bottom:4px;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.2;
}
.pym360-welcome-title span{color:var(--pym-color-text)}
.pym360-welcome-title .view-icon{
  width:22px;height:22px;
  vertical-align:middle;
  color:var(--pym-color-accent-2);
  flex-shrink:0;
  display:inline-flex;
}
.pym360-welcome-sub{
  font-size:var(--pym-fs-base);
  color:var(--pym-color-text-muted);
  font-family:var(--pym-font-sans);
  letter-spacing:0;
  text-transform:none;
}

/* Welcome card (cuando se usa con "card" en lugar de strip) */
.pym360-welcome-card{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  padding:var(--pym-space-4) var(--pym-space-5);
  margin-bottom:var(--pym-space-5);
}
.pym360-welcome-card .pym360-welcome-title{margin-bottom:6px}

/* ============================================================
   SECTIONS legacy — convertidas a cards v6
   ============================================================ */
.pym360-section{
  margin-bottom:var(--pym-space-4);
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  padding:var(--pym-space-4);
}
.pym360-section-title{
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  text-transform:none;
  letter-spacing:-.005em;
  margin-bottom:var(--pym-space-3);
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  padding-bottom:var(--pym-space-2);
  border-bottom:1px solid var(--pym-color-border);
}
.pym360-section-title::after{display:none}

/* Si se quiere el look legacy de section "sin card" en alguna vista
   particular, agregar clase auxiliar .pym360-section--flat */
.pym360-section--flat{
  background:transparent;
  border:none;
  padding:0;
}
.pym360-section--flat .pym360-section-title{border-bottom:none;padding-bottom:0}

/* Loading + empty inline helpers */
.pym360-loading-txt{
  color:var(--pym-color-text-muted);
  font-size:var(--pym-fs-base);
  padding:var(--pym-space-3) 0;
  text-align:center;
}

/* ============================================================
   PANEL legacy (cotizador knowledge tab + otros) — fallback
   La vista cotizador ya migra, pero otras vistas pueden usar .panel.
   ============================================================ */
.panel{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  padding:var(--pym-space-4);
  margin-bottom:var(--pym-space-3);
}
.panel-title{
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-semibold);
  color:var(--pym-color-text);
  margin-bottom:var(--pym-space-3);
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  padding-bottom:var(--pym-space-2);
  border-bottom:1px solid var(--pym-color-border);
  text-transform:none;
  letter-spacing:0;
}
.panel-title::before{display:none}

/* ============================================================
   ICONS, ACENTOS, HOOKS
   ============================================================ */
.view-icon{
  width:22px;height:22px;
  vertical-align:middle;
  margin-right:6px;
  color:var(--pym-color-accent-2);
  flex-shrink:0;
  display:inline-flex;
}

/* ============================================================
   HELP TEXT genérico (usado en Cotizador knowledge + varios)
   ============================================================ */
.help-text{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  line-height:1.4;
  margin-bottom:var(--pym-space-3);
}

/* ============================================================
   FORMS legacy de Usuarios (.pym-create-form, .pym-form-row, .pym-form-field)
   ============================================================ */
.pym-create-form{
  background:var(--pym-color-bg);
  border:1px dashed var(--pym-color-border);
  border-radius:var(--pym-radius-md);
  padding:var(--pym-space-3);
  margin-top:var(--pym-space-2);
}
.pym-form-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) auto;
  gap:var(--pym-space-2);
  align-items:end;
}
.pym-form-field{display:flex;flex-direction:column;gap:4px}
.pym-form-field label{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:var(--pym-fw-medium);
}
.pym-form-field input,
.pym-form-field select{
  padding:7px 10px;
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-md);
  font-size:var(--pym-fs-base);
  color:var(--pym-color-text);
  font-family:inherit;
  color-scheme:dark;
}
[data-theme="light"] .pym-form-field input,
[data-theme="light"] .pym-form-field select{color-scheme:light}
.pym-form-field input:focus,
.pym-form-field select:focus{
  outline:none;
  border-color:var(--pym-color-accent);
  box-shadow:0 0 0 3px var(--pym-color-accent-dim);
}
.pym-form-btn{justify-content:flex-end}

/* ============================================================
   Stats bar de Usuarios
   ============================================================ */
.pym-users-stats-bar{
  display:flex;
  gap:var(--pym-space-2);
  margin-bottom:var(--pym-space-4);
  flex-wrap:wrap;
}

/* ============================================================
   Botones legacy fallback (btn-primary, btn-secondary, btn-green,
   btn-blue, btn-red, btn-accent, btn-small) — convergencia visual
   con .pym-btn pero con clases existentes.
   ============================================================ */
.btn-primary,
.btn-accent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-medium);
  padding:8px 14px;
  border-radius:var(--pym-radius-md);
  border:1px solid transparent;
  background:linear-gradient(180deg,var(--pym-color-accent-2),var(--pym-color-accent));
  color:#fff;
  cursor:pointer;
  transition:filter var(--pym-trans-fast);
  box-shadow:var(--pym-shadow-accent);
  white-space:nowrap;
}
.btn-primary:hover:not(:disabled),
.btn-accent:hover:not(:disabled){filter:brightness(1.1)}
.btn-primary:disabled,
.btn-accent:disabled{opacity:.5;cursor:not-allowed;filter:none}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-medium);
  padding:7px 13px;
  border-radius:var(--pym-radius-md);
  border:1px solid var(--pym-color-border);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text);
  cursor:pointer;
  transition:all var(--pym-trans-base);
  white-space:nowrap;
}
.btn-secondary:hover:not(:disabled){
  background:var(--pym-color-surface-3);
  border-color:var(--pym-color-border-strong);
}

.btn-green{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-semibold);
  padding:8px 14px;
  border-radius:var(--pym-radius-md);
  border:1px solid transparent;
  background:linear-gradient(180deg,var(--pym-color-success),var(--pym-color-success-strong));
  color:#0a0b0d;
  cursor:pointer;
  transition:filter var(--pym-trans-fast);
  white-space:nowrap;
}
.btn-green:hover:not(:disabled){filter:brightness(1.05)}

.btn-blue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-medium);
  padding:7px 13px;
  border-radius:var(--pym-radius-md);
  border:1px solid var(--pym-color-accent);
  background:var(--pym-color-accent-dim);
  color:var(--pym-color-accent-2);
  cursor:pointer;
  transition:all var(--pym-trans-fast);
  white-space:nowrap;
}
.btn-blue:hover:not(:disabled){
  background:rgba(73,124,251,.18);
}

.btn-red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-medium);
  padding:7px 13px;
  border-radius:var(--pym-radius-md);
  border:1px solid rgba(255,141,123,.3);
  background:transparent;
  color:var(--pym-color-danger);
  cursor:pointer;
  transition:all var(--pym-trans-fast);
  white-space:nowrap;
}
.btn-red:hover:not(:disabled){
  background:var(--pym-color-danger-dim);
  border-color:var(--pym-color-danger);
}

.btn-small{
  font-size:var(--pym-fs-sm);
  padding:5px 10px;
  gap:5px;
}

/* ============================================================
   Topbar de panel (header con clock, user-chip, etc) - colores
   ============================================================ */
.pym360-header{
  background:var(--pym-color-surface);
  border-bottom:1px solid var(--pym-color-border);
}