/* ═══════════════════════════════════════════════
   UNIDADES ESPECIALES — extras sobre el design system Quálitas
   ═══════════════════════════════════════════════ */

/* Escaneo simulado de tarjeta de circulación / foto del vehículo */
.scan-pulse { display:inline-flex; color:var(--q-morado); animation: scanPulse 1.2s ease-in-out infinite; }
@keyframes scanPulse { 0%,100% { opacity:.35; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
.dropzone-vehiculo { transition: border-color .15s, background .15s, transform .1s; }
.dropzone-vehiculo:hover { border-color: var(--q-morado); background: rgba(107,45,139,.05); transform: translateY(-1px); }
.plataforma-radio { display:flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9px; cursor:pointer; background:var(--q-bg-body); border:1.5px solid transparent; transition: all .15s; }
.plataforma-radio.selected { background:var(--q-morado-soft); border-color:var(--q-morado); }
.plataforma-radio input { accent-color: var(--q-morado); width:15px; height:15px; cursor:pointer; }

/* Reserva la misma altura de etiqueta en los campos dinámicos del cotizador,
   para que los inputs de una misma fila queden alineados sin importar si el
   nombre de la condición es corto ("Estado") o largo ("Antigüedad de licencia"). */
.cotiz-field-label { min-height:30px; }

/* Wordmark de header (tomado de libro-azul/css/main.css) */
.header-wordmark { display:flex; flex-direction:column; margin-left:12px; padding-left:12px; border-left:1px solid var(--q-border); line-height:1.2; }
.header-wordmark b { font-size:14px; font-weight:800; color:var(--q-morado); letter-spacing:-.2px; }
.header-wordmark span { font-size:10px; font-weight:600; color:var(--q-text-secondary); }
body.sidebar-collapsed .header-wordmark { display:none; }

/* Con muchos módulos (perfil Administrador) el menú necesita scroll interno propio.
   Sin min-height:0 un hijo flex nunca se encoge por debajo de su contenido,
   así que el desbordamiento lo recortaba app-sidebar (overflow:hidden) en vez
   de hacerlo scrolleable dentro de sb-menu. */
.sb-menu { min-height: 0; padding-bottom: 14px; }

/* El design system base oculta el scrollbar (pensado para menús cortos).
   Con ~20 filas en el perfil Administrador necesitamos que se note que hay
   más contenido abajo, si no el corte del último elemento se ve como un
   bug en vez de "sigue bajando". Mostramos un scrollbar delgado propio. */
.sb-menu { scrollbar-width: thin; scrollbar-color: var(--q-border) transparent; }
.sb-menu::-webkit-scrollbar { display: block; width: 5px; }
.sb-menu::-webkit-scrollbar-track { background: transparent; }
.sb-menu::-webkit-scrollbar-thumb { background: var(--q-border); border-radius: 10px; }
.sb-menu::-webkit-scrollbar-thumb:hover { background: var(--q-text-disabled); }

/* El design system base pone flex:1 tanto en sb-menu como en sb-spacer, así que
   el espacio libre del sidebar se reparte 50/50 entre ambos sin importar que
   sb-spacer esté vacío: con un menú largo (Administrador) eso le quitaba casi
   300px de alto al menú y se veía como si solo hubiera 4-5 módulos. sb-spacer
   ya no debe competer por el espacio: el menú (sb-menu) debe tomar todo el
   espacio disponible y sb-spacer solo separar un poco antes de "Cerrar sesión". */
.sb-spacer { flex: 0 0 auto; min-height: 8px; }

/* Secciones dentro del menú lateral */
.sb-section-label {
  font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--q-text-disabled); padding:14px 20px 6px; white-space:nowrap;
}
body.sidebar-collapsed .sb-section-label { display:none; }
body.sidebar-collapsed .sb-section-line { margin:8px 6px; }
.sb-section-line { display:none; }
body.sidebar-collapsed .sb-section-line { display:block; height:1px; background:var(--q-border); }

/* ── Builder visual de reglas (motor de parametrización) ── */
.rule-tree { display:flex; flex-direction:column; gap:10px; }
.rule-group {
  border:1.5px dashed var(--q-border); border-radius:10px; padding:14px;
  background:var(--q-bg-body); position:relative;
}
.rule-group.depth-1 { border-color:rgba(107,45,139,.35); background:rgba(107,45,139,.02); }
.rule-group.depth-2 { border-color:rgba(0,168,157,.35); background:rgba(0,168,157,.02); }
.rule-group-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rule-op-chip {
  border:none; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.4px;
  padding:5px 12px; border-radius:20px; transition:all .15s;
}
.rule-op-chip.op-and { background:var(--q-morado-soft); color:var(--q-morado); }
.rule-op-chip.op-or  { background:var(--q-teal-soft); color:var(--q-teal-hover); }
.rule-op-chip.op-not { background:rgba(192,57,43,.1); color:var(--q-estado-rojo); }
.rule-row {
  display:flex; align-items:center; gap:8px; background:white;
  border:1px solid var(--q-border); border-radius:8px; padding:8px 10px; margin-bottom:8px;
}
.rule-row:last-child { margin-bottom:0; }
.rule-row select, .rule-row input { font-size:12px; }
.rule-row .rule-field-select { flex:1.4; min-width:0; }
.rule-row .rule-op-select { flex:0.7; min-width:0; }
.rule-row .rule-val-input { flex:1; min-width:0; }
.rule-row-remove {
  width:24px; height:24px; flex-shrink:0; border-radius:6px; display:flex; align-items:center;
  justify-content:center; color:var(--q-text-secondary); cursor:pointer; transition:background .12s;
}
.rule-row-remove:hover { background:rgba(192,57,43,.1); color:var(--q-estado-rojo); }
.rule-group-actions { display:flex; gap:8px; margin-top:8px; }
.rule-then-box {
  border:1.5px solid var(--q-teal); background:var(--q-teal-soft); border-radius:10px;
  padding:14px; display:flex; align-items:center; gap:10px; margin-top:4px;
}
.rule-then-label { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--q-teal-hover); }

/* Vertical wiz stepper reuse for wizard producto */
.condicion-pill {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  background:var(--q-morado-soft); color:var(--q-morado); border-radius:20px; padding:4px 10px; margin:2px;
}