/* vl-components.css
   Componentes reutilizables para VocesLaborales
   Botones, tarjetas, stats, inputs, badges, microinteracciones
*/

/* Contenedor principal de página */
.vl-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--vl-space-6) var(--vl-space-4);
}

@media (max-width: 768px) {
  .vl-page {
    padding: var(--vl-space-5) var(--vl-space-3);
  }
}

/* Secciones */
.vl-section {
  margin-bottom: var(--vl-space-8);
}

.vl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--vl-space-3);
  margin-bottom: var(--vl-space-4);
}

@media (max-width: 768px) {
  .vl-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Botones */
.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.55rem 1rem;
  border-radius: var(--vl-radius-pill);
  border: 1px solid transparent;
  font-size: var(--vl-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--vl-transition-normal),
    color var(--vl-transition-normal),
    box-shadow var(--vl-transition-normal),
    transform var(--vl-transition-fast),
    border-color var(--vl-transition-fast);
}

.vl-btn:focus-visible {
  outline: none;
  box-shadow: var(--vl-shadow-focus);
}

.vl-btn:active {
  transform: translateY(1px);
}

/* Variantes de botón */
.vl-btn-primary {
  background-color: var(--vl-color-primary);
  color: var(--vl-color-text-on-primary);
  box-shadow: var(--vl-shadow-soft);
}

.vl-btn-primary:hover {
  background-color: var(--vl-color-primary-hover);
}

.vl-btn-primary:active {
  background-color: var(--vl-color-primary-active);
  box-shadow: none;
}

.vl-btn-outline {
  background-color: transparent;
  color: var(--vl-color-primary);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: var(--vl-shadow-subtle);
}

.vl-btn-outline:hover {
  background-color: var(--vl-color-primary-soft);
}

.vl-btn-ghost {
  background-color: transparent;
  color: var(--vl-color-text-main);
  border-color: transparent;
}

.vl-btn-ghost:hover {
  background-color: var(--vl-color-bg-soft);
}

/* Botón pequeño */
.vl-btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--vl-font-size-xs);
}

/* Cards base */
.vl-card {
  background-color: var(--vl-color-surface);
  border-radius: var(--vl-radius-md);
  border: 1px solid var(--vl-color-border-subtle);
  padding: var(--vl-space-4);
  box-shadow: var(--vl-shadow-subtle);
  transition:
    box-shadow var(--vl-transition-normal),
    transform var(--vl-transition-normal),
    border-color var(--vl-transition-normal),
    background-color var(--vl-transition-normal);
}

.vl-card-hover:hover {
  box-shadow: var(--vl-shadow-soft);
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.12);
}

/* Cards para stats */
.vl-card-stats {
  display: flex;
  flex-direction: column;
  gap: var(--vl-space-2);
}

.vl-card-stats-value {
  font-size: var(--vl-font-size-2xl);
  font-weight: 700;
}

.vl-card-stats-label {
  font-size: var(--vl-font-size-sm);
  color: var(--vl-color-text-muted);
}

/* Grid responsivo para cards */
.vl-grid {
  display: grid;
  gap: var(--vl-space-4);
}

.vl-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vl-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .vl-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .vl-grid-2,
  .vl-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Badges / Chips */
.vl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--vl-radius-pill);
  font-size: var(--vl-font-size-xs);
  font-weight: 500;
  border: 1px solid var(--vl-color-border-subtle);
  background-color: var(--vl-color-bg-soft);
  color: var(--vl-color-text-muted);
}

.vl-badge-primary {
  background-color: var(--vl-color-primary-soft);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--vl-color-primary);
}

.vl-badge-success {
  background-color: var(--vl-color-success-soft);
  border-color: rgba(22, 163, 74, 0.3);
  color: var(--vl-color-success);
}

/* Inputs y campos de formulario */
.vl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--vl-space-4);
}

.vl-field label {
  font-size: var(--vl-font-size-sm);
  font-weight: 500;
  color: var(--vl-color-text-main);
}

.vl-input,
.vl-select,
.vl-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--vl-radius-sm);
  border: 1px solid var(--vl-color-border-subtle);
  background-color: var(--vl-color-surface);
  font-size: var(--vl-font-size-sm);
  color: var(--vl-color-text-main);
  transition:
    border-color var(--vl-transition-fast),
    box-shadow var(--vl-transition-fast),
    background-color var(--vl-transition-fast);
}

.vl-input:focus,
.vl-select:focus,
.vl-textarea:focus {
  outline: none;
  border-color: var(--vl-color-primary);
  box-shadow: var(--vl-shadow-focus);
  background-color: #ffffff;
}

.vl-input::placeholder,
.vl-textarea::placeholder {
  color: var(--vl-color-text-soft);
}

/* Alerts / mensajes */
.vl-alert {
  border-radius: var(--vl-radius-md);
  padding: var(--vl-space-3) var(--vl-space-4);
  border: 1px solid transparent;
  display: flex;
  gap: var(--vl-space-3);
  align-items: flex-start;
  font-size: var(--vl-font-size-sm);
}

.vl-alert-icon {
  margin-top: 2px;
}

.vl-alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.vl-alert-body {
  color: var(--vl-color-text-muted);
}

.vl-alert-info {
  background-color: var(--vl-color-primary-soft);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--vl-color-primary);
}

.vl-alert-success {
  background-color: var(--vl-color-success-soft);
  border-color: rgba(22, 163, 74, 0.35);
  color: var(--vl-color-success);
}

.vl-alert-warning {
  background-color: var(--vl-color-warning-soft);
  border-color: rgba(234, 88, 12, 0.35);
  color: var(--vl-color-warning);
}

.vl-alert-danger {
  background-color: var(--vl-color-danger-soft);
  border-color: rgba(220, 38, 38, 0.35);
  color: var(--vl-color-danger);
}

/* Microinteracciones suaves para bloques clicables */
.vl-clickable {
  cursor: pointer;
  transition:
    background-color var(--vl-transition-normal),
    transform var(--vl-transition-fast),
    box-shadow var(--vl-transition-normal);
}

.vl-clickable:hover {
  background-color: var(--vl-color-bg-soft);
  box-shadow: var(--vl-shadow-soft);
  transform: translateY(-1px);
}

.vl-clickable:active {
  transform: translateY(0);
  box-shadow: var(--vl-shadow-subtle);
}

/* Contadores animados (estructura básica, animación se maneja en JS) */
.vl-counter {
  font-variant-numeric: tabular-nums;
}

/* Etiquetas de sección */
.vl-section-eyebrow {
  margin-bottom: var(--vl-space-2);
}

/* Helpers de layout */
.vl-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--vl-space-3);
}

@media (max-width: 768px) {
  .vl-flex-between {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Company page CTA (confrontacional, sin fricción) */
.vl-cta-card {
  background: linear-gradient(180deg, var(--vl-color-surface) 0%, var(--vl-color-surface-alt) 100%);
  border: 1px solid var(--vl-color-border-subtle);
  border-radius: var(--vl-radius-lg);
  padding: var(--vl-space-5);
  margin-top: var(--vl-space-4);
  box-shadow: var(--vl-shadow-subtle);
}

.vl-cta-headline {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: var(--vl-space-2);
}

.vl-cta-subtext {
  color: var(--vl-color-text-muted);
  font-size: var(--vl-font-size-sm);
  line-height: 1.4;
  margin-bottom: var(--vl-space-4);
}

.vl-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vl-space-2);
  align-items: center;
}

/* Sidebar note */
.side-panel-note {
  color: var(--vl-color-text-muted);
  font-size: 0.85rem;
}



/* Company CTA hero (full width, before reviews) */
.vl-cta-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--vl-space-4);
  padding: var(--vl-space-5);
  border-radius: var(--vl-radius-lg);
  border: 1px solid var(--vl-color-border-subtle);
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(22,163,74,0.06));
  box-shadow: var(--vl-shadow-subtle);
  margin-top: var(--vl-space-4);
}

.vl-cta-hero__headline{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--vl-color-text-main);
}

.vl-cta-hero__sub{
  color: var(--vl-color-text-muted);
  font-size: var(--vl-font-size-sm);
  line-height: 1.4;
}

.vl-cta-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--vl-space-2);
  align-items:center;
  justify-content:flex-end;
}

@media (max-width: 768px){
  .vl-cta-hero{
    flex-direction:column;
    align-items:stretch;
  }
  .vl-cta-hero__actions{
    justify-content:flex-start;
  }
}

/* Info blocks (claim + note) */
.vl-info-stack{
  margin-top: var(--vl-space-6);
}

.vl-info-card{
  background-color: var(--vl-color-surface);
  border: 1px solid var(--vl-color-border-subtle);
  border-radius: var(--vl-radius-lg);
  padding: var(--vl-space-5);
  box-shadow: var(--vl-shadow-subtle);
}

.vl-info-card__title{
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--vl-space-2);
}

.vl-info-card__text{
  color: var(--vl-color-text-muted);
  font-size: var(--vl-font-size-sm);
  line-height: 1.45;
  margin-bottom: var(--vl-space-3);
}

.vl-info-divider{
  border: none;
  border-top: 1px solid var(--vl-color-border-subtle);
  margin: var(--vl-space-4) 0;
}


.vl-cta-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vl-color-text-muted);
  margin-bottom: var(--vl-space-2);
}