/* =============================================================
   GestionFlota — Polish del kit Claude Design (1).zip para:
   · Estado público     (ui_kits/estado/)
   · Registro wizard    (ui_kits/registro/)
   · Config             (ui_kits/config/)
   · Reportes           (ui_kits/reportes/)
   · Modal cotización   (ui_kits/cotizacion-modal/) → c-drawer
   ============================================================= */

/* =============================================================
   STEPPER · estilos base del kit ya cubiertos en css/styles.css
   (horizontal desktop + vertical mobile). Aca solo dejamos pequeños
   refinements que no rompen el layout horizontal.
   ============================================================= */
/* Sin overrides estructurales · el stepper original soporta ambos
   layouts (registro.html horizontal + estado.html responsive).
   Si queres el look 'panel-card' del kit en estado.html, aplicalo
   al container padre (#stepper-container) en estado.html en vez de
   al .stepper directamente. */

/* =============================================================
   REGISTRO wizard · 3 pasos con barra de progreso (kit)
   ============================================================= */
.wizard-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.wizard-progress__bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--ck-neutral-200);
  overflow: hidden;
}
.wizard-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ck-primary), var(--ck-info-500, var(--ck-primary)));
  transition: width var(--ck-dur-emphatic, 400ms) var(--ck-ease-out);
}
.wizard-progress__step {
  font-family: var(--ck-font-mono);
  font-weight: 700;
  color: var(--ck-primary);
  font-size: 14px;
  white-space: nowrap;
}

/* Header del wizard · números + conectores + labels */
.wiz {
  display: flex; align-items: center;
  margin-bottom: 8px;
}
.wiz__step {
  display: flex; align-items: center; gap: 8px;
}
.wiz__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  background: var(--ck-neutral-200);
  color: var(--ck-text-muted);
  flex-shrink: 0;
  transition: all var(--ck-dur-soft, 200ms) var(--ck-ease-out);
}
.wiz__label {
  font-size: 14px; font-weight: 600;
  color: var(--ck-text-muted);
  white-space: nowrap;
}
.wiz__conn {
  flex: 1;
  height: 2px;
  background: var(--ck-neutral-200);
  margin: 0 10px;
}
.wiz__step--done .wiz__num   { background: var(--ck-success-500); color: #fff; }
.wiz__step--done + .wiz__conn { background: var(--ck-success-500); }
.wiz__step--active .wiz__num {
  background: var(--ck-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.wiz__step--active .wiz__label { color: var(--ck-primary); }
@media (max-width: 560px) { .wiz__label { display: none; } }

/* Barra de progreso */
.wiz-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ck-neutral-200);
  overflow: hidden;
  margin: 14px 0 24px;
}
.wiz-bar__fill {
  height: 100%;
  background: var(--ck-primary);
  border-radius: 999px;
  width: 33%;
  transition: width var(--ck-dur-emphatic, 400ms) var(--ck-ease-out);
}

/* Pasos del wizard · se muestra solo el is-active */
.reg-step { display: none; }
.reg-step.is-active {
  display: block;
  animation: reg-step-in var(--ck-dur-soft, 200ms) var(--ck-ease-out);
}
@keyframes reg-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-step.is-active { animation: none; }
}

/* Acciones del wizard · Atrás / Continuar */
.wiz-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.wiz-actions > * { flex-shrink: 0; }
.wiz-actions__spacer { flex: 1; }

/* =============================================================
   CONFIG · sidebar de secciones más prominente
   ============================================================= */
.config-tabs,
.config__tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--ck-border);
  margin-bottom: 24px;
}
.config-tab,
.config__tab {
  padding: 10px 16px;
  font-size: 14px; font-weight: 500;
  color: var(--ck-text-secondary, var(--ck-text-muted));
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: color var(--ck-dur-micro) var(--ck-ease-out),
              border-color var(--ck-dur-micro) var(--ck-ease-out);
}
.config-tab:hover,
.config__tab:hover { color: var(--ck-text); }
.config-tab.is-active,
.config__tab.is-active,
.config-tab--active,
.config__tab--active {
  color: var(--ck-primary);
  border-bottom-color: var(--ck-primary);
  font-weight: 600;
}

/* =============================================================
   REPORTES · KPIs y tabla operadores
   ============================================================= */
.reportes-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.reportes-operadores {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  box-shadow: var(--ck-shadow-sm);
  overflow: hidden;
}
.reportes-operadores .barra {
  height: 8px;
  border-radius: 999px;
  background: var(--ck-neutral-200);
  overflow: hidden;
}
.reportes-operadores .barra__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ck-primary);
  transition: width var(--ck-dur-soft, 200ms) var(--ck-ease-out);
}

/* =============================================================
   MODAL COTIZACIÓN (panel-pedidos) · refinado tipo drawer lateral
   El c-drawer formal ya está en components.css. Acá ajustes para
   que el modal-pedido-gestion existente se vea más como drawer
   en desktop sin reescribir el HTML.
   ============================================================= */
@media (min-width: 900px) {
  #modal-pedido-gestion {
    justify-content: flex-end !important;
  }
  #modal-pedido-gestion .modal,
  #modal-pedido-gestion .c-modal {
    max-width: 720px !important;
    max-height: 100vh !important;
    height: 100vh;
    border-radius: 0 !important;
    margin-right: 0;
    animation: drawer-slide-in var(--ck-dur-soft, 200ms) var(--ck-ease-out);
  }
  @keyframes drawer-slide-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #modal-pedido-gestion .modal,
    #modal-pedido-gestion .c-modal { animation: none; }
  }
}